KQ-1832 · PILLOW/PRINT

Pillow Print

An image card printed on an inflated vinyl pillow: a WebGL2 mesh bulges out, draws in at the middle of each edge and wrinkles where the welded seam gathers into the corners, under a softbox gloss that slides across the bulge as the pillow leans toward the pointer on the glide spring. Pressing pushes a soft dimple in under the finger on the snap spring, drawing the print into it while the rest puffs out to keep its air; letting go pops it back on an underdamped spring set by `stiffness`, overshooting into a little bump and wobbling level. It is a real button: Space or Enter held presses at a point the arrow keys move, key up releases, and Escape lets go of a held press.

KQ-1832 · PILLOW/PRINT

Coldbrook Swim Club

Summer pass, puffed vinyl

resting · 0 presses

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/pillow-print

Props

src: string; default —; An image to print instead of the drawn pass; for WebGL it must be same-origin or CORS.
alt: string; default a description of the drawn pass; What the print shows, for assistive technology.
puff: number; default 0.6; How inflated the pillow is, 0 (nearly flat) to 1 (fully puffed).
gloss: number; default 0.6; How glossy the vinyl is, 0 (satin) to 1 (wet shine).
stiffness: number; default 0.5; How firm the pillow is: soft and slow with three wobbles (0) to quick with one (1).
depth: number; default 0.6; How deep a press pushes in, 0 to 1.
radius: number; default 0.45; How wide the dimple is, 0 (a fingertip) to 1 (a palm).
wrinkle: number; default 0.5; How much the vinyl wrinkles at its welded seams, 0 to 1.
tilt: number; default 0.4; How far the pillow leans toward the pointer, 0 to 1.
sound: boolean; default false; Play the vinyl's blups on press and release.
onPress: () => void; default —; Fires as a press pushes in.
onRelease: () => void; default —; Fires as a press lets go.
label: string; default "Pillow print"; Names the pillow for assistive technology.
disabled: boolean; default false; Shows the pillow but takes no presses.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the box (default h-52 w-full); the pillow is the largest 1.42:1 card inside.

Prop	Type	Default	Description
src	string	—	An image to print instead of the drawn pass; for WebGL it must be same-origin or CORS.
alt	string	a description of the drawn pass	What the print shows, for assistive technology.
puff	number	0.6	How inflated the pillow is, 0 (nearly flat) to 1 (fully puffed).
gloss	number	0.6	How glossy the vinyl is, 0 (satin) to 1 (wet shine).
stiffness	number	0.5	How firm the pillow is: soft and slow with three wobbles (0) to quick with one (1).
depth	number	0.6	How deep a press pushes in, 0 to 1.
radius	number	0.45	How wide the dimple is, 0 (a fingertip) to 1 (a palm).
wrinkle	number	0.5	How much the vinyl wrinkles at its welded seams, 0 to 1.
tilt	number	0.4	How far the pillow leans toward the pointer, 0 to 1.
sound	boolean	false	Play the vinyl's blups on press and release.
onPress	() => void	—	Fires as a press pushes in.
onRelease	() => void	—	Fires as a press lets go.
label	string	"Pillow print"	Names the pillow for assistive technology.
disabled	boolean	false	Shows the pillow but takes no presses.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the box (default h-52 w-full); the pillow is the largest 1.42:1 card inside.