design-motion-principles

Wrap the conditional modal in AnimatePresence and use Framer Motion initial, animate, and exit props with opacity and scale. A duration around 200ms with cubic-bezier(0.16, 1, 0.3, 1) easing gives a fast, polished result.

Run the audit mode, which scans for motion gaps and anti-patterns like pulsing indicators, hover-scale on non-pressable elements, and excessive stagger. It outputs an HTML report by default or terminal markdown with the --terminal flag.

Common AI slop patterns include pulsing loading indicators everywhere, hover-scale on every element, stagger delays over 50ms, blur-based entrances, bouncy springs on destructive actions, and animating static page headers on mount.

Yes. Use the useReducedMotion hook to set transition duration to zero when the user prefers reduced motion. In CSS, wrap animations in a @media (prefers-reduced-motion: reduce) block that collapses durations.

Animate only transform and opacity, which are GPU-accelerated. Animating width, height, or top/left triggers layout reflow. Use will-change only during the animation and remove it afterward.

Avoid animation on high-frequency utility interactions, destructive actions, and static content that renders on page load. The Emil Kowalski lens asks whether the element should animate at all before choosing an easing or duration.