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.