{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mobius-loop-icon",
  "title": "Mobius Loop Icon",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "Animated Mobius loop icon that morphs between circles and infinity shape.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/mobius-loop-icon/mobius-loop-icon.tsx",
      "content": "\"use client\"\r\n\r\nimport type { SVGMotionProps } from \"motion/react\"\r\nimport { motion } from \"motion/react\"\r\n\r\nconst circle1 =\r\n  \"M12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4Z\"\r\n\r\nconst infinity =\r\n  \"M 6 16 C 11 16 13 8 18 8 C 23.333 8 23.333 16 18 16 C 13 16 11 8 6 8 C 0.667 8 0.667 16 6 16 Z\"\r\n\r\nconst circle2 =\r\n  \"M12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20Z\"\r\n\r\nexport function MobiusLoopIcon(props: SVGMotionProps<SVGSVGElement>) {\r\n  return (\r\n    <motion.svg\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"2\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      aria-hidden\r\n      {...props}\r\n    >\r\n      <motion.path\r\n        animate={{\r\n          d: [circle1, infinity, circle2],\r\n        }}\r\n        transition={{\r\n          d: {\r\n            duration: 3,\r\n            ease: \"easeInOut\",\r\n            repeat: Infinity,\r\n          },\r\n        }}\r\n      />\r\n    </motion.svg>\r\n  )\r\n}\r\n",
      "type": "registry:component",
      "target": "@components/mobius-loop-icon.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/mobius-loop-icon",
  "categories": [
    "effects"
  ],
  "type": "registry:component"
}