Spotlight Hero

An interactive studio-hero concept by Ojja — a single HTML file, zero dependencies.

Live demo: https://ojja.github.io/spotlight-hero/

What it does

• Cinematic splash intro — a 10-box grid wipe (staggered top/bottom rows) that clears into the page.
• Word-by-word headline reveal — each word un-blurs and rises with a 50 ms stagger.
• Cursor spotlight reveal — moving the pointer over the hero uncovers a second, hidden layer of the artwork through a soft-edged spotlight that eases after the cursor.
• Layered hero composition — oversized display text sits behind the image, sliding up into place.
• Pill CTA with liquid hover — the white pill stretches over its arrow circle on hover.
• Slide-in menu panel with blurred dark glass, morphing burger icon, and staggered content.

How the spotlight works

No canvas rasterization. The reveal layer carries a CSS mask-image: radial-gradient(...) whose center is two custom properties (--spot-x / --spot-y). A requestAnimationFrame loop lerps the pointer position (10% per frame) and writes it to those properties — the browser re-rasterizes the gradient mask on the compositor, so there's no per-frame toDataURL() or main-thread image encoding. pointermove is used so mouse, pen and touch-drag all drive the light.

Accessibility

• prefers-reduced-motion disables the splash, entrance and text animations.
• The full base artwork is always visible — the spotlight only adds a second layer, so no content is gated behind pointer movement.
• The menu button carries a live aria-label (open/close).

Run it

It's one file — open index.html, or serve the folder:

python3 -m http.server 8080

License

MIT © Ojja