Device Duo Hero
The product on two screens: a browser frame and a phone frame overlapping beside or below the copy.
Controls
<HeroDeviceDuo />About
Built on Browser Frame and Phone Frame. It differs from hero-split-stage (a photo with UI cards) by showing the product itself.
Use it when
- The product is a website or an app.
Skip it when
- The business is a place or a service: use
hero-split-stage.
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 | Headline | text | 80 chars | — |
| lead | Intro | text | 160 chars | — |
| primaryAction | Main button | action | 24 chars | — |
| secondaryAction | Second button | action | 24 chars | — |
| media | Image | image | — | — |
| url | Address in the browser | text | 40 chars | — |
| phoneMedia | Phone screen | image | — | — |
Variants
Devices rightdefault
duo-right
Copy left, the overlapping frames right.
Devices below
duo-below
Centred copy, the frames wide below.
Accessibility and motion
- Keyboard
- The actions.
- Screen readers
- One h1, intro and actions; the screens are images with alt text.
- Touch
- Nothing depends on hover.
- Reduced motion
- The phone does not tilt.
Edge cases and limits
- Without screenshots, placeholder scenes fill both screens.
Related
Bento Hero
FreeThe promise beside a three-tile mosaic: a tall photo, a second image and a card of what the business offers.
Heroes block · Server
Centered Hero
FreeOne centred promise with its actions and highlights, the image below, on a plain, haloed or gradient panel ground.
Heroes block · Server
Editorial Hero
FreeA magazine opening: a large serif headline, the intro and actions, tags, and the photo framed tall or set as a band.
Heroes block · Server