While I was working to replatform this site from Squarespace to Framer, I set out to make my first component — and here he is. 'Watching You' is a playful React component that brings a little personality and playfulness to this particular web project. The animated eyes track will your cursor across the page, blink naturally, and reveal a a little easter egg animation when you hover between them long enough.
Designed to sit unobtrusively in corners or headers while adding memorable interactivity, he brings a little touch of joy to navigation headers (or anywhere you'd like to put him, tbh).
Cursor tracking: Eyes follow your mouse movement in real-time
Natural blinking: Customizable blink speed, frequency, and randomness
Multiple eye shapes: Almond, Round (Googly), Wide, and Egg presets
Easter egg animation: Discover what happens when the eyes catch you staring
Fully customizable: Adjust colors, shapes, borders, spacing, and animation timing
Iris highlights: Optional reflection effect for added realism
Lightweight & responsive: Height-driven sizing that scales proportionally
Cross-platform: Works seamlessly across all modern browsers
Built with React, TypeScript, and Framer property controls. Clean, modular code that's easy to integrate and customize for your needs.
