Scroll Story Services
Services scroll past one at a time while a sticky phone beside them shows each one's screen.
Controls
<ServicesScrollStory />About
Built on Phone Frame with a small island that watches which service is centred. The catalogue's device story, from pieces that exist today.
Use it when
- An app or service with three to six features, each with a screen.
Skip it when
- No screens to show: use
services-icon-grid.
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 | — |
| items | Services | list | up to 6 | — |
| items[].title | Title | text | 40 chars | — |
| items[].body | Description | text | 140 chars | — |
| items[].icon | Icon | icon | — | — |
| items[].media | Image | image | — | — |
| action | Button | action | 24 chars | — |
Variants
Phone rightdefault
phone-right
Services left, sticky phone right.
Phone left
phone-left
Sticky phone left, services right.
Accessibility and motion
- Keyboard
- The optional action.
- Screen readers
- A heading and an ordered list of services; each has its own screen image inline; the sticky phone is hidden.
- Touch
- Phones show screens inline; nothing depends on scrolling position.
- Reduced motion
- Screens swap without a fade.
Edge cases and limits
- Six services make a long section; each step is 64 vh tall on desktop.
Related
The lead service behind reeded glass that clears under the pointer, the rest on frosted cards over a glow.
Services block · WebGL2
Three to six services as cards with icons, an index of numbered rows, or hairline columns.
Services block · Server
Services Bento
FreeThe lead service as a large image card, the rest as a numbered list beside it or as cards beneath.
Services block · Server