{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-3d-tilt-flip",
  "type": "registry:ui",
  "title": "3D tilt / Flip",
  "description": "Use controlled perspective and rotation for card flips or hover depth.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "transforms"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/3d-tilt-flip/",
  "files": [
    {
      "path": "src/registry/primitives/3d-tilt-flip.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/3d-tilt-flip.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\n\nexport type Motion3dTiltFlipPrimitiveProps = {\n  flipped: boolean;\n  front: ReactNode;\n  back: ReactNode;\n  angle?: number;\n  perspective?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nexport function Motion3dTiltFlipPrimitive({\n  flipped,\n  front,\n  back,\n  angle = 180,\n  perspective = 800,\n  duration = 0.28,\n  easing = EASE_IN_OUT,\n  className,\n}: Motion3dTiltFlipPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const rotation = Math.max(100, Math.min(180, angle));\n\n  return (\n    <div className={className} style={{ perspective }}>\n      <motion.div\n        className=\"relative size-full\"\n        style={{ transformStyle: \"preserve-3d\" }}\n        initial={false}\n        animate={{ transform: flipped ? `rotateY(${rotation}deg)` : \"rotateY(0deg)\" }}\n        transition={reduceMotion ? { duration: 0 } : { duration, ease: easing }}\n      >\n        <div className=\"absolute inset-0\" style={{ backfaceVisibility: \"hidden\" }}>{front}</div>\n        <div\n          className=\"absolute inset-0\"\n          style={{ backfaceVisibility: \"hidden\", transform: \"rotateY(180deg)\" }}\n        >\n          {back}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"
    }
  ]
}