Integrate motion and reduced-motion behavior

Motion Primitives deliberately exposes motion behavior instead of imposing a global provider. That makes the consuming application responsible for deciding which animation is informative, decorative, continuous, or input-driven.

Establish a policy

1. Read the user's reduced-motion preference with Motion's useReducedMotion, CSS prefers-reduced-motion, or the application's existing abstraction.
2. Preserve immediate state changes and focus movement when reducing animation. Disable or shorten continuous shimmer, spin, loop, cursor, parallax, and infinite-slider effects.
3. Replace large shared-layout morphs and spring travel with short opacity or instant transitions when motion is not essential to understanding the state.
4. Avoid hiding content until an in-view entrance completes. The reduced-motion path should render the final readable state immediately.

The upstream source at the recorded revision has no shared reduced-motion handling, so verify every installed component rather than assuming the library has already applied the preference.

Interaction checks

Pointer-following components need a keyboard and touch fallback when they carry meaning. Dialogs and popovers must restore focus, close with Escape, and retain their bundled scroll and outside-click behavior. Hover-only effects should not be the only way to reveal required information.

Motion Primitives uses Tailwind dark: variants rather than a theme provider. Test the consumer's actual light and dark tokens because glow, blur, border, and shimmer effects can lose contrast after theme substitution.

Give animated primitives stable layout boundaries

Animated components often depend on geometry that static components can ignore. Set the containing block deliberately before tuning transitions.

• Give carousels, image comparison, progressive blur, infinite sliders, and transition panels an explicit width and a predictable overflow policy.
• Keep measured content mounted while react-use-measure reports its bounds. Sliding Number, Infinite Slider, and Toolbar Expandable need the package in addition to Motion.
• Place dialogs and morphing surfaces in a stacking context that is not clipped by an unintended ancestor. Verify body scroll locking and outside clicks.
• Cursor, magnetic, spotlight, glow, dock, and tilt effects need a sufficiently large pointer target. Confirm touch behavior separately.
• Scroll Progress and In View depend on the correct scroll container. Configure margins and roots to match the application rather than the documentation page.

Most sources import cn from @/lib/utils; create that alias or update the import. Also install lucide-react for Carousel, Dialog, Morphing Dialog, Toolbar Dynamic, and Toolbar Expandable because those upstream registry payloads do not declare their icon imports.