Dot Grid Drift

Build a dot-grid background with drift and parallax depth. Layers: two dot grids made with radial-gradient backgrounds (no images): - back layer: small dots (1.5px) on a 22px grid at ~35% ink opacity - front layer: bigger dots (2.2px) on a 34px grid at ~50% ink opacity Drift: each layer's background-position animates continuously and linearly - the back layer takes ~60s per cycle, the front ~95s on a slightly different vector. The speed difference is the depth cue; both should be almost imperceptibly slow. Parallax: track the cursor over the section, normalize to -1..1, and translate the back layer up to 6px and the front up to 14px toward the cursor, with a 0.4s ease so it trails softly. Let one single accent dot (with a faint glow) sit among the grid and move the most (~20px) - a firefly that sells the effect. Size the layers with negative insets (inset: -34px) so drifting never exposes edges. Accessibility: purely decorative - aria-hidden on the layers; under prefers-reduced-motion no drift and no parallax. Content placed above must keep its contrast: dots stay under 50% opacity. Colors as tokens: paper background, ink dots, one accent for the firefly. 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.