How to Create an Eye-Tracking Animation That Follows Your Cursor Using HTML and CSS

In this tutorial, you’ll learn how to create a fun and interactive eye-tracking animation using HTML, CSS, and a touch of creativity. This project features two buttons designed to resemble eyes, complete with pupils that dynamically follow the cursor’s movement. Surrounding the buttons are invisible sensors that detect the mouse’s direction, causing the pupils to shift accordingly. Additionally, the project incorporates hover and click animations, where the “eyes” blink and respond to user interactions, making the experience more engaging and lifelike.

Explanation:

HTML Structure:

The HTML structure forms the backbone of the project:

The <body> contains a <div> with a class of wrapper, which serves as the container for all elements.
The wrapper includes eight directional sensors (<div> elements with the class btn-sensor) positioned around the buttons. Each sensor uses a custom property --a to define its angular position (e.g., 0°, 45°, 90°). These sensors detect hover events, guiding the pupil movements.
The two buttons styled as “eyes” are <button> elements with a class btn-button. Inside each button are two nested <div> elements:
1. btn-lid: Represents the eyelid and enables blinking animations.
2. btn-pupil: Represents the pupil that moves dynamically based on cursor interactions.

This structure ensures semantic, organized, and easy-to-maintain HTML code. By logically grouping elements (sensors, buttons, and nested components), the layout achieves both functionality and visual appeal.

CSS Styling and Animations:

The CSS code transforms the static HTML structure into an interactive animation with styling and animations:

Global Reset:
- A universal selector (*) resets padding and margins for consistent cross-browser behavior.
- box-sizing: border-box simplifies size calculations.
Centering and Layout:
- The html and body elements use display: grid and place-items: center to center the content.
- overflow: hidden prevents scrolling, while background-color: #212121 provides a dark contrast for the eyes.
Buttons as Eyes:
- The btn-button class styles the buttons to look like eyes with border-radius: 10rem, white backgrounds, and solid borders.
- The btn-pupil class shapes the pupils as black circles with light blue borders. Hover effects apply dynamic transformations to simulate eye movements.
Sensors for Eye Tracking:
- The btn-sensor elements act as invisible zones, positioned using clip-path: polygon to form triangular sections. Hovering over these sections triggers the pupils to move in the respective directions.
Animations:
- Blinking: The @keyframes eye-lid animation changes the background of btn-lid to simulate natural blinking.
- Random Eye Movement: The @keyframes pupil animation creates slight, random pupil shifts, mimicking natural eye motion.

This combination of CSS techniques ensures smooth transitions and responsive animations, providing an interactive experience for users.

Conclusion:

This eye-tracking animation project is a perfect example of combining HTML and CSS to create an interactive and visually engaging user experience. The clean HTML structure and advanced CSS styling allow seamless integration of hover and click interactions, simulating natural eye movements and blinks. By understanding and implementing this tutorial, you can explore new possibilities for interactive web elements, enhancing user engagement on your projects.

With this foundational knowledge, you can further expand the project by introducing features like adjusting the eye’s sensitivity, adding multiple pairs of eyes, or even integrating JavaScript for enhanced interactivity. The potential for creativity is limitless!