Home page
The cinematic hero, the collections grid, the stats band and the newsletter CTA — the page that puts the most previously-unused section components to work.
The site itself, and the only page that spends a full viewport making its case — it gets the cinematic hero: footage, a scrim, a scanline film, and a ripple that follows the pointer through the film.
The cinematic hero
Footage behind a scrim, a scanline film over it, and a pointer-tracked ripple through the film — .hero-band-full + .hero-band__scan, documented in full on the Hero page. This shape used to be forty lines of inline style inside travel/build.py; it is now shell.cine_hero(), which is why the homepage can have it too.
A creator's site, built from tokens.
.hero-band-full · .hero-band__scan[data-ripple] — at 16rem here; the real page runs it at 100dvh
The marquee
One run, duplicated and aria-hidden so the loop is seamless without a screen reader hearing every collection twice. Pauses on hover; the foundation stops it under reduced motion. The one place a scrolling strip is honest is a list of nouns.
.marquee · .marquee__run ×2 · .marquee-slow
The announcement
.alert — tone carries an icon as well as a colour, because colour is never alone in this system. Five tones, all previously unused.
.alert-signal · -success · -info · -warning · -danger
Window chrome
"Containers that say what a thing IS before you read it." All three were defined in 12-frame.css and used by nothing — a design system that ships a browser mockup and never shows a page in one is leaving the obvious demo on the table. The editor's gutter is drawn from the line count, so nothing numbers itself.
.win.win-browser · .win__dots-color · .win-browser__url
2
3
4
:root {
--accent: #6d4aff;
}
.win-term (with the blinking block cursor) · .win-code + the .tok-* roles
The annotation
A hand-drawn circle round the words that matter. One trick: an SVG stroke with stroke-dasharray equal to its own length, animating dashoffset to zero — drawn rather than faded, so the eye reads a gesture instead of an effect. pathLength="100" normalises every path so one rule drives all of them.
Almost monochrome, so one colour can mean something.
.an.an-circle — the svg is a CHILD of the span, never a sibling
The collections grid
One card per collection, not one card per post — the same .card everything else on the site uses.
Six countries, thirty-one posts and the receipts.
Learn the system, in order — six courses, 132 lessons.
Notes on building things, and what broke.
Five shows, thirty-two episodes, in order.
Updates, when there are any.
Four repos, each with its own build log.
Sixty-two uploads, newest first.
Post series with a stepper — four and counting.
The exact wording, so the good version has a permalink.
CSS and JS copy-pasted between projects often enough.
What is actually on the desk and in the dock.
Every one-off page on the site, in one list.
.grid-3 · .card
The viewfinder
Four corners, on the one thing that is literally footage. Note the foundation's own warning: .vf and .pattern both draw with ::before, so they can never share an element — the pattern goes on a child, which is what shell.vf() does.
.vf.vf-signal + .vf__tr/.vf__bl — two corners are pseudo-elements, two are real spans
Lately, as numbers
The numbers rather than a claim about them — .stats, one surface with hairlines rather than four cards. Defined in 32-stats.css and, until these pages, used by nothing.
.stats · .stat__value · .stat__note[data-trend=up]
The ask, at the end
One per page, near the end, earning its contrast by being the only inverse band in view. The whole 33-cta.css file — five variants — was unused before these pages.
One email when something is worth it.
Forty-one issues of practice behind each one.
No spam. Unsubscribe any time.
.cta + .cta-newsletter__form — the band with a form in it