WebHaptics

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

Install

npm i @tonuzzz/haptics

React

import { useWebHaptics } from "@tonuzzz/haptics/react";

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

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

Vue

<script setup>
import { useWebHaptics } from "@tonuzzz/haptics/vue";

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

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

Svelte

<script>
import { createWebHaptics } from "@tonuzzz/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 "@tonuzzz/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?

Check out my other projects at tonuzzz.com.

Acknowledgements

• Special thanks to the original author for the library.