𝗣𝗿𝗲𝗺𝗶𝘂𝗺 𝗠𝗶𝗰𝗿𝗼-𝗶𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝟭𝟵
Bad animations feel cheap. Stuttering numbers and lagging bars happen when React re-renders every frame. The main thread fails to keep up.
Use the Motion library. Import from motion/react.
One idea fixes most jank: MotionValue. It tracks data outside of React. It updates the DOM directly via transform or opacity. React does not re-render.
Three smooth patterns for you:
- Reading Progress: Use useScroll and useSpring. This creates a bar with momentum.
- Count-up Stats: Use useInView and animate. Use tabular-nums in CSS to stop text from jumping.
- Nav Pills: Use layoutId. This glides the active state between items.
Accessibility is a design requirement. Some users have motion sensitivity. Follow these rules:
- Keep scroll-reflective motion. It provides honest feedback.
- Remove autonomous motion. Numbers should snap to the final value.
- Use useReducedMotion in JS.
- Use motion-safe in Tailwind.
Respect OS settings. Do not build your own toggle.
Three keys to a polished UI:
- Animate transforms and opacity.
- Use MotionValues for frame-by-frame changes.
- Treat reduced motion as a real design state.
Source: https://dev.to/markyu/premium-micro-interactions-in-react-19-without-the-jank-230b