Bring Your Web App to Life with Subtle Vibrations on Mobile

Add tactile feedback to your web app using the Vibration API, a tiny feature that makes a big difference.

Introduction

There’s something magical about feeling your app respond to you.

A soft buzz when a task completes. A subtle vibration when a message fails.
Those little touches make apps feel alive, polished, and “native.”

What most developers don’t realize is that you can do this in your web app too, using just a single line of JavaScript.

It’s called the Vibration API, and it’s built right into modern mobile browsers.

Let’s explore how to use it to bring your mobile web app to life with small, satisfying vibrations.

1. What Is the Vibration API?

The Vibration API allows your web app to trigger short vibrations on supported devices (mainly Android).

You access it through:

navigator.vibrate(durationOrPattern);

The argument can be:

A number → milliseconds to vibrate (e.g., navigator.vibrate(200)), or
An array of numbers → defining vibration and pause patterns.

This API is incredibly lightweight and requires no permissions or libraries, just a secure context (HTTPS) and a supporting device.

2. The Simplest Example: Feel a Tap

Here’s how you can make a button “feel” more interactive:

<button id="vibe">Tap Me</button>

<script>
  const btn = document.getElementById('vibe');
  btn.addEventListener('click', () => {
    navigator.vibrate(100); // short vibration (100ms)
    alert('You tapped the button!');
  });
</script>

Try that on an Android device using Chrome, and you’ll feel a gentle vibration each time you tap.

It’s such a small change, but it instantly makes your UI more tactile and responsive.

3. Patterned Vibrations for Different Feedback

You can also define patterns to represent specific events.

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

That creates:

A 100ms vibration
A 50ms pause
A 200ms vibration

You can use this to signal different types of feedback: success, error, notifications, etc.

Example: Success vs. Error Patterns

<button id="success">✅ Success</button>
<button id="error">❌ Error</button>

<script>
  document.getElementById('success').addEventListener('click', () => {
    navigator.vibrate(150); // single soft buzz
  });
  document.getElementById('error').addEventListener('click', () => {
    navigator.vibrate([100, 50, 100, 50, 100]); // triple buzz pattern
  });
</script>

These subtle differences make your app feel intuitive users can sense what happened without even looking.

4. Where Vibration Feedback Feels Right

The best haptics don’t call attention to themselves; they reinforce what the user is doing.

Here are some great places to use them:

The key is that subtlety haptics should feel natural, not intrusive.

5. Stopping or Canceling Vibrations

If you need to stop a long vibration or pattern mid-way, call:

navigator.vibrate(0);

That instantly cancels any ongoing vibration.

6. Browser Support

The Vibration API is supported mainly on mobile browsers; it’s meant for touch devices.

Use it as a progressive enhancement; it silently does nothing on unsupported platforms.

7. Real Example: Adding Haptics to a To-Do App

Here’s how you could add haptic feedback when checking off items:

<ul id="tasks">
  <li>✅ Buy groceries</li>
  <li>✅ Finish project</li>
  <li>✅ Call mom</li>
</ul>

<script>
  document.querySelectorAll('#tasks li').forEach(item => {
    item.addEventListener('click', () => {
      item.classList.toggle('done');
      navigator.vibrate(100);
    });
  });
</script>

<style>
  .done {
    text-decoration: line-through;
    opacity: 0.5;
  }
</style>

Each time a user completes a task, they feel a small vibration,

a subtle dopamine boost that makes interaction satisfying.

8. Pairing Vibration with Notifications

You can combine it with the Notifications API for richer alerts:

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

Or inside a PWA service worker:

self.registration.showNotification('New Alert', {
  body: 'Tap to open',
  vibrate: [200, 100, 200, 100, 300],
});

That’s how native apps handle alerts, and now your web app can too.

9. UX Guidelines for Using Vibration

Done right, haptic feedback enhances usability.
Done wrong, it feels spammy or cheap.

Here’s how to get it right:

✅ Use it sparingly: Focus on meaningful events (actions, errors, confirmations).
✅ Keep it short: 50–200ms is ideal.
✅ Respect user preferences: Offer a “Disable Haptics” toggle if your app vibrates often.
✅ Pair with visuals: Combine with color, animation, or sound.
❌ Avoid repetition: Constant buzzing can drain battery or irritate users.

10. Quick Playground Demo

Here’s a compact playground you can test on your phone:

<h3>Vibration Playground</h3>
<button onclick="navigator.vibrate(100)">Short Buzz</button>
<button onclick="navigator.vibrate([100, 50, 200])">Pattern Buzz</button>
<button onclick="navigator.vibrate(0)">Stop</button>

Try it on Android Chrome, you’ll instantly feel the web come alive.

Conclusion

The Vibration API is one of the most overlooked tools in web development.
It’s tiny, easy to use, and gives your mobile web app that extra sense of polish, the kind that users subconsciously associate with quality.

A little buzz goes a long way.

Pro Tip: Combine vibrations with sound effects or animations for multi-sensory feedback that feels delightful and natural.

Call to Action

Would you ever add subtle haptic feedback to your web app?
Share your thoughts (or creative use cases) in the comments and bookmark this post for your next mobile-first project.

Skill Stuff