KQ-1392 · HALFTONE/WAKE

Halftone Wake

A single-ink halftone plate whose image surfaces in the pointer's wake: every dot rests at a faint fraction of its size, and the dots the hand passes grow on their own springs with the snap constants, popping just past full size before they settle, then recede from the trail's oldest end over linger seconds. Scrolling sweeps a band of ink down across the plate, and the first time it is mostly in view one press runs across it. The plate is a focusable image: focus and Enter or Space run the press across the whole of it.

KQ-1392 · HALFTONE/WAKE

Basinworks Press · plate 07

ghost · move across the plate or tab in

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/halftone-wake

Props

src: string; default —; The image to print; it must be readable across origins (CORS). The generated art is used without it or when it fails.
art: "ridges" | "tide" | "orbit"; default "ridges"; The generated artwork printed when there is no image.
alt: string; default a description of the art; What the image shows: the plate's accessible name.
cell: number; default 10; The screen's cell size, px (4 to 32).
angle: number; default 45; The screen's angle, degrees; 45 is the classic black screen.
linger: number; default 2.4; How long the wake takes to recede, s.
shape: "round" | "square" | "line"; default "round"; The dot: round, square, or a line screen whose thickness follows the tone.
ink: string; default "var(--foreground)"; The ink.
paper: string; default —; Paper behind the dots; the page shows through when unset. Dark ink on light paper prints shadows, light ink on dark paper prints highlights.
rest: number; default 0.18; The dot size where nothing has passed, 0 to 1; 0 hides the image until it is printed.
brush: number; default 112; The width of the pointer's wake, px.
contrast: number; default 0.5; The plate's tone curve, 0 (flat) to 1 (punchy).
scroll: boolean; default true; Scrolling the page sweeps a band of ink down across the plate.
intro: boolean; default true; One sweep across the plate the first time it is mostly in view.
seed: number; default 3; The generated art's variation.
interactive: boolean; default true; The pointer, the scroll and the keys print; false leaves the plate at rest and out of the tab order.
paused: boolean; default false; Freeze the plate as it is.
dpr: number; default 2; The highest device pixel ratio drawn, capped at 2.
onCoverageChange: (printed: number) => void; default —; Fires with the share of the plate printed, 0 to 1, whenever it moves by a whole percent.
className: string; default "aspect-[2/1] w-full"; Size the plate here.

Prop	Type	Default	Description
src	string	—	The image to print; it must be readable across origins (CORS). The generated art is used without it or when it fails.
art	"ridges" \| "tide" \| "orbit"	"ridges"	The generated artwork printed when there is no image.
alt	string	a description of the art	What the image shows: the plate's accessible name.
cell	number	10	The screen's cell size, px (4 to 32).
angle	number	45	The screen's angle, degrees; 45 is the classic black screen.
linger	number	2.4	How long the wake takes to recede, s.
shape	"round" \| "square" \| "line"	"round"	The dot: round, square, or a line screen whose thickness follows the tone.
ink	string	"var(--foreground)"	The ink.
paper	string	—	Paper behind the dots; the page shows through when unset. Dark ink on light paper prints shadows, light ink on dark paper prints highlights.
rest	number	0.18	The dot size where nothing has passed, 0 to 1; 0 hides the image until it is printed.
brush	number	112	The width of the pointer's wake, px.
contrast	number	0.5	The plate's tone curve, 0 (flat) to 1 (punchy).
scroll	boolean	true	Scrolling the page sweeps a band of ink down across the plate.
intro	boolean	true	One sweep across the plate the first time it is mostly in view.
seed	number	3	The generated art's variation.
interactive	boolean	true	The pointer, the scroll and the keys print; false leaves the plate at rest and out of the tab order.
paused	boolean	false	Freeze the plate as it is.
dpr	number	2	The highest device pixel ratio drawn, capped at 2.
onCoverageChange	(printed: number) => void	—	Fires with the share of the plate printed, 0 to 1, whenever it moves by a whole percent.
className	string	"aspect-[2/1] w-full"	Size the plate here.