Build note · Generative Assets
GAIT is a fictional field study of a lean dusk animal that has no motive power of its own. The page has one job: hand its locomotion to you. Its four legs are real inverse-kinematic limbs solved on a single canvas, and the clock that drives the walk is not time — it is the distance you scroll.
Second person: you are the muscle. The animal stands centre-stage on a parallax plain and does nothing until you touch the wheel. Scroll down and it walks forward; scroll up and it retraces its own hoofprints backward; scroll fast and it breaks from a walk into a trot into a run, the plain streaming past its legs. Cadence and stride grow with the speed of your hand, exactly as they do in a living thing. Stop, and the last stride finishes and it settles four-square and waits — for as long as you leave it.
Four values, argued from the subject: last light on an open plain, the dry ground, the dark of the animal, and one warning-red for the eye and the marks.
Archivo is a grotesque built for signage; set expanded and black it reads like the stencil on a field crate — plain, sturdy, unsentimental, right for an animal described in the language of anatomy. The one act of typographic bravery is the hero: GAIT set enormous and solid at line-height .82, so the wordmark itself has the weight the animal is missing. Inter carries every metre, gait name, cadence and stride in the readout, with tabular figures so the numbers don't jitter as they climb.
The hard idea is that nothing is keyed to time. A conventional walk cycle plays a looped clip at some frames-per-second; here there is no clip and no clock. The stride phase of every leg is worldX / strideLength, where worldX is simply your scroll position scaled to metres. Advance the scroll and the phase advances; hold it and the phase holds — a lifted hoof will hang, mid-air, until you move again. Foot targets are computed from that phase alone: floor the phase to get the current stride cycle, plant the hoof under the hip for the stance fraction, then arc it forward through the swing to the next plant, which lands exactly where the following cycle expects it — so the motion is seamless and, crucially, entirely powered by your wheel. Scroll velocity is read only to choose the gait and stretch the stride; distance does all the walking. It is a real animal engine with your hand where the muscles should be.
The first build rendered a table, not a beast: the hip height (176) was set above the total leg length (156), so the IK clamped every limb dead-straight with no knee, and the body was a thin horizontal slab. Reset the proportions so the hip (150) sits below the leg (184) — knees now always bend — and redrew the silhouette with a deep chest, an arched topline, a greyhound belly-tuck, and a neck, ear and eye. Two bugs surfaced only by driving the interaction: a negative-modulo in the ground speckle threw a canvas error the instant you scrolled backward (a radius went negative), and scroll-behavior:smooth was throttling programmatic and keyboard scrolling so the animal could never reach a run. Fixed the modulo and dropped smooth scrolling, since the JS already eases the motion. Confirmed body copy runs on ink, with signal red reserved for the eye and marks.
Enriched the centrepiece where the theme lives: added persistent hoofprints pressed into the plain at every footfall, world-locked exactly like the feet — so the trail is proof that the animal's weight lands where you left it, and scrolling back re-reveals the prints it walks home along. Layered the gait transitions so a per-stride bounce, a bounding back, a flexing spine and a nose-down lean fade in only as the speed climbs, and gave the tail a stride-timed sway. Added the live milepost that lights signal-red as the animal passes each chapter's true distance. Micro-interaction: when you stop, the legs don't freeze mid-air — the lifted hoof reaches down and the animal settles four-square.
Verified in headless Chrome by driving the scroll wheel and asserting on the model: all four gaits reachable, feet lifting and shifting, the body bouncing at speed, and the world decreasing with the direction flag flipping to −1 on scroll-up. At 375 px the field-note cards cap at 90vw and the readout drops its stride cell — no horizontal overflow, wordmark and nav inside the viewport. The reduced-motion path renders a single settled standing frame with no animation loop and the readout at Stand. The canvas caps DPR at 2, rebuilds mileposts on resize, and pauses its loop when the tab is hidden. Removed one ornament (the Chanel rule): the distance was being printed in three places at once — the HUD, the card pills and every milepost — so the plain now labels only the single milepost you are currently passing.