html {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
}
body {
	position:absolute;
	margin:0;
	padding:0;
	background:#fff;
	width:100%;
	height:100%;
}
#screen {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#background {
	position:absolute;
	left:0;
	top:12%;
	width:100%;
	height:76%;
	background:#eee;
}

<div id="background"></div>
<canvas id="screen"></canvas>

/* 
 * ==============================================================
 * javascript experiment
 * http://www.dhteumeuleu.com/
 * Author Gerard Ferrandez - 1 Sept 2009
 * Javascript released under the MIT license
 * http://www.dhteumeuleu.com/LICENSE.html
 * Last updated: 16 Dec 2012
 * ===============================================================
 */

"use strict";

(function () {
	/* ---- private vars ---- */
	var scr, pointer, prev, img;
	var particles = 100;
	var pos = new Array(particles);
	/* particle constructor */
	function Particle (x, y) {
		this.x       = x;
		this.px      = x;
		this.y       = y; 
		this.py      = y; 
		this.dx      = 0;
		this.dy      = 0;
		this.next    = true;
		this.prev    = prev;
		prev         = this;
	}
	Particle.prototype.link = function () {
		if (pointer.hasMoved) {
			var vx = this.x - pointer.X;
			var vy = this.y - pointer.Y;
			var d = Math.sqrt(vx * vx + vy * vy);
			if (d < 100) {
				d = (100 - d) / d;
				this.dx += vx * d * .2;
				this.dy += vy * d * .2;
			}
		}
		var vx = this.prev.x - this.x;
		var vy = this.prev.y - this.y;
		var d = Math.sqrt(vx * vx + vy * vy);
		if (d > 0) {
			d = ((5 - d) / d) / 30;
			var dx = vx * d;
			var dy = vy * d;
			this.dx -= dx;
			this.dy -= dy;
			this.prev.dx += dx;
			this.prev.dy += dy;	
		}
		return this.next;
	}
	Particle.prototype.update = function () {
		this.x += this.dx;
		this.y += this.dy;
		var w = (img.width || 0) * 0.5;
		scr.ctx.drawImage(img, this.x - w, this.y - w);
		var vx = this.x - this.px;
		var vy = this.y - this.py;
		this.px = this.x;
		this.py = this.y;
		this.x += vx;
		this.y += vy;
		this.dx = 0;
		this.dy = 0;
		if (this.x < 0) this.dx = Math.abs(vx) * .1; 
		else if (this.x > scr.width) this.dx = -Math.abs(vx) * .1;
		if (this.y < 0) this.dy = Math.abs(vy) * .1; 
		else if (this.y > scr.height) this.dy = -Math.abs(vy) * .1;
		return this.next;
	}
	/* --- main loop --- */
	var run = function () {
		scr.ctx.clearRect(0, 0, scr.width, scr.height);
		var i;
		// ---- update velocity ----
		for (
			i = 0; 
			pos[i++].update();
		);
		// ---- links ----
		for (
			i = 1; 
			pos[i++].link();
		);
		// ---- loop ----
		pointer.hasMoved = false;
		requestAnimFrame(run);
	}
	return {
		/* ==== public functions ==== */
		load : function () {
			window.addEventListener('load', function () {
				/* ---- init script ---- */
				scr = new ge1doot.Screen({
					container: "screen"
				});
				// ---- init pointer ----
				pointer = new ge1doot.Pointer({});
				// ---- particle image ----
				img = new Image();
				img.src = "../images/sphere-monochrome.png";
				// ---- create particles ----
				for (var i = 0; i < particles; i++ ) {
					pos[i] = new Particle (
						i * scr.width / particles,
						scr.height * .5 + Math.sin(i/10) * scr.height * .25
					);
				}
				pos[particles - 1].next = false;
				run();
			}, false);
		}
	}
})().load();