The Royal Mews imagines a falconry house founded in 1487 but still awake before sunrise today. The visual premise joins two surfaces that belong to the practice: the muted green-grey of a hunting field and the ruled, handled parchment of a keeper’s ledger. Instead of presenting history behind glass, the page behaves like a day in the field. Lady Rook launches, circles the record, answers a lure, and—if called clearly—returns to the glove.
Technique 01A bird with intent
The fixed peregrine is a layered inline SVG in index.html. Separate primaries, coverts, breast, malar stripe, eye, tail, and talons make animation possible without an image request. In main.js, loop() steers current velocity toward a desired velocity rather than snapping between coordinates. updateOrbitTarget() reads the nearest .flight-zone and adds slow sine/cosine orbits. Holding the lure changes the state to pursuit, raises maximum speed, and aims at pointer coordinates; holding Space or Enter provides the same ritual from a keyboard. Seven transform-only wake marks follow smoothed history points. Banking comes from vertical velocity, while flying, stooping, and landed classes change the wing state. The final recall targets #recall-glove and releases three CSS feathers in a ruffle.
Technique 02Atmosphere without images
The fields are entirely CSS. Layered linear and radial gradients make the dawn wash; clipped polygons become distant ridges; blurred ellipses hang as mist. A fixed SVG turbulence data URI supplies fine paper grain, while quiet grid lines suggest a ruled field book. Depth comes from keeping the foreground nearly black-green, the horizon low-contrast, and the sun broad rather than bright. On small screens the composition crops deliberately around the hand and seal instead of merely shrinking. The sealed dispatch adds a tactile pause: setDispatch() in main.js updates native button state while CSS opens the waxed folio and reveals a hand-drawn SVG route without fetching imagery.
Technique 03Heraldry that answers
The crest workshop uses native radio controls, so it remains keyboard-operable. The change handler swaps shield classes for Vert, Gules, or Sable, changes each supporter’s data-supporter, and writes a live English blazon. Supporter silhouettes are CSS clip-path polygons—stag, hound, and heron—arranged around an inline SVG shield. The gold falcon charge and ribbon bind the choices into one heraldic object.
Technique 04Type & tincture
Cinzel carries crests, ranks, navigation, and great titles; its sharpened capitals make the house feel institutional. Crimson Pro handles narrative, field notes, and italics with a warmer, inked rhythm. Both are served locally. Display text is tightly tracked at large sizes, while tiny capitals are opened up for legibility.
Technique 05Motion with manners
One IntersectionObserver stages a paced reveal language, with local index values giving ledger rows a readable cadence. The flight loop clamps its time step, caches the bird’s dimensions outside animation frames, and mutates transforms only. The visibility handler cancels the animation frame completely while the document is hidden, then resumes with a fresh clock. The reduced-motion query removes the fixed bird, trail, and lure, reveals content immediately, and disables animated transitions. The narrative therefore remains complete without requiring motion.