Shader Hero
A full-bleed hero on a moving shader: the spectrum mesh, or pool caustics for resorts, pools and spas.
Controls
<HeroShader />About
Brings the library's shader backgrounds to the first screen. The mesh suits AI and software; caustics suit resorts, pools and spas.
Use it when
- The brand wants colour and movement without 3D objects.
Skip it when
- The headline sits on a busy photo: use a photo hero instead.
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 | — | — |
| backdrop | Moving backdrop | choice | — | — |
Variants
Centreddefault
centered
Centred copy on a radial veil; the image below.
Split
split
Copy left on a side veil, the image on a glass card right.
Accessibility and motion
- Keyboard
- The actions.
- Screen readers
- One h1, the intro and the actions; the shader is decorative.
- Touch
- Touch moves the light where the shader allows; nothing depends on it.
- Reduced motion
- The shader holds one still frame.
Edge cases and limits
- No WebGL2: the CSS poster stays.
Related
Centered Hero
FreeOne centred promise with its actions and highlights, the image below, on a plain, haloed or gradient panel ground.
Heroes block · Server
An AI studio opening: the liquid orb above or beside the copy, with suggestion chips of what people can ask.
Heroes block · WebGL2
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