Avris Ocz – Demo

Just some googly eyes.

Fair warning: this library is pretty useless. And only moderately fun... 🤷‍

But it seemed like a cool way to learn a bit about web components, so here it is: a component that creates googly eyes that follow your mouse.

(browser support is not perfect and the whole concept doesn't make much sense on mobile, so if it doesn't look right for you, well, tough luck 🤷‍)

Source code NPM

Include the script:

 
<script src="https://glcdn.githack.com/Avris/Ocz/raw/v0.0.1/src/ocz.js"></script>

Place ocz's wherever you want:

 
<avris-ocz></avris-ocz>
<avris-ocz></avris-ocz>

Use r attribute to control the size of the iris:

 
<avris-ocz r="5"></avris-ocz>
<avris-ocz r="20"></avris-ocz>
<avris-ocz r="50"></avris-ocz>

Use CSS to style the eye:

 
<avris-ocz style="--ocz-eye-color: #ddd;
                  --ocz-iris-color: blue;
                  --ocz-eye-stroke: transparent"></avris-ocz>