Four numbered cards on paper, joined by a marching dashed route. A dot travels the path and each card lights up as the dot reaches it; on narrow screens the route turns vertical.
How it works
One designer, one plan and one delivery date. You stay in charge of every decision.
Answer six quick questions about rooms, light and the way you live.
A video call with one of our 140 interior designers, matched to your style.
Moodboards, floor plans and a shoppable list you can tweak line by line.
We order, track and coordinate delivery. You unpack and enjoy the room.
npx shadcn@latest add https://hyperblur.dev/r/how-dashed-path.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-dashed-path.tsx.
import { HowDashedPath } from "@/components/hyperblur/how-dashed-path"
<HowDashedPath accent="#e0613a" duration={8} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How it works" | Pill label above the title. |
| title | string | "A finished room in three weeks, not three months" | Section heading. |
| subtitle | string | "One designer, one plan and one delivery date..." | Supporting text. |
| steps | { title: string; description: string; meta?: string }[] | 4 sample steps | Up to four steps. `meta` is a small timing label at the bottom of the card. |
| cta | { label: string; href: string } | { label: "Book a free call", href: "#" } | Button in the header. |
| duration | number | 8 | Seconds for one full loop of the traveling dot. |
| accent | string | "#e0613a" | Color of the dot and the highlighted card. |