About Cursor Eye Mascot
Features
Smooth 60fps cursor-following pupil physics
Reactive heart-eye transition on clickable element hovers
Dynamic eyelid squint reacting to cursor distance
Hardware-accelerated Three.js WebGL rendering pipeline
Automatic stencil buffer masking for clean outlines
Viewport-aware rendering via IntersectionObserver
Seamless responsive scaling across desktop and mobile
Zero layout shifts with native Framer controls
Production-ready performance with full GPU resource cleanup
Drag-and-drop integration for any landing page or hero section
Customization Options
Overall mascot scale and layout dimensions
Independent eye positions, scales, and rotation angles
Customizable sclera, pupil, eyelid, stroke, and highlight colors
Reactive heart transformation color
Adjustable stroke outline width
Live editor preview toggle
How to Use
Drop the Cursor Eye Mascot onto your Framer canvas.
Position it over your character artwork, hero layout, or navigation bar.
Adjust the eye positions, tilt, and scales to align with your design.
Style the stroke, lid, and heart colors to match your brand palette.
Publish your site to delight visitors with real-time reactive gaze tracking.
Use Cases
Hero sections for SaaS and tech startups
Interactive mascot illustrations and brand characters
Playful 404 and empty state pages
Creative portfolio headers
Gamified landing pages and Web3 experiences
Interactive pricing table accents
Contact forms and feedback prompts
High-converting CTA sections
Children, education, and lifestyle web apps
Dark and light mode branded UI accents
