{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-morph",
  "type": "registry:ui",
  "title": "Morph",
  "description": "Create continuous transformation between before and after layouts of a shared element.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "state-transitions"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/morph/",
  "files": [
    {
      "path": "src/registry/primitives/morph.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/morph.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type MorphMode = \"morph\" | \"continuity\" | \"shared\" | \"layout\";\n\nexport type MorphPrimitiveProps = {\n  children: ReactNode;\n  mode?: MorphMode;\n  layoutId?: string;\n  duration?: number;\n  className?: string;\n};\n\nexport function MorphPrimitive({\n  children,\n  mode = \"morph\",\n  layoutId = \"motion-lexicon-shared\",\n  duration = 0.26,\n  className,\n}: MorphPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <motion.div\n      className={className}\n      layout={reduceMotion ? false : mode === \"layout\" ? \"position\" : true}\n      layoutId={reduceMotion || mode === \"continuity\" ? undefined : layoutId}\n      transition={reduceMotion ? { duration: 0.12 } : {\n        layout: { type: \"spring\", duration, bounce: mode === \"morph\" ? 0.16 : 0.08 },\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}