Animations
Motion principles and utility classes for bringing interfaces to life.
Easing Functions
Different velocity curves allow for more natural movement. Hover to see the difference.
Linear
Ease-In
Ease-Out
Ease-In-Out
Entrances
Standard entrance animations for page elements.
Pop In
Used for elements entering the screen, like modals or new content cards.
Click Me
Shake
Used for error states or negative feedback (e.g., incorrect answer).
Error
Pulse
Used for drawing attention to important elements or indicating active states.
Attention
Interactive Hover
A standard hover effect for interactive cards and containers.
Hover Me
Loading Spinners
Indicate background processes.
Micro-interactions
Subtle animations that provide immediate feedback.
Click Heart
Toggle Switch
Skeleton Loading
Placeholder animations for content that is loading.
Flip Card
3D flip transition for revealing content.
Hover Me
