A small interactive web project where two eyes follow your mouse cursor and blink naturally — just like real ones.
Built using HTML, CSS, and JavaScript, this project demonstrates simple yet smooth animation and user interactivity in the browser.
- 🧿 Eyes smoothly follow your mouse pointer
- 😴 Auto sleep mode when inactive (eyes close after a few seconds)
- 😉 Random blinking for a more natural look
- 💻 Responsive design — works on any screen size
- ⚡ Lightweight and pure JavaScript (no libraries)
- JavaScript calculates the direction from each eye’s center to the mouse position.
- Pupils move toward that direction smoothly using a simple interpolation formula.
- CSS animations handle blinking by scaling the eyelid element vertically.
- If no user activity (mouse, keyboard, or touch) is detected for 3.5 seconds, the eyes "fall asleep."
| Language / Tool | Purpose |
|---|---|
| HTML | Structure of the eyes and page layout |
| CSS | Styling, shadows, and blinking animation |
| JavaScript | Eye movement logic and interactivity |
- Visit this page.
Saweli Kudasow
This project is free to use for educational purposes.