WebHaptics

Haptic feedback for the mobile web. Supports React, Vue, and Svelte.

Install

npm i web-haptics

React

import { useWebHaptics } from "web-haptics/react";

function App() {
  const { trigger } = useWebHaptics();

  return <button onClick={() => trigger("success")}>Tap me</button>;
}

Vue

<script setup>
import { useWebHaptics } from "web-haptics/vue";

const { trigger } = useWebHaptics();
</script>

<template>
  <button @click="trigger('success')">Tap me</button>
</template>

Svelte

<script>
import { createWebHaptics } from "web-haptics/svelte";
import { onDestroy } from "svelte";

const { trigger, destroy } = createWebHaptics();
onDestroy(destroy);
</script>

<button on:click={() => trigger("success")}>Tap me</button>

Vanilla

import { WebHaptics } from "web-haptics";

const haptics = new WebHaptics();
haptics.trigger("success");

Built-in Presets

| Name | Pattern | Description | | --------- | ---------------------------------------------------------------- | ------------------------------ | | success | [{ duration: 50 }, { delay: 50, duration: 50 }] | Two taps indicating success | | nudge | [{ duration: 80, intensity: 0.8 }, { delay: 80, duration: 50, intensity: 0.3 }] | Strong tap followed by a soft tap | | error | [{ duration: 50, intensity: 0.75 }, ...] ×3 | Three sharp taps for errors | | buzz | [{ duration: 1000, intensity: 1 }] | A long vibration |

You can also pass custom patterns directly:

trigger([100, 50, 100]); // number[] shorthand (alternating on/off durations)
trigger(200); // single vibration (ms)
trigger([{ duration: 80, intensity: 0.8 }, { delay: 50, duration: 100 }]); // Vibration[]
trigger({
  pattern: [{ duration: 50 }, { delay: 50, duration: 50 }],
  description: "custom",
}); // full HapticPreset

API

new WebHaptics(options?)

Create a new instance.

• options.debug — enable audio feedback for testing on desktop (default false)
• options.showSwitch — show the haptic feedback toggle switch (default false)

trigger(input?, options?): Promise<void>

Trigger haptic feedback.

• input — preset name ("success"), duration in ms, number[], Vibration[], or HapticPreset
• options.intensity — override default intensity (0–1, default 0.5)

cancel()

Stop the current pattern and cancel any ongoing vibration.

destroy()

Clean up DOM elements and audio resources. Call when the instance is no longer needed.

setDebug(debug: boolean)

Enable or disable debug audio feedback.

setShowSwitch(show: boolean)

Show or hide the haptic feedback toggle switch.

WebHaptics.isSupported

Static boolean — true if the device supports the Vibration API.

License

MIT

Found this useful?

Follow me on Twitter.

Other projects

You might also like:

• Torph - Dependency-free animated text component.
• easing.dev - Easily create custom easing graphs.

Acknowledgements

• Special thanks to Alex for assistance with the site design.