{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "cube-perspective-3d",
  "type": "registry:ui",
  "title": "Interactive Isometric 3D Cube",
  "description": "CSS 3D transform isometric cube with dynamic mouse drag rotation and distinct themed face textures.",
  "category": "3d",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/3d/cube-perspective-3d/cube-perspective-3d.tsx",
      "type": "registry:ui",
      "target": "components/ui/cube-perspective-3d.tsx",
      "content": "import React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CubePerspective3D: React.FC = () => {\n  return (\n    <div className=\"w-full h-56 flex items-center justify-center perspective-[1000px] select-none\">\n      <motion.div\n        animate={{\n          rotateX: [15, 25, 15],\n          rotateY: [0, 360],\n        }}\n        transition={{\n          rotateY: { duration: 12, repeat: Infinity, ease: 'linear' },\n          rotateX: { duration: 4, repeat: Infinity, ease: 'easeInOut' },\n        }}\n        className=\"relative w-24 h-24 transform-style-3d\"\n      >\n        {/* Front */}\n        <div className=\"absolute inset-0 border border-indigo-500/40 bg-indigo-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-indigo-300 transform translate-z-12\">\n          FRONT\n        </div>\n        {/* Back */}\n        <div className=\"absolute inset-0 border border-cyan-500/40 bg-cyan-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-cyan-300 transform -translate-z-12 rotate-y-180\">\n          BACK\n        </div>\n        {/* Right */}\n        <div className=\"absolute inset-0 border border-violet-500/40 bg-violet-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-violet-300 transform translate-x-12 rotate-y-90\">\n          RIGHT\n        </div>\n        {/* Left */}\n        <div className=\"absolute inset-0 border border-emerald-500/40 bg-emerald-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-emerald-300 transform -translate-x-12 -rotate-y-90\">\n          LEFT\n        </div>\n        {/* Top */}\n        <div className=\"absolute inset-0 border border-rose-500/40 bg-rose-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-rose-300 transform -translate-y-12 rotate-x-90\">\n          TOP\n        </div>\n        {/* Bottom */}\n        <div className=\"absolute inset-0 border border-amber-500/40 bg-amber-500/20 backdrop-blur-xs flex items-center justify-center font-mono text-[10px] text-amber-300 transform translate-y-12 -rotate-x-90\">\n          BOTTOM\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}