Project notes
About Motion Recipes
Motion Recipes is a small, practical reference for building polished web animation without turning motion into a dependency or an accessibility problem.
What you will find here
Each entry combines a working demo, the relevant HTML, CSS and TypeScript, browser support notes, performance guidance and a step-by-step recipe. The examples are framework-agnostic so you can use the underlying technique in any application.
Project principles
-
Browser native
Every recipe favors modern CSS, Web Animations and DOM APIs over heavy runtime dependencies.
-
Accessible by default
Examples preserve keyboard navigation, document reduced-motion behavior and include practical fallbacks.
-
Built to learn from
Live demos sit beside focused source code and an implementation guide you can adapt to your own stack.
How to use the catalog
Start with the live interaction, check its reduced-motion behavior, then copy only the pieces your interface needs. Treat timings and distances as a baseline and tune them to the surrounding product rather than preserving the demo verbatim.