A light, editorial timeline with serif titles and cards that alternate sides. The line fills and the current dot pulses as you scroll; on narrow screens every card sits on the right.
A fixed schedule with a named lead at every stage. You always know what happens this week and what lands next.
A ninety-minute session with your founders and leads to map goals, constraints and what success looks like in numbers.
Twelve customer interviews and a pass through your analytics. We come back with the three problems worth solving first.
Clickable prototypes go in front of real customers every Thursday. What fails gets cut, what works gets sharper.
Production-ready files, a component library and a recorded walkthrough, so your team owns every decision we made.
npx shadcn@latest add https://hyperblur.dev/r/how-timeline-vertical.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-timeline-vertical.tsx.
import { HowTimelineVertical } from "@/components/hyperblur/how-timeline-vertical"
<HowTimelineVertical title="How we work" items={[{ label: "Week 1", title: "Kickoff", description: "We meet the team." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The process" | Small caps label above the headline. Empty string hides it. |
| title | string | "Five weeks from first call to launch" | Serif headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| items | { label: string; title: string; description: string; duration?: string; deliverables?: string[]; owner?: string }[] | 4 sample stages | Timeline stages. owner reads "Name, Role" and renders an initials avatar. |
| cta | { label: string; href: string } | null | { label: "Book a discovery call", href: "#" } | Dark pill link under the timeline. Pass null to hide it. |
| note | string | "Fixed price from $24,000" | Muted text next to the link. Empty string hides it. |
| accent | string | "#e5533d" | Color of the filled line, active dot, labels and numerals. |
| onItemActive | (index: number) => void | Called when a different stage becomes active. | |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |