Timeline

A vertical timeline with centered icon circles and dashed line connectors. Each step displays an icon in a bordered circle, a title, and description. Ideal for showcasing sequential processes, onboarding flows, or step-by-step guides with a clean, minimal aesthetic.

A scroll-based timeline with a sticky image display that updates as users scroll through content sections. Features a left content column with scrollable sections and a right sticky image that changes based on the active section. Perfect for product tours, feature showcases, or storytelling experiences.

A two-column timeline layout with a sticky left column containing header content and a scrollable right column with feature cards. Each feature card includes an image, title, description, and CTA button. Ideal for showcasing product features, service offerings, or company milestones.

A multi-step timeline with alternating left/right layout and diagonal pattern backgrounds. Features numbered steps with icons, images, and detailed descriptions. Each step alternates between left and right positioning for visual variety. Perfect for process explanations, company history, or product development stages.

A sticky header timeline with scrollable AI feature cards. Features numbered cards (01, 02, 03) with icons, titles, and descriptions on a muted background. The header section remains sticky while cards scroll. Ideal for showcasing AI capabilities, workflow automation features, or technology highlights.

A sticky header timeline with icon-based productivity features displayed as a border-separated list. Each item shows an icon and title in a clean, minimal layout. The header section remains sticky while the list scrolls. Perfect for highlighting benefits, productivity features, or key selling points.

An interactive stepper timeline with progress bar and navigation buttons. Features animated transitions between steps using Framer Motion, a visual progress indicator, and Previous/Next navigation. Each step displays an image, title, and description. Ideal for multi-step forms, onboarding wizards, or guided tutorials.

A vertical changelog timeline with date badges and bullet point content. Each entry displays a date badge, title, and HTML content with bullet points. Features a vertical separator line connecting entries. Perfect for product changelogs, release notes, or version history displays.

A vertical history timeline with prose content cards. Each entry displays a year, title, and formatted prose content. Features a vertical separator line connecting entries with year markers. Ideal for company history, historical events, or biographical timelines with rich text content.

A horizontal animated phase timeline with progress indicators. Features animated progress bars using Framer Motion, phase cards with dates and descriptions. Displays vertically on mobile and horizontally on desktop. Perfect for project phases, development stages, or roadmap presentations.

A horizontal phase timeline with icon indicators displayed in nested bordered containers. Features animated transitions using Framer Motion, with each phase showing an icon, title, and description. Displays vertically on mobile and horizontally on desktop. Ideal for process flows, service stages, or feature highlights.

A tabbed phase timeline with image cards and animated content transitions. Features tab navigation for switching between phases, each displaying an image, title, description, and optional download button. Uses Framer Motion for smooth content animations. Perfect for product launches, project phases, or feature showcases.

A product launch roadmap timeline with progress bars and animated reveal. Features step cards with progress indicators, descriptions, and a CTA button. Animates from top-to-bottom on mobile and left-to-right on desktop. Ideal for product roadmaps, launch timelines, or development milestones.

A scroll-based timeline with active item highlighting using IntersectionObserver. Features a sticky header showing the current item index and date, with items that highlight as they enter the viewport. Each item displays an image, title, and description. Perfect for company milestones, event timelines, or historical narratives.