TIL the web has a Vibration API for haptic feedback!

The Basics

Usage is straightforward:

// Single vibration for 200ms
navigator.vibrate(200);

// Pattern: vibrate, pause, vibrate, pause, vibrate
navigator.vibrate([200, 100, 200, 100, 400]);

// Stop any ongoing vibration
navigator.vibrate(0);

That's it. The array pattern alternates between vibration duration and pause duration (in milliseconds). Returns true if the device supports it, false otherwise.

The Catch (for now)

Browser support is... limited. Basically Chrome on Android. No Safari, no iOS, no Firefox on mobile. The MDN docs have the full compatibility table, and it's a short read.

I'd love to see this get wider adoption. Haptic feedback done right is genuinely delightful (if you've used an Apple Watch, you may know what I'm talking about. The subtle taps for notifications, the satisfying click when you rotate the crown, the different patterns that communicate without you even looking at the screen!!! (This one is my favorite) That's the kind of thoughtful interaction design I want to see more of on the web.

A Handy Hook

Found a great write-up from Luciano Felix that includes a useVibration React hook and digs into why we should be thinking more about haptic feedback in web experiences. Worth a read if you're interested in going beyond just visual feedback.