Why I Added Haptics to My Portfolio
Most websites rely entirely on visual feedback — color changes, animations, or transitions. But modern mobile devices allow us to add tactile feedback using vibration.
When you press a button in a good mobile app, you often feel a small vibration confirming the action. That tiny detail makes the interface feel responsive and physical.
While working on my portfolio, I wanted interactions like:
- button clicks
- toggles
- form submissions
- picker selections
to feel more alive on mobile devices. So I experimented with the web-haptics library.
What is Web Haptics?
web-haptics is a lightweight library that adds haptic feedback to web apps using the Web Vibration API.
Key things I liked about it:
- Zero dependencies
- Very small
- Works across frameworks
- Gracefully does nothing on unsupported devices
If a device does not support vibration (like most desktops), the library simply no-ops silently. That means no special feature detection is needed.
Installation is simple:
npm i web-hapticsAdditionally for agents you can get the skills file from the library's SKILL.md.
Setting Up Web Haptics in a Next.js / React Project
Since my portfolio is built with Next.js and React, I used the React integration provided by the library.