A light, horizontal company timeline with snap scrolling. A year rail above fills as you scroll, the active year lights up, and arrow buttons, year markers and the keyboard all move between milestones.
Eight years of Tideline, one milestone at a time. Drag, scroll or use the arrows.
Three freight planners in Rotterdam share one Excel file for routing. We build a tiny web app so they can stop emailing it around.
Harbour Ventures leads a 2.4 million seed. We move into a former bicycle shop near the Maas and hire our first designer.
Vessel positions update every ten seconds. Customers start opening Tideline before their email in the morning.
The office closes, the team triples, and we write the handbook that still guides how we work across nine countries.
A 38 million round funds the public API. Two thousand developers build on it in the first quarter.
Tideline now plans routes for one in six containers that cross the North Sea, and we are just getting started.
npx shadcn@latest add https://hyperblur.dev/r/about-timeline-scroll.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-timeline-scroll.tsx.
import { AboutTimelineScroll } from "@/components/hyperblur/about-timeline-scroll"
<AboutTimelineScroll />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Our story" | Small label above the title. |
| title | string | "From one shared spreadsheet to the North Sea" | Section heading in serif. |
| subtitle | string | Paragraph under the heading. | |
| milestones | { year: string; title: string; text: string; stat?: string; statLabel?: string }[] | 6 milestones | Cards in the track, in order. |
| onMilestoneChange | (index: number) => void | Called when the active milestone changes while scrolling. | |
| accent | string | "#ff6b4a" | Rail fill, active year and card highlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |