Blog
Hello, Motif
A free, open field guide to modern interface craft — learn it, see it run, copy the code, make it yours, and rebuild it with an LLM. Here's what it is and why.
Most of what's hard about building good interfaces isn't a secret. It's spread across a hundred blog posts, a dozen specs, a few brilliant talks, and a lot of hard-won muscle memory. Motif is an attempt to gather the craft of modern UI into one place you can actually learn from — and to do it in a way that respects both your time and an honest mental model of how the web really works.
What it is
Motif is a free, open field guide to modern interface craft. It's organized as twelve tracks — foundations, visual craft, design systems, motion, web animation, the 2026 platform, graphics, accessibility, psychology, brand, generative UI, and platform internals — built from small, self-contained lessons.
Every lesson follows the same loop:
- Learn it in plain language, trade-offs included.
- See it run in a live, interactive demo you drive with real controls.
- Copy the code, exactly as shown.
- Make it yours in an editable playground.
- Reproduce it with an LLM using a precise, reusable prompt.
That last step is the one we care about most. Models are already writing interfaces. The goal here isn't to compete with that — it's to help you understand what they build, so you can commission UI deliberately instead of accepting whatever looks done.
The principles under it
A few commitments shape everything on the site:
- Accessibility is a requirement, not a tier. Every demo is checked for serious accessibility violations as part of how it ships. Keyboard operability, reduced-motion support, and color-independent meaning aren't optional extras.
- Honesty about trade-offs. There's no single right answer for animation engines, design systems, or rendering layers. The lessons name the costs, not just the wins.
- Privacy by default. When the site remembers what you've read or saved, that lives only in your browser. No accounts, no tracking, nothing collected.
- Open. The content is openly licensed and the whole thing is built to be copied, forked, and shipped.
Where it's going
The full twelve-track curriculum is live, and we're now building the connective tissue around it: a filterable library with private read/saved progress, a playground that takes a whole lesson's examples at once, and the guides and posts you're reading now. Showcases and richer media are next.
If you're new, start with how to use Motif, then pick a track. Build it, copy it, ship it.