Spotlight Hero

A dark hero where a warm spotlight follows the cursor

Follow the glow

Move your cursor around

Create a spotlight hero section. A full-width dark hero (near-black background) with a large headline. A soft, warm spotlight follows the cursor across the section: an absolutely positioned overlay (inset: 0, pointer-events: none) whose background is radial-gradient(220px circle at Xpx Ypx, <accent color at ~20% opacity>, transparent 65%), where X/Y track the cursor position relative to the section on mousemove. While the cursor moves, update with no transition (it must feel glued to the cursor). When the cursor leaves the section, ease the spotlight back to a resting position near the headline over 500ms. On touch devices and when prefers-reduced-motion is enabled, show a static spotlight fixed behind the headline instead. Keep the headline and CTA above the overlay (position: relative), and check the headline stays readable both inside and outside the lit area. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data