Eye-Tracking UI: Designing Gaze-Driven Interfaces That Work

Create an accessible, testable eye-tracking UI page with HTML, CSS, and JavaScript. Start with a simple HTML structure, then progressively layer on CSS for layout and styling and JavaScript for gaze-driven interactions. Below is a concise, step-by-step guide that makes the process easy to follow. Link: https://kyl67899.github.io/EyeFollowUI/ | Github: https://github.com/Kyl67899/webDevdailyChallenge What you'll build (short overview) A single page with a card-like container and one or more “eyes” (visual elements that move their pupils toward gaze/cursor). Gaze-driven interactions: pupils follow the user’s gaze or mouse pointer; dwell detection can trigger actions; graceful fallback when no eye-tracker is available. HTML: basic, semantic structure Create a minimal skeleton so styling and behavior can be added incrementally. Include a container, one or more card elements, and within each card an eye with a pupil: container (e.g., .stage) card (e.g., .card) eye (e.g., .eye) pupil (e.g.,