A cabinet, not a product page
The Writing Automaton treats the browser as an eighteenth-century demonstration cabinet. Visitors are not asked to read about an ingenious machine and imagine it; they choose its thought, wind it, and see the mechanism transmit motion all the way to the nib. The visual argument is deliberately theatrical: oxblood velvet isolates the porcelain child, walnut frames the exposed works, and brass catches the light at every functional joint. Cream paper sections interrupt the darkness like opened ledger leaves.
The page’s rhythm moves from wonder to evidence. First comes a grand reveal, then the working machine, its inventory, the winding ritual, the unsettling gaze, and finally a provenance ledger. That structure gives the invented museum content enough weight to feel handled, catalogued and demonstrated over centuries.
The mechanics are the show
The main plate is one layered SVG in index.html. Wood, brass, porcelain, velvet and paper are built from gradients and an SVG paper pattern. In main.js, makeScript() converts each phrase into strokes from a compact single-line alphabet. Every stroke receives its own pressure-like width and a length measured with getTotalLength(). During animationFrame(), changing strokeDashoffset reveals those strokes in sequence.
The pen does not merely hover over an animation. getPointAtLength() locates the live ink point, then setArmAt() solves a two-link inverse-kinematics triangle for elbow and wrist. The hand, quill, porcelain limbs and brass links all follow that solution. moveMechanism() gives the X, Y and Z followers distinct cadences, while the opening phases tension the spring and send the nib to the inkwell before the first letter. A visitor name is rebuilt through the same alphabet, so Cam III is genuinely generated rather than swapped artwork.
Atmosphere comes from layered radial gradients, a fixed fractal-noise grain, double rules, deep shadows and restrained metallic highlights in styles.css. The opening uses one staggered arrival sequence; motion-reduction preferences remove it and shorten the writing cycle. The requestAnimationFrame loop also stops whenever the document is hidden. In the final ledger, togglePrivateLeaf() turns the wax seal into a working latch: a concealed folio opens and its miniature cam writes the recovered workshop note.
Workshop materials
Cormorant Garamond supplies the high-contrast, engraved display voice; EB Garamond carries labels, notes and longer reading. Both are self-hosted from the exhibition font library. Display sizes are tightly tracked and often italicized in brass to create a quiet change of register.
Prompt for an ambitious reconstruction
Ask an AI agent to build “a self-contained historical instrument website where the causal mechanism is visible.” Specify the period, 3 tactile materials, a dominant dark field and 1 rare accent. Require a real interaction whose output visibly travels through several linked components—not a decorative loop. Ask for a procedural SVG stroke system, inverse-kinematics arm motion, a user-generated inscription, reduced-motion behavior and responsive compositions at phone, tablet and desktop widths. Finally, require museum-grade invented captions and a visual screenshot critique.
Make the explanation and the spectacle the same thing.