Skip to main content
WebHaptics provides 11 carefully crafted haptic patterns inspired by iOS feedback generators. Each pattern is designed to communicate specific interactions and states through vibration.

​
Pattern Categories

Patterns are organized into three categories based on iOS UIFeedbackGenerator types:
Feedback patterns for system notifications and alerts.

​
Success

An ascending double-tap indicating successful completion.
haptics.trigger('success');
Pattern Definition:
[
  { duration: 30, intensity: 0.5 },
  { delay: 60, duration: 40, intensity: 1 }
]

​
Warning

Two taps with hesitation indicating a warning state.
haptics.trigger('warning');
Pattern Definition:
[
  { duration: 40, intensity: 0.8 },
  { delay: 100, duration: 40, intensity: 0.6 }
]

​
Error

Three rapid harsh taps indicating an error.
haptics.trigger('error');
Pattern Definition:
[
  { duration: 40, intensity: 0.9 },
  { delay: 40, duration: 40, intensity: 0.9 },
  { delay: 40, duration: 40, intensity: 0.9 }
]

​
Usage Examples

Trigger any built-in pattern by passing its name as a string:
import { WebHaptics } from '@foundrylabs/web-haptics';

const haptics = new WebHaptics();

// Trigger notification patterns
haptics.trigger('success');
haptics.trigger('warning');
haptics.trigger('error');

// Trigger impact patterns
haptics.trigger('light');
haptics.trigger('medium');
haptics.trigger('heavy');
haptics.trigger('soft');
haptics.trigger('rigid');

// Trigger selection pattern
haptics.trigger('selection');

// Trigger custom patterns
haptics.trigger('nudge');
haptics.trigger('buzz');
Override the default intensity for any pattern:
// Trigger with 80% intensity
haptics.trigger('medium', { intensity: 0.8 });

// Trigger with 30% intensity for subtle feedback
haptics.trigger('heavy', { intensity: 0.3 });
The intensity option acts as a multiplier for vibrations that don’t have an explicit intensity value. Individual vibrations with defined intensities in the pattern remain unchanged.
Compare different patterns to find the right feel:
// Short and crisp
haptics.trigger('rigid');     // 10ms at intensity 1
haptics.trigger('selection'); // 8ms at intensity 0.3

// Medium duration
haptics.trigger('light');     // 15ms at intensity 0.4
haptics.trigger('medium');    // 25ms at intensity 0.7
haptics.trigger('heavy');     // 35ms at intensity 1

// Longer feedback
haptics.trigger('soft');      // 40ms at intensity 0.5

​
Pattern Structure

All patterns are defined using the Vibration interface: 
interface Vibration {
  duration: number;    // Duration in milliseconds
  intensity?: number;  // Intensity from 0 to 1
  delay?: number;      // Delay before this vibration in milliseconds
}
Durations are clamped to a maximum of 1000ms due to browser haptic API limitations.

​
Invalid Pattern Handling

If you pass an invalid pattern name, WebHaptics will log a warning and no vibration will occur:
haptics.trigger('invalid-pattern');
// Console: [web-haptics] Unknown preset: "invalid-pattern"

​
Next Steps

Intensity Control

Learn how PWM modulation enables precise intensity control

Custom Patterns

Create your own custom haptic patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us