{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-timeline-shadcnui",
  "type": "registry:component",
  "title": "Interactive Timeline",
  "description": "Vertical timeline where elements animate and connect with lines on scroll",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/interactive-timeline.tsx",
      "content": "\"use client\";\n\nimport { motion, useInView } from \"framer-motion\";\nimport { useRef } from \"react\";\n\ntype TimelineItem = {\n  id: string;\n  title: string;\n  description: string;\n  date?: string;\n};\n\ntype InteractiveTimelineProps = {\n  items?: TimelineItem[];\n};\n\nfunction TimelineItemComponent({\n  item,\n  index,\n}: {\n  item: TimelineItem;\n  index: number;\n}) {\n  const itemRef = useRef(null);\n  const itemInView = useInView(itemRef, {\n    once: true,\n    margin: \"-100px\",\n  });\n\n  return (\n    <div ref={itemRef} className=\"relative flex gap-6\">\n      {/* Timeline dot */}\n      <motion.div\n        initial={{ scale: 0, opacity: 0 }}\n        animate={\n          itemInView ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }\n        }\n        transition={{ delay: index * 0.2, duration: 0.3 }}\n        className=\"absolute left-4 top-2 h-4 w-4 rounded-full border-2 border-primary bg-primary\"\n      />\n\n      {/* Content */}\n      <motion.div\n        initial={{ opacity: 0, x: -20 }}\n        animate={itemInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}\n        transition={{\n          delay: index * 0.2 + 0.3,\n          type: \"spring\",\n          stiffness: 300,\n          damping: 25,\n        }}\n        className=\"ml-12 flex-1 rounded-lg border border-border bg-card p-4\"\n      >\n        {item.date && (\n          <span className=\"text-xs text-muted-foreground\">{item.date}</span>\n        )}\n        <h3 className=\"mt-1 text-lg font-semibold\">{item.title}</h3>\n        <p className=\"mt-1 text-sm text-muted-foreground\">{item.description}</p>\n      </motion.div>\n    </div>\n  );\n}\n\nexport function InteractiveTimeline({\n  items = [\n    { id: \"1\", title: \"Started\", description: \"Project began\", date: \"2024\" },\n    {\n      id: \"2\",\n      title: \"Development\",\n      description: \"Active development phase\",\n      date: \"2024\",\n    },\n    { id: \"3\", title: \"Launch\", description: \"Project launched\", date: \"2024\" },\n  ],\n}: InteractiveTimelineProps) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true, margin: \"-50px\" });\n\n  return (\n    <div ref={ref} className=\"relative w-full max-w-2xl\">\n      {/* Timeline line */}\n      <motion.div\n        initial={{ scaleY: 0 }}\n        animate={isInView ? { scaleY: 1 } : { scaleY: 0 }}\n        transition={{ duration: 0.8, ease: \"easeOut\" }}\n        className=\"absolute left-6 top-0 h-full w-0.5 origin-top bg-border\"\n      />\n\n      <div className=\"space-y-8\">\n        {items.map((item, index) => (\n          <TimelineItemComponent key={item.id} item={item} index={index} />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/interactive-timeline-shadcnui.tsx"
    }
  ]
}