A cross-platform haptic feedback engine for the web.
Supports Android vibration, iOS Taptic feedback, audio impulse synthesis, drag haptics, and 23 built-in presets.
| Category | Details |
|---|---|
| ๐ฑ Android Vibration | Full navigator.vibrate() pattern support with intensity-scaled durations |
| ๐ iOS Taptic | Exploits the <input type="checkbox" switch> toggle to trigger native Taptic Engine feedback |
| ๐ Audio Impulse Layer | 8 synthesized AudioBuffer impulses (tick, tap, thud, click, snap, buzz, confirm, harsh) |
| ๐ Drag Haptics | Touchmove-driven haptic feedback with distance threshold โ works reliably on iOS |
| ๐๏ธ 23 Presets | Ready-to-use patterns: success, warning, error, heartbeat, spring, buzz, and more |
| ๐ Sequences | Chain presets with delays, repeats, and custom gaps |
| ใฐ๏ธ Easing Functions | linear, easeIn, easeOut, easeInOut, bounce, spring |
| ๐ฆ Zero Dependencies | No external runtime dependencies โ pure TypeScript |
Full documentation with framework integration guides is available at sumitsahoo.github.io/web-haptic-engine/docs.
npm install web-haptic-enginepnpm add web-haptic-engineyarn add web-haptic-engineimport { haptic } from "web-haptic-engine";
await haptic("success");
await haptic("heavy", { intensity: 0.8 });See the full documentation for engine setup, drag haptics, sequences, custom presets, and framework-specific guides.
# Install dependencies
vp install
# Build the library
vp pack
# Run tests
vp test
# Watch mode (rebuild on changes)
vp pack --watch
# Start docs dev server
vp run docs:dev
# Build docs for production
vp run docs:buildTry the live demo at sumitsahoo.github.io/web-haptic-engine.
An interactive demo is also included in the demo/ directory. It showcases all 23 presets, drag haptics, impulse buffers, sequences, and real-time controls for intensity and audio gain.
# Install dependencies (if not already done)
vp install
# Start the demo dev server
vp run demoThis launches a Vite dev server. Open the URL shown in the terminal (typically http://localhost:5173) in your browser. For the full haptic experience, open it on a mobile device โ Android for vibration, iOS Safari for Taptic feedback. On desktop, audio impulses still play as a fallback.
web-haptic-engine/
โโโ src/
โ โโโ core/ # Types, constants, easings & presets
โ โโโ audio/ # Web Audio impulse synthesis & playback
โ โโโ platform/ # Platform detection & adapters (Android, iOS)
โ โโโ interactions/ # User interaction patterns (drag haptics)
โ โโโ haptic-engine.ts # Main HapticEngine class & convenience helpers
โ โโโ index.ts # Public API exports
โโโ docs/ # VitePress documentation site
โ โโโ .vitepress/ # VitePress config & theme
โ โโโ guide/ # Getting started, presets, platform support
โ โโโ frameworks/ # React, Next.js, Vue integration guides
โ โโโ api/ # API reference (HapticEngine, DragHaptics, Types)
โโโ demo/
โ โโโ index.html # Demo page
โ โโโ main.ts # Demo app (imports from library)
โ โโโ vite.config.ts # Vite config for demo dev server
โโโ tests/
โ โโโ index.test.ts # Unit tests
โโโ tsdown.config.ts # Library build config
โโโ vite.config.ts # Vite+ unified config
โโโ tsconfig.json # TypeScript config
โโโ package.json
This project was initially inspired by web-haptics by @lochie.
Contributions are welcome! Please see the CONTRIBUTING.md guide for details.
This project is licensed under the MIT License โ feel free to use it for both personal and commercial purposes. See the LICENSE file for details.
Built with โค๏ธ by Sumit Sahoo
