Scroll Timeline

A vertical timeline built for storytelling: a progress line traces down the rail as you scroll, entries fade up into place, and each label sticks while its section is in view. Scroll the preview to draw the line.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/scroll-timeline.json"

ScrollTimeline measures its track and maps scroll progress to the accent line's height, so the rail fills exactly as far as you've read. Entries fade up once on enter, and the date rail stays sticky while its entry is on screen. Under reduced motion the line is drawn in full and entries appear statically.

Usage

import { ScrollTimeline } from "@/components/godui/scroll-timeline";

<ScrollTimeline
  data={[
    {
      date: "Q1",
      title: "Discovery",
      content: <p>Research, interviews, and a first prototype.</p>,
    },
    {
      date: "Q2",
      title: "Build",
      content: <p>Shipped the beta to early customers.</p>,
    },
  ]}
/>

Props

Each entry is { title: string; date?: string; content: React.ReactNode }. ScrollTimeline also forwards every standard <div> attribute to the root.