# taptickit-docs — generated documentation bundle This file is generated at build time from MDX under contents/docs/. It lists every doc route and inlined plain text so tools do not rely on hand-maintained copies. ## Routing - Site root `/` redirects to `/docs/getting-started/quick-start` (see site.json → defaultDocSlug). - Doc pages live at `/docs/` matching paths under contents/docs/. ## npm package documented here - Package name: taptickit - Entry points: taptickit, taptickit/react, taptickit/vue, taptickit/svelte ## Pages (full text) ### Hooks & composables - URL: /docs/api-reference/hooks - Section: API Reference - Slug: api-reference/hooks Hooks & composables Framework entry points wrap a single TapticKit instance. React — useTaptic Instance is created in useEffect and destroy() runs on unmount. debug and showSwitch update when the option values change. Vue — useTaptic Same return shape as React. Instance is created in onMounted , destroyed in onUnmounted . Only debug is watched after mount. Svelte — createTaptic You are responsible for calling destroy() when the UI that owns the instance goes away (for example onDestroy in Svelte 4). --- ### Built-in presets - URL: /docs/api-reference/presets - Section: API Reference - Slug: api-reference/presets Built-in presets String presets passed to trigger("…") are resolved from defaultPatterns , exported from taptickit . Notification-style Key Description --- --- success Ascending double-tap warning Two taps with a longer gap error Short sequence of stronger taps Impact-style Key Description --- --- light Short, lower intensity medium Default-style tap heavy Longer, full intensity soft Softer, slightly longer rigid Very short, crisp Selection Key Description --- --- selection Very short tick for toggles / pickers Custom extras Key Description --- --- nudge Two taps with pause — reminder feel buzz Long single phase (clamped by the implementation’s max phase duration) Programmatic access Unknown string keys log a console warning and trigger returns without vibrating. --- ### TapticKit - URL: /docs/api-reference/taptic-kit - Section: API Reference - Slug: api-reference/taptic-kit TapticKit Class exported from taptickit . Implements vibration via navigator.vibrate when supported, with optional DOM + audio fallback for development. Constructor TapticKitOptions: debug? , showSwitch? . Static Name Type Description --- --- --- isSupported boolean true when navigator.vibrate is a function Methods trigger(input?, options?) Plays a pattern derived from input : Default — single medium tap: [{ duration: 25, intensity: 0.7 }] String — named preset from defaultPatterns (e.g. "success") Number — milliseconds for one pulse Array — [on, off, on, …] numbers or Vibration objects Object — custom { pattern: Vibration[] } preset shape TriggerOptions: intensity? (0–1) scales default intensity per segment when individual vibrations omit intensity. Durations are clamped to a safe window for the Vibration API. Invalid values log a warning and no-op. cancel() Stops the internal animation loop and calls navigator.vibrate(0) when supported. destroy() Tears down DOM nodes (accessibility label / switch) and closes any AudioContext opened for debug. setDebug(debug: boolean) Enables or disables debug mode; disposes audio when turning off. setShowSwitch(show: boolean) Shows or hides the injected switch UI. --- ### Types & exports - URL: /docs/api-reference/types - Section: API Reference - Slug: api-reference/types Types & exports From taptickit Export Kind Description --- --- --- TapticKit class Core haptic engine defaultPatterns const Built-in named HapticPreset map version string Package version Types Subpath exports Path Exports --- --- taptickit/react useTaptic taptickit/vue useTaptic taptickit/svelte createTaptic Types for hooks mirror HapticInput , TriggerOptions , and TapticKitOptions from the core module. --- ### Interactive demo - URL: /docs/demo/interactive - Section: Demo - Slug: demo/interactive Interactive demo Try every built-in string preset and a couple of raw durations. Each tap calls useTaptic from taptickit/react → trigger(...) . Debug is on so you get audio / timing feedback on desktop when navigator.vibrate is missing. On a real phone, you’ll feel the real pattern. See also Built-in presets TapticKit --- ### React - URL: /docs/frameworks/react - Section: Frameworks - Slug: frameworks/react React Import useTaptic from taptickit/react . The hook manages a single TapticKit instance for the component lifecycle. Basic usage Options useTaptic(options?) accepts TapticKitOptions: debug — When true, enables desktop-style feedback (audio + timing) even if navigator.vibrate exists (also used when vibration is unsupported). showSwitch — Shows the built-in accessibility control in the DOM when true. Options are applied on mount; debug and showSwitch are synced when they change. Returns Property Type Description --- --- --- trigger (input?, options?) = Promise \ undefined Same as TapticKit.trigger cancel () = void Stops the current pattern and clears vibration isSupported boolean Static: navigator.vibrate is available Next.js Client components must include "use client" at the top of the file. See Next.js & SSR. --- ### Svelte - URL: /docs/frameworks/svelte - Section: Frameworks - Slug: frameworks/svelte Svelte Import createTaptic from taptickit/svelte . Unlike React/Vue hooks, this returns an object with an explicit destroy() — call it when the store or component is torn down if you create the instance yourself. Basic usage Options createTaptic(options?) passes TapticKitOptions to the constructor once. Use setDebug(boolean) on the returned object to toggle debug after creation. Returns Property Type Description --- --- --- trigger (input?, options?) = Promise TapticKit.trigger cancel () = void TapticKit.cancel destroy () = void TapticKit.destroy setDebug (debug: boolean) = void TapticKit.setDebug isSupported boolean TapticKit.isSupported --- ### Vanilla JS - URL: /docs/frameworks/vanilla - Section: Frameworks - Slug: frameworks/vanilla Vanilla JS The core class TapticKit is exported from the root package taptickit . Use it anywhere you can run browser JavaScript (bundlers, inline modules, etc.). Basic usage Shared exports From taptickit you can also import: defaultPatterns — preset definitions (same keys as string presets in trigger) Types — Vibration, HapticPattern, HapticPreset, HapticInput, TriggerOptions, TapticKitOptions version — package version string Lifecycle Call destroy() when you no longer need the instance (for example when leaving a SPA view) to remove DOM nodes and release audio resources used in debug mode. Support check Use the static flag before changing UI: See TapticKit for the full method list. --- ### Vue - URL: /docs/frameworks/vue - Section: Frameworks - Slug: frameworks/vue Vue Import useTaptic from taptickit/vue . The composable creates a TapticKit on mount and destroys it on unmount. Basic usage Options useTaptic(options?) accepts TapticKitOptions: debug — Desktop-style audio / timing feedback. showSwitch — Shows the built-in DOM control. The initial options object is passed into the TapticKit constructor on mount. Changes to debug are watched and applied via setDebug. Other fields (such as showSwitch) are not re-read after mount unless you remount the component. Returns Property Type Description --- --- --- trigger (input?, options?) = Promise \ undefined TapticKit.trigger cancel () = void TapticKit.cancel isSupported boolean TapticKit.isSupported --- ### Installation - URL: /docs/getting-started/installation - Section: Getting Started - Slug: getting-started/installation Installation TapTickit is published as taptickit on npm. The library has no runtime dependencies and targets mobile haptics via the Vibration API. Package manager Entry points Import Use case --- --- taptickit TapticKit class, defaultPatterns, types (vanilla / shared) taptickit/react useTaptic hook taptickit/vue useTaptic composable taptickit/svelte createTaptic factory Peer dependencies Optional peers are declared for React , Vue , and Svelte . Install only the stack you use; the package is built so unused framework code is not required at runtime. React — react and react-dom = 18 Vue — vue = 3 Svelte — svelte = 4 Monorepo / workspace If you develop inside this repository, depend on the workspace package from your app (for example workspace: with pnpm) instead of the npm version. --- ### Quick start - URL: /docs/getting-started/quick-start - Section: Getting Started - Slug: getting-started/quick-start 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. Create feedback where the user taps Call trigger from a user gesture (click / tap). Browsers gate vibration to active user interaction. React Vue Svelte Vanilla 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. Next steps Framework-specific notes: React, Vue, Svelte, Vanilla Full API: TapticKit, hooks & stores Next.js and "use client": Next.js & SSR --- ### Debug on desktop - URL: /docs/guides/debug-desktop - Section: Guides - Slug: guides/debug-desktop Debug on desktop Most desktop browsers do not expose navigator.vibrate . TapTickit can still help you feel timing while building UIs. debug: true When debug is enabled on TapticKit or via useTaptic({ debug: true }) / createTaptic({ debug: true }) : The library may use short audio clicks and synthetic timing to approximate the pattern. On devices that do support vibration, debug can still run alongside real vibration for verification. Use this only in development; respect user volume and autoplay policies (audio may require a user gesture first). showSwitch: true With showSwitch: true , TapTickit injects a small labeled control in the page so assistive / test flows can toggle feedback. It is hidden by default. TapticKit.isSupported Use this flag to adjust UI (hide haptic-only hints, show “not available” in settings, etc.) without branching on navigator yourself. --- ### Next.js & SSR - URL: /docs/guides/nextjs - Section: Guides - Slug: guides/nextjs Next.js & SSR TapTickit’s React hook uses client-only browser APIs (navigator, document, requestAnimationFrame). It must run in a Client Component . Add "use client" Put the directive at the top of the file that calls useTaptic (or any file that imports a component which uses it transitively from a file without "use client"). You cannot call useTaptic from a Server Component. Keep haptics in leaf components (buttons, sheets) that are marked as client components. App Router Place interactive UI in app/.../client.tsx (or colocate with "use client" in the same module as the button). Pass callbacks from server parents only as props into client children; do not import the hook in page.tsx unless that page is a client component. Pages Router Same rule: use the hook only in components that execute in the browser (not in getServerSideProps / getStaticProps). Vue / Svelte / Nuxt / SvelteKit Use the Vue or Svelte integrations only in client-rendered code paths. SSR-rendered markup should not instantiate TapticKit during Node render without guarding for typeof window . ---