Gearside Design

Custom vibration patterns for mobile devices

The HTML5 API opens up the ability to utilize a device’s vibration functionality. While from a user experience standpoint you’ll want to be very careful not to abuse this feature as most people will not be expecting a website to vibrate their phone, it’s also very fun to play with.

Here is the basic vibration snippet. The number, like the rest of JS timing, is in milliseconds.

JavaScript

if (navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate) {
navigator.vibrate(1000);
}

You can also create vibration patterns. The syntax is simply a pattern of on and off (starting with on and alternating thereafter). Here are some fun patterns to try.

These patterns could also be used on some of your phone’s apps that allow for custom patterns. Note that many phone apps start with “off”, so you may need to add a “0” to the pattern at the beginning.

Super Mario Theme Intro

JavaScript

navigator.vibrate([125,75,125,275,200,275,125,75,125,275,200,600,200,600]);

Teenage Mutant Ninja Turtles

JavaScript

navigator.vibrate([75,75,75,75,75,75,75,75,150,150,150,450,75,75,75,75,75,525]);

Voltron Theme

JavaScript

navigator.vibrate([250,200,150,150,100,50,450,450,150,150,100,50,900,2250]);

Final Fantasy Victory Fanfare

JavaScript

navigator.vibrate([50,100,50,100,50,100,400,100,300,100,350,50,200,100,100,50,600]);

Star Wars Imperial March (Darth Vader’s Theme)

JavaScript

navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]);

Go Go Power Rangers

JavaScript

navigator.vibrate([150,150,150,150,75,75,150,150,150,150,450]);

Shave and a Haircut

JavaScript

navigator.vibrate([100,200,100,100,75,25,100,200,100,500,100,200,100,500]);

Morse Code SOS

JavaScript

navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);

James Bond 007

JavaScript

navigator.vibrate([200,100,200,275,425,100,200,100,200,275,425,100,75,25,75,125,75,25,75,125,100,100]);

Mortal Kombat Theme

JavaScript

navigator.vibrate([100,200,100,200,100,200,100,200,100,100,100,100,100,200,100,200,100,200,100,200,100,100,100,100,100,200,100,200,100,200,100,200,100,100,100,100,100,100,100,100,100,100,50,50,100,800]);

Michael Jackson – Smooth Criminal

JavaScript

navigator.vibrate([0,300,100,50,100,50,100,50,100,50,100,50,100,50,150,150,150,450,100,50,100,50,150,150,150,450,100,50,100,50,150,150,150,450,150,150]);

Dream Theater – Fatal Tragedy “What a phenomenon”

JavaScript

navigator.vibrate([75,38,75,488,75,38,75,200,75,38,75,400]);

Dream Theater – Overture 1928 Intro

JavaScript

navigator.vibrate([75,25,75,25,75,25,75,525,75,25,75,25,75,25,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,525,75,25,75,25,75,25,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,225]);

Dream Theater – Strange Déjà Vu Intro

JavaScript

navigator.vibrate([100,50,100,50,100,50,100,350,100,50,100,50,100,50,100,350,100,50,100,50,100,500,100,50,100,50,100,50,100,1400]);

Muse – Madness

JavaScript

navigator.vibrate([80,80,80,80,80,80,80,80,80,80,80,80,80,80,80,80,320,160,320,160,320]);

Pain of Salvation – Nihil Morari

JavaScript

navigator.vibrate([50,50,50,50,50,50,50,550,300,300,100,200,50,50,50,50,50,50,50,250]);

Karnivool – Cote

JavaScript

navigator.vibrate([75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,225,75,75,75,225,75,75,75,225,75,75,75,225,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75]);

TesseracT – Nocturne

JavaScript

navigator.vibrate([660,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,420,60,420,60]);

TesseracT – Perfection

This is my coup de grâce since it’s one of my favorite riffs. It’s the main rhythm from “Perfection” by TesseracT.

JavaScript

navigator.vibrate([75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,150,150,75,75,75,225,75,375,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,150,150]);

Here is a great resource for more vibration documentation.

including example: