Dot Grid with Cursor Spotlight
Subtle dot-grid background with a radial spotlight that follows the cursor; CSS variables only, no JS layout thrash.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer. Build a dot-grid background with a cursor-following spotlight, the quiet kind used under SaaS heroes.
STACK
Target Stack
React + TypeScript + Tailwind CSS. Pointer tracking writes two CSS variables on the container (pointermove, rAF-throttled); rendering is pure CSS.
LAYOUT
Layout
Base layer: radial-gradient dots (1.5px, 24px grid) in --dot at 35% opacity. Spotlight layer above: radial-gradient 480px circle at var(--x)/var(--y), dots in --dot-strong, masked to the circle. Content above both.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --dot: 240 15% 80%; --dot-strong: 250 80% 60%.
ANIMATION
Animation
Spotlight has no transition (instant follow) but fades in/out on pointer enter/leave (0.3s opacity). Touch devices: spotlight fixed at 50% 30%. Reduced motion: spotlight static centred.
RESPONSIVE
Responsive
Dot size/spacing constant; spotlight shrinks to 320px under 640px.
SAMPLE COPY
Sample Copy
Usage: light-theme heroes, pricing headers, docs landing.