Browser-native motion cookbook
Motion Recipes
A visual catalog of modern web animation patterns with live demos, source code and step-by-step implementation recipes.
Featured recipes
Start with these complete examples. Each one includes a live demo, source code and an implementation recipe you can follow from scratch.
-
Shared Element Card to Modal Expand a compact card into an accessible modal using shared-element motion and FLIP measurements.
View recipe -
Scroll Driven Scroll Reveal Reveal elements as they enter the viewport using CSS scroll-driven animations with an IntersectionObserver fallback.
View recipe -
View Transitions View Transition Tabs Switch tab panels smoothly with the View Transitions API and a no-animation fallback for unsupported browsers.
View recipe
Categories
Browse patterns by the technique they rely on. Every recipe is framework-agnostic and built with native browser APIs.
Why browser-native motion?
Modern CSS and JavaScript APIs can deliver fluid, GPU-friendly animation without heavy libraries. Native motion tends to be smaller, more performant and easier to make accessible.
-
No runtime dependency — use CSS, WAAPI and DOM measurements. -
Better performance — animate transform and opacity on the compositor. -
Accessible by default — respect prefers-reduced-motion and focus. -
Progressive enhancement — ship fallbacks for older browsers.
Accessibility-first animation
Motion should never block content or disorient users. Every recipe in this catalog checks reduced motion, keeps keyboard navigation intact and documents focus behavior.
Latest recipes
-
View Transitions Liquid Theme Switch Reveal a new theme with a clip-path circle spreading from the click, then ripple the surface with an SVG turbulence filter like a drop hitting water.
View recipe -
Text Motion Text Reveal Reveal text word by word with staggered motion, preserving accessible reading order and respecting reduced motion.
View recipe -
Microinteractions Spotlight Card A card with a radial glow that follows the cursor, built with CSS custom properties and pointer tracking.
View recipe -
Microinteractions Magnetic Button A button that subtly pulls toward the cursor using pointer tracking and CSS custom properties.
View recipe -
View Transitions View Transition Tabs Switch tab panels smoothly with the View Transitions API and a no-animation fallback for unsupported browsers.
View recipe -
Scroll Driven Scroll Reveal Reveal elements as they enter the viewport using CSS scroll-driven animations with an IntersectionObserver fallback.
View recipe -
Shared Element Card to Modal Expand a compact card into an accessible modal using shared-element motion and FLIP measurements.
View recipe