KQ-1096 · EYEDROPPER

Eyedropper

A loupe over a picture drawn in code that shows the pixels under the pointer as a magnified grid, the one being read framed at its centre and its value on a tag pinned to the loupe; the loupe follows the pointer 1:1 and pips as the colour changes, pitched by lightness. Click and the colour drops out of the loupe onto a swatch shelf: the droplet falls on the exit curve while the shelf glides open a slot, and the swatch lands on the recoil spring. Arrow keys move the loupe one pixel (Shift, ten) and Enter picks.

KQ-1096 · EYEDROPPER

Basinworks paletteColdbrook at dusk

Picks land here

0 of 6 picked · point at the photo

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/eyedropper

Props

value / defaultValue: string[]; default []; Controlled or initial shelf of picked colours, newest first, as #rrggbb.
onValueChange: (colors: string[]) => void; default —; Fires from the pick that changed the shelf, with the new shelf. Picking a colour already on it moves it to the front.
max: number; default 6; How many colours the shelf keeps; the oldest drops off.
label: string; default "Picture"; The picture's accessible name.
zoom: number; default 8; How many times larger a pixel is in the loupe, 4 to 16.
grid: boolean; default true; Lines between the magnified pixels.
loupe: number; default 112; The loupe's side in px, 80 to 160.
format: "hex" | "rgb" | "hsl"; default "hex"; How a colour is written: on the tag, the shelf, copies and announcements.
sound: boolean; default false; Play a pip for each new pixel, pitched by lightness, and a drop for each pick. Nothing plays, and no audio context exists, unless this is on; pointer pips also wait for the page's first press.
disabled: boolean; default false; Stops sampling and picking and dims the eyedropper.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
value / defaultValue	string[]	[]	Controlled or initial shelf of picked colours, newest first, as #rrggbb.
onValueChange	(colors: string[]) => void	—	Fires from the pick that changed the shelf, with the new shelf. Picking a colour already on it moves it to the front.
max	number	6	How many colours the shelf keeps; the oldest drops off.
label	string	"Picture"	The picture's accessible name.
zoom	number	8	How many times larger a pixel is in the loupe, 4 to 16.
grid	boolean	true	Lines between the magnified pixels.
loupe	number	112	The loupe's side in px, 80 to 160.
format	"hex" \| "rgb" \| "hsl"	"hex"	How a colour is written: on the tag, the shelf, copies and announcements.
sound	boolean	false	Play a pip for each new pixel, pitched by lightness, and a drop for each pick. Nothing plays, and no audio context exists, unless this is on; pointer pips also wait for the page's first press.
disabled	boolean	false	Stops sampling and picking and dims the eyedropper.
className	string	—	Merged onto the root element's classes.