Sculpture Hero
A hero with a 3D centrepiece in the brand's spectrum: puzzle cube, equalizer ring, launch stack or infinity ribbon.
Controls
<HeroSculpture />About
The library's 3D pieces as one hero, with the piece chosen in content so a client can switch centrepieces without changing blocks. It replaces the catalogue's separate launch-stack and ribbon heroes.
Use it when
- The brand wants a striking, modern first impression.
- Premium sites (Pro entitlement).
Skip it when
- The page already has a 3D or own-WebGL section: the composer allows one per page.
- Motion level 0: choose a static hero.
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 | — | — |
| centrepiece | 3D centrepiece | choice | — | — |
| highlights | Highlights | list | up to 4 | — |
| highlights[] | Highlight | text | 28 chars | — |
Variants
Centrepiece rightdefault
centrepiece-right
Copy left, the 3D piece right on a soft glow.
Centrepiece above
centrepiece-above
The 3D piece wide on top, centred copy below.
Accessibility and motion
- Keyboard
- The actions; the centrepiece is decorative.
- Screen readers
- One h1, the intro, the actions and highlights; the 3D canvas is hidden.
- Touch
- The centrepiece responds to touch where its piece does; nothing depends on it.
- Reduced motion
- The centrepiece shows a still frame.
Edge cases and limits
- No WebGL2 or a weak GPU: the poster stays.
- One own-WebGL section per page.
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
The product on two screens: a browser frame and a phone frame overlapping beside or below the copy.
Heroes block · Server