A company timeline where a playhead sweeps across a cumulative growth curve and wakes each milestone as it passes, rolling its count up. Cards sit in an even row joined to their points on the curve, with a replay button.
Five years of Pulsewell
Every number below is a studio that runs its classes, members and payments on Pulsewell today.
npx shadcn@latest add https://hyperblur.dev/r/stats-milestones.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-milestones.tsx.
import { StatsMilestones } from "@/components/hyperblur/stats-milestones"
<StatsMilestones milestones={[{ date: "2023", label: "Launch", value: 100, unit: "teams", at: 0.1 }, { date: "2026", label: "Today", value: 9000, unit: "teams", at: 0.95 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Five years of Pulsewell" | Accent line above the heading. |
| title | string | "From one studio to ninety thousand" | Section heading. |
| subtitle | string | sample text | Paragraph beside the heading. Hidden when empty. |
| milestones | { date: string; label: string; value: number; unit?: string; at: number }[] | 6 sample milestones | Points in time order. at is the position on the timeline from 0 to 1 and value sets the height on the curve. |
| axis | string[] | ["2021", "2022", "2023", "2024", "2025", "2026"] | Labels spread evenly along the bottom axis. |
| duration | number | 3600 | Milliseconds for the playhead to cross the timeline. |
| replayLabel | string | "Replay" | Text of the replay button. |
| accent | string | "#fb7185" | Color of the curve, playhead and active nodes. |