KQ-1521 · SEAM/LIGHT

Seam Light

A thin seam of light along the bottom of the frame throws its light up through slow haze, and the headline standing in front of it casts long shadow shafts up into the beam: every pixel gathers light from points along the seam and marches toward each through a mask of the words, drawn from the DOM's own word boxes and font, so a slit throws crisp shadows fanned wide and a broad glow soft, stretched ones. The first time it is seen the seam cracks open from a slit to its aperture on springs.drift, or its opening follows the scroll container, and the pointer or keyboard focus on a control inside slides the light along the floor on the drift constants so every shadow swings. The headline is real, selectable text drawn as a backlit silhouette with a warm rim; there is no tab stop of its own.

KQ-1521 · SEAM/LIGHT

Fieldline Hall · Thursdays

Open after dark

seam opening · light from below

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/seam-light

Props

headline: string; default "Open after dark"; The words standing in the light; each letter casts its own shaft.
as: "h1" | "h2" | "h3" | "p"; default "h2"; The headline's element.
children: React.ReactNode; default —; Content at the top of the frame — an eyebrow, a nav; it casts no shadow.
aperture: number; default 0.5; How far the seam is open, 0 (a slit: crisp shadows fanned wide) to 1 (a broad glow: soft, stretched ones).
haze: number; default 0.5; How thick the air is, 0 (clear: only the shafts) to 1 (smoky, the beam everywhere).
warmth: number; default 0.6; The light's colour, 0 (cool white) to 1 (warm amber).
trigger: "inView" | "mount" | "scroll" | "manual"; default "inView"; What opens the seam: coming into view, mounting, scrolling it up its scroll container, or aperture alone.
once: boolean; default true; Open once (true) or each time it comes back into view (false).
intensity: number; default 1; How bright the light burns, 0 to 1.5.
reach: number; default 0.7; How far up the frame the light and the shadows reach, 0 to 1.
drift: number; default 0.5; How fast the haze drifts up through the beam, 0 (still) to 1.
interactive: boolean; default true; The pointer, and keyboard focus inside, slide the seam's light along the floor.
pointerStrength: number; default 0.5; How far the light follows the hand, 0 to 1.
coolColor: string; default "var(--accent-bright)"; The light's cool end; taken at a fixed lightness.
warmColor: string; default "var(--warn)"; The light's warm end; taken at a fixed lightness.
paused: boolean; default false; Hold the haze still; the seam still opens and follows the hand.
seed: number; default 1; Seeds the haze.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onOpen: () => void; default —; Fires when the seam has finished opening.
className: string; default "h-full w-full"; Sizes the box.

Prop	Type	Default	Description
headline	string	"Open after dark"	The words standing in the light; each letter casts its own shaft.
as	"h1" \| "h2" \| "h3" \| "p"	"h2"	The headline's element.
children	React.ReactNode	—	Content at the top of the frame — an eyebrow, a nav; it casts no shadow.
aperture	number	0.5	How far the seam is open, 0 (a slit: crisp shadows fanned wide) to 1 (a broad glow: soft, stretched ones).
haze	number	0.5	How thick the air is, 0 (clear: only the shafts) to 1 (smoky, the beam everywhere).
warmth	number	0.6	The light's colour, 0 (cool white) to 1 (warm amber).
trigger	"inView" \| "mount" \| "scroll" \| "manual"	"inView"	What opens the seam: coming into view, mounting, scrolling it up its scroll container, or aperture alone.
once	boolean	true	Open once (true) or each time it comes back into view (false).
intensity	number	1	How bright the light burns, 0 to 1.5.
reach	number	0.7	How far up the frame the light and the shadows reach, 0 to 1.
drift	number	0.5	How fast the haze drifts up through the beam, 0 (still) to 1.
interactive	boolean	true	The pointer, and keyboard focus inside, slide the seam's light along the floor.
pointerStrength	number	0.5	How far the light follows the hand, 0 to 1.
coolColor	string	"var(--accent-bright)"	The light's cool end; taken at a fixed lightness.
warmColor	string	"var(--warn)"	The light's warm end; taken at a fixed lightness.
paused	boolean	false	Hold the haze still; the seam still opens and follows the hand.
seed	number	1	Seeds the haze.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onOpen	() => void	—	Fires when the seam has finished opening.
className	string	"h-full w-full"	Sizes the box.