RippleNo. 93

Build note · Wave 4 Second Person

How the water was taught to hold letters

RIPPLE is a still dark pool that only writes when you do. Every key you press falls in as a droplet, spreads a real interfering ripple, and surfaces a letter that shivers each time a later drop crosses it. This page is the workshop behind that surface — the physics, the palette, the type, and the three passes that shaped it.

The concept

A single fictional instrument for the Generative Assets collection: a pool that turns typing into weather. The page addresses the second person and cannot exist without your hands — leave the keys alone and it stays black and glassy. Its one job is to make interference legible: the moment two ripples cross, a letterform lifts out of the dark and settles, so a poem composes itself on water and then, if you stop feeding it, begins to loosen back into the surface. Written for anyone who has ever wanted to watch language behave like rain.

Palette

Argued from the subject: deep water, the cold light that rides a ripple crest, warm off-white ink for the letters, and a single lamp-warm accent kept to marks — never small text.

Pool
#101A22
The still surface at rest — a near-black teal, cold and deep. Everything is drawn out of this.
Ripple
#5FA3B0
The light that catches a moving crest. Reserved for lines, rings and the caret — the ink/line split from the collection's playbook.
Letter-light
#EAE6D6
Warm paper-white for the surfaced glyphs. High contrast on the pool (~13:1) so the poem always reads.
Warm
#D68A3C
A lamp glint on the tallest crests and one accent word. A mark, not a text colour — used sparingly on purpose.

Type

EB Garamond, italic. A humanist old-style face with a wet, handwritten slope — set in italic it reads like ink still drying. It carries the poem on the water and every display line on the page.

every word you set on water
EB Garamond · italic 500 · the letters on the pool

Outfit handles the quiet machinery: eyebrows, the key legend, nav and captions. A neutral geometric sans with a wide, even colour, tracked out in caps so it never competes with the serif.

A–Z · a drop, a letter
Outfit · 500–600 · labels & interface

Technique — the signature

The pool is a damped wave equation solved on a grid, one cell every six CSS pixels, stepped once per animation frame. Two float buffers hold the surface height now and a frame ago; each cell relaxes toward the average of its four neighbours minus its own past, then loses a little energy (damping ≈ 0.962). That single line of arithmetic is the whole ocean: disturbances propagate as true circular fronts, reflect off the fixed edges, and sum wherever they meet. The crossings you see are not painted — they are the physics adding up.

A keystroke is a droplet

Every character is measured, placed on a flowing line, and given a spot on the water. A small drop falls from above and, on impact, pokes the height field at that point — the ripple you then watch spread is that poke propagating. Space is a fainter drop; Enter steps to a new line.

Letters read through moving water

Each glyph is bound to the point where its drop landed and drawn through the local slope of the surface: the height gradient there displaces and brightens it every frame. So when a fresh drop's ripple sweeps across the words you wrote a moment ago, those older letters bend and glint as the front passes — the interference becomes something you can read. The water canvas is rendered at grid resolution into an offscreen buffer, then scaled up with bilinear smoothing for the soft caustic light; the crisp glyphs are drawn on top.

Backspace pulls the drop back

Deleting runs the motion in reverse. The glyph sinks over half a second while an inward, negative ripple collapses toward the point it fell — the surface taking the droplet back up into the air. Unwriting is just the same physics played backward.

The three passes

Pass 1 · Craft
  • Tuned damping to 0.962: at 0.99 the pool never calmed and letters could not settle; below 0.95 a drop died before its ripple reached the neighbouring words, killing the interference read.
  • Split the accent tokens per the collection's ink/line rule — warm and full-cyan reserved for rings, crests and the caret; text on the pool uses letter-light and a cool grey ink so nothing falls under 4.5:1.
  • Because the surfaced letters sit over a busy animated field, each glyph is drawn twice — a soft dark scrim first, then the lit letter on top — so it stays legible even when it rides a bright ripple crest.
  • Set a deliberate type scale (drop-letter clamp(22–46px), near-double leading) and rewrote the poem so every line was specific — no filler.
Pass 2 · Depth
  • Added the shimmer-on-crossing detail: a glyph's glow and displacement scale with the passing wave's local gradient, so old words visibly react to new drops — the second-read moment.
  • Gave each drop a falling droplet and a splash ring, and each backspace a rising droplet + collapsing ring, so cause and effect are choreographed rather than instant.
  • A faint mirrored reflection under every surfaced letter sells the sense that the words are resting on water, not floating in front of it.
  • A calm auto-typed seed line writes itself once on load to demonstrate the mechanic, then cancels the instant you touch a key and hands the pool to you.
Pass 3 · Hardening
  • 375px: the "No. 93" tag and secondary legend keys collapse, margins tighten, and the drop-letter shrinks so lines still wrap cleanly inside the pool.
  • Reduced motion: the wave loop never starts; the pool renders one settled frame — still concentric rings and a single composed line — so the page is calm, not blank.
  • Performance & lifecycle: device pixel ratio capped at 2, grid and layout rebuilt on resize, the rAF loop paused when the tab is hidden, and typing only captured while the pool is on screen so lower sections still scroll normally.
  • Removed one ornament (the Chanel rule): an extra warm bloom on the water read as noise and was cut, leaving the warm strictly to crest glints.