https://github.com/sumitsahoo/web-haptic-engine
Cross-platform (iOS, Android and Web) haptic feedback engine for the web
https://github.com/sumitsahoo/web-haptic-engine
android haptic-feedback haptic-interface ios react typescript
Last synced: 2 months ago
JSON representation
Cross-platform (iOS, Android and Web) haptic feedback engine for the web
- Host: GitHub
- URL: https://github.com/sumitsahoo/web-haptic-engine
- Owner: sumitsahoo
- License: mit
- Created: 2026-04-06T05:48:31.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-06T07:28:10.000Z (2 months ago)
- Last Synced: 2026-04-06T08:42:29.938Z (2 months ago)
- Topics: android, haptic-feedback, haptic-interface, ios, react, typescript
- Language: TypeScript
- Homepage: https://sumitsahoo.github.io/web-haptic-engine/
- Size: 96.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
📳 Web Haptic Engine
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.
---
## ✨ Features
| Category | Details |
| -------------------------- | ------------------------------------------------------------------------------------------------------- |
| 📱 **Android Vibration** | Full `navigator.vibrate()` pattern support with intensity-scaled durations |
| 🍎 **iOS Taptic** | Exploits the `` 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 |
---
## 📚 Documentation
Full documentation with framework integration guides is available at **[sumitsahoo.github.io/web-haptic-engine/docs](https://sumitsahoo.github.io/web-haptic-engine/docs/)**.
- [Getting Started](https://sumitsahoo.github.io/web-haptic-engine/docs/guide/getting-started)
- [React Guide](https://sumitsahoo.github.io/web-haptic-engine/docs/frameworks/react)
- [Next.js Guide](https://sumitsahoo.github.io/web-haptic-engine/docs/frameworks/nextjs)
- [Vue Guide](https://sumitsahoo.github.io/web-haptic-engine/docs/frameworks/vue)
- [API Reference](https://sumitsahoo.github.io/web-haptic-engine/docs/api/)
- [Presets](https://sumitsahoo.github.io/web-haptic-engine/docs/guide/presets)
---
## 📥 Installation
```bash
npm install web-haptic-engine
```
```bash
pnpm add web-haptic-engine
```
```bash
yarn add web-haptic-engine
```
---
## 🚀 Quick Start
```ts
import { haptic } from "web-haptic-engine";
await haptic("success");
await haptic("heavy", { intensity: 0.8 });
```
See the [full documentation](https://sumitsahoo.github.io/web-haptic-engine/docs/guide/getting-started) for engine setup, drag haptics, sequences, custom presets, and framework-specific guides.
---
## 🧑💻 Development
```bash
# 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:build
```
---
## 🎮 Demo
Try the live demo at **[sumitsahoo.github.io/web-haptic-engine](https://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.
```bash
# Install dependencies (if not already done)
vp install
# Start the demo dev server
vp run demo
```
This 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.
---
## 📁 Project Structure
```
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
```
---
## 💡 Acknowledgements
This project was initially inspired by [web-haptics](https://github.com/lochie/web-haptics) by [@lochie](https://github.com/lochie).
---
## 🤝 Contributing
Contributions are welcome! Please see the [CONTRIBUTING.md](CONTRIBUTING.md) guide for details.
---
## 📄 License
This project is licensed under the **MIT License** — feel free to use it for both personal and commercial purposes. See the [LICENSE](LICENSE) file for details.
---
Built with ❤️ by Sumit Sahoo