KQ-1457 · PLASMA/RIBBON

Plasma Ribbon

A background with a single ribbon of plasma crossing it on a gentle wave, drawn in one WebGL2 pass with the content on top: a glowing core, long twisting filaments flowing along it, frayed edges and sparks that leave both edges, flicker and die inside a soft halo. Its centreline is a small string integrated at 120 Hz, where tension carries a disturbance along the ribbon and a local restoring spring with the springs.drift constants brings it home without ringing; the pointer pulls the string to its own height and the far ends follow late, and a press whips it with a crest and trough that run out both ways. It is decoration and never takes focus; keyboard focus landing on a control inside lifts the ribbon to it with a softer whip.

KQ-1457 · PLASMA/RIBBON

Basinworks Grid

A steadier current for every street

Live across four counties

cobalt · 72 px · glow 0.60

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/plasma-ribbon

Props

children: React.ReactNode; default —; The content on top of the ribbon: a hero line, a heading, a call to action.
thickness: number; default 72; How wide the ribbon is, px.
glow: number; default 0.6; The halo around the ribbon, 0 (none) to 1 (a wide soft bloom).
color: "cobalt" | "ember" | "jade" | "orchid" | string; default "cobalt"; A named colour, or any CSS colour.
amplitude: number; default 0.4; How high the gentle wave runs, 0 (flat) to 1 (a quarter of the box).
wavelength: number; default 560; The wave's length, px.
speed: number; default 0.6; How fast the wave travels and the plasma flows, 0 (still) to 2.
sparks: number; default 0.5; How many sparks fray off its edges, 0 (none) to 1.
filaments: number; default 0.6; How much fine twisting filament runs along the core, 0 (smooth) to 1.
interactive: boolean; default true; The pointer and keyboard focus pull the wave to their height, and a press whips it.
pointerStrength: number; default 0.7; How hard the hand pulls the ribbon and how sharp a whip is, 0 to 1.
paused: boolean; default false; Hold the ribbon still; the hand still pulls it.
seed: number; default 1; Seeds the filaments, the sparks and the wave's phase.
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) pulling the ribbon.
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 ribbon: a hero line, a heading, a call to action.
thickness	number	72	How wide the ribbon is, px.
glow	number	0.6	The halo around the ribbon, 0 (none) to 1 (a wide soft bloom).
color	"cobalt" \| "ember" \| "jade" \| "orchid" \| string	"cobalt"	A named colour, or any CSS colour.
amplitude	number	0.4	How high the gentle wave runs, 0 (flat) to 1 (a quarter of the box).
wavelength	number	560	The wave's length, px.
speed	number	0.6	How fast the wave travels and the plasma flows, 0 (still) to 2.
sparks	number	0.5	How many sparks fray off its edges, 0 (none) to 1.
filaments	number	0.6	How much fine twisting filament runs along the core, 0 (smooth) to 1.
interactive	boolean	true	The pointer and keyboard focus pull the wave to their height, and a press whips it.
pointerStrength	number	0.7	How hard the hand pulls the ribbon and how sharp a whip is, 0 to 1.
paused	boolean	false	Hold the ribbon still; the hand still pulls it.
seed	number	1	Seeds the filaments, the sparks and the wave's phase.
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) pulling the ribbon.
className	string	"h-full w-full"	Sizes and shapes the box.