Cartoon Eyes for React

A lightweight, dependency-free React component for creating customisable animated SVG eyes. Make a pair of googly eyes blink, wander randomly, follow the mouse cursor or look towards any controlled position — all rendered as crisp inline SVG with TypeScript declarations included.

npm install cartoon-eyes

import { Eye } from 'cartoon-eyes';

<Eye irisColor='#3E7BFA' scleraWidth={80} scleraHeight={55} blinking />

The interactive playground on this page lets you design an eye visually — shape, colours, eyelids, cat-style pupils, blinking and movement — and copy the matching React code. It loads once JavaScript runs.

Use cases

• Animated website mascots and playful landing pages
• Cursor-following eyes and eye-tracking effects
• Avatars, character creators and profile cards
• Children's and educational interfaces
• Blinking eyes for loading, empty states and Easter eggs

cartoon-eyes on npm · Source and docs on GitHub