[00]Surface tension
the recipe for a liquid page · one filter, a handful of springs
Technique
SVG goo · feGaussianBlur → feColorMatrix alpha threshold
Bodies
lime · teal · coral · plain DOM circles
Motion
spring toward pointer · idle orbit · variable pull per blob
Type
Bricolage Grotesque display · DM Sans body · flowing gradient fill
Control
live viscosity slider tunes the merge threshold
Status
🟢 fluid · contrast AA · reduced-motion drops the goo & freezes
[01]Six states
the organic vocabulary, one tile at a time · scroll to reveal
01 · metaballs
The merge is the whole trick
Blurred shapes pass through an alpha threshold, so anywhere two blobs' soft edges overlap, they fuse into one body. The hero above is the live version.
02 · morph
Restless radius
Eight border-radius values, animated.
03 · liquid type
Type that flows
A gradient drifts through the letterforms — colour as current, not fill.
FLUX
04 · contour
Topographic rings
Concentric bands read as depth — a pool seen from above.
05 · spectrum
Wet palette
Lime → teal → coral.
06 · no edges
Soft as identity
Where 002 is all grid and corners, 005 refuses the straight line. Same self-running engine — every surface here is under tension instead.
[02]Viscosity
drag to thin or thicken the goo · low = droplets, high = one molten mass
thickness
10
Field note: nothing here is a fluid simulation — it is three blurred circles and a colour-matrix threshold. Raise the blur and the surfaces reach further, so they fuse sooner; lower it and they snap into separate droplets. The feeling of liquid from two SVG primitives.