---
title: "Eyetrack — Free Framer component · Best of Framer"
description: "Free Framer component · by Grids & Giggles · Sections. Orbiting values ring for Framer"
canonical: "https://framer.elliotli.dev/component/eyetrack"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Eyetrack

# Eyetrack

Orbiting values ring for Framer

[View on Framer](https://framer.com/marketplace/components/eyetrack/?via=elliot-li)

![Eyetrack preview image 1](https://framer.elliotli.dev/og/component/eyetrack/1673475c54bfd506/1600x1200.jpg)

## Summary

Orbiting values ring for Framer

## Description

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**

1.  Drop it on your canvas and set the size.
    
2.  Fill in your items and pick an icon for each.
    
3.  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

## Rank history [How rankings work →](/terms#rankings)

-   All · #6104

## Details

- **Author**: Grids & Giggles
- **Published**: 2026-09-08
- **Updated**: 2026-09-09
- **Added**: 2026-09-08
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes