Eyes

Inspiration

We wanted something fun that could be dropped into websites, presentations, or interactive art to give them character a pair of eyes that follow the cursor, blink, and react to user input. The project is inspired by classic interactive web toys and the joy of small, focused tools that add personality to digital experiences.

What it does

Eyes renders an animated pair of eyes that:

• Follow the user's cursor or a touch point.
• React to clicks/taps with expressive responses (wider gaze, startled blink, etc.).

Use cases:

• Lightweight decoration for interactive installations or presentations.

How we built it

• Core rendering uses HTML, CSS, and JavaScript for maximum portability and minimal dependencies.
• Eyes are drawn using scalable vector graphics (SVG) and animated using CSS transitions and requestAnimationFrame for smooth motion.
• Cursor tracking and interaction events (mousemove, touchmove, click, touchend) are handled in plain JavaScript so the component can be embedded without framework constraints.
• Configurable options are exposed via data attributes or an initialization API, so integrators can easily change behavior without modifying source code.

Tech stack:

• HTML + SVG for vector-based eyes and lashes.
• CSS for styling and simple animations.
• JavaScript for interactivity, animation loop, and configuration handling.

Challenges we ran into

• Ensuring the component scales cleanly across viewport sizes and remains performant on low-power devices required careful use of requestAnimationFrame and avoidance of expensive DOM operations each frame.

Accomplishments that we're proud of

• Built a small, dependency-free component that produces convincing, expressive eye animations.

What we learned

• Small interactive components benefit greatly from incremental smoothing and motion-limiting to avoid

What's next for Eyes

• Add more built-in expressions and emotion states (sleepy, angry, curious) with a simple API to trigger

Built With

• css
• html
• javascript