web-haptics
Installation
Summary
Tactile feedback for web apps using the Web Vibration API across React, Vue, Svelte, and vanilla JavaScript.
- Four trigger categories: notifications (success, warning, error), impacts (light, medium, heavy), selection (picker/slider detents), and extra presets (soft, rigid, nudge, buzz)
- Framework-specific hooks and composables for React, Vue, Svelte; vanilla JS class; automatic SSR handling in Nuxt and SvelteKit
- Zero dependencies, silent no-op on unsupported platforms (desktop), no feature detection required
- Apple HIG design rules built in: haptics supplement visual feedback, match intensity to interaction significance, synchronize with state changes, and avoid overuse to prevent fatigue
SKILL.md
Install web-haptics (npm i web-haptics) and add haptic feedback to the app following these rules:
Package: web-haptics
Repository: https://github.com/lochie/web-haptics | License: MIT | Zero dependencies Uses the Web Vibration API. Silently no-ops on unsupported platforms (desktop). No error handling or feature detection needed.
Trigger Types
trigger() accepts one of these strings (empty value defaults to a sensible "medium" impact):
Notification (task outcomes):
- "success" -- form saved, payment confirmed, upload complete
- "warning" -- destructive action ahead, approaching limit, irreversible step
- "error" -- validation failure, network error, permission denied
Impact (physical collisions):