A vertical plan along a measuring ruler whose ticks light up as you scroll, next to a sticky meter where the percentage rolls like an odometer. Cards brighten as the playhead reaches them.
Onboarding plan
Every customer gets the same measured plan, with a named owner for each stage. Scroll to follow it.
A 45 minute call to agree on scope, then SSO, roles and a sandbox workspace set up before you hang up.
We move three years of tickets, contacts and attachments from your current tool, with a field map you sign off.
Routing rules, SLAs and macros recreated and tested against last month's real tickets, not demo data.
Two live sessions per shift plus a recorded walkthrough. Agents work a shadow queue for three days.
We switch the inbound address at the quietest hour you choose and stay on a shared channel for the first week.
A report on response times before and after, with the five changes we would make next, in priority order.
npx shadcn@latest add https://hyperblur.dev/r/steps-scroll-ruler.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/steps-scroll-ruler.tsx.
import { StepsScrollRuler } from "@/components/hyperblur/steps-scroll-ruler"
<StepsScrollRuler onStepReach={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Onboarding plan" | Small label above the title. |
| title | string | "Sixty days from signed to settled" | Section heading. |
| subtitle | string | "Every customer gets the same measured plan..." | Supporting paragraph, hidden on narrow containers. |
| steps | { when: string; title: string; body: string; owner: string; deliverables: string[] }[] | 6 sample steps | Stages of the plan. |
| progress | number | Controlled progress from 0 to 1. Overrides scroll and autoplay. | |
| autoPlay | boolean | false | Loop the progress by itself, for previews. |
| duration | number | 9 | Seconds for one autoplay pass. |
| accent | string | "#f5b83d" | Color of the lit ticks, spine, badges and meter. |
| onStepReach | (index: number) => void | Called when the playhead enters a new step. |