Build note · Generative Assets
CAIRN is a fictional tidal shore — a small, wordless practice in patience. The page is inert until you touch it: you lift irregular stones with your cursor and balance them into a cairn, with real friction and real centre-of-mass physics, and a bad placement topples the lot. A rising tide and an offshore wind are the only things that move without you. Every cairn you hold steady is kept on a shelf that remembers you.
Wave 4 is written in the second person: the page is the engine off, and you are the current. Most of these sites answer your cursor with light or sound. This one answers with weight. There is nothing to click and nothing to win quickly — only a pile of stones, a shrinking window of bare sand, and the question the shore keeps asking: can you hold your hand still enough to let a stone find where it wants to rest? The whole game is your steadiness, measured honestly and read back to you.
Four values, argued straight off a wet beach at low tide — the grey of a lifted stone, the stone's darker wet underside, the bare sand, and the one living colour that grows on old stones.
Following the collection's ink/line split: lichen is only ever a line or a mark. Small green text runs on a darker lichen-ink #525C2E, and there is one rare warning tone — an oxide #9C5A3C, the colour of iron-stained rock — used only for the moment the meter reads tipping and the cairn is about to go.
Fraunces is a soft, slightly wonky old-style serif with an optical-size axis — dial it to opsz 144 and it turns tidal and organic, the right voice for stones and patience; its italic carries the quiet second-person lines. The typographic bravery is small and deliberate: the wordmark set as sentence-case Cairn, not a shouting stack of caps, because the subject is calm. Atkinson Hyperlegible — drawn by the Braille Institute for maximum legibility — does the instrument work: it keeps the live balance reading, the knots, the tide clock and the stone count sharp and grounded at small sizes over a moving canvas.
The point is that the balance is real. You grab a stone with a soft mouse constraint that gives it weight; you carry it up and let go, and from that instant matter-js is the only author — the stone rocks onto its contact points, the stack leans, and if the combined centre of gravity strays past the base it goes, taking the stones above it. Nothing is scripted and nothing is forgiving. The reading you see is simply the truth of the physics, and the cairn on the shelf is proof that, for one slow count against a rising tide, your hand was still.
The first headless run exposed the worst kind of bug — a silent dead signature. The static base rock was created without a cached radius, so drawing it fed a NaN straight into createLinearGradient and killed the render-and-physics loop on frame one; the page looked perfect and nothing moved. Caught only because the pass drove the physics and asserted that a placed stone actually settles. Fixed the radius and hardened every canvas gradient against non-finite input. On the craft side: the buildable cairn was rising into a flat grey sea, so the horizon was dropped to let stones stack against open sky and a faint headland was added for depth; the centre prompt got a soft sand scrim so it stays legible over the waterline; each stone was given a tone from a five-set granite palette so the beach stopped reading as one grey; and the "in the cairn" test was tightened so stray supply stones on the sand no longer inflate the reading.
Wind is named as a stake but was invisible, so gusts now drift as faint streaks across the shore and the vane and knots stay honest. Keeping a cairn earns a real beat — an expanding twin-ring pulse on the canvas, a soft chime, and a line carried to the shelf. Two second-read details: the distant headland on the horizon, and the tide sheen that visibly climbs and wets the sand as the water rises. Grabbing a stone lifts a lichen highlight ring and wakes the audio. Most importantly the balance itself was tuned: the wind was gentled and the "held" counter made forgiving, so a well-centred cairn survives a gust — a tall stack is still a proud target, but patience is rewarded rather than punished by a random breeze.
At 375 px the centred wordmark collided with the conditions card — a fault the automatic overflow probe missed entirely (scrollWidth stayed 375), caught only by eye. The wordmark was moved clear below the card and the prompt relocated into the open middle band; nav, wordmark and both HUD cards were then confirmed fully inside the viewport with no horizontal overflow. Reduced motion renders a settled cairn on a still shore with the audio muted. Per the Chanel rule, the redundant second foam-edge stroke was removed. Verified end to end in headless Chrome: a cursor drag lifts a stone, a centred stone rests, a badly overhung stone topples to the sand, a steady three-stone cairn is captured to the shelf, page scroll is never hijacked (matter-js's wheel and touch listeners are stripped), and the console stays clean.