Halftone Wave
I needed a quiet backdrop for the about section, so I built a halftone field where the dot size carries the signal. The whole point was for it to feel like a slow tide and never get loud enough to compete with the text sitting in front of it.
A signal per column
I divide the canvas into about 140 vertical columns. Each column gets a target amplitude built from two layered sine waves multiplied together, then shaped by a bell-curve envelope so the motion gathers toward the centre and calms down at the edges.
Smoothing the motion
Jumping straight to each target looked jittery, so instead every column eases toward its target with a low-pass filter: 85% of the old value, 15% of the new. That single line of smoothing is what turns a noisy signal into something that actually breathes.
Drawing in halftone
For each column I turn the amplitude into a stack of dots above and below the centre line. The dot radius follows a circular falloff, so a column reads as a soft vertical lens. Bigger amplitude means bigger, fuller dots, so the size of the dot is the data.
Theme-aware
I read the colours from CSS custom properties on every frame, so when you flip between light and dark the field re-tints itself without the animation ever restarting.