Bounce Effect
Realistic bounce animations with physics simulation, customizable elasticity, and natural motion effects
Pro Features
Unlock advanced capabilities with the Pro version
Physics Simulation
Realistic bounce with gravity
Multiple Triggers
Hover, click, auto, scroll
5 Directions
Up, down, left, right, all
Bounce Control
Count, distance, duration
Squash & Stretch
Cartoon-like deformation
Rotation Support
Rotate during bounce
Installation
Install via CLI
npx moonui-cli@latest add bounce-effectUsage
Examples
Direction Variants
Control bounce direction: up, down, left, right for different visual effects
Bounce Up
Bounce Down
Bounce Left
Bounce Right
Trigger Types
Choose when bounce animation activates: hover, click, or auto on mount
Bounce Intensity
Control number of bounces (1-4) for different levels of energy
1 Bounce
Subtle
2 Bounces
Moderate
3 Bounces
Energetic
4 Bounces
Very Bouncy
Distance Control
Adjust bounce distance from subtle (10px) to dramatic (50px)
10px
Minimal
20px
Small
30px
Medium
50px
Large
Duration Variations
Control animation speed from quick (300ms) to slow (1200ms)
300ms
Very Fast
600ms
Fast
900ms
Moderate
1200ms
Slow
Interactive Buttons
Real-world button examples with bounce effects
Card Bounce Interactions
Add bounce effects to cards for engaging hover states
Feature Card
Hover for bounce
Click Card
Click for animation
All Directions
Bounces everywhere
Icon Animations
Apply bounce effects to icons for playful UI elements