Make Your Web App Vibrate with the Vibration API

Add haptic feedback and micro-interactions to your web apps using just a few lines of JavaScript.

Introduction

Most developers know how to make a website look good, but how about making it feel good?

That’s where the Vibration API comes in. It’s one of those small, underrated browser features that lets your web app trigger haptic feedback, short vibrations that create a tactile connection between users and your UI.

Imagine a mobile web app that buzzes when a message arrives, a to-do app that vibrates on completion, or a game that reacts to hits and collisions. All of that is possible in pure JavaScript, no native wrapper, no mobile SDK, no magic.

Let’s explore how to bring your web app to life through subtle, satisfying vibrations.

1. What Is the Vibration API?

The Vibration API lets web apps control the vibration hardware on supported devices (mainly smartphones and tablets).

Its main method is simple:

navigator.vibrate(pattern);

Where pattern Can be:

A number (vibrate for X milliseconds), or
An array of numbers (a sequence of on/off durations).

That’s it, one line of code that literally shakes things up.

2. A One-Line Demo

Try this in your browser console (on a mobile device):

navigator.vibrate(200);

If your device supports it, you’ll feel a short buzz for 200 milliseconds of vibration.

That single call already covers most simple use cases, like acknowledging an action or providing feedback.

3. Vibrate in Patterns

You can make complex vibration sequences using an array.

navigator.vibrate([100, 50, 200, 50, 300]);

This means:

Vibrate 100ms
Pause 50ms
Vibrate 200ms
Pause 50ms
Vibrate 300ms

You can use this pattern to represent different types of events, like message notifications vs. warnings vs. success actions.

4. Use Cases That Actually Make Sense

a. Confirming a Button Action

<button id="submit">Submit</button>

<script>
  document.getElementById('submit').addEventListener('click', () => {
    navigator.vibrate(100);
    alert('Form submitted!');
  });
</script>

The small buzz gives users a subtle “click” feedback like a native app.

b. Notifying the User of an Error

function showError() {
  navigator.vibrate([100, 50, 100, 50, 100]); // short triple buzz
  alert('Something went wrong!');
}

Vibration makes the error feel different, reinforcing the visual cue.

c. Making Games Feel Real

function onPlayerHit() {
  navigator.vibrate([200, 100, 200]);
}

Combine vibrations with sound or visuals to create immersive web game feedback.

d. Adding Haptics to a To-Do App

When a user completes a task:

function completeTask() {
  navigator.vibrate(150);
  console.log('Task completed!');
}

It’s small but surprisingly satisfying.

5. Stopping Vibrations

If you need to stop an ongoing vibration (for long or repeating patterns):

navigator.vibrate(0);

This immediately cancels all pending vibrations.

6. Browser Support

Here’s what works as of now:

Note:
Even on supported devices, the browser may ignore vibrations if:

The device is in silent/do-not-disturb mode.
The tab isn’t active.
The user hasn’t interacted with the page yet (security restriction).

So always tie vibration to a user action (like a click).

7. Combine with Other Web APIs

The Vibration API becomes more powerful when paired with other features:

a. With Notifications API

Give haptic feedback when a push notification appears.

new Notification('New message received!');
navigator.vibrate([200, 100, 200]);

b. With the Battery API

Vibrate differently if the battery is low.

navigator.getBattery().then(battery => {
  if (battery.level < 0.2) navigator.vibrate([300, 100, 300]);
});

c. With Gamepad API

Vibrate when the player loses or wins.

These small touches make browser experiences feel more “native.”

8. Accessibility and User Experience Tips

Don’t overuse it. Too much vibration feels gimmicky or annoying.
Offer a setting to disable haptics for accessibility and battery reasons.
Keep it short. Under 500ms per buzz usually feels best.
Pair with visual cues. Haptics should enhance, not replace, UI feedback.

9. Testing on Real Devices

The API won’t work in most desktop browsers (there’s no vibration motor).
To test:

Use Chrome or Firefox on Android.
Serve your page via HTTPS (required for some browsers).
Trigger vibration from a user gesture (click, touch).

If you’re using Chrome DevTools Device Mode, it won’t physically vibrate your laptop; only real phones will.

10. Full Example: Haptic Feedback Demo

<h2>Vibration API Demo</h2>
<button id="short">Short Buzz</button>
<button id="long">Long Buzz</button>
<button id="pattern">Pattern Buzz</button>

<script>
  document.getElementById('short').addEventListener('click', () => navigator.vibrate(100));
  document.getElementById('long').addEventListener('click', () => navigator.vibrate(500));
  document.getElementById('pattern').addEventListener('click', () => navigator.vibrate([100, 50, 200, 50, 300]));
</script>

Open this on your phone and try each button; you’ll feel the difference.

Conclusion

The Vibration API is tiny, but it adds a huge layer of interactivity to mobile web apps.
With a single line of code, you can make your UI feel more alive, tactile, and connected to user actions.

It’s not about gimmicks, it’s about feedback.

If you’re building mobile-first web apps, give your users a small buzz of delight.

Pro Tip: Pair vibration with sound and color transitions for multi-sensory feedback; it creates a surprisingly “native” feel on mobile browsers.

Call to Action

Have you tried using the Vibration API in your app?
Share your use case or demo in the comments and bookmark this post for your next mobile-friendly web project.

Skill Stuff