01 / Intent
The object is
the interface.
TASUKI treats an ekiden as a physical memory system. Ten fictional Seiryo University runners carry one crimson sash over 217.1 kilometres, from Tokyo’s cold traffic to the Lake Ashi turnaround and home. The visitor does not inspect a sports dashboard; scrolling occupies the course. A single object becomes route, progress, tension, and witness.
The blue-grey field comes from road light before sunrise. Crimson is spent only on the living sash and urgent states. Breath white carries reading text and mist; checkpoint gold marks time, dawn, and the moving tassel. Every mountain, runner, road, bowl, clock, and reflection is browser-made. Wing VI provides no generated imagery, and the constraint is stated proudly rather than disguised.
02 / Geometry
A route measured
from real hands.
Measured, then joined
In main.js, getAnchors() gathers the hero sash, ten .handoff-dot elements, and three post-race anchors. buildPath() measures their live rectangles, converts them to coordinates inside #main, and joins them with vertical cubic Bézier curves. The same path therefore lands on a hand at 390, 834, and 1440 pixels.
Distance with resistance
rawPageProgress() maps scroll to total path length. getPointAtLength() moves the gold knot while strokeDashoffset reveals crimson over the grey route owed. Near leg seven, tensionMap() compresses progress to fourteen percent of its normal span. The cutoff clock drains while the sash barely advances; release into leg eight catches the mapping back up. Narrative hesitation is mathematical, not a timed decoration.
03 / Road weather
Cold air,
warm effort.
The opening landscape is layered inline SVG: two mountain ridges, a cut road, and a dash-offset center line. CSS silhouettes use rounded geometry, but their poses change leg by leg so the relay does not repeat one mannequin. Leg five lengthens, darkens, and rotates its heading uphill against an elevation fill. At Lake Ashi, setupMistReveal() turns an accessible button into a tactile turnaround: a clipped field opens through the cloud to expose the 107.5 km outbound and 109.6 km homeward distances. The anchor leg lets crowd words swell behind the runner without becoming literal sound.
Breath, lake mist, road marks, and rice steam animate only transforms, opacity, or SVG stroke offsets. Scroll work is coalesced through requestAnimationFrame; visibilitychange prevents updates while hidden. Reduced-motion removes the moving knot, completes the route, and collapses every loop to a still composition.
04 / Material
Palette & voice.
#748895
#C6263F
#F2F5EF
#F0BF4F
襷は記憶を運ぶ
Shippori Mincho gives headlines, names, and race testimony an archival voice. Zen Kaku Gothic New handles data, labels, controls, and long reading. Display tracking tightens optically as scale rises; labels open into wider tracking, while clocks and splits use tabular lining numerals so every changing value holds its measure.
05 / Prompt
Reproduce the
principle.
Give an AI agent one narrative object that can serve as both content and interface. Specify its route, interruption, responsive anchors, and reduced-motion behavior. Require live DOM measurement instead of a desktop-only drawing, and require cultural or mathematical supporting scenes that deepen the object rather than competing with it.