X-Eyes

Shows a pair of eyes following movements of the mouse cursor on the page. See also the full usage description and the storybook.

Default look & feel:

<x-eyes></x-eyes>

Movement delayed by 200ms:

<x-eyes delay=200></x-eyes>

Iris distance 5px:

<x-eyes distance=5</x-eyes>

Iris starts at the bottom:

<x-eyes position=bottom</x-eyes>

Circular iris path, brown:

<style>x-eyes.brown { --iris-color: #850 }</style>
<x-eyes radius=circular class=brown</x-eyes>

Reset iris position when mouse leaves the page, small:

<style>x-eyes.small { --scale: 0.15 }</style>
<x-eyes reset class=small</x-eyes>