"use client"; import React, { useRef } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { GitCommit, Star, Rocket } from "lucide-react"; export function AnimatedTimeline() { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start end", "end start"] }); const lineHeight = useTransform(scrollYProgress, [0, 0.8], ["0%", "100%"]); const events = [ { year: "2024", title: "Global Expansion", desc: "Opened new offices in London and Tokyo to support our growing international user base.", icon: }, { year: "2023", title: "Series B Funding", desc: "Secured $50M in funding led by top Silicon Valley venture capital firms.", icon: }, { year: "2022", title: "Product Launch", desc: "Released our flagship UI component library to thousands of eager developers.", icon: }, ]; return (

Our Journey

{/* Static Background Line */}

{/* Animated Progress Line */} {events.map((event, i) => (

{/* Timeline Dot */}

{event.year}

{event.icon}

{event.title}

{event.desc}

))}

); }