KQ-1467 · DITHER/DUNES

Dither Dunes

A background printed like a one-bit risograph sheet: an aerial dune sea whose crests bow, split and rejoin as the field migrates downwind, drawn entirely in two or three flat inks through an ordered dither, with the key ink printing the relief and a spot ink laying large soft shapes under it on a shifted screen. The pointer is a lamp whose soft spot of light follows on the springs.glide constants and arrives on springs.drift; a press pulls a flash, a ring that prints the sheet in negative as it crosses, and the spot swells after it on springs.recoil. Keyboard focus on a control inside brings the lamp to it with a softer flash.

KQ-1467 · DITHER/DUNES

Fieldline Atlas

The dune sea in two inks

A field guide printed on the risograph

riso · 4×4 matrix · 2 px dots

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/dither-dunes

Props

children: React.ReactNode; default —; The content on top of the print: a hero line, a heading, a call to action.
matrix: "bayer2" | "bayer4" | "bayer8" | "dots"; default "bayer4"; The threshold pattern every dot is printed through: a 2×2, 4×4 or 8×8 ordered matrix, or a 45° halftone screen of round dots.
scale: number; default 2; The size of one printed dot, in CSS px (snapped to whole device pixels), 1 to 8.
colors: "mono" | "riso" | "sienna" | "tide" | readonly string[]; default "riso"; A named set of inks, or two or three CSS colours of your own, paper first.
size: number; default 180; The distance between dune crests, px, 60 to 600.
relief: number; default 0.7; How strongly the slopes are shaded, 0 (flat tone) to 1 (deep relief).
morph: number; default 0.5; How far the crest lines bow, split and wander, 0 (straight ranks) to 1.
speed: number; default 0.5; How fast the dunes migrate and change shape, 0 (still) to 2.
wind: number; default 12; The way the wind blows the dunes, degrees: 0 toward the right, 90 down.
interactive: boolean; default true; The pointer and keyboard focus brighten a soft spot, and a press flashes a ring of light.
pointerStrength: number; default 0.6; How bright the spot under the hand is and how strong the flash, 0 to 1.
radius: number; default 120; How far the spot of light reaches, px.
paused: boolean; default false; Hold the dunes still; the spot and the flash still answer the hand.
seed: number; default 1; Seeds the dune field, so two prints never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) lighting the print.
onFlash: () => void; default —; Fires when a press or keyboard focus pulls a flash across the print.
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 print: a hero line, a heading, a call to action.
matrix	"bayer2" \| "bayer4" \| "bayer8" \| "dots"	"bayer4"	The threshold pattern every dot is printed through: a 2×2, 4×4 or 8×8 ordered matrix, or a 45° halftone screen of round dots.
scale	number	2	The size of one printed dot, in CSS px (snapped to whole device pixels), 1 to 8.
colors	"mono" \| "riso" \| "sienna" \| "tide" \| readonly string[]	"riso"	A named set of inks, or two or three CSS colours of your own, paper first.
size	number	180	The distance between dune crests, px, 60 to 600.
relief	number	0.7	How strongly the slopes are shaded, 0 (flat tone) to 1 (deep relief).
morph	number	0.5	How far the crest lines bow, split and wander, 0 (straight ranks) to 1.
speed	number	0.5	How fast the dunes migrate and change shape, 0 (still) to 2.
wind	number	12	The way the wind blows the dunes, degrees: 0 toward the right, 90 down.
interactive	boolean	true	The pointer and keyboard focus brighten a soft spot, and a press flashes a ring of light.
pointerStrength	number	0.6	How bright the spot under the hand is and how strong the flash, 0 to 1.
radius	number	120	How far the spot of light reaches, px.
paused	boolean	false	Hold the dunes still; the spot and the flash still answer the hand.
seed	number	1	Seeds the dune field, so two prints never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) lighting the print.
onFlash	() => void	—	Fires when a press or keyboard focus pulls a flash across the print.
className	string	"h-full w-full"	Sizes and shapes the box.