{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fade-in",
  "type": "registry:ui",
  "title": "Fade In",
  "description": "The FadeIn component creates a smooth fade-in animation for its children when they enter the viewport.",
  "author": "Michael (https://github.com/lappemic)",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/demo/animation/fade-in.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion, useInView, type Variants } from \"motion/react\";\n\ninterface FadeInProps {\n  children: React.ReactNode;\n  delay?: number;\n  duration?: number;\n  className?: string;\n  once?: boolean;\n}\n\nconst FadeIn: React.FC<FadeInProps> = ({\n  children,\n  delay = 0,\n  duration = 0.5,\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 variants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        duration: duration,\n        delay: delay,\n        ease: \"easeOut\",\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 FadeIn;\n",
      "type": "registry:ui",
      "target": "components/ui/fade-in.tsx"
    }
  ]
}