Lab
Self-contained experiments, each a small project poking at a single UI element or interaction. All live below.
Base
Portfolio, notes, and a lab of live experiments.
02
Aurora Page Transition
This site's own page transition, running live: a miniature three-page site with its own nav, and the real aurora riser (the same component and stylesheet the route transition uses, not a copy) covering the moment its content changes. Switch between the two gestures: the rise that shipped, and the horizontal sweep it replaced.
- Stack
- React · CSS animations · Container queries
- Fonts
- Geist Mono · Geist Sans
- Colors
1/3
Next.js 16.0.10 (stale)Turbopack
Build Error
Module not found: Can't resolve 'work/life-balance'
./app/lab/priorities.ts (3:1)
Module not found: Can't resolve 'work/life-balance'
1 |
import { focus } from 'deep-work' 2 |
import { rest } from 'good-sleep'> 3 |
import { balance } from 'work/life-balance' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Server Component:
./app/lab/priorities.ts
./app/page.tsx
01
Dev Overlay
A faithful rebuild of the Next.js / Turbopack build-error overlay (paginator, status pill, syntax-highlighted code frame and caret), themed with the site's tokens and gently subverted: the errors are developer in-jokes, not real crashes.
- Stack
- React · sugar-high
- Fonts
- Geist Mono · Geist Sans
- Colors