Motion vocabulary
An interactive glossary of UI animation, 24 live demos across 8 categories. Every term gets a working demo, a definition, a replay control, and the code behind it.
A rebuild of the animations.dev vocabulary page, presented the way 21st.dev presents components: instead of reading about spring physics or FLIP or staggering, you watch each one run, replay it, and flip the card over to read the exact code. Conceptual terms that aren't demos, performance, principles, live in a reference glossary alongside.
The core is a typed registry: each term binds a definition to a demo component to its code snippet, so adding a term is one new entry plus one demo file. A generic card shell handles preview, definition, replay, and the code toggle for every term identically. Category filtering happens through sticky pills, and the grid reflows with a layout animation: the site demonstrates its own vocabulary.
Rebuilding someone else's taxonomy is a fast way to actually learn it. I couldn't ship a demo of "anticipation" without understanding it well enough to fake it in 40 lines. And the unglamorous parts matter: every demo respects prefers-reduced-motion, because a motion glossary that ignores accessibility settings would be missing the point.