METHOD
How this page is built
The site argues by doing the work rather than describing it. What is running, where the difficulty sat and what was traded for the rest are all set out here, so the standard can be judged before you commit.
Scroll as timeline
There are no sections here, only a tall track supplying the distance and a stage held to the viewport. One value between 0 and 1 drives the film roll, the copy, the type weight, the ground tone and every readout. Scrolling stays native rather than captured, so the keyboard, the trackpad, touch, the scrollbar and a screen reader all keep working. The width slider holds the width until a real scroll releases it and the timeline takes the value back, so the two inputs never disagree. Nothing in the scene needs a pointer, so the page stays usable on the reader's own device and settings.
The typeface
Quinfinity is a variable face built for this page: x-height raised, lowercase widened, capitals narrowed, each by a fixed ratio so the whole set moves together. A continuous weight axis in one file lets the page treat weight as a live value rather than a set of loaded styles, so the headline braces heavier as the measure tightens. Re-proportioning a variable face is the exacting part: the outline data holds only the default weight, so scaling the outlines alone lets every other weight drift back. The deltas have to be scaled by the same factors, phantom points included, and a composite letter must never be decomposed or the variation table stops compiling. The face is drawn from Hanken Grotesk under the SIL Open Font License, credited at the foot of every page. A face made this way comes with the build rather than as a licence to renew, and one file carries the whole range, so the weight the layout asks for costs no second download.
What the measurements caught
Four defects reached the running page, none visible in the code: each appeared only once the page was measured under load. A byte counter read zero, because that number is always zero for cached files, and a row labelled 360 was laying out at 198. A per band timer printed 0.0 with nothing re-solving behind it, so the readout was removed rather than left printing an empty number. At 220px the page reported zero horizontal overflow while the nav and readouts sat past the right edge: the root clips, so the document total reads clean. Every element rect is now walked against the viewport, the film roll excepted because it bleeds off by design, so nothing else is cut off at the reader's width.
Contrast
Small text on this site is held to 7 to 1 rather than the 4.5 the guideline asks for. A grey that clears 7 to 1 on white can fall short on the darkest band of the same page: the grey in use here measured 6.24 there and was darkened until it cleared the floor. The accent could not reach that floor at label size on any ground here, measuring 5.05 to 5.94. It left the text entirely and lives on fills, the progress rule and the state dot. The headline's own figure is measured live in the table at the foot of the home page. The colour transition is switched off before that sample is taken, because a colour caught mid fade is not the colour on the page. Both figures above are what the check returned before the correction, so the smallest text here clears a higher floor than the guideline sets.
Motion
At rest the film strip sways rather than runs: eighteen pixels, once every eight seconds. Motion that plays on its own takes the scroll's job, whereas a sway on the spot shows that the scroll is what moves the scene. Scrolling takes over at once, on a doubled strip taken modulo half its height, so it loops with no seam and no drift, each frame on its own phase. A six pixel drift on an image 2400 pixels wide was present in the arithmetic and invisible on screen, and the amplitudes were raised to 26 across and 20 down. This layer is decoration rather than instrumentation, and it is scoped to that role deliberately: it accumulates no error, so nothing needs resetting while the page is open.
With parts switched off
Each control removes or replaces something the page relies on, and the page has to hold after it. Reduced motion stops the loop rather than shortening it, and one frame loop owns all of it, so it pauses when the tab is hidden too. With the webfont failing, the layout holds on a metric matched fallback. Below 48rem wide or 34rem tall the stage unsticks and the scene becomes an ordinary page, because locked to the viewport it was clipping up to 183px of its own content. Each of those is still a working page, so the site holds on the reader's device and settings.
The column fits
The stage is exactly one screen tall, so the reading column has a hard height budget. What it needs depends on the headline's line count, the copy's line count and the specimen at once, and those interact differently at every width and height. On a 1920 by 900 window the column required 823px against 634 available, and the specimen sat on top of the readouts. The column measures itself and scales the display type until the content fits, leaving the body copy at the size it was set. The text being read is the one thing that must not move. When that is still not enough, the specimen is dropped rather than the headline. The fit is settled by measurement at each width and height, so the layout answers the window in front of the reader rather than a size chosen in advance.
The page grades itself
The table at the foot of the home page runs seven checks. Among them are horizontal overflow, headline contrast against the backdrop painted behind it, relayout time under a width change, and a 45 character word. Each figure is computed on your device, at your window size, at the moment the page is read. Every row must be able to print a failure, and the two that could not were rewritten until they could. The checks run again on a change of width, text size, webfont, motion or theme, so a pass describes the page in front of the reader.