diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..d838da9
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1 @@
+examples/
diff --git a/examples/visual.html b/examples/visual.html
new file mode 100644
index 0000000..e85d0e6
--- /dev/null
+++ b/examples/visual.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" href="assets/style.css">
+  <title>Jammer.js</title>
+
+  <style>
+    html, body {
+      overflow: hidden;
+      margin: 0;
+    }
+
+    body {
+      -webkit-perspective: 500;
+      -moz-perspective: 500;
+      perspective: 500;
+    }
+
+    .animate {
+      -webkit-transition: all .3s;
+      -moz-transition: all .3s;
+      transition: all .3s;
+    }
+
+    #hit {
+      padding: 10px;
+    }
+
+    #log {
+      position: absolute;
+      padding: 10px;
+    }
+
+  </style>
+</head>
+<body>
+
+<div id="log"></div>
+<div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>
+
+<div id="updatenote" class="updatenote mt10"> loading model ..</div>
+<video class="videobox canvasbox" autoplay="autoplay" id="myvideo"></video>
+<canvas id="canvas" class="border canvasbox"></canvas>
+<script src="../node_modules/handtrackjs/dist/handtrack.min.js"> </script>
+
+<script src="../node_modules/hammerjs/hammer.js"></script>
+<script>
+  const video = document.getElementById("myvideo");
+  const canvas = document.getElementById("canvas");
+  const context = canvas.getContext("2d");
+  let updateNote = document.getElementById("updatenote");
+
+  let imgindex = 1
+  let isVideo = false;
+  let model = null;
+
+  // video.width = 500
+  // video.height = 400
+
+  const modelParams = {
+    flipHorizontal: true,   // flip e.g for video
+    maxNumBoxes: 20,        // maximum number of boxes to detect
+    iouThreshold: 0.5,      // ioU threshold for non-max suppression
+    scoreThreshold: 0.6,    // confidence threshold for predictions.
+  }
+
+
+  function startVideo() {
+    handTrack.startVideo(video).then(function (status) {
+      console.log("video started", status);
+      if (status) {
+        updateNote.innerText = "Video started. Now tracking"
+        isVideo = true
+        runDetection()
+      } else {
+        updateNote.innerText = "Please enable video"
+      }
+    });
+  }
+
+  function runDetection() {
+    model.detect(video).then(predictions => {
+      console.log("Predictions: ", predictions);
+      model.renderPredictions(predictions, canvas, context, video);
+      if (isVideo) {
+        requestAnimationFrame(runDetection);
+      }
+    });
+  }
+
+  // Load the model.
+  handTrack.load(modelParams).then(lmodel => {
+    // detect objects in the image.
+    model = lmodel
+    updateNote.innerText = "Loaded Model!"
+    runDetectionImage(handimg)
+    trackButton.disabled = false
+    nextImageButton.disabled = false
+  });
+
+  startVideo();
+
+
+  class HandrackInput extends Hammer.Input {
+    constructor() {
+      super(...arguments);
+      console.log('created!');
+    }
+
+    handler(ev) {
+      console.log('handler');
+    }
+  }
+
+
+
+  var reqAnimationFrame = (function () {
+    return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    };
+  })();
+
+  var log = document.querySelector("#log");
+  var el = document.querySelector("#hit");
+
+  var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
+  var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
+
+  var ticking = false;
+  var transform;
+  var timer;
+
+  var mc = new Hammer.Manager(el, {inputClass: HandrackInput});
+
+  mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+
+  mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
+  mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
+  mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
+
+  mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
+  mc.add(new Hammer.Tap());
+
+  mc.on("panstart panmove", onPan);
+  mc.on("rotatestart rotatemove", onRotate);
+  mc.on("pinchstart pinchmove", onPinch);
+  mc.on("swipe", onSwipe);
+  mc.on("tap", onTap);
+  mc.on("doubletap", onDoubleTap);
+
+  mc.on("hammer.input", function(ev) {
+    if(ev.isFinal) {
+      resetElement();
+    }
+  });
+
+
+  function resetElement() {
+    el.className = 'animate';
+    transform = {
+      translate: { x: START_X, y: START_Y },
+      scale: 1,
+      angle: 0,
+      rx: 0,
+      ry: 0,
+      rz: 0
+    };
+
+    requestElementUpdate();
+
+    if (log.textContent.length > 2000) {
+      log.textContent = log.textContent.substring(0, 2000) + "...";
+    }
+  }
+
+  function updateElementTransform() {
+    var value = [
+          'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
+          'scale(' + transform.scale + ', ' + transform.scale + ')',
+          'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'
+    ];
+
+    value = value.join(" ");
+    el.textContent = value;
+    el.style.webkitTransform = value;
+    el.style.mozTransform = value;
+    el.style.transform = value;
+    ticking = false;
+  }
+
+  function requestElementUpdate() {
+    if(!ticking) {
+      reqAnimationFrame(updateElementTransform);
+      ticking = true;
+    }
+  }
+
+  function logEvent(str) {
+    //log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
+  }
+
+  function onPan(ev) {
+    el.className = '';
+    transform.translate = {
+      x: START_X + ev.deltaX,
+      y: START_Y + ev.deltaY
+    };
+
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  var initScale = 1;
+  function onPinch(ev) {
+    if(ev.type == 'pinchstart') {
+      initScale = transform.scale || 1;
+    }
+
+    el.className = '';
+    transform.scale = initScale * ev.scale;
+
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  var initAngle = 0;
+  function onRotate(ev) {
+    if(ev.type == 'rotatestart') {
+      initAngle = transform.angle || 0;
+    }
+
+    el.className = '';
+    transform.rz = 1;
+    transform.angle = initAngle + ev.rotation;
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  function onSwipe(ev) {
+    var angle = 50;
+    transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
+    transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
+    transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
+
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      resetElement();
+    }, 300);
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  function onTap(ev) {
+    transform.rx = 1;
+    transform.angle = 25;
+
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      resetElement();
+    }, 200);
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  function onDoubleTap(ev) {
+    transform.rx = 1;
+    transform.angle = 80;
+
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      resetElement();
+    }, 500);
+    requestElementUpdate();
+    logEvent(ev.type);
+  }
+
+  resetElement();
+
+</script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 7751f17..82266a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,139 @@
         "xstream": "11.10.0"
       }
     },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78=",
+      "dev": true
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "dev": true
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "dev": true
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A=",
+      "dev": true
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "dev": true,
+      "requires": {
+        "@protobufjs/aspromise": "1.1.2",
+        "@protobufjs/inquire": "1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E=",
+      "dev": true
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik=",
+      "dev": true
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0=",
+      "dev": true
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q=",
+      "dev": true
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=",
+      "dev": true
+    },
+    "@tensorflow/tfjs": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-0.13.5.tgz",
+      "integrity": "sha512-a0sbY2IShg+hAD+Es8fy1Ey/afoks4fxSi+PVSZc1st51brCnO3qBbqwDDctRNwx/EOfAroS8IWIKgaWTpsflg==",
+      "dev": true,
+      "requires": {
+        "@tensorflow/tfjs-converter": "0.6.7",
+        "@tensorflow/tfjs-core": "0.13.11",
+        "@tensorflow/tfjs-layers": "0.8.5"
+      }
+    },
+    "@tensorflow/tfjs-converter": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-0.6.7.tgz",
+      "integrity": "sha512-7hsbLbx0KM1Bew00kVoslrnNMOUTyP9NZLDl03cEkrCbEYsaG7jouLxHVz+B0A6/ZPE1N40xmD2JRnu54VKT8g==",
+      "dev": true,
+      "requires": {
+        "@types/long": "3.0.32",
+        "protobufjs": "6.8.8"
+      }
+    },
+    "@tensorflow/tfjs-core": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-0.13.11.tgz",
+      "integrity": "sha512-jHTD7LbpC3JpsP2mBVD3ZiYV+Xr/l91zpA5HpQVnbdNat5J/IJHabeYwYtukiVyN4amHqyFvGFtX/gjLD82rXg==",
+      "dev": true,
+      "requires": {
+        "@types/seedrandom": "2.4.27",
+        "@types/webgl-ext": "0.0.30",
+        "@types/webgl2": "0.0.4",
+        "seedrandom": "2.4.3"
+      }
+    },
+    "@tensorflow/tfjs-layers": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-0.8.5.tgz",
+      "integrity": "sha512-yQoVyh5q3Hh3YmLXGvKAkgsLVFe0VQBRmgVxJkxzzWhCB+NrjUXU/IzHzCRoBcgcXKZTY9/XE5IcvPmJw9cIXw==",
+      "dev": true
+    },
+    "@types/long": {
+      "version": "3.0.32",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-3.0.32.tgz",
+      "integrity": "sha512-ZXyOOm83p7X8p3s0IYM3VeueNmHpkk/yMlP8CLeOnEcu6hIwPH7YjZBvhQkR0ZFS2DqZAxKtJ/M5fcuv3OU5BA==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "10.14.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.6.tgz",
+      "integrity": "sha512-Fvm24+u85lGmV4hT5G++aht2C5I4Z4dYlWZIh62FAfFO/TfzXtPpoLI6I7AuBWkIFqZCnhFOoTT7RjjaIL5Fjg==",
+      "dev": true
+    },
+    "@types/seedrandom": {
+      "version": "2.4.27",
+      "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.27.tgz",
+      "integrity": "sha1-nbVjk33YaRX2kJK8QyWdL0hXjkE=",
+      "dev": true
+    },
+    "@types/webgl-ext": {
+      "version": "0.0.30",
+      "resolved": "https://registry.npmjs.org/@types/webgl-ext/-/webgl-ext-0.0.30.tgz",
+      "integrity": "sha512-LKVgNmBxN0BbljJrVUwkxwRYqzsAEPcZOe6S2T6ZaBDIrFp0qu4FNlpc5sM1tGbXUYFgdVQIoeLk1Y1UoblyEg==",
+      "dev": true
+    },
+    "@types/webgl2": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/webgl2/-/webgl2-0.0.4.tgz",
+      "integrity": "sha512-PACt1xdErJbMUOUweSrbVM7gSIYm1vTncW2hF6Os/EeWi6TXYAYMPp+8v6rzHmypE5gHrxaxZNXgMkJVIdZpHw==",
+      "dev": true
+    },
     "JSONStream": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
@@ -2489,6 +2622,27 @@
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
       "dev": true
     },
+    "hammer-simulator": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/hammer-simulator/-/hammer-simulator-0.0.1.tgz",
+      "integrity": "sha1-7tO85CtDMgF1o/T4NP4gjl+iSho=",
+      "dev": true
+    },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=",
+      "dev": true
+    },
+    "handtrackjs": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/handtrackjs/-/handtrackjs-0.0.13.tgz",
+      "integrity": "sha512-wu929ddK5YG+IDscjW7bEeeb4OPHhXx+CL5ddl2cmiTUsF4JwbG3LXPooo0k6ARUAQAPaGk/Xg7OzmzI1izqAA==",
+      "dev": true,
+      "requires": {
+        "@tensorflow/tfjs": "0.13.5"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3020,6 +3174,12 @@
       "integrity": "sha1-LcvSwofLwKVcxCMovQxzYVDVPj8=",
       "dev": true
     },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
+      "dev": true
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3603,6 +3763,35 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
+    "protobufjs": {
+      "version": "6.8.8",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.8.8.tgz",
+      "integrity": "sha512-AAmHtD5pXgZfi7GMpllpO3q1Xw1OYldr+dMUlAnffGTAhqkg72WdmSY71uKBF/JuyiKs8psYbtKrhi0ASCD8qw==",
+      "dev": true,
+      "requires": {
+        "@protobufjs/aspromise": "1.1.2",
+        "@protobufjs/base64": "1.1.2",
+        "@protobufjs/codegen": "2.0.4",
+        "@protobufjs/eventemitter": "1.1.0",
+        "@protobufjs/fetch": "1.1.0",
+        "@protobufjs/float": "1.0.2",
+        "@protobufjs/inquire": "1.1.0",
+        "@protobufjs/path": "1.1.2",
+        "@protobufjs/pool": "1.1.0",
+        "@protobufjs/utf8": "1.1.0",
+        "@types/long": "4.0.0",
+        "@types/node": "10.14.6",
+        "long": "4.0.0"
+      },
+      "dependencies": {
+        "@types/long": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.0.tgz",
+          "integrity": "sha512-1w52Nyx4Gq47uuu0EVcsHBxZFJgurQ+rTKS3qMHxR1GY2T8c2AJYd6vZoZ9q1rupaDjU0yT+Jc2XTyXkjeMA+Q==",
+          "dev": true
+        }
+      }
+    },
     "proxy-middleware": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
@@ -3868,6 +4057,12 @@
         "ret": "0.1.15"
       }
     },
+    "seedrandom": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-2.4.3.tgz",
+      "integrity": "sha1-JDhQTa0zkXMUv/GKxNeU8W1qrsw=",
+      "dev": true
+    },
     "semver": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
diff --git a/package.json b/package.json
index 005c750..1327e3e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "jammerjs",
   "version": "0.0.0",
   "description": "",
   "scripts": {
@@ -22,6 +22,9 @@
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^8.0.0",
     "browserify": "^16.2.2",
+    "hammer-simulator": "0.0.1",
+    "hammerjs": "2.0.8",
+    "handtrackjs": "0.0.13",
     "live-server": "^1.2.0",
     "mkdirp": "~0.5.0",
     "npm-run-all": "^4.1.5",
