{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "coin-spin-animation",
  "description": "A 3D spinning coin animation with layered faces and side depth.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/new-york/motion-framer/coin-spin-animation.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nconst CoinSpinAnimation = () => {\n  return (\n    <div\n      className=\"relative h-[74px] w-[74px]\"\n      style={{ perspective: \"900px\" }}\n    >\n      <motion.div\n        className=\"absolute left-1/2 top-1/2 h-14 w-14\"\n        style={{\n          transform: \"translate(-50%, -50%)\",\n          transformStyle: \"preserve-3d\",\n        }}\n        animate={{ rotateY: 360 }}\n        transition={{ duration: 2, ease: \"linear\", repeat: Infinity }}\n      >\n        <div\n          className=\"absolute h-14 w-[5.5px] bg-[#A9EFC3]\"\n          style={{\n            transform: \"translateX(25px) rotateY(90deg)\",\n            transformOrigin: \"center\",\n          }}\n        />\n\n        <div\n          className=\"absolute inset-0 rounded-full bg-[#A9EFC3]\"\n          style={{\n            transform: \"translateZ(3px)\",\n            backfaceVisibility: \"hidden\",\n            WebkitBackfaceVisibility: \"hidden\",\n          }}\n        >\n          <CoinIcon />\n        </div>\n\n        <div\n          className=\"absolute inset-0 rounded-full bg-[#A9EFC3]\"\n          style={{\n            transform: \"rotateY(180deg) translateZ(-2px)\",\n            backfaceVisibility: \"hidden\",\n            WebkitBackfaceVisibility: \"hidden\",\n          }}\n        />\n\n        <div\n          className=\"absolute inset-0 rounded-full bg-[#A9EFC3]\"\n          style={{\n            transform: \"rotateY(180deg) translateZ(3px)\",\n            backfaceVisibility: \"hidden\",\n            WebkitBackfaceVisibility: \"hidden\",\n          }}\n        >\n          <CoinIcon />\n        </div>\n\n        <div\n          className=\"absolute inset-0 rounded-full bg-[#A9EFC3]\"\n          style={{\n            transform: \"translateZ(-2px)\",\n            backfaceVisibility: \"hidden\",\n            WebkitBackfaceVisibility: \"hidden\",\n          }}\n        />\n      </motion.div>\n    </div>\n  );\n};\n\nfunction CoinIcon() {\n  return (\n    <svg viewBox=\"0 0 88 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"43.75\" cy=\"43.75\" r=\"43.75\" fill=\"#A9EFC3\" />\n      <path\n        d=\"M43.7501 78.3334C62.8499 78.3334 78.3334 62.8499 78.3334 43.7501C78.3334 24.6502 62.8499 9.16675 43.7501 9.16675C24.6502 9.16675 9.16675 24.6502 9.16675 43.7501C9.16675 62.8499 24.6502 78.3334 43.7501 78.3334Z\"\n        stroke=\"#0048FF\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M64.5 47.2083C63.6748 52.0929 61.1294 56.5212 57.3237 59.6925C53.5181 62.8639 48.7034 64.5691 43.75 64.4999C38.7966 64.5691 33.9819 62.8639 30.1763 59.6925C26.3706 56.5212 23.8252 52.0929 23 47.2083\"\n        stroke=\"#0048FF\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M33.375 33.375H33.4096\"\n        stroke=\"#0048FF\"\n        strokeWidth=\"9\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M54.125 33.375H54.1596\"\n        stroke=\"#0048FF\"\n        strokeWidth=\"9\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport default CoinSpinAnimation;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/coin-spin-animation.tsx"
    }
  ],
  "type": "registry:block"
}