KQ-1451 · IRIS/WATCH

Iris Watch

A background that is one enormous iris seen close up — fibrous strands from the pupil to a darkening limbus, a warmer burst inside a zig-zag collarette, dark crypts, a deep pupil and a window of light on the cornea — that watches: the eye turns toward the pointer on a heavy, critically damped spring with the springs.drift ratio (its stiffness set by tracking), the iris sliding and foreshortening as the ball turns. The pupil breathes and narrows as the pointer comes near, a press flashes it small on a stiff spring before it opens again as the flash fades, it blinks now and then and glances about when nobody is near; keyboard focus on a control inside draws its gaze to that control.

KQ-1451 · IRIS/WATCH

Gaugeworks Optics

Lenses for the way you look

Fitted by hand in Coldbrook

wandering · pupil 34%

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/iris-watch

Props

children: React.ReactNode; default —; The content on top of the eye: a hero line, a heading, a call to action.
color: "cobalt" | "slate" | "hazel" | "moss" | string; default "cobalt"; The iris: a named pigment pair, or any CSS colour (its inner ring is drawn lighter).
dilation: number; default 0.45; How open the pupil rests, 0 (a pinpoint) to 1 (wide).
tracking: number; default 0.6; How keenly the eye follows, 0 (it barely notices) to 1 (it follows within half a second).
size: number; default 1; The iris's size against the box it is fitted to, 0.5 to 1.5.
detail: number; default 0.6; How much fine fibre the iris carries, 0 to 1.
breathe: number; default 0.4; How much the pupil breathes on its own, 0 to 1.
blink: number; default 7000; About how often it blinks, ms; 0 for never.
glint: number; default 0.6; The window caught on the cornea, 0 to 1.
wander: boolean; default true; With nobody near, the eye glances about by itself.
interactive: boolean; default true; The pointer and keyboard focus inside draw its gaze, and a press flashes it.
pointerStrength: number; default 0.6; How much the pointer's nearness narrows the pupil and how hard a press flashes it, 0 to 1.
paused: boolean; default false; No breathing, wandering or blinking; it still follows the hand.
seed: number; default 1; Seeds the fibres, the crypts and the eye's own glances.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onWatchChange: (watching: "pointer" | "focus" | null) => void; default —; Fires when the eye starts following the pointer or a focused control, and with null when it lets go.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the eye: a hero line, a heading, a call to action.
color	"cobalt" \| "slate" \| "hazel" \| "moss" \| string	"cobalt"	The iris: a named pigment pair, or any CSS colour (its inner ring is drawn lighter).
dilation	number	0.45	How open the pupil rests, 0 (a pinpoint) to 1 (wide).
tracking	number	0.6	How keenly the eye follows, 0 (it barely notices) to 1 (it follows within half a second).
size	number	1	The iris's size against the box it is fitted to, 0.5 to 1.5.
detail	number	0.6	How much fine fibre the iris carries, 0 to 1.
breathe	number	0.4	How much the pupil breathes on its own, 0 to 1.
blink	number	7000	About how often it blinks, ms; 0 for never.
glint	number	0.6	The window caught on the cornea, 0 to 1.
wander	boolean	true	With nobody near, the eye glances about by itself.
interactive	boolean	true	The pointer and keyboard focus inside draw its gaze, and a press flashes it.
pointerStrength	number	0.6	How much the pointer's nearness narrows the pupil and how hard a press flashes it, 0 to 1.
paused	boolean	false	No breathing, wandering or blinking; it still follows the hand.
seed	number	1	Seeds the fibres, the crypts and the eye's own glances.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onWatchChange	(watching: "pointer" \| "focus" \| null) => void	—	Fires when the eye starts following the pointer or a focused control, and with null when it lets go.
className	string	"h-full w-full"	Sizes and shapes the box.