Spectrum Mesh CTA
A closing call to action on a band of the brand's colours drifting slowly as a mesh gradient.
Controls
<CtaSpectrumMesh />About
Built on Spectrum Mesh. In Standard's proposed curated Pro set.
Use it when
- Ending a page with energy.
Skip it when
- The hero is already a shader: vary the ending (
cta-band).
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 | — |
| primaryAction | Main button | action | 24 chars | — |
| secondaryAction | Second button | action | 24 chars | — |
Variants
Centreddefault
centered
Centred copy on a radial veil.
Split
split
Copy left, actions right on desktop.
Accessibility and motion
- Keyboard
- The actions.
- Screen readers
- A heading, a line and actions; the mesh is decorative.
- Touch
- Nothing depends on touch.
- Reduced motion
- The mesh holds one frame.
Edge cases and limits
- No WebGL2: the CSS poster.
Related
Caustics CTA
ProA closing call to action on light moving through water, for resorts, pools, spas and swim schools.
Calls to action block · WebGL2
CTA Band
FreeThe last nudge before the footer: one line and one action, as big type, a panel with art, or a quiet row.
Calls to action block · Server
Parol CTA
ProA seasonal call to action: a capiz parol builds itself in 3D, lights chasing round its rays, beside the offer.
Calls to action block · three.js