A company story told as milestones that reveal while scrolling, beside a sticky panel whose headcount chart draws up to the active year and whose number counts to match. Chart points and cards can also be clicked.
Scroll through the moments that shaped Fieldline. The chart follows along, so you can see the team grow with each chapter.
npx shadcn@latest add https://hyperblur.dev/r/about-growth-timeline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-growth-timeline.tsx.
import { AboutGrowthTimeline } from "@/components/hyperblur/about-growth-timeline"
<AboutGrowthTimeline onMilestoneChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Our story" | Small label above the title. |
| title | string | "Seven years, grown one careful hire at a time" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| milestones | { year: string; title: string; text: string; headcount: number; tag: string }[] | 6 milestones | Timeline entries. headcount feeds the chart. |
| defaultActive | number | 2 | Milestone active before any scrolling. |
| metricLabel | string | "people on the team" | Label under the animated number. |
| onMilestoneChange | (index: number) => void | Called when the active milestone changes. | |
| accent | string | "#8b5cf6" | Chart, bullet and highlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |