JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<div id="emptywebpage">your <a href="http://www.facebook.com/emptywebpage" target="_blank">idea</a> here</div>
<canvas id="canvas">no soup for you</canvas>
<div id="container"></div>

CSS

body {
    background-color: #ffffff;
    margin: 0px;
    overflow: hidden;
}

a {
    color: #e4e4e4;
    text-decoration: none;
}

a:hover {
    border-bottom: 4px solid #e0f0f4;
}
#canvas{ background: #ffffff; }
#emptywebpage{ 
    position:absolute; cursor: default; font-family: sans-serif; font-size: 44px; color: #e4e4e4;
           /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0.0;

  /* Safari 1.x */
  -khtml-opacity: 0.0;

  /* Good browsers */
  opacity: 0.0;
}

JavaScript

var QUALITY;var WIDTH;var HEIGHT;var SIZE;var container;var canvas;var context;var image;var data;var buffer1;var buffer2;var tempbuffer;var pointers;var hasClicked=false;var isUserInteracting;init();addEventBindings();setInterval(loop,1000/60);var th=setTimeout(function(){showText()},12000);function init(){QUALITY=2;WIDTH=Math.floor(window.innerWidth/QUALITY);HEIGHT=Math.floor(window.innerHeight/QUALITY);SIZE=WIDTH*HEIGHT;container=document.getElementById("container");canvas=document.getElementById("canvas");canvas.width=WIDTH;canvas.height=HEIGHT;canvas.style.width=window.innerWidth+"px";canvas.style.height=window.innerHeight+"px";container.appendChild(canvas);context=canvas.getContext("2d");context.fillStyle="rgb(255,255,255)";context.fillRect(0,0,WIDTH,HEIGHT);image=context.getImageData(0,0,WIDTH,HEIGHT);data=image.data;buffer1=[];buffer2=[];for(var a=0;a<SIZE;a++){buffer1[a]=0;buffer2[a]=0}txt=document.getElementById("emptywebpage");txt.style.top=Math.floor(window.innerHeight/QUALITY)-40+"px";txt.style.left=Math.floor(window.innerWidth/QUALITY)-140+"px"}window.onresize=function(a){init()};function addEventBindings(){document.addEventListener("mousedown",onDocumentMouseDown,false);document.addEventListener("mousemove",onDocumentMouseMove,false);document.addEventListener("mouseup",onDocumentMouseUp,false);document.addEventListener("mouseout",onDocumentMouseOut,false);document.addEventListener("touchstart",onDocumentTouchStart,false);document.addEventListener("touchmove",onDocumentTouchMove,false);document.addEventListener("touchend",onDocumentTouchEnd,false);document.addEventListener("keyup",onDocumentKeyUp,false)}function onDocumentMouseDown(a){a.preventDefault();isUserInteracting=true;pointers=[[a.clientX/QUALITY,a.clientY/QUALITY]]}function onDocumentMouseMove(a){pointers=[[a.clientX/QUALITY,a.clientY/QUALITY]]}function onDocumentMouseUp(a){isUserInteracting=false}function onDocumentMouseOut(a){isUserInteracting=false}function...