WebHaptics — Phản hồi xúc giác cho web di động

Thêm một giác quan vào ứng dụng web của bạn — chỉ với một dòng code.

Repository: github.com/lochie/web-haptics · License: MIT · Version: 0.0.6 · Downloads: 132K+

Xúc giác — giác quan còn thiếu trên web

Bạn đã bao giờ dùng một ứng dụng di động, nhấn nút xác nhận rồi cảm nhận cú rung nhẹ phản hồi lại chưa? Cảm giác đó không phải ngẫu nhiên — đó là haptic feedback, kỹ thuật mà các ứng dụng native đã tận dụng hàng thập kỷ để truyền đạt thông tin qua xúc giác.

Trên web, chuyện này luôn là bài toán đau đầu. navigator.vibrate() tồn tại từ lâu nhưng API thô sơ, khó dùng, và không hỗ trợ kiểm soát cường độ. WebHaptics ra đời để giải quyết đúng vấn đề đó.

Điểm nổi bật:

• Zero dependencies — không kéo theo bất kỳ package nào, bundle size tối thiểu
• 11 preset sẵn có — lấy cảm hứng từ hệ thống haptics iOS, đẹp ngay từ hộp
• Multi-framework — React hook, Vue composable, Svelte, và vanilla JS trong một package
• Silent no-op — tự động tắt trên desktop, không cần kiểm tra feature support thủ công

Cài đặt

npm i web-haptics

Cách dùng

Chọn entry point phù hợp với framework của bạn:

React

import { useWebHaptics } from 'web-haptics/react';

function ConfirmButton() {
  const { trigger } = useWebHaptics();

  return (
    <button onClick={() => trigger('success')}>
      Xác nhận
    </button>
  );
}

Vue

<script setup>
import { useWebHaptics } from 'web-haptics/vue';
const { trigger } = useWebHaptics();
</script>

<template>
  <button @click="trigger('success')">Xác nhận</button>
</template>

Svelte

<script>
  import { createWebHaptics } from 'web-haptics/svelte';
  import { onDestroy } from 'svelte';

  const { trigger, destroy } = createWebHaptics();
  onDestroy(destroy);
</script>

<button on:click={() => trigger('success')}>Xác nhận</button>

Vanilla JS

import { WebHaptics } from 'web-haptics';

const haptics = new WebHaptics();

document.querySelector('#confirm-btn')
  .addEventListener('click', () => {
    haptics.trigger('success');
  });

Next.js: thêm "use client" vào đầu component. Nuxt / SvelteKit: hoạt động thẳng — thư viện tự xử lý SSR.

11 Preset sẵn có

Toàn bộ preset được chia thành 4 nhóm ngữ nghĩa rõ ràng:

Bạn cũng có thể tham chiếu preset qua object defaultPatterns — hữu ích khi cần truyền preset như giá trị dynamic:

import { WebHaptics, defaultPatterns } from 'web-haptics';

const haptics = new WebHaptics();
haptics.trigger(defaultPatterns.light); // tương đương trigger('light')

Pattern tùy chỉnh & điều chỉnh cường độ

Điểm nổi bật của WebHaptics so với navigator.vibrate() thô: thư viện sử dụng kỹ thuật pulse-width modulation (PWM) để mô phỏng các cấp độ cường độ khác nhau — thứ mà Vibration API gốc không hỗ trợ.

trigger() chấp nhận nhiều dạng input:

// 1. Preset string (khuyến khích)
trigger('success');

// 2. Số ms đơn giản
trigger(200);

// 3. Mảng on/off (ms)
trigger([100, 50, 100]);

// 4. Vibration[] với intensity
trigger([
  { duration: 80, intensity: 0.8 },
  { delay: 50, duration: 100 }
]);

// 5. Object đầy đủ với description
trigger({
  pattern: [{ duration: 50 }, { delay: 50, duration: 50 }],
  description: 'custom-double-tap'
});

Hỗ trợ trình duyệt

WebHaptics dựa trên Web Vibration API. Bức tranh hỗ trợ hiện tại:

Kiểm tra support: WebHaptics.isSupported trả về true/false.

Lưu ý: trình duyệt yêu cầu user activation thực sự (tap/click trực tiếp) trước khi cho phép rung — bạn không thể gọi trigger() từ một async callback tùy ý.

Triết lý thiết kế

Tác giả nhấn mạnh: haptics là lớp bổ trợ, không phải thay thế. Bốn nguyên tắc cốt lõi:

1. Luôn đi kèm visual feedback. Giao diện phải hoạt động hoàn toàn không cần rung.
2. Xây dựng quan hệ nhân quả. Cú rung phải cảm giác như hệ quả vật lý trực tiếp của thao tác người dùng.
3. Khớp cường độ với mức độ quan trọng. Xác nhận thanh toán → success. Chọn item trong list → selection. Đừng dùng heavy cho mọi thứ.
4. Ít hơn là nhiều hơn. Haptics lạm dụng sẽ gây khó chịu. Chỉ trigger ở những điểm tương tác có nghĩa.

Kết

WebHaptics là thư viện nhỏ, có chủ ý, và giải quyết đúng một vấn đề. Nếu bạn đang build PWA hoặc web app mobile-first, đây là package đáng thêm vào — chỉ mất 5 phút để tích hợp, không kéo theo dependency nào, và trải nghiệm người dùng nhận được sẽ tinh tế hơn đáng kể.

• 📦 npm
• 💻 GitHub
• 🌐 Demo site