KQ-1429 · FIBER/MIST

Fiber Mist

Hundreds of fine fibres drifting through haze as a background, with the content on top: each fibre is a streamline of a slowly turning curl-noise flow, traced from an anchor the flow itself carries, so they curve together and never knot, drawn in Canvas 2D as a fine core inside a faint halo that adds light where fibres cross in a dark haze and deepens like ink silk in a pale one. The pointer combs them, its path laid into the flow so nearby fibres align to it and relax back within about a second and a half, its place on springs.glide and its presence on springs.drift, and a press stirs them aside in a spiral. It never takes focus; keyboard focus on a control inside draws the fibres into a level stream through it.

KQ-1429 · FIBER/MIST

Coldbrook Fibre

Light, spun fine

Fibre lamps for reading rooms and halls

at rest · 260 fibres drifting

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/fiber-mist

Props

children: React.ReactNode; default —; The content on top of the haze: a hero line, a heading, a call to action.
count: number; default 260; How many fibres drift through the haze, 40 to 800.
glow: number; default 0.5; How far each fibre's light spreads into the haze, 0 (bare threads) to 1.
drift: number; default 1; How fast the flow carries the fibres, 0 (still) to 3.
colors: readonly string[]; default ["var(--accent-bright)", "var(--signal)", "color-mix(in oklab, var(--foreground) 70%, var(--accent-bright))"]; Fibre colours, as CSS colours (up to four); each fibre takes one.
haze: string; default "var(--background)"; The haze behind them, any CSS colour: dark haze makes the fibres glow, pale haze makes them ink.
length: number; default 200; A fibre's length, in px.
curl: number; default 0.35; How tightly the flow curls, 0 (long lazy sweeps) to 1 (tight eddies).
width: number; default 0.9; A fibre's core width, in px.
interactive: boolean; default true; The pointer combs the fibres, and keyboard focus draws them into a stream.
pointerStrength: number; default 0.7; How firmly the pointer combs, 0 to 1.
pulse: boolean; default true; A press on the haze (not on a control) stirs the fibres aside in a spiral from it.
intro: boolean; default true; The fibres draw themselves out of the haze the first time it comes into view.
paused: boolean; default false; Hold the flow still; the pointer can still comb it.
seed: number; default 1; Seeds where every fibre starts, its colour and the flow.
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) combing.
className: string; default —; Sizes and shapes the box; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the haze: a hero line, a heading, a call to action.
count	number	260	How many fibres drift through the haze, 40 to 800.
glow	number	0.5	How far each fibre's light spreads into the haze, 0 (bare threads) to 1.
drift	number	1	How fast the flow carries the fibres, 0 (still) to 3.
colors	readonly string[]	["var(--accent-bright)", "var(--signal)", "color-mix(in oklab, var(--foreground) 70%, var(--accent-bright))"]	Fibre colours, as CSS colours (up to four); each fibre takes one.
haze	string	"var(--background)"	The haze behind them, any CSS colour: dark haze makes the fibres glow, pale haze makes them ink.
length	number	200	A fibre's length, in px.
curl	number	0.35	How tightly the flow curls, 0 (long lazy sweeps) to 1 (tight eddies).
width	number	0.9	A fibre's core width, in px.
interactive	boolean	true	The pointer combs the fibres, and keyboard focus draws them into a stream.
pointerStrength	number	0.7	How firmly the pointer combs, 0 to 1.
pulse	boolean	true	A press on the haze (not on a control) stirs the fibres aside in a spiral from it.
intro	boolean	true	The fibres draw themselves out of the haze the first time it comes into view.
paused	boolean	false	Hold the flow still; the pointer can still comb it.
seed	number	1	Seeds where every fibre starts, its colour and the flow.
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) combing.
className	string	—	Sizes and shapes the box; it fills its parent by default (h-full w-full).