A relay told through one object
TASUKI is a fictional exhibition about a fictional Seiryo University ekiden team. It is not a real university, race, or company. The site was built by AI, and that is central to the piece: rather than illustrating a finished sports story with generic imagery, it uses code to make the relay’s defining object—the shared sash—carry the experience.
Its signature move is to turn scrolling into a journey along that sash. A crimson line winds through runners, course details, and race scenes, making the interface feel like a handoff passed from one leg to the next. The visitor isn’t just reading about a 217.1-kilometre relay; the page gives that distance a visual thread.
From brief to finished room
The project’s guide describes a three-pass pipeline: build the code-led editorial experience, critique it mercilessly for weak hierarchy or interaction, then have an art director certify the result. The accompanying field guide explains the responsive path, the deliberately slowed handoff, the visual tokens, and the reduced-motion behavior—making the room’s construction part of its story.
The full build notes live in the room’s design guide.
Design teardown: one line, many roles
The sash acts at once as route, progress indicator, and story device. A muted blue-grey palette evokes the light of an early start; pale, breath-like whites keep the text legible, while a warm gold marks the moving knot and other moments of emphasis. Crimson is reserved for the sash and urgent states, giving the central object room to command attention.
Measured against the page
The route isn’t a fixed drawing that only fits one screen. In the browser, the script measures the locations of the hero sash, ten handoff points, and closing anchors, then joins those positions into a responsive SVG path. As the layout changes, the line follows the runners’ hands instead of drifting away from them. Scroll progress reveals the crimson route against a quieter track, while a gold marker moves along the measured path.
One section bends that progress to give a near-failed handoff more tension: the cutoff clock continues to drain while the sash seems to advance very little. Once the relay passes the difficult moment, the mapping releases. It’s an interaction with a narrative purpose, not motion added merely to keep the page busy.
Landscape without stock scenery
The mountain ridges, road, runners, and reflections are made in the browser from SVG and CSS; the guide states that the project uses no generated image assets. Scenes change the runners’ silhouettes and stance to suggest different effort, including an uphill leg, while the Lake Ashi turnaround offers a mist reveal with the outbound and return distances. The visual language stays restrained so these moments support the sash rather than compete with it.
Typography reinforces the split between atmosphere and information. A serif face lends names and headlines an archival, reflective tone; a clean sans serif handles labels, controls, and longer reading. Tabular numerals keep clocks and splits aligned as their values change. Movement is also treated as a design choice: updates are coordinated with animation frames, hidden-page work is paused, and reduced-motion settings remove the moving knot and settle the route into a still state.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 148 of 175, “ekiden”):
EKIDEN — TASUKI: a 10-leg, 217.1 km road relay in the Hakone register (fictional universities). Aesthetic: dawn road and breath; one sash carrying everything. Palette: dawn blue-grey, tasuki crimson, breath white, checkpoint gold. Fonts: shippori-mincho (display), zen-kaku-gothic-new (body). SIGNATURE: THE TASUKI — a crimson sash ribbon runs the ENTIRE page as the scroll thread, passing at each of 10 checkpoints from one runner silhouette to the next (the handoff animation IS the section transition; the sash physically travels your whole visit). At one checkpoint the cutoff clock nearly expires — the sash almost doesn’t make it (held tension the page lets you feel). The mountain 5th leg climbs visually (type leaning into gradient). Per-ku pace mathematics, the anchor’s final straight with crowd-noise type swelling, team-dorm rice-bowl lore, the “morning mist over Lake Ashi” turnaround. Unforgettable: one ribbon, ten runners, your scroll.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/ekiden/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Follow the sash
Visit the TASUKI live room to experience the relay as a scrolling route, then browse all 175 rooms at the exhibition hub.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 138: APEXWERK — The Grip Curriculum
- Room 127: Meridian 843 | The Measured Mile
- Room 136: Courier — Spoke & Signal
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
