motion-base-ui

What problem does it solve?

This Skill simplifies the process of adding animations to Base UI components using the Motion library, ensuring smooth and performant visual feedback in React applications.

Core Features & Use Cases

• Seamless Integration: Apply animations to various Base UI components like Menus, Dialogs, and Tooltips.
• Exit Animations: Implement graceful exit animations for components that manage their own rendering.
• Performance Optimization: Utilize willChange and hardware acceleration for fluid animations.
• Use Case: When building a modal dialog with Base UI, use this skill to add a fade-in and fade-out effect using Motion.

Quick Start

Import motion and AnimatePresence from motion/react and use the render prop with motion components for Base UI elements.