diff --git a/img-melt.js b/img-melt.js
index d605754..72a36a1 100644
--- a/img-melt.js
+++ b/img-melt.js
@@ -1,3 +1,5 @@
+const gravity = { x:0, y:0 };
+
 class Melt extends HTMLElement {
   constructor() {
     super();
@@ -9,6 +11,9 @@ class Melt extends HTMLElement {
     this.blend = this.hasAttribute('blend');
     this.src = this.getAttribute('src') || false;
     this.await = this.getAttribute('await') || false;
+    this.gravityEnabled = this.getAttribute('gravity') || false;
+    
+    window.addEventListener('devicemotion', this.handleMotion, true);
 
     this.stepBound = this.step.bind(this);
 
@@ -20,7 +25,6 @@ class Melt extends HTMLElement {
     });
     this.shadow.appendChild(this.canvas);
 
-
     if (this.src) {
       let img = new Image();
       img.crossOrigin = "Anonymous";
@@ -28,7 +32,7 @@ class Melt extends HTMLElement {
 
       //drawing of the test image - img1
       img.onload = function() {
-        // nb 'this' here is the image, so we need obj bounf to this previously
+        // nb 'this' here is the image, so we need obj bound to this previously
         obj.canvas.setAttribute("width", this.width);
         obj.canvas.setAttribute("height", this.height);
         obj.ctx.drawImage(this, 0, 0, this.width, this.height);
@@ -51,6 +55,10 @@ class Melt extends HTMLElement {
     }
   }
 
+  handleMotion(e) {
+    gravity.x = e.accelerationIncludingGravity.x;
+  }
+
   drawBalls() {
     this.ctx.globalAlpha = 1;
     this.canvas.setAttribute("width", this.w);
@@ -78,6 +86,17 @@ class Melt extends HTMLElement {
     return x;
   }
 
+  gravityEffect(x) {
+    // Gravity manually throttled for better effect
+    if (gravity.x > 1) {
+      return x - 1 ;
+    } else if (gravity.x < -1) {
+      return x + 1 ;
+    } 
+    return x;
+  }
+
+
   noJiggle(x) {
     return x;
   }
@@ -151,7 +170,7 @@ class Melt extends HTMLElement {
     for (let y = this.h-2; y >= 0; y--) {
       for (let x = this.w-1; x >= 0; x--) {
         const above = this.xyToArr(x, y);
-        const below = this.xyToArr(this.jiggle(x), y+1);
+        const below = this.xyToArr(this.gravityEffect(this.jiggle(x)), y+1);
         if (img.data[below + 3] == 0 && img.data[above + 3] != 0) {
           moved++;
           this.swapPixels(img.data, above, below);
diff --git a/index.html b/index.html
index 92fc588..4e86328 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,6 @@ <h1>Img-Melt Source</h1>
 <p>An image that melts when loaded.  Each pixel is compared with the pixel below it, if the supporting (lower) pixel is transparent the upper pixel will fall into its place (their positions are swapped).</p>
 
 <p>For example, if you have a modern browser, click this image.
-<p><img-melt src=img/portsmouth.png jiggle blend await=click><img src=img/portsmouth.png alt="University of Portsmouth"></img-melt>
+<p><img-melt src=img/portsmouth.png jiggle blend await=click ><img src=img/portsmouth.png alt="University of Portsmouth"></img-melt>
 
 <p><a href="test/logos.html">A test page containing some well known logos.</a>
diff --git a/package-lock.json b/package-lock.json
index 0cb721b..7f7c1dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,13 @@
 {
   "name": "img-melt",
   "version": "1.0.0",
-  "lockfileVersion": 1
+  "lockfileVersion": 1,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "img-melt",
+      "version": "1.0.0",
+      "license": "MIT"
+    }
+  }
 }