Furlong imagines the King’s Furlong as a living racing archive—part aristocratic race card, part bookmaker’s ledger, part optical instrument. Ceremony meets measurement; beautiful type meets evidence that is precise, mechanical and slightly uncanny.
The slit-camera strip
The hero’s “photograph” is drawn entirely in main.js. makeStrip() builds a high-DPI canvas with sepia turf, four elongated runners and deterministic grain. Narrow source slices are displaced and repeated as they are copied, producing the vertical drag of slit-camera time instead of an ordinary frozen scene.
animateStrip() exposes the image column by column and counts toward 1,746 recorded instants. placeCursor() converts pointer or keyboard position into a signed offset from the post. The new optical test beneath the explanation uses setTimeFold() to collapse the broad history ribbon into the single stationary slit that made it. The requestAnimationFrame loop pauses when the tab is hidden; reduced motion resolves the strip immediately.
Silks as a rule system
The stud book is generated, not illustrated. buildSilks() combines a named metal, a named colour, cap and sleeves with hoops, sash, quarters or chevrons. The generator enforces the invented heraldic rule that metal must meet colour, so randomness has authorship.
Each shirt is clipped from CSS polygons; its device is a conic, linear or repeating gradient stored in --silk-pattern. Pattern buttons and the wheel turn the section into a miniature identity system, with a live announcement for screen-reader users.
Measured motion
The 24-stride instrument maps a range input to yards, elapsed time and cadence in updateStride(). Pace ribbons are clipped polygons rather than stock charts; choosing a runner isolates its expenditure against the field.
The going laboratory turns vocabulary into material. updateGoing() changes penetration data and --wetness; radial soil layers, hoofprint weight, saturation and compression move from firm rebound to heavy memory. Motion always explains a measurement.
Palette & type
Turf #043526 dominates. Rail cream #f4e9c9, inquiry red #b82c34 and silk gold #e5bd23 arrive as sharp officiating marks. Sepia bridges the digital and historical registers.
EB Garamond italic
Self-hosted Playfair Display carries compressed, high-contrast headlines; EB Garamond gives body copy and timings the cadence of a race calendar. Every horse, texture, graph and timing mark is canvas, SVG or CSS—proudly code-only for the Velocity Wing.
Reproduce this
Prompt an AI agent to build a code-only editorial experience around one counterintuitive optical principle. Ask it to teach that principle through a working canvas instrument before expanding into related generative systems. Specify a dominant heritage colour, two sharp sporting accents, a literary display serif, a readable book serif, convincing fictional data, tactile CSS texture, keyboard-operable controls, responsive asymmetric compositions, reduced-motion behavior and screenshot critique at phone, tablet and desktop widths. Insist that every interaction reveal meaning, not merely decorate the page.