HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>

<head>
	<title>The Cursor Monster</title>
	<meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

</head>

<body>
		
	<header>
      <h2>Make sure your sound is ON!</h2>
	</header>    
        
	<div id="wrapper" class="sleep">
		
		<div id="monster">
			<div class="eye"><div class="lid"></div></div>
			<div class="eye"><div class="lid"></div></div>
			<div id="mouth"></div>
		</div>
				
	</div>
	
	
	
    
    <div id="footer">
            
        <h1>Feed the Cursor Monster</h1>
                 
        </div>
      
	
	<audio id="audio-ohh" preload="preload"><source src="http://monster.simurai.com/audio/ohh.ogg" /><source src="http://monster.simurai.com/audio/ohh.mp3" /><source src="http://monster.simurai.com/audio/ohh.wav" /></audio>
	<audio id="audio-snap" preload="preload"><source src="http://monster.simurai.com/audio/snap.ogg" /><source src="http://monster.simurai.com/audio/snap.mp3" /><source src="http://monster.simurai.com/audio/snap.wav" /></audio>
	
</body>
</html>

body { font-family: 'Jolly Lodger', cursive; }
h1 { color: #483D8B;}
h2 { color: #777;}
/* The Cursor Monster by simurai */

/* ---------------------------- wrapper ---------------------------- */

#wrapper {
	z-index: 11;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1);
	   -moz-transition:    -moz-transform .3s cubic-bezier(.1, 0, 0, 1);
		 -o-transition: 	 -o-transform .3s cubic-bezier(.1, 0, 0, 1);
			transition: 		transform .3s cubic-bezier(.1, 0, 0, 1);
}
#wrapper:after { /* shadow */
	content: "";
	z-index: -1;
	position: absolute;
	width: 100px; height: 100px;
	margin-left: -50px;
	border-radius: 50px;
	
	-webkit-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
	   -moz-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
		 -o-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
			box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
	
	-webkit-transform: translateY(-160px) scale(1.4, .5);
	   -moz-transform: translate( -50px, -160px) scale(1.2, .5);
		 -o-transform: translateY(-160px) scale(1.4, .5);
			transform: translateY(-160px) scale(1.4, .5);
}

/* ---------------------------- monster ---------------------------- */

#monster {
	z-index: 1;
	position: relative;
	width: 200px;
	height: 240px;
	margin: -120px 0 0 -100px;
	border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px;
	
	text-align: center;
	
	background-color: #5e97ed;
	
	background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, 
						color-stop( 0, rgba(255,255,255,.8) ),
						color-stop(.8, rgba(255,255,255, 0) ),
						color-stop(.8, rgba(0,0,0, 0) ), 
						color-stop( 1, rgba(0,0,0,.33) )), 
						url(noise.png);
	background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
	background-image:   -o-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
	background-image: 	   radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);

-webkit-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
	   -moz-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
		 -o-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
			box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
	
	-webkit-transform-origin: bottom;
	   -moz-transform-origin: bottom;
		 -o-transform-origin: bottom;
			transform-origin: bottom;
	
	-webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
									color-stop(0.6, rgba(0,0,0,.2) ), to( transparent ));
	
	-webkit-transform: scale3d(1, 1, 1); /* fixes the reflection after scaling */
	
	-webkit-transition: background-color .5s ease-out;
	   -moz-transition: background-color .5s ease-out;
		 -o-transition: background-color .5s ease-out;
			transition: background-color .5s ease-out;
}

/* ---------------------------- eyes ---------------------------- */

#monster .eye:first-child {
	-webkit-transform: scale(0.6);
	   -moz-transform: scale(0.6);
		 -o-transform: scale(0.6);
			transform: scale(0.6);
}

.eye {
	position: relative;
	width: 60px;
	height: 40px;
	margin: 0px auto 5px auto;
	
	top: 15%;

border-radius: 60px / 40px;

background-color: #eee;

-webkit-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
	   -moz-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
		 -o-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
			box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
		
	background-repeat: no-repeat;
						
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, 
						color-stop(.12, rgba(0,0,0,1) ),
						color-stop(.22, hsl(190,50%,50%) ),
						color-stop(.4, hsl(200,50%,30%) ),
						color-stop(.5, rgba(255,255,255,0) )
						);
	background-image: -moz-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );
	background-image:   -o-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );
	background-image: 	   radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );
	
}
.eye:before { /* highlight */
	content: "";
	position: absolute;
	top: 20%;
	left: 32%;
	border-radius: 5px;
	width: 10px; height: 10px;
	background-color: #fff;
	
	-webkit-transform: skewX(-10deg);
	   -moz-transform: skewX(-10deg);
		 -o-transform: skewX(-10deg);
			transform: skewX(-10deg);
}

.eye .lid {
	position: absolute;
	border-radius: inherit;
	width: inherit; height: inherit;
	
	background-color: rgba(94,151,237,0.8);
	-webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.6) 0 1px 2px;
	
	background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 30%, 40, 
						color-stop( 0, rgba(255,255,255,.8) ),
						color-stop(.8, rgba(255,255,255, 0) ),
						color-stop(.8, rgba(0,0,0, 0) ), 
						color-stop( 1, rgba(0,0,0,.33) )), 
						url(noise.png);
	background-image: -moz-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
	background-image:   -o-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);

-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0px 0px;
  	-webkit-mask-image: -webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50, 
    				color-stop(.5, rgba(0,0,0,0)),
    				color-stop(.6, rgba(0,0,0,1)) 
    				);
    -webkit-transform: translate3d(0,0,0); /* fixes a render bug */ 
    
}

/* ---------------------------- mouth ---------------------------- */

#mouth {
	position: relative;
	width: 100px;
	height: 20px;
	
	margin: 0 auto;
	top: 25%;
	overflow: hidden;
	
	border-radius: 100px 100px 50px 50px / 60px 60px 80px 80px;
	
	background-color: #111;
	
	-webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
	   -moz-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
		 -o-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
			box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
	
	
	/* tongue */
	background-repeat: no-repeat;
	background-position: center 85%;
	
	-webkit-background-size: 100px;
	   -moz-background-size: 100px;
		 -o-background-size: 100px;
			background-size: 100px;
	
	background-image: -webkit-gradient(radial, 62% 100%, 0, 62% 100%, 50, 
					color-stop(.3, rgba(255,0,0,1) ), 
					color-stop(.5, rgba(255,0,0,0) )),
					-webkit-gradient(radial, 38% 100%, 0, 38% 100%, 50, 
					color-stop(.3, rgba(255,0,0,1) ), 
					color-stop(.5, rgba(255,0,0,0) ));
	background-image: -moz-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ), -moz-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% );
	background-image:   -o-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ),   -o-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% );

}

#mouth:before { /* teeth */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	width: 30px; height: 10px;
	margin: 0 auto;
	border-radius: 0px 0px 4px 4px;
	
	background-color: #fff9e4;
	
	-webkit-background-size: 50%;
	   -moz-background-size: 50%;
		 -o-background-size: 50%;
			background-size: 50%;
	
	background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
					color-stop(0, rgba(0,0,0,.4) ), 
					color-stop(.1, rgba(0,0,0,0) ),
					color-stop(.9, rgba(0,0,0,0) ),
					color-stop(1, rgba(0,0,0,.4) )
					);
	background-image: -moz-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );
	background-image:   -o-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );
	background-image: 	   linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );
	
	-webkit-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
	   -moz-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
		 -o-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
			box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
	
	-webkit-transform: perspective(50) translate3d(0,0,5px) rotateX(-40deg)  ;
}

/* ---------------------------- states ---------------------------- */

/* sleep */
.sleep .eye {
  	background-position: 0 -40px;
}
.sleep .lid {
  	-webkit-mask-image: -webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) );
}
.sleep #mouth { 
	height: 50px;
	background-position: center bottom;
	-webkit-animation: sleep-mouth 2.5s 0 infinite alternate cubic-bezier(.3, 0, .5, 1); 
}
.sleep #monster {
	-webkit-animation: sleep-monster 2.5s 0 infinite alternate cubic-bezier(.5, 0, .3, 1);
}

/* hungry */
.hungry #mouth.out {
	-webkit-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1);
	   -moz-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1);
}
.hungry .lid {
	-moz-transform: scaleY(0); /* hide for browsers without mask-image */ 
    -o-transform: 	scaleY(0); /* hide for browsers without mask-image */ 
}
.hungry #monster {
  	-webkit-animation: hungry-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1);
  	   -moz-animation: hungry-monster .3s 1 cubic-bezier(.4, .1, .2, 1);
}

/* eat */
.eat #monster {
	background-color: #f932a5;
  	-webkit-animation: 	eat-swallow-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1),
  						eat-monster .6s .3s infinite alternate cubic-bezier(.5, .1, .5, .9);
  	   -moz-animation: 	eat-swallow-monster .3s 1 cubic-bezier(.4, .1, .2, 1),
  						eat-monster .6s .4s infinite alternate cubic-bezier(.5, .1, .5, .9);
}
.eat .eye:first-child {
  	-webkit-animation: eat-eye-first .6s 0 infinite cubic-bezier(0, .6, 1, .4);
  	   -moz-animation: eat-eye-first .6s infinite cubic-bezier(0, .6, 1, .4);
}
.eat .eye:nth-child(2) {
  	-webkit-animation: eat-eye-second .6s 0 infinite cubic-bezier(0, .6, 1, .4);
  	   -moz-animation: eat-eye-second .6s infinite cubic-bezier(0, .6, 1, .4);
}

.eat .lid {
  	display: none;
}
.eat #mouth {
	height: 2px;
	border-radius: 0px 0px 500px 500px / 0px 0px 60px 60px;
	-webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px,
						rgba(0,0,0,.7) 0 -2px 10px 2px, rgba(255,255,255,.7) 0 2px 6px 2px;
	
	background-position: center 0px;
	-webkit-animation: eat-mouth .2s 0 infinite alternate cubic-bezier(.5, .1, .5, .9);
	   -moz-animation: eat-mouth .2s infinite alternate cubic-bezier(.5, .1, .5, .9);
}
.eat #mouth:before {
	display: none;
}
#wrapper.eat {
	-webkit-transform: scale3d(1.08, 1.08, 1);
	   -moz-transform: scale(1.08, 1.08);
		 -o-transform: scale(1.08, 1.08);
			transform: scale(1.08, 1.08);

-webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1);
	   -moz-transition:    -moz-transform .1s cubic-bezier(.1, .3, 0, 1);
		 -o-transition: 	 -o-transform .1s cubic-bezier(.1, .3, 0, 1);
			transition: 		transform .1s cubic-bezier(.1, .3, 0, 1);
}

/* ---------------------------- animation webkit ---------------------------- */

/* sleep */
@-webkit-keyframes sleep-mouth { 0% {}
	100% { -webkit-transform: scale3d(1.04, 1.05, 1); } 
}
@-webkit-keyframes sleep-monster { 0% {}
    100% { -webkit-transform: scale3d(1.08, .92, 1); }
}

/* hungry */
@-webkit-keyframes hungry-monster { 0% {}
     20% { -webkit-transform: scale3d(.8, 1.1, 1); }
    100% { -webkit-transform: scale3d( 1,   1, 1); }
}

/* eat */
@-webkit-keyframes eat-swallow-monster { 0% {}
     20% { -webkit-transform: scale3d(1.2, .9, 1); }
    100% { -webkit-transform: scale3d(1,    1, 1); }
}
@-webkit-keyframes eat-monster { 0% {}
	100% { -webkit-transform: scale3d(1.02, .98, 1); } 
}
@-webkit-keyframes eat-mouth {
	0% { -webkit-transform: translateY(10px); }
	100% { -webkit-transform: translateY(15px) scale3d(0.9, 1.2, 1); } 
}
@-webkit-keyframes eat-eye-first {
	  0% {  background-position: 0 -60px; -webkit-transform: scale3d(.6,.6,1) translate3d(0,-5px,0); 	 }
	100% {  background-position: 0  60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0, 5px,0); 	 } 
}
@-webkit-keyframes eat-eye-second {
	  0% {  background-position: 0  60px; -webkit-transform: scale3d(1,1,1) translate3d(0,0,0); 	 }
	100% {  background-position: 0 -60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0,0,0); 	 } 
}

/* ---------------------------- animation moz ---------------------------- */

/* hungry */
@-moz-keyframes hungry-monster { 0% {}
     20% { -moz-transform: scale(.8, 1.1); }
    100% { -moz-transform: scale( 1,   1); }
}

/* eat */
@-moz-keyframes eat-swallow-monster { 0% {}
     20% { -moz-transform: scale(1.2, .9); }
    100% { -moz-transform: scale(1,    1); }
}
@-moz-keyframes eat-monster { 0% {}
	100% { -moz-transform: scale(1.02, .98); } 
}
@-moz-keyframes eat-mouth {
	0% { -moz-transform: translateY(10px); }
	100% { -moz-transform: translateY(15px) scale(0.9, 1.2); } 
}
@-moz-keyframes eat-eye-first {
	  0% {  background-position: 0 -60px; -moz-transform: scale(.6,.6) translate(0,-5px); 	 }
	100% {  background-position: 0  60px; -moz-transform: scale(.8,.8) translate(0, 5px); 	 } 
}
@-moz-keyframes eat-eye-second {
	  0% {  background-position: 0  60px; -moz-transform: scale(1,1); }
	100% {  background-position: 0 -60px; -moz-transform: scale(.8,.8); } 
}

// Cursor Monster by simurai

$(document).ready(function() {	
	
	var status = "sleep";
	var mouthOpen = false;
	var count = 0;
		
	
	// on mouse move
	
	$(document).mousemove(function(e){		
		
		
		var docW = $(window).width();
		var docH = $(window).height();
		
		var diffX = (docW/2) - e.clientX;
		var diffY = (docH/2)-100 - e.clientY;
		
		var dist = distance(docW/2,docH/2, e.clientX, e.clientY);
		var distM = distance(docW/2,(docH/2)+60, e.clientX, e.clientY);
		
		
		if (status == "sleep") {
			
			if(distM < 200) {
				$('#wrapper').removeClass("sleep").addClass("hungry");
				status = "hungry";
				playAudio("audio-ohh");
			}
			
			
		} else if (status == "hungry") {
		
			// eye		
							
			var eye_background = Math.floor( diffX /-30 ) +'px '+ Math.floor( diffY /-30 ) +'px';		
			var eye_translate =	Math.floor(diffX/-50 )+'px, '+ Math.floor(diffY/-100 )+'px';	
			$(".eye").css({ 			"background-position":eye_background, "-webkit-transform":'translate3d('+eye_translate+',0)', 			"-moz-transform":'translate('+eye_translate+')' });
			$(".eye:first-child").css({	"background-position":eye_background, "-webkit-transform":'translate3d('+eye_translate+',0) scale(.6)', "-moz-transform":'translate('+eye_translate+') scale(.6)' });
			
			
			// eye lid
			
			var eye_lid_p = 100+Math.floor( diffY /-20 );
			var eye_lid = '-webkit-gradient(radial, 50% '+ eye_lid_p +'%, 20, 50% '+ eye_lid_p +'%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)))';
			$(".lid").css({ "-webkit-mask-image":eye_lid });
			
			
			// mouth
			
			if (distM > 200) {
				if(mouthOpen) {
					mouthOpen = false;
					$('#mouth').addClass("out");
					var mouth_height = "20px";
					count = 0;
				}
			} else {				
				var mouth_height = 80 - Math.floor(distM /3)+'px';
				if(!mouthOpen) {
					mouthOpen = true;
					$('#mouth').removeClass("out");
				}
			}
			var mouth_transform = Math.floor(diffX/-80 )+'px, '+ Math.floor(diffY/-80 )+'px';
			$("#mouth").css({ "height":mouth_height, "-webkit-transform":'translate3d('+mouth_transform+', 0)', "-moz-transform":'translate('+mouth_transform+')' });
			
				
							
			
			
			// snap cursor
			
			if(distM < 30 && count > 50) {
				count = 0;
				$("#mouth").css({ "height":"", "-webkit-transform":"", "-moz-transform":"" });
				$("body").css({ "cursor":"none" });
				
				$('#wrapper').removeClass("hungry").addClass("eat");
				playAudio("audio-snap");
				status = "eat";				
			} else {
				count++;			
			}
			
		
		} else if (status == "eat") {
			
			if(distM > 120) {
				$('#wrapper').removeClass("eat").addClass("hungry");
				$("body").css({ "cursor":"" });
				status = "hungry";
				playAudio("audio-ohh");
			}
						
		};
		
				
    });

});

// helpers

var distance = function(x1, y1, x2, y2){
	return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
};

var playAudio = function(id) {    	
	try {
        var a = document.getElementById(id);  
		a.currentTime = 0;
		a.play();
    } catch(e) {
        //$("#debug").html(e);
    } 
};

Check out our Python playground!