Loading video...

Video Failed to Load

Go Home

It's time to bring Haptics to the web ๐Ÿซจ Create custom tactile patterns with strengths + durations for your web interactions. Make your app feel as good as it looks โœจ โ†’

2,149,159 views โ€ข 7 months ago โ€ขvia X (Twitter)

43 Comments

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

๐š—๐š™๐š– ๐š’ ๐š ๐šŽ๐š‹-๐š‘๐šŠ๐š™๐š๐š’๐šŒ๐šœ works both on iOS and Android ๐Ÿ“ณ huge thanks to @alexvanderzon for jamming on this with me! ๐Ÿค

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

now available as a skill

jhey ส•โ€ขแดฅโ€ขส”'s profile picture
jhey ส•โ€ขแดฅโ€ขส”7 months ago

ha, nice โ€“ never considered building an abstraction for this one as it always felt like apple could pull the hack at any moment ๐Ÿ˜… made some demos around this for confs in the past where i'd leverage gsap.ticker for the .click() to get different "intensity rates"

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

essentially what this does. has the fallback for navigator.vibrate() so if the workaround ever gets pulled there's still a chance it'll still be functional down the line

jhey ส•โ€ขแดฅโ€ขส”'s profile picture
jhey ส•โ€ขแดฅโ€ขส”7 months ago

in an ideal world we would just have cross-browser navigator.vibrate() ๐Ÿ™‡โ€โ™‚๏ธ for now, timeline those label clicks ๐Ÿ˜… p.s i like the qr code touch, that's nice ux

Parth Patel's profile picture
Parth Patel7 months ago

neat - similar to tactus?

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

other packages don't support intensity + duration. i've aimed to get web-haptics as close to iOS native vibes as possible.

Parth Patel's profile picture
Parth Patel7 months ago

cant wait to try

SIP's profile picture
SIP7 months ago

u will never tempt me to post a web app

Alex Greenland's profile picture
Alex Greenland7 months ago

@AnaArsonist how much haptic did you use? yes.

pugson's profile picture
pugson7 months ago

can u make a bridge between desktop editor + mobile website to preview the pattern on your phone instantly

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

good idea. the editor should be mobile friendly but iโ€™ll look into this ๐Ÿค

pugson's profile picture
pugson7 months ago

websockets

Andrew Ambrosino's profile picture
Andrew Ambrosino7 months ago

@raunofreiberg any chance of making this work with the Mac trackpad like snapping does in

Benji Taylor's profile picture
Benji Taylor7 months ago

goated

Raffi's profile picture
Raffi7 months ago

Real ones will remember the 48 hours that SIP had this exclusive alpha

Jake Dow-Smith's profile picture
Jake Dow-Smith7 months ago

priorities

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

๐Ÿคฏ

Nayli Naza's profile picture
Nayli Naza7 months ago

itโ€™s so good @lochieaxon !! tried it for !!!

Aiden Bai's profile picture
Aiden Bai7 months ago

banger

Joe Bell's profile picture
Joe Bell7 months ago

Canโ€™t believe this is free Truly top notch stuff ๐Ÿ”ฅ

Andreas Storm's profile picture
Andreas Storm7 months ago

๐Ÿ”ฅ

James Clements's profile picture
James Clements7 months ago

the generational run continues

Gabriel Foulon's profile picture
Gabriel Foulon7 months ago

I vibe coded pretty much the exact same thing a few months ago, but Iโ€™m really happy to see a much cleaner version haha Web mobile deserves a better experience!

Stani's profile picture
Stani7 months ago

Huge

Miguel Piedrafita โœจ's profile picture
Miguel Piedrafita โœจ7 months ago

@pacocoursey no wayyyyy lfg

Ryan McLeod's profile picture
Ryan McLeod7 months ago

This is a lovely editor

60fps's profile picture
60fps7 months ago

โ™ฅ๏ธ

pugson's profile picture
pugson7 months ago

hell yeah

Austin Valleskey's profile picture
Austin Valleskey7 months ago

Such a fun website, love this ๐Ÿซถ

Sadi Moodi's profile picture
Sadi Moodi7 months ago

Web haptics is such an underrated UX layer. Your approach with intensity + duration is key - most libraries skip this. Quick tip: map iOS HapticFeedbackStyle to WebHapticsPattern for native-feeling feedback. Would love to see this in a React component library!

rauno's profile picture
rauno7 months ago

yesssss

Pran's profile picture
Pran7 months ago

๐Ÿ”ฅ

ana howard's profile picture
ana howard7 months ago

holy shit

Ben South's profile picture
Ben South7 months ago

LFG

joshpuckett's profile picture
joshpuckett7 months ago

feels so good!

Damian's profile picture
Damian7 months ago

Does not seem to work on android though ?

Julian's profile picture
Julian7 months ago

What API does it use? I only know of the checkbox hack for mobile safari...

ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie's profile picture
ุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœุœlochie7 months ago

it's using that workaround + navigator.vibrate() where possible. I spent the time replicating the same feeling as native haptics and this package offers an API abstraction similar to native handling of haptics.

Sam Saccone's profile picture
Sam Saccone7 months ago

joyful. well done

Souvik Biswas's profile picture
Souvik Biswas7 months ago

It supposed to work on Android Chrome? Doesn't seem to get it work on Android but works like a charm on iOS. So cool!

matt's profile picture
matt7 months ago

@_joerl dude

Quentin Merabet's profile picture
Quentin Merabet7 months ago

Wait last time I checked it wasnโ€™t supported by Apple โ€“ even in PWA. Is this new?

Related Videos