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 →