How this site works
The site's own operating characteristics, held to the standard the research is held to: what its colours claim, how mechanism is drawn, what moves and why, and what it measures.
Colour is a claim
- Blue marks a result that held.
- Grey marks a control or baseline.
- Red marks something that did not hold.
- Amber marks work in progress that has not been claimed.
Grey and amber fail AA for text on this ground, so they are used only as marks beside a text label. There is no fifth semantic colour. Gates, staging and guards are drawn, never coloured.
Mechanism is drawn
- step
- gate: a deterministic rule or a named person must clear it
- irreversible step
Every shipped system carries its lifecycle in this grammar, so the point where a human or a rule must clear the next step is visible without reading the prose.
What moves
- The manifold. Behind every page, a field of about ninety points in a slow three-dimensional drift, joined where they come close; the lit ones are the site's own signal colour. It turns with time, tilts with scroll and leans toward the pointer. Written for the owner's earlier build and carried forward (assets/js/bg.js).
- The weather. The home hero sits under one of nine backdrops, a different one on each visit: the probe field (a grid of points scored against a drifting boundary that collapses onto the ROC curve of R1 as you scroll), six shaders lifted from react-bits, and two Three.js scenes. Each is documented on its own page in the lab, with its weight.
- Sections. Each home section has its own quiet canvas that runs only while it is on screen: drifting points behind "Now", beams of light behind the results, a perspective floor behind the systems, a rising particle field behind the measured numbers. Titles arrive word by word; the result numerals resolve from glyph noise; the lifecycle figures march one step at a time and pulse red on the irreversible step; the measured numbers count once.
- Cards and cursor. Cards are glass over the manifold; on a fine pointer they tilt a few degrees toward it and a spotlight follows. The cursor is a dot and a ring; the ring names what it is over (VISIT, EXT, GET, VIEW, EXPLORE). Over the ROC figure it reads the plane back: false-positive rate, true-positive rate, and the corner where R1 sits.
- Feedback and continuity. Navigation pills and chips move by at most a few pixels toward the pointer. A hairline at the top of the page fills with scroll. The theme opens as a circle from its toggle; pages cross-fade and rise between navigations where the browser supports view transitions.
- Reduced motion. With prefers-reduced-motion set, every canvas draws one still frame, nothing loops, smooth scrolling is off, and every section is visible at its final state. On touch devices the cursor, tilt and spotlight never run and native scrolling is used.
Measured
| Metric | Value | How |
|---|---|---|
| Largest Contentful Paint | 2.1 s | Lighthouse, mobile, simulated 4G (150 ms RTT, 1.6 Mbps), 4× CPU slowdown. Home page. Budgets: LCP under 2.5 s, CLS under 0.1. |
| Cumulative Layout Shift | 0 | |
| JavaScript, gzipped | 68.0 KB | The five base scripts (gsap, ScrollTrigger, lenis, field, motion), gzipped and summed at build time. The home page's own target is 90 KB and the gate holds these five to it; lab pages add their effect on top and state what it weighs. |
Stack
- Static HTML generated by one script, build.js, which is also the single source of every number and sentence on the site.
- Type: Bricolage Grotesque for names and titles, IBM Plex Sans for reading, IBM Plex Mono for numerals only. All three self-hosted under the SIL Open Font License.
- Motion: GSAP 3.15 with ScrollTrigger (standard no-charge licence) and Lenis 1.3 (MIT), served from this origin. No CDN, no analytics, no cookies, no third-party request of any kind.
- Every asset and its terms are listed in LICENCES.md.