web-haptics by lochie/web-haptics
npx skills add https://github.com/lochie/web-haptics --skill web-haptics安装 web-haptics (npm i web-haptics) 并按照以下规则为应用添加触觉反馈:
仓库:https://github.com/lochie/web-haptics | 许可证:MIT | 零依赖 使用 Web Vibration API。在不支持的平台(桌面端)上静默无操作。无需错误处理或功能检测。
trigger() 接受以下字符串之一(空值默认为合理的“中等”强度效果):
通知(任务结果):
冲击(物理碰撞):
选择(离散步进):
React:
import { useWebHaptics } from "web-haptics/react";
const haptic = useWebHaptics();
<button onClick={() => haptic.trigger()}>Tap me</button>;
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Vue:
<script setup>
import { useWebHaptics } from "web-haptics/vue";
const haptic = useWebHaptics();
</script>
<template>
<button @click="haptic.trigger()">Tap me</button>
</template>
Svelte:
<script>
import { createWebHaptics } from "web-haptics/svelte";
import { onDestroy } from "svelte";
const haptic = createWebHaptics();
onDestroy(() => haptic.destroy());
</script>
<button on:click={() => haptic.trigger()}>Tap me</button>
Vanilla JS:
import { WebHaptics } from "web-haptics";
const haptics = new WebHaptics();
haptics.trigger(); // medium impact
haptics.trigger("success");
Next.js:在任何使用 useWebHaptics() 的组件中添加 "use client"。Nuxt/SvelteKit:直接使用,库会处理 SSR。
所有命名字符串预设都在 defaultPatterns 中有对应的对象。当需要将预设作为值传递而非字符串字面量时使用:
import { WebHaptics, defaultPatterns } from 'web-haptics'
const haptics = new WebHaptics()
haptics.trigger(defaultPatterns.light)
未在上面列出的额外预设:"soft"、"rigid"、"nudge"、"buzz"。查看 defaultPatterns 获取所有可用值。
触觉反馈是补充,而非替代。始终与视觉反馈配对。UI 必须在没有触觉反馈的情况下完全正常工作。
建立因果关系。触觉反馈必须让用户感觉是其操作直接产生的物理后果。
强度与重要性匹配。轻度交互 = light/selection。标准 = medium/success。重要 = heavy/error/warning。
不要过度使用。如果每次点击都振动,就没有什么感觉特别了。仅保留给有意义的时刻。
完美同步。在视觉变化发生的精确瞬间触发触觉反馈。
尊重惯例。success=积极、error=消极、warning=警告、selection=仅用于离散刻度。
对于异步操作,在结果到达时触发,并与视觉状态变化同步:
try { await submit(); haptic.trigger("success"); } catch { haptic.trigger("error"); }
主要按钮点击 = "medium" | 次要按钮 = "light" 表单成功 = "success" | 验证错误 = "error" | 网络错误 = "error" 切换开关 = "light" | 确认前删除 = "warning" 选择器/滚轮 = "selection" | 滑块定位 = "selection" | 标签切换 = "selection" 拖放吸附 = "medium" | 长按 = "heavy" | 模态框出现 = "medium" 下拉刷新阈值 = "light" | 滑动关闭阈值 = "light" 支付确认 = "success"
每周安装量
405
仓库
GitHub 星标
2.3K
首次出现
2026年3月4日
安全审计
已安装于
codex403
opencode402
github-copilot399
amp398
gemini-cli398
kimi-cli398
Install web-haptics (npm i web-haptics) and add haptic feedback to the app following these rules:
Repository: https://github.com/lochie/web-haptics | License: MIT | Zero dependencies Uses the Web Vibration API. Silently no-ops on unsupported platforms (desktop). No error handling or feature detection needed.
trigger() accepts one of these strings (empty value defaults to a sensible "medium" impact):
Notification (task outcomes):
Impact (physical collisions):
Selection (discrete stepping):
React:
import { useWebHaptics } from "web-haptics/react";
const haptic = useWebHaptics();
<button onClick={() => haptic.trigger()}>Tap me</button>;
Vue:
<script setup>
import { useWebHaptics } from "web-haptics/vue";
const haptic = useWebHaptics();
</script>
<template>
<button @click="haptic.trigger()">Tap me</button>
</template>
Svelte:
<script>
import { createWebHaptics } from "web-haptics/svelte";
import { onDestroy } from "svelte";
const haptic = createWebHaptics();
onDestroy(() => haptic.destroy());
</script>
<button on:click={() => haptic.trigger()}>Tap me</button>
Vanilla JS:
import { WebHaptics } from "web-haptics";
const haptics = new WebHaptics();
haptics.trigger(); // medium impact
haptics.trigger("success");
Next.js: add "use client" to any component using useWebHaptics(). Nuxt/SvelteKit: works directly, library handles SSR.
All named string presets have a corresponding object in defaultPatterns. Use when you need to pass a preset as a value rather than a string literal:
import { WebHaptics, defaultPatterns } from 'web-haptics'
const haptics = new WebHaptics()
haptics.trigger(defaultPatterns.light)
Extra presets not listed above: "soft", "rigid", "nudge", "buzz". See defaultPatterns for all available values.
Haptics supplement, never replace. Always pair with visual feedback. UI must work fully without haptics.
Build causal relationships. The haptic must feel like a direct physical consequence of the user action.
Match intensity to significance. Light interactions = light/selection. Standard = medium/success. Major = heavy/error/warning.
Do not overuse. If every tap vibrates, nothing feels special. Reserve for meaningful moments only.
Synchronize perfectly. Fire haptic at the exact instant the visual change occurs.
Respect conventions. success=positive, error=negative, warning=cautionary, selection=discrete ticks only.
For async ops, trigger when the RESULT arrives, synced with the visual state change:
try { await submit(); haptic.trigger("success"); } catch { haptic.trigger("error"); }
Primary button tap = "medium" | Secondary button = "light" Form success = "success" | Validation error = "error" | Network error = "error" Toggle switch = "light" | Delete before confirm = "warning" Picker/wheel = "selection" | Slider detents = "selection" | Tab switch = "selection" Drag-drop snap = "medium" | Long press = "heavy" | Modal appear = "medium" Pull-to-refresh threshold = "light" | Swipe dismiss threshold = "light" Payment confirmed = "success"
Weekly Installs
405
Repository
GitHub Stars
2.3K
First Seen
Mar 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex403
opencode402
github-copilot399
amp398
gemini-cli398
kimi-cli398
Node.js后端模式指南:构建可扩展REST API、微服务与实时应用
12,800 周安装