Motion provider
One per site, in the root layout. LazyMotion loads the DOM feature set once, strict mode throws on any motion.* descendant, and reducedMotion follows the OS setting live.
npx shadcn add @gc/motion-providerThis page renders under the provider.
Press M and watch the travel collapse to a crossfade.
Every primitive here is an m.* component animated by the one feature bundle the provider loaded. Press M: the provider switches to reducedMotion="always" and the card's travel collapses to a crossfade. Copy that must paint first stays outside a mount-triggered Reveal: the hidden pose is server-rendered, so anything inside it waits for hydration.
Craft score
Measured on b38543d. All scores
- Perf mobile
- 96
- Perf desktop
- 100
- CLS
- 0
- LCP mobile
- 2771 ms
- Gzipped source
- 0.5 kB
- Reduced motion
- Pass