10.03.2026·00:05:14

Web Haptics Are So COOL!!!

In this video we talk about web haptics and how websites can now trigger real phone vibrations when users interact with buttons. We look at how the library works, why it currently uses a Safari checkbox hack, and how designers can customize vibrations like success, error, or nudge feedback. It’s a fascinating shift that lets websites feel closer to native apps, and we even discuss using it in interactive experiences like a memory card game directly on a website. — Try Web Haptics: https://haptics.lochie.me/ — TIMESTAMPS: 00:00 Web Haptics Demo 00:25 What Haptic Feedback Means 01:00 How the Website Vibrates 01:32 Safari Checkbox Hack 02:05 Designing Vibrations 02:40 UX Examples 03:15 Using It in Games 03:45 Why Designers Love It 04:10 Possible Apple Risks 04:45 Command AI Show — Unlock the full potential of your online presence with Kabarza and Samuel—experts in web design and development (respectively), powered by cutting-edge AI solutions. We blend creative design with advanced tech to deliver smart, high-impact websites that stand out. Ready to elevate your business? Contact us today and see what AI-driven innovation can do for you! LINKS & RESOURCES: Website: https://cmdaishow.com Check out Kabarza's amazing work: https://kabarza.com Visit Samuel's website for more: https://samuelgregory.co.uk 📷 Follow on Instagram: https://www.instagram.com/cmdaishow — HASHTAGS: #ai #podcast #aidesign #aidevelopment #vibecoding #webdesign #webdevelopment #ainews #webnews #designnews #devnews #WebDesign #UXDesign #WebDevelopment #Haptics #MobileUX

Transcript
All right. So now you can have haptics on your website uh using web haptics. So this is like my phone and all of these when I like click them I I get a vibration command AI and this previously was not possible. It was only possible if you had a native app. But now you can have it through a website. So you can install it on your website when people click on a button uh to get a haptic. And what's really cool about it is you can as you see here uh you can design it. So all of these that you see are essentially uh vibrations with like different frequency and different length uh and essentially like different strength. And you can animate uh you you can like custom made whatever you want. And when a user interacts with your website, they get a haptic on their uh phone. And this you told me this is kind of like a hack. Yeah. So they've they figured out a way to um I think only on Safari it's a hack. you you you bind the event to like a checkbox an input a checkbox input and then you create it through that. I have a feeling that navigator.vibrate works on you know um Android phones and all the rest of it. I have Android phone here so I might I could maybe check. But yeah, it's a weird little hack they found and and all they've done is wrap a library around it cuz you can go on to this. If you scroll down, there's a little customize thing down the bottom that allows you to edit what what it is that you want. And it's so interesting because you've got these different uh they've got like success, error, things like that. And how they've how they're able to capture that in in vibrations is quite cool, don't you think? Yeah, it like you can feel it like it it makes sense. It's a really good design. So when I click on success, it does like the it feels like a tick. It's like ding ding. It's like you can feel it. And the nudge is, you know, a nudge. Error is like no, no, you know, it's like a bound a bon and the boss is obviously a buzz. Um, and these are just the the pre-made ones. And yeah, they they're really cool. First time I saw it on Twitter, I was like, what is this about? But then you told me and I tested it on my phone. I really encourage you to just go to the link below and just click the buttons and it it's just so fun. Maybe a part of it is because I'm on an iPhone and iPhones have like really good haptic um engines. But yeah, uh it's pretty cool. I'm I'm like seriously considering adding this to my next website. I don't know for a contact button or something. I will have a section on my phone playing memory like literally like the game memory with cards will be on my website. So this is like an amazing thing to add to it. For example, when you uh when you have the cards and you have it wrong, you get the the error and when you have it right, you get the you know the success uh vibration. It's it's just fun and adding to the depth of the experience and yeah, I'm going to I'm going to use it. Uh did you notice there's also a skill that you can download to help you use the library? Not that it's massively complex, but this obvious this won't be in the training data. So, you're going to need some sort of way of telling the AI. Yeah. Yeah, it makes sense. It still makes sense to have that. Yeah, it's not in the training data because it's just so new. Uh this is done by Lochi, a design engineer. Uh I see you have it mentioned. So yeah, design engineers are cool, man. And uh there was a guy who does a lot of cool stuff. Um Jhe with it. So he's he's been playing with it before and yeah, there's a lot of conversation in in the in the tweet. Mhm. Um around the hack with the with the checkbox. Jay is saying, "Huh, nice. Never consider building an abstraction for this one as it uh always felt like Apple could pull the hack at any moment." That's true. Apple could take it away. uh made some demos around this for config in the past uh where I'd leverage GAP trigger uh ticker for the dotclick uh to get different intensity rates. This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI.