Ever felt your phone give a tiny “thump” when you click a button in an app? That sensation is called haptic feedback, and it makes digital interactions feel more physical and satisfying. Today, we are going to learn how to bring that same native-app feeling to your mobile websites using a clever tool called Web Haptics.
Adding haptic feedback is a fantastic way to improve User Experience (UX). It provides a tactile confirmation that a user’s action was successful, such as when they submit a form, toggle a switch, or encounter an error. While native apps have had this for a long time, the mobile web has traditionally struggled to keep up—until now. Let’s look at how we can implement this in our web projects.
To get started, we use the web-haptics package, which is available via NPM. This library is quite versatile because it works with popular frameworks like React, Vue, and Svelte, but it can also be used with plain Vanilla JavaScript. For developers using React, the library provides a custom hook called useWebHaptics. When you call this hook, it returns several useful tools: a trigger function to start the vibration, a cancel function to stop it, and an isSupported boolean to check if the user’s browser can actually handle haptics.
The implementation is surprisingly straightforward. Once you have the library installed, you can simply call the trigger() function inside an onClick event handler. For example, if you want a button to vibrate when pressed, you would link the button’s click event directly to that function. The library also includes a debug: true mode. Since you cannot feel vibrations while developing on a laptop, the debug mode plays a subtle sound that mimics the vibration pattern, allowing you to “hear” the haptics while you build.
One of the most powerful features of Web Haptics is the ability to create custom patterns. A vibration isn’t just a simple “on” or “off” switch; you can control three main properties:
- Duration: How long the vibration lasts (measured in milliseconds).
- Delay: The pause between multiple vibrations.
- Intensity: How strong the vibration feels, ranging from a soft “nudge” to a strong “buzz.”
By combining these properties in an array of objects, you can create complex patterns. For instance, a “success” pattern might be two quick, light taps, while an “error” pattern might be one long, heavy vibration. If you find writing these objects tedious, the Web Haptics website offers a visual editor where you can drag and drop vibrations to create the perfect sequence and then copy the resulting code directly into your project.
Now, let’s talk about the technical “magic” happening under the hood. On Android devices, the library uses the standard navigator.vibrate API. This is a built-in browser feature that allows websites to access the phone’s vibration motor. However, there is a major hurdle: Apple’s iOS does not support this API in Safari or Chrome. This means, normally, your iPhone wouldn’t vibrate at all when browsing a website.
The creator of Web Haptics found a brilliant workaround for this limitation. On iOS, specific UI elements like the “switch” or “checkbox” input types have haptic feedback built into the operating system by default. When a user interacts with these elements, the iPhone vibrates automatically. The library takes advantage of this by creating an invisible, tiny checkbox on your page. When you call the trigger() function, the library quickly toggles this hidden checkbox on and off. To the iPhone, it looks like a standard UI interaction, so it triggers the vibration. This “trick” allows web developers to achieve haptic feedback on iOS that feels exactly like a native Apple app.
In conclusion, tactile feedback is a small detail that makes a massive difference in how professional a website feels. By using the web-haptics library, you can bridge the gap between mobile websites and native applications. It is easy to install, highly customizable, and uses clever workarounds to ensure compatibility across both Android and iOS devices. I highly recommend experimenting with different intensities and patterns to see what fits your site’s personality best. Always remember to use haptics sparingly; too much vibration can become annoying, but the right amount can make your website feel truly alive.