web_haptics #

Haptic feedback for Flutter web apps. A Dart port of the web-haptics JavaScript library by Lochie Axon.

Works on iOS Safari (Taptic Engine) and Android Chrome (navigator.vibrate()), with an optional desktop debug mode that plays audio clicks.

Try it #

Open the live demo on your phone to feel each preset.

Android: Make sure "Touch feedback" (or "Vibration feedback") is enabled in your device's Sound & vibration settings, otherwise navigator.vibrate() calls will be silently ignored.

iOS: Requires Taptic Engine (iPhone 7+). Ensure "System Haptics" is on in Settings > Sounds & Haptics.

How it works #

Installation #

dependencies:
  web_haptics: ^0.0.1

Note: This package uses package:web and dart:js_interop. It only works on Flutter web (or Dart web) targets.

Quick start #

import 'package:web_haptics/web_haptics.dart';

final haptics = WebHaptics();

// Built-in presets
haptics.trigger('success');
haptics.trigger('warning');
haptics.trigger('error');
haptics.trigger('medium');

// Clean up when done
haptics.destroy();

Usage #

Presets #

Trigger any of the 11 built-in presets by name:

haptics.trigger('success');   // ascending double-tap
haptics.trigger('warning');   // two hesitant taps
haptics.trigger('error');     // three rapid harsh taps
haptics.trigger('light');     // minor impact
haptics.trigger('medium');    // standard interaction
haptics.trigger('heavy');     // significant interaction
haptics.trigger('soft');      // cushioned feel
haptics.trigger('rigid');     // crisp, precise feel
haptics.trigger('selection'); // subtle selection change
haptics.trigger('nudge');     // reminder nudge
haptics.trigger('buzz');      // extended continuous vibration

Custom duration #

haptics.trigger(100); // vibrate for 100 ms

Alternating vibrate/pause pattern #

haptics.trigger([100, 50, 200]); // 100ms on, 50ms off, 200ms on

Vibration objects with intensity #

haptics.trigger([
  Vibration(duration: 50, intensity: 0.8),
  Vibration(delay: 30, duration: 80, intensity: 0.4),
]);

Full preset object #

haptics.trigger(HapticPreset(pattern: [
  Vibration(duration: 20, intensity: 1.0),
  Vibration(delay: 40, duration: 20, intensity: 0.5),
]));

Override intensity #

haptics.trigger('success', TriggerOptions(intensity: 0.8));

Cancel ongoing feedback #

haptics.cancel();

API #

WebHaptics #

WebHaptics({bool debug = false, bool showSwitch = false})

Methods #

Static #

Debug mode #

Pass debug: true to hear click sounds on desktop browsers. This is useful for testing haptic patterns without a mobile device.

final haptics = WebHaptics(debug: true);
haptics.trigger('success'); // plays audio clicks

Credits #

This package is a Dart port of the web-haptics JavaScript library created by Lochie Axon. The original library provides the iOS checkbox-switch trick, the PWM intensity modulation algorithm, and the built-in haptic presets that this package implements.

License #

MIT - see LICENSE for details.