Activate Vibration in Web Apps — and Delight Your Users

You can bring life to a web interface not only through animations and sounds. There’s a simple but rarely used trick — vibration. It adds physical feedback and makes interactions feel more natural and emotional.

📱 What is Vibration in the Web?

It’s the ability to trigger vibration feedback on supported devices (typically Android smartphones) using the Vibration API. It’s simple:

navigator.vibrate(200); // vibrate for 200 milliseconds

✨ What Makes It Special?

Makes the interface tangible — especially on mobile,
Adds emotional feedback to actions,
Triggers a wow-effect — since many don’t know it’s possible,
Creates an additional layer of feedback.

🛠 Where to Use It

When opening/closing popups,
On form errors or validation,
On button presses or user actions,
On successful actions (like “Copied!”),
In games or interactive UI elements.

🔧 You Can Customize It

You can define any vibration pattern:

navigator.vibrate([100, 50, 100]); // vibrate-pause-vibrate
navigator.vibrate([300, 100, 300, 100, 100]); // complex pattern

⚠️ What About Support?

Works on most Android devices in Chrome, Edge, Samsung Internet,
iOS does not support the Vibration API in Safari,
Best used as a supplement, not a primary feedback method.

✅ How to Test

Open DevTools → Sensors → “Emulate touch screen” and test it right in your Android browser.

📝 Conclusion

🎯 Vibration is a simple way to make your app feel real and unique. It:

is easy to implement,
improves user experience,
adds emotional value,
pleasantly surprises users.