Bring instant personality to your Framer projects with this customizable animated eye component. The eye follows mouse and touch movements, creating engaging interactions that capture attention and guide user focus.
In the Framer Editor: The eye appears as a static image for easy positioning, sizing, and styling. This ensures smooth editor performance while designing.
On Published Sites: The component automatically becomes fully interactive, tracking cursor movements with smooth, physics-based animation. The iris follows mouse position naturally within the eye boundary.
Adjust every aspect of the eye directly from Framer's property panel:
Eye Size: Slider control from 20px to 350px
Iris Size: Control iris proportion from 10% to 90% of the eye diameter
Eye Color: Customize the eyeball background color with color picker
Iris Color: Set any color for the iris with color picker
Landing Pages: Guide attention to signup forms, pricing cards, or key CTAs
Team Pages: Add personality to staff photos and about sections
Product Showcases: Draw focus to featured items or special offers
Portfolio Sites: Create playful moments in case studies and galleries
Marketing Sites: Increase engagement on hero sections and conversion points
Add the component to your canvas
Adjust size, colors, and iris size in the property panel
Duplicate, Scale and Position multiple eyes where you want attention directed
Publish to see the interactive eye in action
Note: The eye appears static in the editor for optimal performance. Preview the interactive animation by publishing your site.
Pair with bold headings for playful contrast
Place near CTA to draw focus
Scale individual eye components placed over images to respect the perspective of the photo you are adding puffy sticker eyes to.
This Is Also
