How this site was built
Static pages, one light, one data file.
What this site is made of, the budgets it is held to, and the numbers we measured on this build.
The stack
Hand-written HTML, CSS and JavaScript, with no front-end framework.
- Pages
- Static HTML pages served by Cloudflare Pages. Response headers set a strict Content Security Policy: scripts run only from this site, and the few inline ones only by their hash.
- Type
- Bricolage Grotesque for headings, Instrument Sans for text, IBM Plex Mono for labels and numbers, and Bodoni Moda italic for one accent word. All four are open-source fonts, served from this site.
- Colour
- A near-black ground (#0a0a0a), warm ink (#ecebe7), one signal red (#e2422e) and paper (#ece8e1) for the museum labels. The photographs carry the colour.
- The light
- The home page relights our photograph of The 300 Busts with hand-written WebGL, no library, about 4 KB compressed. A small normal map, made offline from the same photograph, shades the busts as the light passes. It loads after the page, draws only while the light moves and pauses off screen. Phones, Save-Data, reduced motion and Lite get the photograph.
- The kiosk
- Home section 02 runs one of our gallery kiosk apps inside the page: The Handloom Quiz. Its code loads only after the page has loaded and the kiosk is near the screen.
- The Collection
- One data file renders the Collection, its filters and List view, the counts on the home page and the numbers on every case page. Each project whose pages name its technology also carries a thin line drawing over the photograph and, under the frame, a short list of that technology, both taken from its own label or case page. The light reveals them.
Budgets and measured numbers
Each budget is a line the build has to pass before anyone sees it.
| Check | Budget | Measured |
|---|---|---|
| Home, phone LCP | 2.5 s or less | median 1.51 s, worst 1.51 s (5 runs) |
| The Collection, phone LCP | 2.5 s or less | median 1.37 s, worst 1.51 s (5 runs) |
| This page, phone LCP | 2.5 s or less | median 1.57 s, worst 1.73 s (5 runs) |
| Lighthouse performance, phone | 90 or more | home 100, Collection 100, this page 100 (medians) |
| Layout shift (CLS) | 0.05 or less | home 0.002, Collection 0.001, this page 0.007 (medians) |
| Accessibility (axe-core) | 0 violations | 0 on 30 pages at 4 widths |
| Horizontal overflow | 0 pages | 0 at 360, 390, 768 and 1440 px |
| Tap targets too small | 0 | 0 |
| Console errors, failed requests, broken links | 0 | 0, 0, 0 |
| JavaScript for the light | loads after the page | about 4 KB compressed, hand-written WebGL |
| JavaScript for the technology layer | 15 KiB or less compressed | under 1 KiB (it is mostly CSS and inline SVG) |
Measured on 4 November 2026 on the preview of this build (rb-refine-pxh05.redbanana-public.pages.dev). Lighthouse 12.8.2, mobile, simulated throttling (150 ms round trip, 1.6 Mbps, 4x slower CPU), 5 runs per page. axe-core, overflow, tap size, console and link checks ran on every page at 360, 390, 768 and 1440 px wide.
Accessibility choices
The light is the idea of the site, so every way in has its own way to move it, or to do without it.
- Keyboard light
- On the home page, the Move the light button takes the arrow keys. In the Collection the arrow keys walk the light from label to label, Enter opens the case, and the focused frame shows its technology.
- List view
- The whole Collection as one table, for anyone who would rather read than browse.
- A still twin
- With reduced motion, Lite or Save-Data, every frame is lit, no film plays and the home photograph stays still. Show the technology reveals every drawing and list at once.
- Text never dims
- When the light moves, only the images dim. Labels keep full contrast in every state.
- Display settings
- The Settings button in the header: dark or light theme, HD or Lite video, motion on or off, text at 100, 115 or 130 percent, high contrast and underlined links. Your choice is kept on this device.