A company story with a large serif statement, a row of key facts, a five-step timeline whose line draws down as it enters view, and a founder note card.
Our story
Two operations leads at a Lisbon logistics firm build a shared tracker to stop losing shipments between email threads.
Word spreads between freight forwarders. We quit our jobs, raise a small angel round and ship the first real version.
We open an office in Toronto to be closer to North American carriers and grow the team to 30 people.
Carriers in 41 countries now run their daily dispatch on Harbor, from two-truck family firms to national fleets.
64 people, profitable, and still answering support tickets ourselves every Friday afternoon.
We are not trying to be the biggest company in logistics. We want to be the one dispatchers trust at 6am, when a truck is late and the phone will not stop ringing.
npx shadcn@latest add https://hyperblur.dev/r/about-story.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-story.tsx.
import { AboutStory } from "@/components/hyperblur/about-story"
<AboutStory statement="We build tools for people who build things." highlight="people who build things" milestones={[{ year: "2021", title: "Founded", text: "Two friends, one garage." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Our story" | Monospace label above the statement. |
| statement | string | sample statement | Large serif heading. |
| highlight | string | "as simple as sending an email" | Part of the statement to set in accent italics. Must appear in the statement exactly. |
| facts | { label: string; value: string }[] | 4 sample facts | Key numbers in a ruled row under the statement. |
| milestones | { year: string; title: string; text: string }[] | 5 sample milestones | Timeline steps. The last one gets a pulsing marker. |
| note | { text: string; name: string; role: string } | null | sample founder note | Founder card beside the timeline. Pass null to hide it. |
| accent | string | "#f5a524" | Accent for the highlight, timeline line and markers. |