Water with a skin
MENISCUS is a dark bench of narrow glass capillaries. Water has climbed each tube to a height set by its bore — the finer the tube, the higher the pull — and every surface curves concave under the invisible sheet of surface tension. Tap a tube and its column rings and re-settles. The page's one job: let a visitor see the elastic skin that holds a column of water in the air.
The signature
A single canvas draws the whole bench. Each capillary is a slim glass cylinder; its water column is a filled path whose top edge is a quadratic curve — high at the walls, dipping in the middle — which is exactly the concave meniscus of a wetting liquid. A bright hairline is stroked along that curve: light catching the taut surface.
The heights are not decorative. Each tube's equilibrium follows Jurin's law,
h ∝ 1/r — so the narrowest tubes stand tallest, and the bank reads the physics left to
right. Tap a tube and the column is treated as a damped harmonic oscillator: an impulse sets a
velocity v₀ = A·ω, then each frame integrates
a = −ω²(h−h₀) − 2ζω·v. It overshoots, rings a few times, and settles — and a faint
ripple ellipse expands off the surface. Beads grow at the rim and, when they touch the column, snap
into it and ring it too: coalescence. That is the signature — water climbing thin glass
under a skin you can only see when it moves.
Palette
Argued from a lab bench of borosilicate glass and backlit water — near-black glass, a single cool water accent for every line and fill, a paler tension-highlight for the skin, and a derived light ink for text (the bright water fails legibility as small type, so body copy never uses it).
Type
Instrument Serif carries the display voice — its high contrast and liquid italic feel like a hand-set laboratory plate, and the curve of its letterforms echoes the curve of the meniscus. IBM Plex Mono handles every readout, eyebrow and rule: instrument type for instrument numbers, and its fixed advance keeps the live bore/rise figures from twitching as they update.
Technique
Canvas 2D, no libraries. The bench is rebuilt on resize: tube count scales to width
(5–13), bores follow a smooth two-sine profile so the column tops trace an organic silhouette, and
each tube keeps a per-frame {h, v, ω} state. DPR is capped at 2; the loop pauses
on document.hidden; the delta is clamped so a backgrounded tab can't launch a huge
integration step. At rest the columns sit at their equilibrium heights with a barely-there meniscus
shimmer, so a static screenshot already reads as a full, calm bench. Under
prefers-reduced-motion the rAF loop never starts — a single settled frame is drawn and
interactions repaint once.
Iteration log
Make the ring visible, keep the glass honest
- Drove a tap and found the oscillation was ~5px — too subtle to read. Reworked the
impulse to target a real displacement amplitude (
v₀ = A·ω), so every column now rings visibly and settles over ~2.5s. - Raised the glass mouth clearance to
max(34, 0.16·h)above equilibrium so a strong tap's overshoot never breaks the tube's rim. - Tightened the concave-curve control point maths and confirmed the meniscus midpoint dips by exactly the intended depth; verified body/dim inks at 11:1 / 6.7:1 on the ground.
The bench should feel like one connected object
- Added a sympathetic tremble: tapping a tube gives its two neighbours a fraction of the impulse, so the whole bank shivers — the second-read detail most people notice only on a deliberate second tap.
- Enriched coalescence — beads now grow at the rim and, on contact, snap into the column and set it ringing, with an expanding surface ripple, tying the "drops merge with a snap" copy to a real event.
- Added occasional gentle auto-taps and a slow tray-surface shimmer so the bench breathes for a thumbnail without ever looking busy.
375px, keyboard, and one thing removed
- Checked 375 / 768 / 1440: tube count and bores scale to container; no real overflow, nav and wordmark fully inside the box.
- Added full keyboard control — arrow keys select a tube (drawn with a focus bracket),
Enter/Space taps it — plus
:focus-visiblerings throughout. - Chanel rule: removed the faint vertical caustic line inside each tube — on the thinnest capillaries it read as noise. The meniscus and wall glints carry the glass now.