Back to Dictionary
Action Feedback
●●○Customize
Haptic Bounce
A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.
Live Demo
What It Is
A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.
✓When to Use
- Primary call-to-action buttons
- Interactive cards or app icons
- When you want the UI to feel lively and responsive
✕When NOT to Use
- Destructive actions
- Hyperlinks in text blocks
Configuration Tips
- 01Scale down to around 0.95 or 0.97 - not too much or it feels broken
- 02Use a spring physics curve with high stiffness (400) and moderate damping (30)
You've Seen It In
SpotifyApple iOSDuolingo
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Make this button bounce like a spring when pressed and released.
Code Example (Tailwind CSS)
export function HapticBounceDemo() {}