Skip to content

Presets

Web Haptic Engine ships with 23 built-in presets organized into four categories. Each preset defines a vibration pattern, an audio impulse type, and iOS Taptic configuration.

Using Presets

ts
import { haptic, presets } from "web-haptic-engine";

// By name
await haptic("success");

// Access preset data
console.log(presets.success);
// { pattern: [...], impulse: "confirm", iosTicks: 2, ... }

Notification

For user-facing alerts and confirmations.

PresetDescriptionImpulseiOS Ticks
successAscending double-tapconfirm2
warningTwo hesitant tapsharsh2
errorThree rapid harsh tapsharsh3
confirmStrong double-tapconfirm2
rejectHarsh staccato tripleharsh3
ts
await haptic("success"); // Task completed
await haptic("error"); // Validation failed
await haptic("warning"); // Caution needed

Impact

For direct interaction feedback like button presses.

PresetDescriptionImpulseiOS Ticks
lightSingle light taptick1
mediumModerate taptap1
heavyStrong tapthud2
softCushioned taptap1
rigidHard crisp snapsnap1
ts
await haptic("light"); // Subtle button press
await haptic("heavy"); // Impactful action
await haptic("rigid"); // Crisp toggle

Selection

For UI navigation and selection changes.

PresetDescriptionImpulseiOS Ticks
selectionSubtle ticktick1
tickCrisp tickclick1
clickUltra-short clickclick1
snapSharp snapsnap1
ts
await haptic("selection"); // List item selected
await haptic("tick"); // Picker value changed
await haptic("click"); // Toggle switch

Expressive

For rich, characterful interactions.

PresetDescriptionImpulseiOS Ticks
nudgeTwo quick tapstap2
buzzSustained vibrationbuzz8
heartbeatHeartbeat rhythmthud4
springBouncy pulsestap4
rampUpEscalating intensitytap3
rampDownDecreasing intensitytap3
thudHeavy impactthud2
trillRapid flutterclick5
pulseRhythmic pulsetap3
ts
await haptic("heartbeat"); // Favorite/like animation
await haptic("spring"); // Bounce-in transition
await haptic("buzz"); // Long press feedback

Custom Presets

Register your own presets with registerPreset:

ts
import { HapticEngine } from "web-haptic-engine";

const engine = new HapticEngine();

engine.registerPreset("doubleSnap", {
  pattern: [
    { duration: 8, intensity: 1.0 },
    { delay: 40, duration: 8, intensity: 1.0 },
  ],
  impulse: "snap",
  iosTicks: 2,
  iosTickGap: 50,
  easing: "easeOut",
});

await engine.trigger("doubleSnap");

Preset Structure

ts
interface HapticPreset {
  pattern: Vibration[]; // Vibration segments
  description?: string; // Human-readable description
  iosTicks?: number; // Number of iOS Taptic ticks
  iosTickGap?: number; // Gap between iOS ticks (ms)
  impulse?: ImpulseType; // Audio impulse type
  easing?: string; // Easing function name
}

interface Vibration {
  duration: number; // Vibration duration (ms)
  intensity?: number; // Intensity 0-1
  delay?: number; // Delay before this segment (ms)
}

Released under the MIT License.