Hero sections
Hero - Spotlight
The panel sits under a soft veil; a circle of light follows the cursor and reveals what it passes.
- Cursor spotlight
- Motion-template mask
- Veil control
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
The hero panel sits under a soft darkening veil, and a circular mask is positioned at the cursor so a pool of light follows the pointer and reveals whatever it passes over. The mask is driven by a motion template that recalculates from the live cursor coordinates, and the veil strength is exposed as a control so you can tune how hidden the content starts.
When to use it
- A hero that wants to invite exploration by making the visitor uncover the content
- A dark, dramatic landing page where a reveal effect builds intrigue
- A section where you want the cursor to feel like a tool the visitor is given
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 140-460px
radiusSpotlight radius - 0.5-0.95
dimVeil darkness
Related components
Using this block
Buy it, then copy components/blocks/hero-spotlight/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.