KQ-1893 · THEATRE/SCRIMS

Theatre Scrims

Painted gauzes hanging one behind another on a dark stage, drawn in one WebGL2 pass, with an eye that dollies through them as the page scrolls: each gauze is front-lit and solid while you are far from it, and as you approach its front light falls and the light behind it rises, so the painting fades to a faint image on glowing, uneven threads and the next scene, now lit, shows through small and deep in the frame. Passing through, the gauze billows toward you and ripples behind you, and the last painting is a solid back cloth; the shown progress follows the scroll on a critically damped spring with the glide constants, over a floor of boards with pools of light and haze lit by shafts from the flies. Down, Page Down and Space go to the next scene, Up and Page Up back, Home and End to either end.

KQ-1893 · THEATRE/SCRIMS

Fieldline Players · The Long Night

A play in scenes, each painted on gauze. Scroll down to walk through them to the morning.

Scenery painted by the company over the winter. Performances run Thursday to Sunday at the Coldbrook Hall; doors at seven.

scene 1 of 4 · the orchard at dusk · 0%

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/theatre-scrims

Props

items: { src?: string; alt: string; caption?: string }[]; default defaultScrims; The paintings, front to back; the last is always the back cloth. The default is six scenes painted in code.
layers: number; default 4; How many layers hang on the stage, 2 to 6: the first gauzes and the back cloth.
haze: number; default 0.45; How smoky the stage is, 0 (clear air) to 1 (beams standing in the haze).
lighting: "warm" | "cool" | "dusk"; default "warm"; The lighting design: warm tungsten, cool moonlight or a dusk of rose and violet.
ripple: number; default 0.6; How much a gauze billows and ripples as you pass through it, 0 to 1.
weave: number; default 0.5; How brightly the gauze's threads glow when lit from behind, 0 to 1.
range: number; default 420; Scroll distance from one scene to the next, px.
height: number; default 520; Height of the pinned stage, px; give it the height of the scroll container it sits in.
proscenium: boolean; default true; Frame the stage with a proscenium and lay a floor of boards.
onLayerChange: (index: number) => void; default —; Fires with the scene in view, from the scroll or key that moved it.
onProgressChange: (progress: number) => void; default —; Fires as you dolly forward, 0 (the first gauze) to 1 (the back cloth).
label: string; default "Stage"; Names the stage for assistive technology.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Classes for the section.

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string }[]	defaultScrims	The paintings, front to back; the last is always the back cloth. The default is six scenes painted in code.
layers	number	4	How many layers hang on the stage, 2 to 6: the first gauzes and the back cloth.
haze	number	0.45	How smoky the stage is, 0 (clear air) to 1 (beams standing in the haze).
lighting	"warm" \| "cool" \| "dusk"	"warm"	The lighting design: warm tungsten, cool moonlight or a dusk of rose and violet.
ripple	number	0.6	How much a gauze billows and ripples as you pass through it, 0 to 1.
weave	number	0.5	How brightly the gauze's threads glow when lit from behind, 0 to 1.
range	number	420	Scroll distance from one scene to the next, px.
height	number	520	Height of the pinned stage, px; give it the height of the scroll container it sits in.
proscenium	boolean	true	Frame the stage with a proscenium and lay a floor of boards.
onLayerChange	(index: number) => void	—	Fires with the scene in view, from the scroll or key that moved it.
onProgressChange	(progress: number) => void	—	Fires as you dolly forward, 0 (the first gauze) to 1 (the back cloth).
label	string	"Stage"	Names the stage for assistive technology.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Classes for the section.