Eye Tracking

Visual Effects

A set of cartoon oval eyes whose pupils chase the pointer anywhere in the viewport — spring-smoothed and geometrically clamped inside each eye — with an occasional natural blink that pauses during fast pointer flicks. Under prefers-reduced-motion the pupils rest centered and the blink is disabled.

Inspired by Componentry — Eye Tracking — independently built, not affiliated. Attribution policy

move your cursor

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/eye-tracking.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/eye-tracking.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 20, minHeight: 260, width: "100%" }}>
    <EyeTracking count={2} size={112} />
    <span style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(250,250,250,0.45)" }}>move your cursor</span>
  </div>

Props

EyeTrackingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">

Prop	Type	Default	Description
count	number	2	How many eyes to render.
size	number	96	Eye height in px (width is derived from it).
eyeColor	string	"#fafafa"	Sclera / eyeball fill.
pupilColor	string	"#0f0f10"	Pupil fill.
irisColor	string	"#8b5cf6"	Iris ring around the pupil. Defaults to the Parable violet.
label	string	—	Accessible label. When set, the whole graphic is exposed as `role="img"` with this label; otherwise it stays `aria-hidden` (decorative).

npm dependencies

motion