More Ukrainian, please
Our shared Ukraine trip log got a blue-and-gold flag theme this week: a restrained first pass, a 'make it MORE Ukrainian' note from the person actually living there, then a bold second pass — animated, accessible, and rolled across every screen. A two-minute build log, with a clip of the result.
The /ukraine page is a private trip log my partner and I share while she's teaching in Lviv — my half at home, her half on the road. This week it learned to wear the flag: a blue-and-gold theme that animates, very gently, without getting in the way. The clip below is the real, signed-in app — filmed headlessly straight off the running page (more on that pipeline at the end).
Subtle, then not
I shipped a restrained first pass: a hairline flag ribbon and a whisper of blue and gold in the margins. I liked it. Then the only review that counts came back from the person actually in Ukraine — it needs to be MORE Ukrainian. Fair. The second pass turned everything up, and then rolled the same treatment across every sub-page.
What's on screen
- A flag band crowning the header, with a light sheen that sweeps across it
- A blue/gold page wash that slowly breathes behind the content
- An azure → gold progress ring counting down the trip
- A mini-flag nav tab for the active page, plus small flag swatches on each section header
- Flag bars across the hero, call-window, stop, and packing cards
Keeping a flag from breaking the UI
A flag is loud, and the app still has to work. Four rules kept it honest:
- Motion is optional. Everything obeys
prefers-reduced-motionand freezes to a clean static frame. - Identity colors are sacred. Jake-indigo and Gina-rust chips are never recolored, so you can always tell who posted what.
- The wash stays behind. It sits under the content via
isolation: isolateand az-index: -1layer, tinting the page without ever bleeding over the text. - Say it once. The whole treatment is two reusable pieces — a
Cardflag-top option and aFlagSwatch— so adding it to a new card is one prop, not a copy-paste.
How it was filmed
The clip up top isn't a mockup. A headless browser opens the real, running page — even private, signed-in ones, via a throwaway session it mints for itself against a local server — records a few seconds, and ffmpeg cuts it to a loop. That little pipeline is how this reel exists, and it has a home now: the Studio.
Good theming is mostly restraint — but restraint is for my taste. The room you're decorating for gets a vote, and hers said gold.
Get the next one
An occasional note when something genuinely new ships here — essays, free tools, projects. No schedule, no filler, easy out.
Need something like this built?
I design and ship AI tools, full-stack apps, and data pipelines — end to end, to production. Tell me the problem in a sentence; I'll give you an honest read on fit within a day.
Work with me →