scrollsAdvancedhover
Dot Grid Spotlight
A grid of dots that brighten and grow near the cursor as it moves.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a dot-grid spotlight: a full-bleed dark stage with dots placed every 28px in a regular grid. On mousemove, each dot scales (1 → 4) and brightens (alpha 0.18 → 0.88) based on how close it is to the cursor (within a 140px radius, linear falloff). Drive it with a single requestAnimationFrame loop that reads the cursor position and writes transforms — don't bind a listener per dot. Rebuild the grid on resize. Centered headline overlay with pointer-events:none so the whole stage stays interactive.
Code
html
<div class="stage"><div class="grid"></div><div class="copy"><h2>Move your cursor</h2><p>Each dot reacts to your cursor's distance.</p></div></div>