haptics

A collection of tactile vibrations to elevate your users mobile experience.

7 Clone HapticsTry Webflow

Nudge

Vibration:
nudge

Notification

Vibration:
notification
x

New

Vibration:
new
3

Alert

Vibration:
alert

Dial tone

Vibration:
dialtone

Pulse

Vibration:
pulse
1

Select your element

Click on the element you want to add a vibration, then go to the settings tab on the top right-hand menu.

2

Add custom attribute

Within your element settings under "Custom Attributes", add a new attribute and set the name to "data-haptics" and value to "vibration name".

Example:

Name:
data-haptics
Value:
nudge
3

Publish and done!

Once your done simply publish and preview on a mobile device!

Customizing the script

If you wish to make any modifications to the script, you can find it in the home page "edit page settings" under the "Before <body> tag".

How it works

This library utilizes the HTML5 browser method "navigator.vibrate" which results in vibrotactile effects from the device's vibration motor. It is important to keep in mind that these vibrations can reduce noticeable battery power on your users device so please use responsibly. IMPORTANT does not work on all devices.

Credits

This library was created thanks to  Shantanu Bala's haptics.js

Made in Webflow