KQ-1204 · SCREEN/PRINT

Screen Print

A picture that arrives as a screen print: a squeegee sweeps each ink layer across the sheet, laying it down behind its blade, each colour landing a few pixels off register, and when the picture is ready the last pull snaps every layer home on the snap spring before the print gives way to the picture. The sheet is also the grip — a drag pulls the blade 1:1 and a release finishes the pull on the glide spring with the throw's velocity. Enter or Space on the focused sheet pulls one layer.

KQ-1204 · SCREEN/PRINT

Basinworks Print Shop · festival poster

proofing · 4 pulls · cmyk

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

Props

alt: string; default —; What the picture shows. On the picture from the first frame, loading or not.
src: string; default —; An image to load. Without it, children is the picture.
children: React.ReactNode; default —; The finished picture when there is no src: an illustration, a figure.
ready: boolean; default —; Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children once every pull but the last has run.
progress: number; default —; How far the load has got, 0 to 1. The pulls follow it; the last one still waits for ready.
onReady: () => void; default —; Fires once per load, when the print has resolved into the picture.
speed: number; default 1; The pace of every pull, return and flood stroke, 0.5 to 2.
register: number; default 2; How far off register each ink lands, in px, 0 to 4. At 0 every pull is a clean proof.
inks: "cmyk" | "riso" | "duo"; default "cmyk"; Four process inks, three risograph inks, or a two-ink duotone.
sound: boolean; default false; A swish for the visitor's own pulls. The automatic pulls are silent.
disabled: boolean; default false; The print still runs; the squeegee cannot be taken.
className: string; default —; Sizes the sheet. Defaults to w-full aspect-[3/2].

Prop	Type	Default	Description
alt	string	—	What the picture shows. On the picture from the first frame, loading or not.
src	string	—	An image to load. Without it, children is the picture.
children	React.ReactNode	—	The finished picture when there is no src: an illustration, a figure.
ready	boolean	—	Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children once every pull but the last has run.
progress	number	—	How far the load has got, 0 to 1. The pulls follow it; the last one still waits for ready.
onReady	() => void	—	Fires once per load, when the print has resolved into the picture.
speed	number	1	The pace of every pull, return and flood stroke, 0.5 to 2.
register	number	2	How far off register each ink lands, in px, 0 to 4. At 0 every pull is a clean proof.
inks	"cmyk" \| "riso" \| "duo"	"cmyk"	Four process inks, three risograph inks, or a two-ink duotone.
sound	boolean	false	A swish for the visitor's own pulls. The automatic pulls are silent.
disabled	boolean	false	The print still runs; the squeegee cannot be taken.
className	string	—	Sizes the sheet. Defaults to w-full aspect-[3/2].