haptic-web

Cross-platform haptic feedback for the web. Zero dependencies.

• iOS — Triggers the Taptic Engine via a hidden switch checkbox in Safari
• Android — Uses the navigator.vibrate() API
• All platforms — Optional audio click (AudioContext noise burst) for supplementary tactile feel

Install

npm install haptic-web

Usage

import { haptic } from 'haptic-web';

// Fire a haptic pulse
haptic.trigger('light');   // light tap
haptic.trigger('medium');  // medium tap
haptic.trigger('heavy');   // strong tap
haptic.trigger('key');     // subtle keystroke feel

Custom instance

import { HapticEngine } from 'haptic-web';

const engine = new HapticEngine({ audio: false });
engine.trigger('medium');

Svelte actions

<script>
  import { useHaptic, useHapticInput } from 'haptic-web/svelte';
</script>

<button use:useHaptic={'medium'}>Tap me</button>
<input use:useHapticInput placeholder="Type here" />

React

import { haptic } from 'haptic-web';

<button onPointerDown={() => haptic.trigger('medium')}>Tap me</button>

Vanilla JS

<script type="module">
  import { haptic } from 'haptic-web';
  document.querySelector('#btn').addEventListener('pointerdown', () => {
    haptic.trigger('light');
  });
</script>

Haptic Styles

| Style | Intensity | Vibrate Pattern | |----------|-----------|----------------| | key | 0.3 | 8ms | | light | 0.6 | 30ms | | medium | 0.85 | 50ms | | heavy | 1.0 | 60-15-60ms |

License

MIT