{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-crossfade",
  "type": "registry:ui",
  "title": "Crossfade",
  "description": "Crossfade overlapping, similarly sized states to reduce visual jumps.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "state-transitions"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/crossfade/",
  "files": [
    {
      "path": "src/registry/primitives/crossfade.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/crossfade.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst EASE = [0.33, 1, 0.68, 1] as const;\n\nexport type CrossfadePrimitiveProps = {\n  stateKey: string | number;\n  children: ReactNode;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  overlap?: number;\n  className?: string;\n};\n\nexport function CrossfadePrimitive({\n  stateKey,\n  children,\n  duration = 0.2,\n  easing = EASE,\n  overlap = 0.5,\n  className,\n}: CrossfadePrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const overlapDelay = duration * Math.max(0, Math.min(1, 1 - overlap));\n\n  return (\n    <div className={`relative grid ${className ?? \"\"}`}>\n      <AnimatePresence initial={false} mode=\"sync\">\n        <motion.div\n          className=\"col-start-1 row-start-1\"\n          key={stateKey}\n          initial={{ opacity: 0, filter: reduceMotion ? \"blur(0px)\" : \"blur(2px)\" }}\n          animate={{\n            opacity: 1,\n            filter: \"blur(0px)\",\n            transition: reduceMotion ? { duration: 0.12 } : { duration, delay: overlapDelay, ease: easing },\n          }}\n          exit={{\n            opacity: 0,\n            filter: reduceMotion ? \"blur(0px)\" : \"blur(2px)\",\n            transition: reduceMotion ? { duration: 0.12 } : { duration, ease: easing },\n          }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  );\n}\n"
    }
  ]
}