scrollsAdvancedhover

Dot Grid Spotlight

A grid of dots that brighten and grow near the cursor as it moves.

Live preview

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

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/dot-spotlight
-->
<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>