KQ-1443 · NIGHT/VEIL

Night Veil

A quiet hero background: a near-black ground with a faint coloured undertone and two to four layers of soft noise veil drifting at their own scales and headings, closed by a soft vignette, breathing slowly so a headline sits on something alive; on a light page the same recipe is a pale mist. The pointer lifts a gentle light under the veil, its place following on springs.glide and its presence arriving on springs.drift, and a press draws a deep breath in on the glide spring and out on drift that parts the veil around the hand; keyboard focus on a control inside is the hand there, with a softer breath.

KQ-1443 · NIGHT/VEIL

Waylight Sleep

Quiet evenings, kept quiet

Ten-minute wind downs, no streaks

veil breathing · indigo undertone

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/night-veil

Props

children: React.ReactNode; default —; The content on top of the veil: a hero line, a heading, a call to action.
tone: "indigo" | "plum" | "teal" | "ember" | string; default "indigo"; The faint colour under the veil: a named tone or any CSS colour.
motion: number; default 0.35; How much the veil moves, 0 (a still image) to 1 (clearly flowing).
vignette: number; default 0.55; How far the edges close in, 0 (none) to 1 (a deep vignette).
breath: number; default 0.5; How deep the veil's slow breath runs, 0 (none) to 1.
breathDuration: number; default 9000; One full breath, in milliseconds.
layers: number; default 3; Layers of veil over one another, 2 to 4.
scale: number; default 420; The size of the broadest wisps, px.
grain: number; default 0.3; A whisper of film grain that also hides banding, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus lift light under the veil, and a press takes a deep breath.
pointerStrength: number; default 0.6; How much light the hand lifts and how far a breath parts the veil, 0 to 1.
radius: number; default 220; How far the hand's light reaches, px.
paused: boolean; default false; Hold the veil still; the hand still lifts the light.
seed: number; default 1; Seeds the veil, so two never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) lifting the light.
onBreathChange: (inhaling: boolean) => void; default —; Fires when a deep breath is drawn (true) and when it is let out (false).
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the veil: a hero line, a heading, a call to action.
tone	"indigo" \| "plum" \| "teal" \| "ember" \| string	"indigo"	The faint colour under the veil: a named tone or any CSS colour.
motion	number	0.35	How much the veil moves, 0 (a still image) to 1 (clearly flowing).
vignette	number	0.55	How far the edges close in, 0 (none) to 1 (a deep vignette).
breath	number	0.5	How deep the veil's slow breath runs, 0 (none) to 1.
breathDuration	number	9000	One full breath, in milliseconds.
layers	number	3	Layers of veil over one another, 2 to 4.
scale	number	420	The size of the broadest wisps, px.
grain	number	0.3	A whisper of film grain that also hides banding, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus lift light under the veil, and a press takes a deep breath.
pointerStrength	number	0.6	How much light the hand lifts and how far a breath parts the veil, 0 to 1.
radius	number	220	How far the hand's light reaches, px.
paused	boolean	false	Hold the veil still; the hand still lifts the light.
seed	number	1	Seeds the veil, so two never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) lifting the light.
onBreathChange	(inhaling: boolean) => void	—	Fires when a deep breath is drawn (true) and when it is let out (false).
className	string	"h-full w-full"	Sizes and shapes the box.