PuffyStickerEye

Animated Puffy Sticker Eye Component

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.

How It Works

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.

Customization Controls

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

Perfect For

• 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

Quick Start

1. Add the component to your canvas

2. Adjust size, colors, and iris size in the property panel

3. Duplicate, Scale and Position multiple eyes where you want attention directed

4. 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.

Design Tips

• 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.