Steps drawn as chips on a dotted board, joined by rounded circuit traces that fill up to the current step while a signal pulse travels the route. Below, a panel explains the step with a typed terminal log.
How Relay works
Every step is wired to the next. Click any stage to jump there, or let the signal run on its own.
Relay proposes types and joins from the schema. Accept them, or rename and cast columns before anything moves.
orders.total -> numeric(12,2)users.email -> lowercase, unique3 columns dropped · pii.ssn masked
npx shadcn@latest add https://hyperblur.dev/r/steps-circuit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/steps-circuit.tsx.
import { StepsCircuit } from "@/components/hyperblur/steps-circuit"
<StepsCircuit accent="#34d399" onStepChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How Relay works" | Pill label above the title. |
| title | string | "From a connection string to a live pipeline in four moves" | Section heading. |
| subtitle | string | "Every step is wired to the next..." | Supporting paragraph. |
| steps | { title: string; caption: string; detail: string; log: string[] }[] | 4 sample steps | Steps on the board. `log` lines type out in the panel. |
| defaultStep | number | 0 | Initial step when uncontrolled. |
| step | number | Controlled step index. | |
| onStepChange | (index: number) => void | Called when the step changes. | |
| autoPlay | boolean | true | Advance on its own, pausing on hover or focus. |
| interval | number | 3400 | Milliseconds per step during autoplay. |
| accent | string | "#34d399" | Color of the filled trace, active chip and log prompt. |