Puffy Eye

About

Puffy Eye is a playful, physics-based eye component that follows your visitor's cursor in real time. The iris moves with smooth cubic-bezier easing and a subtle vertical boost that mimics how real eyes track movement, while a gentle idle wobble keeps things alive when no one is interacting. Use it to guide attention toward signup forms, pricing cards, CTAs, or any element you want visitors to notice. In the Framer editor the eye appears as a static image for easy positioning and fast canvas performance. On published sites it becomes fully interactive, tracking cursor and touch movements with smooth animation. Customize the eye size from 20px to 350px, adjust the iris from 10% to 90% of the eye diameter, and pick any sclera and iris color. A specular highlight renders automatically at 25% of the iris size for a convincing glossy look. The component is fully accessible: keyboard users can steer the iris with arrow keys (Home resets to center), and visitors with reduced-motion preferences see a clean static eye instead of tracking animation. Place it on landing pages near conversion points, on team pages for personality, on product showcases to draw focus to featured items, or scatter several across a portfolio for playful moments. It pairs well with bold headings and works at any size. When placing eyes over photos, scale each one to match the perspective of the image for a natural sticker effect.

Features

• →Tracks cursor and touch position with physics-based smoothing
• →Eye size adjustable from 20px to 350px
• →Iris diameter configurable from 10% to 90% of eye size
• →Custom sclera and iris colors via color picker
• →Idle wobble animation on a 4-second cycle
• →Directs visitor attention toward CTAs, signup forms, and key elements
• →Duplicate and scale multiple eyes to create sticker effects over photos
• →Keyboard navigation with arrow keys and Home to center
• →Reduced motion support shows a clean static fallback
• →Static editor preview for fast canvas performance

FAQ