Showcase
Home · Services · About · Contact
Common code + GSAP, Lenis, motion, WebGL hero
[Work / 01.1 · Case study · 2026]
My own site, redesigned.Motion where it shows the work. About 8 KB of JavaScript where you read.
◆ machine · generated · 17 tokens · 1320 ms
You're using it right now, so every number on this page can be checked.
- Stack
- Astro 7
- Motion
- GSAP · WebGL
- Access
- WCAG 2.1 AA
- Reading JS
- ≈ 8 KB
It worked. It didn't feel like mine.
I built the previous version in 2024. It worked, but it didn't feel like mine: no motion design, an interface that didn't represent me, and little to read beyond the pages that sell. It also said nothing about the AI work I do with agencies now.
Ambitious motion is a cost every page pays.
I wanted a compile intro, WebGL contour lines and page transitions through the monogram, without someone reading an article downloading any of it.
Two kinds of page.
Showcase pages load GSAP, Lenis and the WebGL hero. Reading pages load only what every page needs: theme, ⌘K and View Transitions. The alternative was one animated site, end to end.
I also tried complex, illustration-style animations for the About page, and dropped them: they risked eating resources without adding anything.
Reading
Blog · Articles · Legal · 404
Common code: theme, ⌘K, View Transitions
- 01
Static by default
Astro 7 and Tailwind 4. Every page is HTML generated at build time, with no framework running in the browser.
- 02
Motion on demand
GSAP and Lenis load only on showcase pages. The WebGL contour lines in the hero are a shader of about 2 KB.
- 03
Transitions
Native View Transitions. The monogram sheet loads when the pointer or the focus reaches a link, not before.
- 04
The blueprint layer
A grid behind every page (⌥G), ⌘K for everything else, a blueprint cursor, and a ruler in the header that follows your reading with no JavaScript.
- 05
Accessible first
WCAG 2.1 AA. With reduced motion there is no intro and no custom cursor, and the content is visible at once. Everything works from the keyboard.
| Page type | JavaScript | Lighthouse |
|---|---|---|
| Showcase | ≈ 63 KB | 98 · 100 · 96 · 100 |
| Reading | ≈ 8 KB | 99 · 100 · 100 · 100 |
- axe
- 0 violations on 26 pages
- Keyboard
- Every page, every control
- Reduced motion
- No intro, no cursor, content at once
- Reflow
- No horizontal scroll at 320 px