Getting started with Jazz hands JS

Jazz hands is a JavaScript library for motion controllers

To begin, hold a single hand behind the controller, toward the screen.

Watch a 2 min tutorial on

1. Basic Implementation

A basic implementation requires just a few lines of code.

Neutral Navigation Code

By default, a UI gives you single handed indication of up, down, left, right.. zoom in and out.

Starting in neutral
A neutral position with Jazz hands is the position where no navigation event is triggered.

To continue, hold a single hand to the right of the controller.
Navigation zones
Moving along the X, Y and Z axis allows for 6-degrees of movement.

Keeping your hand in one of the six "zones" triggers a timer-based event to fire.
A basic implementation just an init and a binding to navigation. The source is available on github.

Jazz.on('navigation', function(n) {

2. Jazz Hands Events

There are 3 additional jazz hands events you can listen for (fingers, grab/release, progress)

Fingers Grab Progress

"Fingers" informs how many fingers are being held up. "Grab/release" informs you when a fist is open or closed. "Progress" is the relative location of your hand.

Fingers Event
The fingers event is triggered when initializing
with a fingersText array. Element order = finger #.

    fingersText: ["Zoom Out?","Zoom in!"]
Jazz.on("fingers", function(fingers) {
    console.log("on fingers = " + fingers);
Grab/Release A "grab" event is triggered when a fist is clenched. "release" is called once the fist is unclenched.

Jazz.on("grab", function () {

Jazz.on("release", function () {
Progress The "progress" event gives constant feedback on the movement of the hand, as it relates to a navigation motion.

Jazz.on("progress", function (progress) {
    var upPercent = progress["up"]; // ... down, up, left, right
    var zoomOut = progress["zoomOut"]; // ... zoomIn
    var rollRight = progress["rollRight"]; // ... rollLeft
    var yawRight = progress["yawRight"]; // ... yawLeft


three.js demo

3. More control

Additionally, you can access the raw gestures and frames, and some other minor options.

Gestures Frames More

"Gestures and Frames" gives you access to native gestures and frames. You can also customize the timer and the display of the UI.

Gestures Simplifed gestures are available on the "gestures" event.

These native gestures have been simplified to a single gesture, instead of an array of possibilities.

// g = CircleGesture, KeyTapGesture, ScreenTapGesture
Jazz.on("gestures", function (g) { 


Frames Frame data is available from the Jazz.on("frames") event.

You can evaluate the frame object and have access to all the captured event data from leap JS.

Jazz.on("frames", function (f) {


Other options The wait timer is configurable Jazz.WAIT_FINGER_MS=900;

Hide or show the UI using Jazz.hide() or

Toggle the "helper arrows" by setting  Jazz.disableHelper.
Toggle the "timer" by setting  Jazz.disableTimer.

During run-time setup finger events using Jazz.setFingersText(["one","two"]).

Clear the finger event bindings using Jazz.clearFingersText().