{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-blur",
  "type": "registry:ui",
  "title": "Blur",
  "description": "Reveal media or content layers with coordinated blur, opacity, and masking.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "polish-effects"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/blur/",
  "files": [
    {
      "path": "src/registry/primitives/blur.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/blur.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n\nexport type BlurRevealMode = \"blur\" | \"clip\" | \"mask\";\n\nexport type BlurPrimitiveProps = {\n  present: boolean;\n  children: ReactNode;\n  blur?: number;\n  mode?: BlurRevealMode;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nexport function BlurPrimitive({\n  present,\n  children,\n  blur = 14,\n  mode = \"blur\",\n  duration = 0.26,\n  easing = EASE_OUT,\n  className,\n}: BlurPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const initial = reduceMotion ? { opacity: 0 } : {\n    opacity: 0,\n    filter: mode === \"blur\" ? `blur(${blur}px)` : \"blur(0px)\",\n    clipPath: mode === \"clip\" ? \"inset(0 0 100% 0 round 12px)\" : \"inset(0 0 0% 0 round 12px)\",\n    maskPosition: mode === \"mask\" ? \"100% 0\" : \"0% 0\",\n  };\n\n  return (\n    <AnimatePresence initial={false}>\n      {present ? (\n        <motion.div\n          className={className}\n          style={mode === \"mask\" ? {\n            maskImage: \"linear-gradient(90deg, transparent, #000 40%, #000)\",\n            maskSize: \"220% 100%\",\n          } : undefined}\n          initial={initial}\n          animate={{ opacity: 1, filter: \"blur(0px)\", clipPath: \"inset(0 0 0% 0 round 12px)\", maskPosition: \"0% 0\" }}\n          exit={{ opacity: 0 }}\n          transition={reduceMotion ? { duration: 0.12 } : { duration, ease: easing }}\n        >\n          {children}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n"
    }
  ]
}