Docs·Eye Tracking

Eye Tracking

Hyper-realistic eyes that follow your cursor with smooth spring physics, reactive pupil dilation, natural blinking, and multiple stunning variants. Move your mouse around to see the magic.

Installation

pnpm dlx shadcn@latest add @componentry/eye-tracking

Usage

API Reference

Property	Type	Default
`eyeSize` Size of each eye in pixels.	`number`	`120`
`gap` Gap between eyes in pixels.	`number`	`40`
`variant` Visual style variant.	`"realistic" \| "cartoon" \| "minimal" \| "cyber"`	`"realistic"`
`irisColor` Primary iris color.	`string`	`"#4A6741"`
`irisColorSecondary` Secondary iris color for gradient.	`string`	`"#6B8F62"`
`pupilColor` Color of the pupil.	`string`	`"#0a0a0a"`
`scleraColor` Color of the sclera (white of the eye).	`string`	`"#F5F0EB"`
`pupilRange` How far the pupil can travel (0-1).	`number`	`0.7`
`eyeCount` Number of eyes to render.	`number`	`2`
`showReflection` Show light reflection glint on the eye.	`boolean`	`true`
`showIrisDetail` Show iris fiber/pattern details.	`boolean`	`true`
`reactivePupil` Pupil dilates based on cursor proximity.	`boolean`	`true`
`showEyelids` Show eyelid shadow gradients.	`boolean`	`true`
`blinkInterval` Blink interval in ms. Set to 0 to disable.	`number`	`4000`
`idleAnimation` Subtle random movement when cursor is idle.	`boolean`	`true`
`className` Additional CSS classes.	`string`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?

Contact on@harshjdhv