About Eyetrack
A ring of icons orbiting a single eye that keeps its pupil on whichever item is active. The eye also reacts to your cursor, pushing away when you get close and glancing over when you do not. Built for values, principles and "what we stand for" sections that usually end up as a boring three-column grid.
About Component
Four eye styles in one file: Vector, Duo, Minimal and Pixel Art
Pupil tracks the active node continuously as the ring advances
Cursor repulsion inside a close radius, softened glance beyond it
Idle breathing loop plus randomised blinks so it never sits dead
Glowing gradient trail arc that sweeps to each new item
Pauses only while the cursor sits on an icon, not on the whole section
Click or tab to any node to jump straight to it, shortest path
Three palettes (Midnight, Aurora, Light) or a full custom colour set
10 built-in outline icons, or drop in your own image per item
Stay time, travel time, easing and direction all on controls
Respects prefers-reduced-motion and has a canvas playback toggle
What's Included
One Framer code component, no dependencies to install
Up to 12 items with label, description and icon each
25+ property controls covering colour, timing, size and motion
Scales to any square container, single animation loop, one paint per frame
Works on canvas, in preview and on the published site
How It Works
Drop it on your canvas and set the size.
Fill in your items and pick an icon for each.
Choose an eye style and a palette. That is it.
Use Cases
Brand values and company principles sections
About pages for agencies and studios
Product feature orbits on landing pages
Game studio and creative portfolio sites
Nonprofit mission statements
Framer template hero sections
Keywords framer, code component, values section, principles, orbit, rotating ring, eye tracking, cursor reactive, pixel art, animated icons, about page, brand values, interactive section, mouse follow, carousel, dark ui, glow, framer component
