Skip to main content
WebHaptics includes 11 built-in presets inspired by iOS haptic feedback patterns.

​
Notification Presets

Based on UINotificationFeedbackGenerator from iOS.

​
success

Ascending double-tap indicating success. 
await haptics.trigger('success')
Pattern: 
[
  { duration: 30, intensity: 0.5 },
  { delay: 60, duration: 40, intensity: 1 }
]
​
Feel
string
Light tap followed by a stronger tap, creating an upward momentum that feels positive and confirming.

​
warning

Two taps with hesitation indicating a warning. 
await haptics.trigger('warning')
Pattern: 
[
  { duration: 40, intensity: 0.8 },
  { delay: 100, duration: 40, intensity: 0.6 }
]
​
Feel
string
Strong tap, longer pause, then a softer tap. The hesitation creates uncertainty, signaling caution.

​
error

Three rapid harsh taps indicating an error. 
await haptics.trigger('error')
Pattern: 
[
  { duration: 40, intensity: 0.9 },
  { delay: 40, duration: 40, intensity: 0.9 },
  { delay: 40, duration: 40, intensity: 0.9 }
]
​
Feel
string
Three sharp, rapid taps with short gaps. The intensity and repetition convey urgency and alert the user to a problem.

​
Impact Presets

Based on UIImpactFeedbackGenerator from iOS.

​
light

Single light tap indicating a minor impact. 
await haptics.trigger('light')
Pattern: 
[
  { duration: 15, intensity: 0.4 }
]
​
Feel
string
Brief, gentle tap. Perfect for subtle interactions like hovering or minor state changes.
​
Use Cases
string
Hover effects, checkbox toggles, subtle UI feedback

​
medium

Moderate tap for standard interactions. 
await haptics.trigger('medium')
Pattern: 
[
  { duration: 25, intensity: 0.7 }
]
​
Feel
string
Balanced tap with moderate strength. The default preset for most interactions.
​
Use Cases
string
Button clicks, navigation, standard UI interactions

​
heavy

Strong tap for significant interactions. 
await haptics.trigger('heavy')
Pattern: 
[
  { duration: 35, intensity: 1 }
]
​
Feel
string
Strong, pronounced tap with full intensity. Conveys importance and weight.
​
Use Cases
string
Confirmations, deletions, important actions, drag-and-drop

​
soft

Soft, cushioned tap with a rounded feel. 
await haptics.trigger('soft')
Pattern: 
[
  { duration: 40, intensity: 0.5 }
]
​
Feel
string
Longer duration but moderate intensity, creating a soft, cushioned sensation.
​
Use Cases
string
Gentle notifications, soft transitions, relaxed interactions

​
rigid

Hard, crisp tap with a precise feel. 
await haptics.trigger('rigid')
Pattern: 
[
  { duration: 10, intensity: 1 }
]
​
Feel
string
Very short but full intensity, creating a sharp, precise sensation.
​
Use Cases
string
Precise selections, snapping to positions, mechanical interactions

​
Selection Preset

Based on UISelectionFeedbackGenerator from iOS.

​
selection

Subtle tap for selection changes. 
await haptics.trigger('selection')
Pattern: 
[
  { duration: 8, intensity: 0.3 }
]
​
Feel
string
Very brief, gentle tap. Almost imperceptible but provides subtle feedback.
​
Use Cases
string
Picker scrolling, carousel navigation, selection changes in lists

​
Custom Presets

Additional patterns for common use cases.

​
nudge

Two quick taps with a pause, indicating a nudge or reminder. 
await haptics.trigger('nudge')
Pattern: 
[
  { duration: 80, intensity: 0.8 },
  { delay: 80, duration: 50, intensity: 0.3 }
]
​
Feel
string
Strong initial tap followed by a gentler tap after a pause. Like a gentle poke to get attention.
​
Use Cases
string
Notifications, reminders, getting user attention

​
buzz

Rapid, low-intensity taps creating a buzzing effect. 
await haptics.trigger('buzz')
Pattern: 
[
  { duration: 1000, intensity: 1 }
]
​
Feel
string
Continuous vibration for 1 second at full intensity. Creates a sustained buzzing sensation.
​
Use Cases
string
Alarms, alerts, timers, urgent notifications

​
Preset Comparison Table

PresetDurationIntensityFeelBest For
light15ms0.4Gentle tapSubtle interactions
selection8ms0.3Very subtlePicker scrolling
medium25ms0.7BalancedStandard clicks
soft40ms0.5CushionedGentle notifications
rigid10ms1.0CrispPrecise selections
heavy35ms1.0StrongImportant actions
successMulti-tap0.5→1.0AscendingSuccess feedback
warningMulti-tap0.8→0.6HesitantCaution alerts
errorMulti-tap0.9×3HarshError alerts
nudgeMulti-tap0.8→0.3PokingReminders
buzz1000ms1.0ContinuousAlarms

​
Using Presets

Presets can be triggered by name: 
// Simple usage
await haptics.trigger('success')

// With custom intensity
await haptics.trigger('medium', { intensity: 0.9 })

// In event handlers
button.addEventListener('click', () => {
  haptics.trigger('light')
})

​
Creating Custom Presets

You can create your own presets using the HapticPreset type: 
import type { HapticPreset } from 'web-haptics'

const myPreset: HapticPreset = {
  pattern: [
    { duration: 50, intensity: 0.6 },
    { delay: 50, duration: 50, intensity: 0.8 },
    { delay: 50, duration: 50, intensity: 1.0 }
  ]
}

await haptics.trigger(myPreset)

​
Preset Implementation

All presets are defined in the source code at src/lib/web-haptics/patterns.ts: 
export const defaultPatterns = {
  success: { pattern: [/*...*/] },
  warning: { pattern: [/*...*/] },
  error: { pattern: [/*...*/] },
  light: { pattern: [/*...*/] },
  medium: { pattern: [/*...*/] },
  heavy: { pattern: [/*...*/] },
  soft: { pattern: [/*...*/] },
  rigid: { pattern: [/*...*/] },
  selection: { pattern: [/*...*/] },
  nudge: { pattern: [/*...*/] },
  buzz: { pattern: [/*...*/] }
} as const

Build docs developers (and LLMs) love

Get started for freeTalk to us