Vibrations

Haptic feedback patterns for mobile interactions using the Vibration API.

Haptic feedback adds a tactile dimension to your UI. These presets work on Android devices that support the Vibration API. Test them on your phone (iOS does not support this API).

Basic Feedback

// Basic vibrations
navigator.vibrate(10)   // Tap
navigator.vibrate(30)   // Light
navigator.vibrate(50)   // Medium
navigator.vibrate(100)  // Heavy

UI Interactions

// UI Interactions
navigator.vibrate(15)              // Button Press
navigator.vibrate([20, 50, 20])    // Toggle Switch
navigator.vibrate([10, 30, 10, 30, 10])  // Slider Tick
navigator.vibrate([5, 20, 5])      // Selection Change

Success / Confirmation

// Success / Confirmation
navigator.vibrate([30, 50, 50])          // Success
navigator.vibrate([20, 40, 20, 40, 40])  // Task Complete
navigator.vibrate([10, 20, 30, 20, 50])  // Level Up
navigator.vibrate([15, 30, 15])          // Saved

Warnings / Errors

// Warnings / Errors
navigator.vibrate([50, 30, 50])               // Warning
navigator.vibrate([100, 50, 100, 50, 100])    // Error
navigator.vibrate([80, 40, 80])               // Delete Confirm
navigator.vibrate([30, 20, 30, 20, 30, 20, 30])  // Limit Reached

Notifications

// Notifications
navigator.vibrate([100, 100, 100])            // New Message
navigator.vibrate([50, 100, 50, 100, 50])     // Reminder
navigator.vibrate([200, 100, 200])            // Incoming Call
navigator.vibrate([30, 50, 30, 50, 30, 50, 100])  // Mention

Gestures

// Gestures
navigator.vibrate([20, 30, 40])       // Swipe
navigator.vibrate(80)                 // Long Press
navigator.vibrate([10, 10, 10])       // Pull to Refresh
navigator.vibrate([40, 20, 40])       // Drag Drop
navigator.vibrate([15, 15, 15, 15, 15])  // Pinch Zoom

Gaming / Fun

// Gaming / Fun
navigator.vibrate([20, 10, 20, 10, 20, 10, 50])  // Coin Collect
navigator.vibrate([100, 30, 50, 30, 30])         // Explosion
navigator.vibrate([5, 5, 5, 5, 5, 5, 5, 5, 5, 5])  // Machine Gun
navigator.vibrate([200, 50, 200, 50, 200])       // Heartbeat
navigator.vibrate([30, 30, 30, 30, 60, 60, 60, 60, 120])  // Power Up

Usage

// Check if vibration is supported
if ('vibrate' in navigator) {
  navigator.vibrate(50)
}
 
// Pattern: [vibrate, pause, vibrate, pause, ...]
navigator.vibrate([100, 50, 100])  // vibrate 100ms, pause 50ms, vibrate 100ms
 
// Stop vibration
navigator.vibrate(0)
// or
navigator.vibrate([])

Best Practices

Use sparingly — Too much haptic feedback becomes annoying. Reserve it for meaningful interactions.
Keep it subtle — Short vibrations (10-50ms) feel more refined than long ones.
Match intensity to action — Errors warrant stronger feedback than button taps.
Respect user preferences — Some users disable vibration. Don't rely on it for critical feedback.
Test on real devices — Vibration patterns feel different across devices.
Provide fallback — Always check 'vibrate' in navigator before calling.
iOS not supported — Apple does not implement the Vibration API in Safari.