How this site is built
The site makes the same argument as the work: it should look considered and hold up underneath. This is the Engine view of the site itself.
Your visit, measured live
Read from your own browser's Performance APIs as this page loaded. Nothing is tracked or sent anywhere.
- Largest Contentful Paint
- measuring
- Cumulative Layout Shift
- 0.000
- Transferred
- measuring
- JavaScript
- measuring
- Requests
- measuring
Lighthouse
Lighthouse mobile profile with applied throttling, served compressed as in production, median of three runs. Measured on 9 November 2026.
Home
Case study
This page
Stack
- Next.js
- App Router, exported as static HTML for GitHub Pages.
- TypeScript
- Strict mode. Content lives in typed files, never hard-coded in components.
- Tailwind CSS v4
- Design tokens as CSS variables, light and dark from one set of components.
- Motion
- Reveals, the hero lens, the work deck and every interactive state.
- GSAP ScrollTrigger
- Only for the pinned horizontal process section.
- Lenis
- Smooth scrolling, driven by the same frame loop as Motion.
- Geist
- Sans and Mono, self-hosted with no layout shift.
Principles
Motion with a job
Every animation explains something, gives feedback or tells the story in order. Nothing loops just to look busy.
Reduced motion respected
With reduced motion on, smooth scrolling, pinning, the lens and the count-ups switch off and the content is all still there.
Animate the cheap properties
Only transform and opacity animate, driven by motion values outside React renders. No scroll event listeners.
Accessible by default
Real headings, labelled form fields, visible focus, a skip link, keyboard-reachable everything and AA contrast in both themes.
Real numbers only
The measurements in the hero lens, the diagrams and this page come from the live page or the work itself.