A field guide to modern interface craft.
Interfaces are alive and manipulable.
Motif teaches modern interface craft by example of itself. Every concept is a demo you can touch, code that runs on first paste, and a prompt to rebuild it with an LLM. The button on the right is real — press it, reshape it, copy it.
transform: scale(1.08, 0.92); border-radius: 14px; background: oklch(0.48 0.19 353); transition: spring(stiffness 600, damping 12);
One loop, every lesson
The same rhythm runs through every concept, so learning a technique and actually shipping it are the same motion.
1Read
a tight explanation, no padding
2See it live
a demo you can actually touch
3Copy
code that runs on first paste
4Make it yours
change the parameters, feel the difference
5Reproduce with an LLM
a prompt to recreate or adapt it
6Ship
accessible and fast by default
Start reading
The Foundations track is complete — the vocabulary and process behind every interface.
UI vs UX, clearly
UI is what a person sees and operates; UX is the whole experience of reaching their goal. You design both, on purpose.
The UX process end to end
A lightweight path from a fuzzy problem to a shipped feature: discover, define, develop, deliver — diverging then converging, twice.
User research basics
Match the question to the method: what people say vs what they do, exploring vs evaluating — and how many participants is enough.
The curriculum
All tracksFoundations
Visual craft
Design systems & tokens
Motion & micro-interactions
Web animation engines
The modern web platform
3D & graphics for UI
Accessibility & inclusive design
Psychology & conversion
Brand & product strategy
Generative & agentic UI
Platform internals & delivery
Built to be the best demo of its own lessons
Free and open. Code under MIT, content under CC BY 4.0. Accessible to 320px, keyboard-operable, and respectful of reduced motion — because that’s the craft.