{
  "name": "hexagon-rotate-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/hexagon-rotate/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface HexagonRotateProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  thickness?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function HexagonRotate({\n  width = 50,\n  height = 50,\n  color = \"currentColor\",\n  thickness = 3,\n  isAnimating = true,\n  duration = 2.0,\n  ease = [0.4, 0, 0.6, 1],\n}: HexagonRotateProps) {\n  const centerX = width / 2;\n  const centerY = height / 2;\n\n  const getPoints = (r: number, rotation: number) =>\n    Array.from({ length: 6 }).map((_, i) => {\n      const angle = (60 * i + rotation) * (Math.PI / 180);\n      return `${centerX + r * Math.cos(angle)},${centerY + r * Math.sin(angle)}`;\n    }).join(' ');\n\n  const radiusA = Math.min(width, height) * 0.42;\n  const radiusB = Math.min(width, height) * 0.32;\n\n  const pointsA = getPoints(radiusA, -30); // tall hexagon\n  const pointsB = getPoints(radiusB, 0);   // squished / rotated hexagon\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {/* Outer static ghost hexagon */}\n      <polygon\n        points={pointsA}\n        stroke={color}\n        strokeWidth={thickness * 0.5}\n        fill=\"none\"\n        opacity={0.02}\n        strokeLinejoin=\"round\"\n      />\n\n      {/* Morphing filled hexagon */}\n      <motion.polygon\n        strokeLinejoin=\"round\"\n        stroke={color}\n        strokeWidth={thickness}\n        fill={color}\n        initial={{ points: pointsA, fillOpacity: 0.15, strokeOpacity: 1, scale: 1 }}\n        animate={{\n          points: [pointsA, pointsB, pointsA],\n          fillOpacity: [0.15, 0.6, 0.15],\n          strokeOpacity: [1, 0.4, 1],\n          scale: [1, 0.88, 1],\n        }}\n        transition={{\n          duration: duration,\n          repeat: isAnimating ? Infinity : 0,\n          ease: ease,\n          times: [0, 0.5, 1],\n        }}\n        style={{ originX: `${centerX}px`, originY: `${centerY}px` }}\n      />\n    </svg>\n  );\n}",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/hexagon-rotate/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Hexagon Rotate - Hexagon Rotate",
    "description": "A hexagon outline or filled shape rotates 360° continuously with smooth linear motion",
    "category": "loaders",
    "tags": [
      "hexagon",
      "rotate",
      "geometric",
      "spinner",
      "simple",
      "smooth",
      "polygon",
      "minimal"
    ],
    "animationType": "loop"
  }
}