KQ-1242 · INK/MARBLE

Ink Marble

A background of marbled paper still on the bath, bands of ink floating on the size with your content on top; a drag pulls a comb through the ink, its tines standing across the stroke, and the ink near each tine is carried along, so a stroke across the bands feathers them into chevrons and a second one back makes a nonpareil. Nothing here springs: the comb is direct manipulation, the ink relaxes back into its bands on a seven-second exponential, the sheet sways a few pixels on slow currents while it is on screen, and a keyboard pass travels on a linear tween. A transparent button behind the content is the keyboard's way in: arrow keys comb from the hand and Enter or Space combs a full pass across the sheet.

KQ-1242 · INK/MARBLE

Fieldline Press

Endpapers, combed by hand

Ocean set · 12 sheets

bands at rest · drag to comb

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/ink-marble

Props

children: ReactNode; default —; The content on top of the paper, in its own layer that fills the box: a hero, a heading, a call to action.
bands: number; default 6; How many bands of ink float across the sheet, 4 to 10.
comb: number; default 0.5; The tool, 0 to 1: a single stylus at 0, nine fine tines 12 px apart at 1.
palette: "ocean" | "ember" | "moss"; default "ocean"; The four inks on the bath, fixed pigments mixed a little into the page, with veins of paper between the bands.
label: string; default "Marbled paper"; The accessible name of the paper's keyboard surface.
onCombChange: (combing: boolean) => void; default —; A stroke of the comb began (true) or ended (false), reported from the pointer or keys that made it.
disabled: boolean; default false; The ink still drifts; it cannot be combed, and touch scrolling is left to the page.
className: string; default —; Sizes the box; the default is h-full w-full, so it fills its container.

Prop	Type	Default	Description
children	ReactNode	—	The content on top of the paper, in its own layer that fills the box: a hero, a heading, a call to action.
bands	number	6	How many bands of ink float across the sheet, 4 to 10.
comb	number	0.5	The tool, 0 to 1: a single stylus at 0, nine fine tines 12 px apart at 1.
palette	"ocean" \| "ember" \| "moss"	"ocean"	The four inks on the bath, fixed pigments mixed a little into the page, with veins of paper between the bands.
label	string	"Marbled paper"	The accessible name of the paper's keyboard surface.
onCombChange	(combing: boolean) => void	—	A stroke of the comb began (true) or ended (false), reported from the pointer or keys that made it.
disabled	boolean	false	The ink still drifts; it cannot be combed, and touch scrolling is left to the page.
className	string	—	Sizes the box; the default is h-full w-full, so it fills its container.