Halftone Ambient
Six metaballs drift across a WebGL canvas, blending into a 3-stop color gradient that gets dot-printed in real time. Bright zones produce fat, dense dots. Dark zones shrink to near-nothing. A sine wave pulses through the whole grid, so the thing never quite sits still.
The halftone effect runs at the shader level — each dot's size is calculated from the luminance underneath it, per frame. The metaballs have domain warp applied, so they can hold tight circular shapes or stretch into something more organic depending on your setting. A vignette pulls the edges back. Mouse hover either pulls the field toward the cursor or pushes it away.
Five presets cover the obvious palettes (Ocean, Sunset, Neon, Forest, Mono), but all three gradient stops are exposed as custom color controls if you'd rather start from scratch.
What's controllable:
Color preset or custom 3-stop gradient
Dot shape: circle, square, diamond, or hollow ring
Domain warp — how round or amoeba-like the metaballs read
Wave ripple — how much the dots breathe over time
Mouse interaction — attract or repel
Quality: full retina or half-res for lower-end devices
No dependencies. Drop it on a section, adjust the props panel, done.
Sanna Granqvist
