I · Concept
A score treated as a crime scene
The site refuses the neutral language of chess software. The Immortal Game is not presented as a database entry, but as evidence recovered from a smoky London tournament room. Felt green provides the dominant field; mahogany contains the board; brass behaves like instrumentation; ivory suggests both chessmen and old paper. Annotation red appears only when an idea becomes dangerous.
The narrative moves through six distinct rooms: a theatrical title, a documentary prologue, the replay cabinet, a psychological clock, paired text portraits, and the sacrifice ledger. These changes in scale prevent the long score from feeling like one interface repeated. The story’s emotional hinge is the queen sacrifice: the page darkens and holds one sentence alone before allowing the reply.
II · Technique
A board with memory
main.js contains the historical game as 45 half-moves. buildBoard() creates the 64 squares and the complete opening position. Each piece has a stable identity—never merely a glyph on a square—so createState(step) can replay captures and movement from the beginning at any scroll position. updateStep() translates those persistent SVG pieces across the board with weighted easing and rebuilds the two capture rails.
The scroll handler does almost no work itself. It schedules updateReplay() through one requestAnimationFrame, converts the sticky chapter’s travel into progress, and asks weightedStep() for the active ply. Move 22.Qf6+ receives 4.4 times the normal scroll duration. That is the “held breath”: a narrative pause encoded in the mapping, not an autoplay delay the reader must wait through.
The evaluation well uses the move’s authored score to change fill height while a subtle CSS animation makes its ivory field breathe. drawVariation() draws an outlined ghost piece and dashed vector when the variation seal is opened. animateCapture() sends a temporary SVG witness from the taken square to the correct rail; jumpToPly() makes the printed score a second way into the replay. The clock chapter is also playable: updateClockDispatch() turns four authored moments into mechanical dial states whenever the reader strikes its brass crown. No image files, chess library, or network request is involved.
III · Palette & type
The material vocabulary
Playfair Display carries headlines and dramatic commentary, with tight tracking and deliberately compressed line-height. Crimson Pro gives essays a period voice without sacrificing legibility. Chivo Mono labels moves, folios, clock plates and technical metadata. The three self-hosted stylesheets are linked from /assets/fonts/.
IV · Reproduce this
Prompt for a playable history
Ask an AI frontend agent for “a documentary experience built around one exact historical sequence, with a persistent stateful object controlled by scroll.” Specify a material palette, three typographic roles, an emotional hinge that changes the pacing, and a requirement that every visual be drawn in HTML, CSS or SVG. Then insist on stable object identities, keyboard-accessible optional detail, responsive board geometry, reduced-motion behavior, and screenshot review at phone, tablet and desktop widths. The essential instruction is not “make it cinematic.” It is: make the interaction explain the history.