I just found something really interesting. This is a web based haptic system that works directly in your browser.

When you open it on the desktop, you will hear sound For example, if You click a button but when you open it on your phone, you will hear the sound and feel vibration just like a native application. This is a beautiful package. So let's take a look how we can use that.

It's just really simple. You need to just install the package web haptics and then you can just run the use web haptics hooks and run it.

npm i web-haptics

Grab the trigger function and running that on the on click just starts it.

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

const { trigger } = useWebHaptics();

<button onClick={() => trigger()}>Tap me</button>

And as you can see in here, there's a couple um custom haptic like a success, warning, error, light, medium, heavy, and etc.

And the beauty part is you can customize it. As you can see, I can just make the duration uh like uh 500 millisecond or whatever you want, right? You can just play here. Look super nice. You can just just play around with whatever you want like the intensity, the delay, whatever it is. If you don't want this one, you can just pull it out like this and it just gone, right? So, let's just take a look the code. I just want to see how this works So anyway, I'm going to clone that code and let's trying to see how this is web haptics works.

https://github.com/lochie/web-haptics

I cloned the code from the GitHub and I found this one. So basically how this haptics works is really simple. It using navigator.vibrate. So basically the vibration API a builtin browser API that allow a website to trigger vibration on supported devices. So now let's just try this beautiful package here on the react application. I already generate react application using Nextjs and Shadcn ui and as you can see this is really simple we have some button in here. So, let's take a look in here. Use debug and set equals to true if you working with development mode. So, let's just try to setting that. And now, it works.

"use client";

import { Button } from "@/components/ui/button";
import { ArrowUpIcon } from "lucide-react";
import { useWebHaptics } from "web-haptics/react";

export default function Home() {
  const { trigger } = useWebHaptics({
    debug: true
  });

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button variant="outline" onClick={() => trigger()}>Button</Button>
      </div>
    </div>
  );
}

So, let's just take a look on the handle copy in here. For example, I want to create a custom haptics. Let's just play around with this haptics right here. I'm going to make the duration long. Let's just play around with that. And now we can just copy this trigger function and then paste that inside the handle copy. And it's basically done. Let's take a look how it works.

"use client";

import { Button } from "@/components/ui/button";
import { ArrowUpIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
import { useWebHaptics } from "web-haptics/react";

export default function Home() {
  const [copied, setCopied] = useState(false);
  const { trigger } = useWebHaptics({
    debug: true
  });

  const handleCopy = async () => {
    await navigator.clipboard.writeText("Hello from Stoppio...");
    trigger([
      { duration: 950 },
    ])
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button variant="outline" size="icon" aria-label="Submit" onClick={handleCopy}>
          <CopyIcon />
        </Button>
      </div>
    </div>
  );
}

So how about the error? Same thing. You can just run the function and put the string error. That's it. So I think you have to try this web haptics for your mobile web and for example you can implement that on the toast notification like this for example after user make an action and the toast is show and then you can adding the web haptics and you can just running this trigger it basically will make your mobile web feel native.

[Web Haptics]: https://haptics.lochie.me/

Web Haptics I Found This… And It Makes Web Apps Feel Native