This Site
- Client
- Self-initiated
- Role
- Designer / Developer
- Platform
- Next.js + Payload CMS
- Year
- 2026
(Overview)
My own site, built around one idea: a single variable font that reacts to the cursor, the scroll and every change of page.
Writing up your own site is a bit like reviewing your own cooking, so I've kept this to what it does, how it's built and the numbers.
- UI design
- Motion system
- Next.js build
- CMS structure
(The type)
Archivo has a width axis as well as weight, so one font can go from narrow and heavy to wide and light.
Display type rests at width 70 and weight 800. Near the cursor, titles widen towards 125 and thin towards 260, then ease back. In the hero, the pull reaches 420 pixels from the cursor.
Scroll reveals and page-change titles use the same move, starting wide and light and settling.
Wider letters make longer lines, so the site notes where each line breaks at rest and holds those breaks while it stretches.
(The engine)
The only motion dependency is Lenis, for the smooth scroll. Everything else is one frame loop and the browser's own animation API.
One loop is easier to control and cheaper to run. It never reads the layout mid-frame, writes mostly transforms, opacity and font settings, and skips letters that are off screen and changes too small to see.
It runs on elapsed time rather than frame counts, so a 120Hz screen moves at the same speed as a 60Hz one. There's a test for that.
The bits that move
First load
A counter runs to 100, then the accent box around the w in my name fills the screen and lands on the logo. About 2.7 seconds, once a visit, and a click speeds it up.
Page changes
Accent bars cover the page while the next title builds letter by letter. About 1.7 seconds all in, down from 2.8.
Cursor
A ring that fills with a word (View, Open, Next) over links, and turns to an outline on small buttons so it never covers their words.
Hover card
A card follows the pointer down the work list, leaning with your speed and cross-fading between covers.
Statement
A pinned paragraph that lights up word by word as you scroll. Screen readers get it whole.
Easter eggs
Type "tea". Or click the logo five times, quickly, and watch the accent change across the whole site.
(Accessibility)
Motion is optional here. With reduced motion switched on, the site keeps the design and drops the movement.
No smooth scroll, intro or stretching. The statement arrives fully lit, links change page without the cover, the normal cursor stays and videos wait for a click.
Split headings keep one plain copy, so screen readers get words, not letters. Nothing stays hidden if JavaScript never starts, and the faint grey on form labels and placeholders now passes contrast at 4.92:1, up from 2.78:1.
(The CMS)
Pages and case studies are built from sections in Payload, so a new case study, this one included, is a draft rather than a deploy.
There are 34 section types, 19 of them for case studies. Each keeps its content apart from its layout and style settings, and has a thumbnail in the picker.
It started from my own Payload boilerplate, which brought autosaving drafts and click-to-edit live preview. Motion switches off in preview, so nothing moves while I edit.
Archivo, Next.js, Payload CMS, Lenis, Postgres, Vercel
How it came together
The design files were exported on 23 September. The build took 50 commits, from that evening to the early hours of the 27th.
- 01 / 23 Sep
Foundations
Content model, sections, the motion engine from the prototype, deploy set-up.
- 02 / 24 Sep
Publishing
Share cards, image sizes, the title line lock, bulk editing, extra sections.
- 03 / 25 Sep
Search and audit
Structured data, a sitemap, audit fixes, motion timed by the clock.
- 04 / 26 Sep
Fixes and analytics
A Safari fix, GA4 behind consent, transitions that survive a reload.
- 05 / 27 Sep
Refinement
A shorter intro with a skip, faster transitions, an accessibility pass.
(By the numbers)
- 100
Lighthouse performance, desktop
- 0.02
Cumulative layout shift, desktop
- 19.5KB
Motion and consent code, compressed
- 329
Automated tests
(Performance)
It's a lot of movement for not much code.
The Lighthouse figures are the homepage on desktop, measured on 27 September; on a throttled phone it scored between 85 and 94 across three runs, with the largest element painting in 3 to 3.6 seconds. The homepage ships under 180KB of compressed JavaScript, and nothing third-party loads before you accept cookies.
The design had letters breathing on touch screens too. I kept them still, because a stretch there can push a word onto the next line.
So next: a touch version that behaves, and a faster phone score.