Get sports gear delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A racecourse, folded into time
Room 147 is an AI-built exhibition piece: an imagined racing archive that stages its own history through the language of race cards, bookmaker’s ledgers and optical instruments. The King’s Furlong is a fictional archive, not a real racing institution, and its claim to an origin in 1711 is part of the conceit.
Its defining move is an unusual photograph of a race. Instead of freezing runners in one instant, a slit-camera image turns horizontal distance into elapsed time. Horses appear as stretched traces, making the passing of a race visible as a shape. That single idea gives the room its purpose: this is not just a themed sports page, but an interactive explanation of how a sporting moment can be measured and seen differently.
As an affiliate, we earn on qualifying purchases.
Reading the image, measuring the run
The hero image is drawn in code on a high-resolution canvas. A script constructs a sepia-toned strip with turf, runners and controlled grain, then builds the slit-camera effect by copying narrow slices and shifting them as it goes. The image reveals itself progressively, counting through 1,746 recorded instants. Move the pointer—or use a keyboard position—and a cursor translates your location into an offset from the finish post. A follow-up optical test reduces the broad ribbon of race history to the narrow, fixed slit that produced it.
The palette keeps the historical mood legible rather than dusty. Deep turf green anchors the page; cream provides the paper-like ground, while red and gold function as crisp officiating marks. Sepia connects the digital spectacle to the archive fiction. Playfair Display supplies the compressed drama of the headlines, while EB Garamond gives the supporting copy and timings a quieter, bookish rhythm. Both typefaces are self-hosted.
Beyond the central image, the room treats racing detail as a set of working systems:
- Silks: A generator combines named colours and metals with caps, sleeves and patterns. Its made-up heraldic rule—that a metal must meet a colour—gives the combinations structure. CSS shapes and gradients render each shirt, while controls let visitors explore the patterns.
- Stride: A 24-stride instrument connects a range control to distance, elapsed time and cadence. Clipped polygon ribbons show pace, and selecting a runner isolates that horse’s effort against the field.
- Going: A ground-condition control changes penetration values and the appearance of the surface. Layered soil, hoofprint weight and compression make the shift from firm turf to heavy ground feel material as well as numerical.
These details follow the same design rule as the hero: motion should clarify a sporting measurement, not merely add activity. The controls are keyboard-operable, and pattern changes are announced for screen-reader users. Animation pauses when the tab is hidden and resolves immediately for visitors who prefer reduced motion. Canvas, SVG and CSS create the room’s horses, textures, diagrams and timing marks without relying on stock illustrations.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition room
The room follows a three-pass pipeline: build the experience around one optical principle, critique it mercilessly across the page and its interactions, then have an art director certify the result. The accompanying guide explains the implementation and invites readers to reproduce the approach: make a working instrument teach the idea first, then let related visual systems grow from it.
The full build notes live in the room’s design guide.
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 147 of 175, “furlong”):
FURLONG — THE KING’S FURLONG: heritage flat racing on turf since 1711 (fictional course, historical register). Aesthetic: racing silks and slit-camera time; turf aristocracy with bookmaker ink. Palette: turf green, silk primaries (invented stables), photo-finish sepia, rail white. Fonts: playfair-display (display), eb-garamond (body). SIGNATURE: PHOTO FINISH — the hero is a slit-camera photo-finish strip that assembles live: horses stretched in TIME not space (each pixel column one instant — the caption teaches you to read it, and suddenly the distortion means something). A silks-pattern generator builds livery from heraldic rules (hoops, sashes, quartered, chevrons) for the invented stud book. The furlong measured in strides (24 of them), a pace-map ribbon (front-runner vs closer), the stewards’ inquiry drama, going-report vocabulary (firm… soft… heavy) as a texture study. Unforgettable: learning to read time as a picture.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/furlong/
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.
racing track visualization software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Step into the furlong
Visit the live room to test the time-folding race strip, explore the generated silks and compare how different ground conditions change the measurement. Then browse all 175 rooms at the hub for more AI-built exhibition pieces, each exploring a different visual idea.
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.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
