📳 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 <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

---

📚 Documentation

Full documentation with framework integration guides is available at sumitsahoo.github.io/web-haptic-engine/docs.

• Getting Started
• React Guide
• Next.js Guide
• Vue Guide
• API Reference
• Presets

---

📥 Installation

npm install web-haptic-engine

pnpm add web-haptic-engine

yarn add web-haptic-engine

---

🚀 Quick Start

import { 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.

---

🧑‍💻 Development

# 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.

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 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 by @lochie.

---

🤝 Contributing

Contributions are welcome! Please see the 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 file for details.

---

Built with ❤️ by Sumit Sahoo