{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-timeline", "title": "Animated Timeline", "description": "Modular timeline layout with animated progress and custom thumbnails.", "dependencies": [ "framer-motion" ], "devDependencies": [], "registryDependencies": [], "files": [ { "path": "src/components/library/animated-timeline.tsx", "content": "\"use client\"\n\nimport Image from \"next/image\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, useScroll, useSpring } from \"framer-motion\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type TimelineItemBase = {\n id: string\n title: string\n period?: string\n description?: string\n tags?: string[]\n thumbnailSrc?: string\n thumbnailAlt?: string\n}\n\nexport type AnimatedTimelineProps = {\n items: T[]\n orientation?: \"vertical\" | \"horizontal\"\n layout?: \"stack\" | \"alternating\"\n responsive?: boolean\n renderThumbnail?: (item: T) => React.ReactNode\n renderContent?: (item: T) => React.ReactNode\n className?: string\n railClassName?: string\n itemClassName?: string\n}\n\nfunction DefaultThumbnail({ src, alt }: { src?: string; alt?: string }) {\n if (!src) {\n return (\n
\n No image\n
\n )\n }\n\n return (\n
\n \n
\n )\n}\n\nexport function AnimatedTimeline({\n items,\n orientation = \"vertical\",\n layout = \"stack\",\n responsive = true,\n renderThumbnail,\n renderContent,\n className,\n railClassName,\n itemClassName,\n}: AnimatedTimelineProps) {\n const containerRef = React.useRef(null)\n const contentRef = React.useRef(null)\n const itemRefs = React.useRef>([])\n const prefersReducedMotion = useReducedMotion()\n const isVertical = orientation === \"vertical\"\n const isAlternating = isVertical && layout === \"alternating\"\n const [isCompact, setIsCompact] = React.useState(false)\n const [activeProgress, setActiveProgress] = React.useState(0)\n\n React.useEffect(() => {\n const container = containerRef.current\n if (!container) return\n const update = () => {\n const width = container.getBoundingClientRect().width\n setIsCompact(width < 720)\n }\n update()\n const observer = new ResizeObserver(update)\n observer.observe(container)\n return () => observer.disconnect()\n }, [])\n\n const useAlternatingLayout = isAlternating && (!responsive || !isCompact)\n\n const scrollConfig = isVertical\n ? { target: contentRef, offset: [\"start end\", \"end start\"] as (\"start end\" | \"end start\")[] }\n : { container: containerRef }\n\n const { scrollYProgress, scrollXProgress } = useScroll(scrollConfig)\n const progress = isVertical ? scrollYProgress : scrollXProgress ?? scrollYProgress\n const smoothProgress = useSpring(progress, { stiffness: 140, damping: 30, mass: 0.2 })\n const smoothActiveProgress = useSpring(activeProgress, { stiffness: 180, damping: 28, mass: 0.2 })\n const railProgress = isVertical\n ? prefersReducedMotion\n ? activeProgress\n : smoothActiveProgress\n : prefersReducedMotion\n ? progress\n : smoothProgress\n\n React.useEffect(() => {\n if (!isVertical) return\n const container = containerRef.current\n const content = contentRef.current\n if (!container || !content) return\n\n const update = () => {\n const contentRect = content.getBoundingClientRect()\n if (!contentRect.height) return\n\n const viewAnchor = contentRect.top + contentRect.height * 0.25\n let closestIndex = 0\n let closestDistance = Number.POSITIVE_INFINITY\n\n itemRefs.current.forEach((node, index) => {\n if (!node) return\n const rect = node.getBoundingClientRect()\n const center = rect.top + rect.height / 2\n const distance = Math.abs(center - viewAnchor)\n if (distance < closestDistance) {\n closestDistance = distance\n closestIndex = index\n }\n })\n\n const activeNode = itemRefs.current[closestIndex]\n if (!activeNode) return\n const activeRect = activeNode.getBoundingClientRect()\n const activeCenter = activeRect.top + activeRect.height / 2\n const offset = activeCenter - contentRect.top\n const nextProgress = Math.min(Math.max(offset / contentRect.height, 0), 1)\n setActiveProgress(nextProgress)\n }\n\n update()\n const onScroll = () => requestAnimationFrame(update)\n const observer = new ResizeObserver(onScroll)\n observer.observe(content)\n window.addEventListener(\"scroll\", onScroll, { passive: true })\n container.addEventListener(\"scroll\", onScroll, { passive: true })\n\n return () => {\n observer.disconnect()\n window.removeEventListener(\"scroll\", onScroll)\n container.removeEventListener(\"scroll\", onScroll)\n }\n }, [isVertical])\n\n return (\n \n \n \n \n\n {items.map((item, index) => {\n const thumb = renderThumbnail ? renderThumbnail(item) : \n const content = renderContent ? (\n renderContent(item)\n ) : (\n
\n
\n

\n {item.period ?? `Phase ${index + 1}`}\n

\n

{item.title}

\n
\n {item.description ?

{item.description}

: null}\n {item.tags && item.tags.length > 0 ? (\n
\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n
\n ) : null}\n
\n )\n\n const isLeft = index % 2 === 0\n const rowDirection = useAlternatingLayout ? (isLeft ? \"flex-row\" : \"flex-row-reverse\") : \"flex-row\"\n const cardAlign = useAlternatingLayout ? (isLeft ? \"justify-start\" : \"justify-end\") : \"justify-start\"\n return (\n {\n itemRefs.current[index] = node\n }}\n initial={prefersReducedMotion ? false : { opacity: 0, y: isVertical ? 24 : 0, x: isVertical ? 0 : 24 }}\n whileInView={prefersReducedMotion ? undefined : { opacity: 1, y: 0, x: 0 }}\n viewport={{ once: true, margin: \"-15%\" }}\n transition={{ duration: 0.45, ease: \"easeOut\", delay: prefersReducedMotion ? 0 : index * 0.12 }}\n className={cn(\n \"relative\",\n useAlternatingLayout\n ? cn(\"flex items-stretch gap-8\", rowDirection)\n : isVertical\n ? \"flex items-stretch gap-6\"\n : \"flex min-w-[260px] flex-col gap-5 pt-12\",\n itemClassName\n )}\n >\n
\n \n \n \n
\n\n
\n
\n
\n {thumb}\n
\n
{content}
\n
\n
\n \n )\n })}\n \n \n )\n}\n", "type": "registry:ui", "target": "components/library/animated-timeline.tsx" } ], "type": "registry:ui" }