Skip to content

component

Halftone Ambient

By Sanna Granqvist

Details

Summary

WebGL dot-print with drifting metaballs

Description

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.

Introduction

WebGL dot-print with drifting metaballs

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200123548/148/228/309/79/15
  • All · #1949