Spectacular, and still green on mobile.
| Framework | Astro, static output. Interactive parts are small scripts, so pages ship almost no JavaScript by default. |
|---|---|
| Hosting | Vercel, static files on the edge, immutable caching for hashed assets. |
| Content | Content collections, in MDX. Each project file holds its coordinates, which seed its patterns. |
| Patterns | patterns-toolkit, seeded generators rendered to inline SVG at build time. Only the card reveal, Enquire and the seed demo below run pattern code in the browser. |
| Imagery | AI-generated renders, served as AVIF and WebP, each resting on a build-time dithered placeholder. |
| Motion | GSAP + ScrollTrigger, for the hero lift only; the section draw is a few lines of plain scroll code. Every effect has a reduced-motion version. |
| Transitions | Native view transitions, between pages; site signatures morph by name. |
| 3D | Three.js, on the home hero only, loaded after first paint, over an SVG poster. |
| Fonts | Three variable families, self-hosted and cut to the characters and weights the site uses: 113 KB for all four files. |
"Now" is the worst page in the latest Lighthouse run, below.
Measured on every merge.
| Page | Perf. | A11y | Best pr. | SEO | LCP | CLS | TBT |
|---|---|---|---|---|---|---|---|
| / | 97 | 100 | 100 | 100 | 2.43 s | 0.000 | 0 ms |
| /work/ | 97 | 100 | 100 | 100 | 2.50 s | 0.000 | 0 ms |
| /work/kalsoy-cliff-house/ | 98 | 100 | 100 | 100 | 2.27 s | 0.000 | 0 ms |
| /studio/ | 98 | 100 | 100 | 100 | 2.34 s | 0.000 | 0 ms |
| /enquire/ | 99 | 100 | 100 | 100 | 1.96 s | 0.000 | 45 ms |
Lighthouse CI · commit f0351ac · 31 Oct 2026. Mobile, simulated slow 4G, median of 3 runs. After every merge the CI workflow writes these numbers into the repo, and they go live with the next deploy. The simulation is stricter than a real phone on the live site.
Two numbers in, a whole site out.
Every pattern here grows from a latitude and longitude. Change them by a ten-thousandth of a degree, about 11 m on the ground, and you get a different seed, a different ground and a different screen.
- Scale
- 2.30
- Octaves
- 4
- Ridges
- yes
- Tilt
- -0.02, 0.03
The first ground is Newlyn, Cornwall: the tide gauge every British height is measured from.
Drawn with patterns-toolkit.
The contours, dither and hairlines on this site come from patterns-toolkit, Mark Thurman's generative pattern library. Every pattern is seeded only from a site's coordinates, so the same ground draws the same way every time.
| Contours | a seeded noise field traced by marching squares: every site signature, the hero and the share images |
|---|---|
| Dither | 1-bit ordered dither: the image placeholders and the page-transition dissolve |
| Hairlines and grain | crop marks, dimension lines, scale bar, north point and the paper grain |
| Cells | the building-skin screens are new for Datum, grown from the same seeds. |