KQ-1830 · ACRYLIC/POUR

Acrylic Pour

A small canvas of poured acrylic: dragging tips it in 3D 1:1 under the hand and the paint runs downhill in WebGL2, each colour at its own pace so the rings shear and stretch, while lacy cells of a lighter layer open where the film thins. Released, the canvas settles level on springs.drift with the throw's velocity and the paint stays where it ran; a tap pours a new seeded composition that floods out cup by cup over the old one. The canvas is focusable: the arrow keys tilt it gently while held and Enter or Space pours anew.

KQ-1830 · ACRYLIC/POUR

Fernworks Studio

Pour no. 12 · acrylic on canvas

level · pour 12 · drag to tilt

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/acrylic-pour

Props

seed / defaultSeed: number; default 1; The composition (controlled / initial); a new seed pours a new one over the old.
onSeedChange: (seed: number) => void; default —; Fires from the tap or key that asked for a new pour.
cells: number; default 0.55; How much the lighter layer breaks through as lacy cells, 0 to 1.
tilt: number; default 0.6; How far a drag tips the canvas and how freely the paint runs, 0 to 1.
palette: "tide" | "ember" | "moss" | "dusk" | string[]; default "tide"; The paints: a named set, or up to five CSS colours.
pours: number; default 4; How many cups were poured, 2 to 7.
viscosity: number; default 0.5; How thick the paint is: runny and far-flowing (0) to heavy and creeping (1).
gloss: number; default 0.6; How glossy the wet paint looks, 0 to 1.
base: string; default titanium white; The lighter layer that shows through the cells, any CSS colour.
sound: boolean; default false; Play a pour while the paint runs.
onFlowChange: (flowing: boolean) => void; default —; Fires when the paint starts and stops flowing.
label: string; default "Acrylic pour"; Names the canvas for assistive technology.
disabled: boolean; default false; Shows the pour but takes no input.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the component (default h-52 w-full); the canvas is the largest square inside.

Prop	Type	Default	Description
seed / defaultSeed	number	1	The composition (controlled / initial); a new seed pours a new one over the old.
onSeedChange	(seed: number) => void	—	Fires from the tap or key that asked for a new pour.
cells	number	0.55	How much the lighter layer breaks through as lacy cells, 0 to 1.
tilt	number	0.6	How far a drag tips the canvas and how freely the paint runs, 0 to 1.
palette	"tide" \| "ember" \| "moss" \| "dusk" \| string[]	"tide"	The paints: a named set, or up to five CSS colours.
pours	number	4	How many cups were poured, 2 to 7.
viscosity	number	0.5	How thick the paint is: runny and far-flowing (0) to heavy and creeping (1).
gloss	number	0.6	How glossy the wet paint looks, 0 to 1.
base	string	titanium white	The lighter layer that shows through the cells, any CSS colour.
sound	boolean	false	Play a pour while the paint runs.
onFlowChange	(flowing: boolean) => void	—	Fires when the paint starts and stops flowing.
label	string	"Acrylic pour"	Names the canvas for assistive technology.
disabled	boolean	false	Shows the pour but takes no input.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the component (default h-52 w-full); the canvas is the largest square inside.