Build Story Process
The process as a build story: an artboard of the site assembles itself step by step as you scroll.
Controls
<HowItWorksBuildStory />About
Built on Build Story. In Standard's proposed curated Pro set.
Use it when
- Agencies, studios and services that make something for the client.
Skip it when
- The process is a simple booking: use
how-it-works-steps.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| steps | Steps | list | up to 5 | — |
| steps[].title | Step | text | 40 chars | — |
| steps[].body | What happens | text | 140 chars | — |
| steps[].outputs | Outputs | list | up to 3 | — |
| steps[].outputs[] | What it produces | text | 28 chars | — |
| url | Address on the artboard | text | 40 chars | — |
| caption | Note under the art | text | 80 chars | — |
Variants
Pinneddefault
pinned
The artboard pins while the steps scroll (from 1040 px).
Stepper
stepper
A tapped stepper on every screen.
Accessibility and motion
- Keyboard
- Build Story's steps are reachable by keyboard.
- Screen readers
- The heading, then the steps as Build Story exposes them; the artboard is decorative.
- Touch
- On phones, a stepper.
- Reduced motion
- The artboard shows each stage without motion.
Edge cases and limits
- Step text is edited as fields (Build Story draws it).
Related
Steps
FreeThree to five steps from first contact to done, as a numbered row or a timeline beside the heading.
How it works block · Server
Services scroll past one at a time while a sticky phone beside them shows each one's screen.
Services block · Motion
About Story
FreeThe business in its own words: a tall photo with a caption beside the story and a few honest details.
About block · Server