| name | m3-motion |
| description | Apply Material Design 3 motion (transitions, easings, durations, springs) in React with @aphrody-code/m3-motion. Use when asked to "animate with M3 motion", "M3 transition pattern", "fade-through / shared-axis / container transform", "stagger a list", "M3 easing/duration tokens", or "animate an md-* enter/exit".
|
m3-motion
@aphrody-code/m3-motion provides the M3 motion system for React, built on Motion
(ex-Framer Motion). It encodes the M3 transition patterns, easing/duration tokens
and springs so animations match the spec instead of being hand-tuned.
Tokens
import { m3Easings, m3Durations, m3Springs } from "@aphrody-code/m3-motion";
Transition components
| Component | M3 pattern | Use for |
|---|
M3Fade | fade | simple enter/exit |
M3FadeThrough | fade-through | switching unrelated content (keyed by stateKey) |
M3SharedAxis | shared-axis x / y / z | sequential / hierarchical navigation |
M3ContainerTransform | container transform | a card/element expanding into a detail surface |
M3ListStagger + M3ListStaggerItem | list stagger | a list/grid revealing its items |
M3Collapse | collapse | expand/collapse height (accordion, details) |
M3Transition | any (via pattern prop) | one component, pattern="fade-through" | "shared-axis-x" | … |
import { M3FadeThrough, M3Transition } from "@aphrody-code/m3-motion";
<M3FadeThrough stateKey={tab}>{panel}</M3FadeThrough>
<M3Transition pattern="shared-axis-x" show={open}>
{content}
</M3Transition>
Imperative animation
import { useM3Animate } from "@aphrody-code/m3-motion";
const [scope, animate] = useM3Animate();
Notes
- These wrap
motion/react; props extend HTMLMotionProps<"div">, so style,
className, layout props pass through.
- Pair with
@aphrody-code/m3-react transition wrappers (Fade/Grow/Zoom/
Slide/Collapse) which cover the MUI transition surface; m3-motion is the
richer, pattern-level layer.
- Respect
prefers-reduced-motion: gate emphasized transitions for accessibility.
