KQ-1599 · OFF/REGISTER

Off Register

A headline printed on a sheet in up to four inks, each plate a real copy of the line stacked in register and blended like ink on paper, so it reads as one rich black until the pointer comes near; then every letter of every plate slips along that plate's own direction, leaving coloured edges and dark overprints where the plates cross, and register marks in the margins slip with them. Each letter of each plate is a mass on a spring: going out it rides springs.recoil, and the pointer's speed raises both the reach and a judder in the targets so a fast pass shakes the plates harder; coming home it rides a critically damped spring and eases back into register without a bounce. Keyboard focus slips the whole line once, left to right in a cascade, and Enter slips it again.

KQ-1599 · OFF/REGISTER

Printed in four inks

Gaugeworks Press · proof 3 of 12

in register · pass over it

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/off-register

Props

children: string; default —; The headline, as a string. Wins over text.
text: string; default "Printed in four inks"; The headline, when it is not given as children.
as: "h1" | "h2" | "h3" | "p" | "div"; default "h2"; The element that carries the headline.
plates: number; default 4; How many inks print the line, 2 to 4: key and magenta, then cyan, then yellow.
slip: number; default 0.5; How far the plates slip apart near the pointer, 0 (they hold) to 1.
paperTone: "cream" | "white" | "kraft" | "slate"; default "cream"; The stock it is printed on, with its own inks; slate is a dark sheet printed in light inks blended as light.
inks: string[]; default —; The inks, key first, as CSS colours; overrides the paper's own set.
radius: number; default 2.4; How far from the pointer the plates feel it, em.
shake: number; default 0.6; How much the pointer's speed shakes the plates, 0 (speed adds nothing) to 1.
settle: number; default 800; How long the plates take to ease back into register, ms.
marks: boolean; default true; Draw register marks in the sheet's margins; they slip with the letters nearest them.
grain: boolean; default true; Give the paper a fine tooth.
focusSlip: boolean; default true; Keyboard focus slips the whole line once; Enter slips it again.
caption: React.ReactNode; default —; A small imprint line printed under the headline, in the key ink.
interactive: boolean; default true; The pointer and keys move the plates.
disabled: boolean; default false; No slipping by pointer or key, and no focus stop.
onRegisterChange: (inRegister: boolean, slip: number) => void; default —; The plates left register (false) or came back into it (true), with the largest slip of that excursion, px.
className: string; default —; Classes on the sheet; set the headline's size, weight and alignment here.

Prop	Type	Default	Description
children	string	—	The headline, as a string. Wins over text.
text	string	"Printed in four inks"	The headline, when it is not given as children.
as	"h1" \| "h2" \| "h3" \| "p" \| "div"	"h2"	The element that carries the headline.
plates	number	4	How many inks print the line, 2 to 4: key and magenta, then cyan, then yellow.
slip	number	0.5	How far the plates slip apart near the pointer, 0 (they hold) to 1.
paperTone	"cream" \| "white" \| "kraft" \| "slate"	"cream"	The stock it is printed on, with its own inks; slate is a dark sheet printed in light inks blended as light.
inks	string[]	—	The inks, key first, as CSS colours; overrides the paper's own set.
radius	number	2.4	How far from the pointer the plates feel it, em.
shake	number	0.6	How much the pointer's speed shakes the plates, 0 (speed adds nothing) to 1.
settle	number	800	How long the plates take to ease back into register, ms.
marks	boolean	true	Draw register marks in the sheet's margins; they slip with the letters nearest them.
grain	boolean	true	Give the paper a fine tooth.
focusSlip	boolean	true	Keyboard focus slips the whole line once; Enter slips it again.
caption	React.ReactNode	—	A small imprint line printed under the headline, in the key ink.
interactive	boolean	true	The pointer and keys move the plates.
disabled	boolean	false	No slipping by pointer or key, and no focus stop.
onRegisterChange	(inRegister: boolean, slip: number) => void	—	The plates left register (false) or came back into it (true), with the largest slip of that excursion, px.
className	string	—	Classes on the sheet; set the headline's size, weight and alignment here.

Off Register

Printed in four inksPrinted in four inksPrinted in four inksPrinted in four inksPrinted in four inks

Install

Props

Printed in four inks