Hover Button
Scale, glow, and highlight transitions on hover.
Animations that bring
interfaces to life
Small motion details improve clarity, add feedback, and make digital products feel more responsive and polished
Micro-interactions create feedback, guidance, and emotional response
Like Button
Click feedback with scale and particle burst
Toggle Switch
A compact binary control with spring motion
Input Focus
Focus state with glow and underline feedback.
Card Hover Tilt
A subtle 3D tilt effect that follows the cursor
Cursor Magnet
The button slightly follows the cursor position
Motion specifications help define interaction behavior consistently
| Interaction | Duration | Easing | Trigger |
|---|---|---|---|
| Hover Button | 200ms | ease-out | hover |
| Like Button | 300ms | spring | click |
| Toggle Switch | 250ms | spring | click |
| Input Focus | 300ms | ease-in-out | focus |
| Card Tilt | 150ms | spring | mousemove |
| Cursor Magnet | 350ms | spring | mousemove |
Lottie animations are useful for polished, lightweight motion assets
Lottie is often used for icons, loading states, onboarding visuals, and playful UI feedback. It gives designers more control over complex motion while keeping implementation lightweight
Real Lottie example
This example shows how a real JSON-based animation can be embedded directly inside the interface using lottie-react.
What it is
Lottie renders exported JSON animation data from tools like After Effects. It is ideal for crisp, scalable interface motion.
Where to use it
Use it in onboarding, empty states, icon feedback, loaders, success messages, and small branded interactions.
What to remember
Keep files small, avoid overusing complex scenes, and use Lottie where vector motion gives more value than CSS or simple transforms.