KQ-1821 · PINSCREEN/SWELL

Pinscreen Swell

A pin-art toy seen face-on: a dense grid of steel pin heads in a dark plate, each drawn as a lit dome tilted by its neighbours' heights, so soft swells rolling underneath read as a rippling relief, with pins pushed back sinking into shadow and raised ones throwing short shadows. Pressing with the pointer leaves an impression of the path that relaxes and softens over a few seconds, and a click pushes in a deep round dent on springs.recoil, the pins bouncing back twice with a faint ring risen round it. Arrow keys move a press cursor, Shift with an arrow drags an impression, and Enter or Space pushes a dent.

KQ-1821 · PINSCREEN/SWELL

Gaugeworks Studio · desk toy

A pin screen that keeps the shape of the sea

swell rolling · press to leave a mark

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/pinscreen-swell

Props

pitch: number; default 9; Distance between pins, CSS px, 5 to 16.
depth: number; default 0.6; How far the pins travel: the strength of the relief, 0 to 1.
light: number; default 315; Where the light comes from, degrees clockwise from the top (315 is the upper left).
waves: number; default 0.5; How high the swell rolling underneath lifts the pins, 0 (flat) to 1.
speed: number; default 0.4; How fast the swell rolls, 0 to 1.
scale: number; default 1; The size of the swell's waves, 0.5 (choppy) to 2 (long).
brush: number; default 2.5; The radius of a pressed pointer's impression, in pins, 1 to 6.
dent: number; default 6; The radius of the dent a click pushes in, in pins, 2 to 12.
relax: number; default 3; Seconds for an impression to relax back, 0.5 to 10.
pinColor: string; default a steel pigment; The pins' metal; any CSS colour.
plateColor: string; default a dark plate pigment; The face plate; any CSS colour.
interactive: boolean; default true; Pressing, clicking and keys leave impressions (and the surface takes focus).
onDent: (col: number, row: number) => void; default —; Fires when a click or key pushes in a dent, with its pin column and row (from 1).
label: string; default "Pin screen"; The pin screen's accessible name.
paused: boolean; default false; Hold the swell still; impressions still relax.
seed: number; default 1; Seeds the swell.
dpr: number; default 2; Cap on the canvas's pixel ratio, at most 2.
className: string; default —; Classes for the root; give it a height.

Prop	Type	Default	Description
pitch	number	9	Distance between pins, CSS px, 5 to 16.
depth	number	0.6	How far the pins travel: the strength of the relief, 0 to 1.
light	number	315	Where the light comes from, degrees clockwise from the top (315 is the upper left).
waves	number	0.5	How high the swell rolling underneath lifts the pins, 0 (flat) to 1.
speed	number	0.4	How fast the swell rolls, 0 to 1.
scale	number	1	The size of the swell's waves, 0.5 (choppy) to 2 (long).
brush	number	2.5	The radius of a pressed pointer's impression, in pins, 1 to 6.
dent	number	6	The radius of the dent a click pushes in, in pins, 2 to 12.
relax	number	3	Seconds for an impression to relax back, 0.5 to 10.
pinColor	string	a steel pigment	The pins' metal; any CSS colour.
plateColor	string	a dark plate pigment	The face plate; any CSS colour.
interactive	boolean	true	Pressing, clicking and keys leave impressions (and the surface takes focus).
onDent	(col: number, row: number) => void	—	Fires when a click or key pushes in a dent, with its pin column and row (from 1).
label	string	"Pin screen"	The pin screen's accessible name.
paused	boolean	false	Hold the swell still; impressions still relax.
seed	number	1	Seeds the swell.
dpr	number	2	Cap on the canvas's pixel ratio, at most 2.
className	string	—	Classes for the root; give it a height.