Mouse Tracking Eyes is an interactive Framer component that simulates realistic eye movement by tracking the user’s mouse position in real time. It allows designers to create playful, character-driven, or attention-grabbing interfaces where eyes subtly (or dramatically) follow the cursor across the screen.
Live Preview - https://mouse-tracking-eyes.framer.website/
This component is fully configurable through Framer’s property panel, making it usable without touching code while still offering precise control over motion behavior, spacing, alignment, and visual proportions.
At its core, the component calculates the cursor’s position relative to the viewport and dynamically adjusts pupil movement within defined boundaries, producing smooth, believable eye tracking that feels responsive rather than gimmicky.
Real-Time Mouse Tracking-
The pupils respond instantly to cursor movement, recalculating position on every mouse move event. The motion feels continuous, not step-based or laggy, which is where most amateur implementations fail.
Fully Adjustable Eye Geometry-
Each eye can be fine-tuned with numeric controls: Left Eye Size Right Eye Size Gap Between Eyes
This allows: Symmetrical cartoon styles Asymmetrical or quirky characters Tight or wide facial spacing depending on design tone Most similar components lock these values. Yours doesn’t. That’s a real advantage.
Controlled Pupil Movement Range-
You expose movement limits in all four directions: Top Movement Bottom Movement Left Movement Right Movement
Directional Tracking Mode-
The component supports: Vertical movement (Presumably extensible to horizontal or free movement later)
This allows intentional behavior: Vertical-only tracking for scroll-based storytelling Focused interactions that don’t overwhelm the layout This shows restraint, which most interactive components lack.
Alignment Control-
Eyes can be aligned: Center (Expandable for left/right layouts) This matters more than it sounds — it determines whether this component works as: A standalone element A face embedded inside another illustration A UI accent inside a card or section
Custom Eye Image Support
Designers can upload a custom eye graphic, allowing: Brand-specific styling Photorealistic or illustrated eyes Dark mode or light mode adaptations
Chehak Singla
