Reactive Eyes for your website!

Posted on April 13, 2023 at 17:33 (GMT +00:00) by Colin

Continuing on from my previous post, I have been building more tutorials and after finishing a simple eyes tutorial for JavaScript, I ended up keep working on it to build a small re-usable reactive eyes "play thing" - possibly I will add this to my Paws Furever website somewhere :)

The idea of the project is a pair or more eyes that will follow the mouse movement or touch screen position from the user. If the user does not make any movement for 5 seconds the eyes will begin auto tracking to random positions on the window.

The code is fairly simple and implementation is extremely simple.

Download the reactive-eyes folder from the vendor folder in my github depository HERE. Add the files to your website project folder and include the stylesheet and JavaScript into your webpage.

Add this to your header:

<link href="vendor/reactive-eyes/reactive-eyes.min.css" rel="stylesheet">

And the javascript before the ending body tag

<script src="vendor/reactive-eyes/reactive-eyes.min.js"></script>

Next, to add your eyes is extremely simple, just add the following code to your page where you want to place the eyes.

<div class="eyes">
	<div class="eye"></div>
	<div class="eye"></div>
</div>

This will add a simple pair of eyes, but you can also modify the custom properties to modify some of the behaviour.

Add below the included stylesheet some inline css or inside another separate css file the following:

.eyes {
	/* cat eyes ? */
	--eye-width:190px;
	--eye-height:90px;
			
	--iris-width:75px; 
	--iris-height:75px;
	--iris-color: conic-gradient(
		from -180deg at 50% 50%, 
		#1B5E20 0%, 
		#2E7D32 40%, 
		#4CAF50 60%, 
		#2E7D32 100%);
			
	--pupil-width-min:2px;
	--pupil-width-max:30px;
		
	--pupil-height-min:45px;			
	--pupil-height-max:50px;
}

This is an example html using the cat eye effect

Here you can see a simple html file using Reactive Eyes.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<meta name="author" content="Colin J.D. Stewart">
	
	<title>Reactive Eyes</title>
	
	<link href="vendor/reactive-eyes/reactive-eyes.css" rel="stylesheet">
	
	<style>
		html { height:100%; }
		body {
			height:100%;
			display:flex;
			justify-content:center;
			align-items:center;
			background:#000;
		}
		
		.eyes {
			/* cat eyes ? */
			--eye-width:190px;
			--eye-height:90px;
			
			--iris-width:75px; 
			--iris-height:75px;
			--iris-color: conic-gradient(
				from -180deg at 50% 50%, 
				#1B5E20 0%, 
				#2E7D32 40%, 
				#4CAF50 60%, 
				#2E7D32 100%);
			
			--pupil-width-min:2px;
			--pupil-width-max:30px;
			
			--pupil-height-min:45px;			
			--pupil-height-max:50px;
		}		
	</style>
</head> 
	
<body>
	<div class="eyes">
		<div class="eye"></div>
		<div class="eye"></div>
	</div>

	<script src="vendor/reactive-eyes/reactive-eyes.js"></script>
</body>
</html>

I hope someone finds this interesting or fun to mess around with and if you do, please drop me a comment below!

/signing off

/Scripting /Programming /Web Development