AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Lochie AxonComponents & kits

WebHaptics

Demo and docs for Lochie Axon’s zero-dependency TypeScript library built on the Web Vibration API. Presets map product moments (success, error, light through heavy taps, selection changed) to short patterns you can fire from handlers or gestures. Desktop browsers that cannot vibrate simply skip work, so the same callsheet stays safe in responsive layouts.

What's interesting

  • Haptic feedback for the mobile web: trigger success, warning, selection, and custom vibration patterns from React, Vue, Svelte, or vanilla JS, with a silent no-op where the Web Vibration API is unavailable.
  • Demo and docs for Lochie Axon’s zero-dependency TypeScript library built on the Web Vibration API.
  • Presets map product moments (success, error, light through heavy taps, selection changed) to short patterns you can fire from handlers or gestures.

Use in your project

  1. Study the interaction at haptics.lochie.me/.
  2. Capture motion or layout details for your spec.
  3. Adapt the idea to your product constraints.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/webhaptics-lochie-me
WebHaptics by Lochie Axon

Demo and docs for Lochie Axon’s zero-dependency TypeScript library built on the Web Vibration API. Presets map product moments (success, error, light through heavy taps, selection changed) to short patterns you can fire from handlers or gestures. Desktop browsers that cannot vibrate simply skip work, so the same callsheet stays safe in responsive layouts.

Adapt for our [screen name]. Stack: [your stack].
Note what to cut or simplify for production.

Tags

MobileHapticsWeb APITypeScriptInteractionUX