{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-fade",
  "type": "registry:ui",
  "title": "Blur Fade",
  "description": "Blur fade in and out animation. Used to smoothly fade in and out content.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/blur-fade.tsx",
      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport {\n  AnimatePresence,\n  motion,\n  useInView,\n  type MotionProps,\n  type UseInViewOptions,\n  type Variants,\n} from \"motion/react\"\n\ntype MarginType = UseInViewOptions[\"margin\"]\n\ninterface BlurFadeProps extends MotionProps {\n  children: React.ReactNode\n  className?: string\n  variant?: {\n    hidden: { y: number }\n    visible: { y: number }\n  }\n  duration?: number\n  delay?: number\n  offset?: number\n  direction?: \"up\" | \"down\" | \"left\" | \"right\"\n  inView?: boolean\n  inViewMargin?: MarginType\n  blur?: string\n}\n\nconst getFilter = (v: Variants[string]) =>\n  typeof v === \"function\" ? undefined : v.filter\n\nexport function BlurFade({\n  children,\n  className,\n  variant,\n  duration = 0.4,\n  delay = 0,\n  offset = 6,\n  direction = \"down\",\n  inView = false,\n  inViewMargin = \"-50px\",\n  blur = \"6px\",\n  ...props\n}: BlurFadeProps) {\n  const ref = useRef(null)\n  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n  const isInView = !inView || inViewResult\n  const defaultVariants: Variants = {\n    hidden: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n        direction === \"right\" || direction === \"down\" ? -offset : offset,\n      opacity: 0,\n      filter: `blur(${blur})`,\n    },\n    visible: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n      opacity: 1,\n      filter: `blur(0px)`,\n    },\n  }\n  const combinedVariants = variant ?? defaultVariants\n\n  const hiddenFilter = getFilter(combinedVariants.hidden)\n  const visibleFilter = getFilter(combinedVariants.visible)\n\n  const shouldTransitionFilter =\n    hiddenFilter != null &&\n    visibleFilter != null &&\n    hiddenFilter !== visibleFilter\n\n  return (\n    <AnimatePresence>\n      <motion.div\n        ref={ref}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        exit=\"hidden\"\n        variants={combinedVariants}\n        transition={{\n          delay: 0.04 + delay,\n          duration,\n          ease: \"easeOut\",\n          ...(shouldTransitionFilter ? { filter: { duration } } : {}),\n        }}\n        className={className}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}