Vritti UI
Open on mobile for haptic feedback

Web Haptics

Native haptic feedback for mobile web apps. 11 built-in patterns inspired by Apple's Human Interface Guidelines. Zero dependencies, shadcn-installable.

Documentation
QR code to open https://vritti.thesatyajit.com/haptics

Scan with your phone to feel the haptics

Best experienced on mobile

Haptic feedback requires a mobile device with vibration support. Scan the QR code to open this page on your phone, then tap the patterns below to feel each haptic effect.

On desktop, debug mode plays audio tones to simulate the feedback.

Installation

pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/web-haptics"

Built-in Patterns

Tap each pattern to preview. On mobile, you’ll feel the vibration.

Notification

Impact

Selection

Custom

Custom Pattern Builder

5ms500ms
0%100%

Usage

Basic Usage

import { useWebHaptics } from "@/components/ui/web-haptics";

function MyComponent() {
  const { trigger, isSupported } = useWebHaptics();

  return (
    <button onClick={() => trigger("success")}>
      Save
    </button>
  );
}

Custom Patterns

// Custom pattern
trigger([
  { duration: 50, intensity: 0.8 },
  { delay: 100, duration: 30, intensity: 0.5 },
]);

// Simple duration
trigger(100);

// Number array (on/off alternating)
trigger([100, 50, 100]);

Browser Compatibility

PlatformSupport
Android (Chrome)✓ Full
iOS (Safari)~ Limited
Desktop— Debug