{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smooth-reveal",
  "type": "registry:ui",
  "title": "Smooth Reveal",
  "description": "The SmoothReveal component creates a smooth reveal animation for its children when they enter the viewport.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/demo/animation/smooth-reveal.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { cubicBezier, motion, useInView } from \"motion/react\";\n\ntype SmoothRevealProps = {\n  children: React.ReactNode;\n  direction?: \"up\" | \"down\" | \"left\" | \"right\";\n  delay?: number;\n  duration?: number;\n  distance?: number;\n  className?: string;\n  once?: boolean;\n};\n\nconst SmoothReveal: React.FC<SmoothRevealProps> = ({\n  children,\n  direction = \"up\",\n  delay = 0,\n  duration = 0.8,\n  distance = 100,\n  className = \"\",\n  once = true,\n}) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const isInView = useInView(ref, { once, amount: 0.1 });\n\n  const getDirectionalProps = () => {\n    switch (direction) {\n      case \"down\":\n        return { y: -distance };\n      case \"left\":\n        return { x: distance };\n      case \"right\":\n        return { x: -distance };\n      case \"up\":\n      default:\n        return { y: distance };\n    }\n  };\n\n  const customEasing = cubicBezier(0.2, 0.0, 0.0, 1.0);\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      ...getDirectionalProps(),\n    },\n    visible: {\n      opacity: 1,\n      y: 0,\n      x: 0,\n      transition: {\n        duration: duration,\n        ease: customEasing,\n        delay: delay,\n      },\n    },\n  };\n\n  return (\n    <motion.div\n      ref={ref}\n      initial=\"hidden\"\n      animate={isInView ? \"visible\" : \"hidden\"}\n      variants={variants}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport default SmoothReveal;\n",
      "type": "registry:ui",
      "target": "components/ui/smooth-reveal.tsx"
    }
  ]
}