{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inview-demo",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://reusables.vercel.app/r/use-inview",
    "card",
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/example/inview-demo.tsx",
      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\n\nimport { Card } from \"@/components/ui/card\"\n\nimport useInViewState from \"@/hooks/use-inview\"\n\nfunction AnimatedCard({ delay = 0 }) {\n  const { ref, isInView } = useInViewState({ threshold: 0.2 })\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={{ opacity: 0, y: 50 }}\n      animate={isInView ? { opacity: 1, y: 0 } : {}}\n      transition={{ duration: 0.6, delay }}\n    >\n      <Card className=\"flex h-40 items-center justify-center bg-gradient-to-br from-muted/50 to-muted p-6\">\n        <p className=\"text-lg font-medium\">\n          {isInView ? \"👋 I'm visible!\" : \"Scroll to see me\"}\n        </p>\n      </Card>\n    </motion.div>\n  )\n}\n\nexport default function InViewDemo() {\n  return (\n    <div className=\"space-y-3\">\n      <AnimatedCard delay={0} />\n      <AnimatedCard delay={0.2} />\n      <AnimatedCard delay={0.4} />\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/inview-demo.tsx"
    }
  ],
  "type": "registry:example"
}