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.
| Prop | Type | Default |
|---|---|---|
eyeSizeSize of each eye in pixels. | number | 120 |
gapGap between eyes in pixels. | number | 40 |
variantVisual style variant. | "realistic" | "cartoon" | "minimal" | "cyber" | "realistic" |
irisColorPrimary iris color. | string | "#4A6741" |
irisColorSecondarySecondary iris color for gradient. | string | "#6B8F62" |
pupilColorColor of the pupil. | string | "#0a0a0a" |
scleraColorColor of the sclera (white of the eye). | string | "#F5F0EB" |
pupilRangeHow far the pupil can travel (0-1). | number | 0.7 |
eyeCountNumber of eyes to render. | number | 2 |
showReflectionShow light reflection glint on the eye. | boolean | true |
showIrisDetailShow iris fiber/pattern details. | boolean | true |
reactivePupilPupil dilates based on cursor proximity. | boolean | true |
showEyelidsShow eyelid shadow gradients. | boolean | true |
blinkIntervalBlink interval in ms. Set to 0 to disable. | number | 4000 |
idleAnimationSubtle random movement when cursor is idle. | boolean | true |
classNameAdditional CSS classes. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { EyeTracking } from "@/components/ui/eye-tracking"
<EyeTracking eyeSize={140} gap={50} />