TapTickit Docs

Quick start

TapTickit drives haptic-style feedback on capable phones using navigator.vibrate, with optional desktop debug behavior (audio + synthetic UI) when vibration is unavailable or debug is enabled.

1. Create feedback where the user taps

Call trigger from a user gesture (click / tap). Browsers gate vibration to active user interaction.

React

"use client";

import { useTaptic } from "taptickit/react";

export function Example() {
  const { trigger, isSupported } = useTaptic();

  return (
    <button type="button" onClick={() => trigger("success")}>
      {isSupported ? "Success haptic" : "No vibration API"}
    </button>
  );
}

Vue

<script setup>
import { useTaptic } from "taptickit/vue";

const { trigger, isSupported } = useTaptic();
</script>

<template>
  <button type="button" @click="trigger('success')">
    {{ isSupported ? "Success haptic" : "No vibration API" }}
  </button>
</template>

Svelte

<script>
  import { createTaptic } from "taptickit/svelte";

  const { trigger, isSupported } = createTaptic();
</script>

<button type="button" on:click={() => trigger("success")}>
  {isSupported ? "Success haptic" : "No vibration API"}
</button>

Vanilla

import { TapticKit } from "taptickit";

const haptic = new TapticKit();

document.querySelector("button")?.addEventListener("click", () => {
  haptic.trigger("success");
});

2. Pick a preset or custom pattern

  • Strings — "light", "medium", "heavy", "success", "warning", "error", "selection", and more (see Built-in presets).
  • Numbers — single duration in milliseconds.
  • Arrays — shorthand [on, off, on, …] or full Vibration objects.
haptic.trigger("selection");
haptic.trigger(40);
haptic.trigger([10, 50, 20]);

Next steps