Grid Beams
Beams of light racing along a dark blueprint grid
The grid is alive
Create a grid beams background (the AI-startup look). A near-black section with a faint blueprint grid and thin beams of light traveling along random grid lines. The grid: a background-image of two linear-gradients (horizontal and vertical 1px lines at ~7% white opacity) with background-size around 28px 28px. The beams: 3-5 absolutely positioned elements. Horizontal beams are ~56px wide and 1.5px tall with background linear-gradient(90deg, transparent, <accent>, transparent), placed on a grid row (top matching a line), animating transform: translateX from -100% to the section's full width, linear, infinite; vertical beams are the same rotated logic with translateY. Give every beam a different duration (3-5s) and delay, so they feel random rather than synchronized. Keep beams behind the content (content is position: relative), and don't exceed ~6 beams: sparse reads expensive, dense reads busy. Under prefers-reduced-motion, show only the static grid with no beams. 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.