KQ-1369 · STATIC/FUZZ

Static Fuzz

Type received over a weak analog signal: the real words stay in the DOM while a WebGL2 canvas draws them frayed, every pixel row pushed sideways by a slow hum that bends whole bands of type, a per-row jitter that changes thirty times a second, the odd torn row and rolling bands that pass down through the words. Hovering opens a calm disc around the pointer on springs.snap, so the rows lock into register outward from it, while the whole line settles on springs.drift; leaving closes the disc on an exit tween and sends a band through as the signal frays again. Keyboard focus on, inside or around the element steadies it completely, and the arrival comes in from full static on springs.drift.

KQ-1369 · STATIC/FUZZ

Coldbrook 88.4 · after hours

Late signal from the coast

Tune in from midnight, all night.

signal frayed · hover the words to steady them

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/static-fuzz

Props

text: string; default —; The words, rendered as real text and drawn frayed over themselves.
as: "p" | "h1" | "h2" | "h3" | "span" | "div"; default "p"; The element the text lives in.
intensity: number; default 0.5; How far the rows tear, 0 (clean) to 1 (a weak station).
bands: number; default 2; Rolling bands that pass through every ten seconds, 0 to 6.
calm: number; default 2.5; Radius of the steady disc the pointer carries, em; 0 leaves only settle.
settle: number; default 0.5; How far the whole line steadies while hovered, 0 to 1. Keyboard focus steadies it fully.
grain: number; default 0.35; Ink dropping out in speckle, 0 to 1.
ghost: number; default 0.3; A faint echo trailing each row, as a reflected signal leaves, 0 to 1.
speed: number; default 1; How fast the noise moves, 0.25 to 2.
color: string; default "currentColor"; Ink colour, any CSS colour; resolved on the element so it follows the theme.
seed: number; default 1; Seed for the noise, so two lines never fray in step.
trigger: "mount" | "inView" | "manual"; default "inView"; When the signal comes in from full static.
active: boolean; default true; With trigger="manual", the signal comes in when this turns true.
once: boolean; default true; Come in once, or every time the line re-enters view.
delay: number; default 0; Wait before the signal comes in, ms.
onComplete: () => void; default —; The signal has come in and settled.
paused: boolean; default false; Hold the noise still.
interactive: boolean; default true; The pointer and focus steady the line.
focusable: boolean; default false; Put the element in the tab order, so keyboard focus can steady it.
dpr: number; default 2; Device pixel ratio cap for the canvas.
onCalmChange: (calm: boolean) => void; default —; Fires when hover or focus steadies the line (true) and when it frays again (false).
className: string; default —; Classes for the element; set the type here (size, weight, colour).

Prop	Type	Default	Description
text	string	—	The words, rendered as real text and drawn frayed over themselves.
as	"p" \| "h1" \| "h2" \| "h3" \| "span" \| "div"	"p"	The element the text lives in.
intensity	number	0.5	How far the rows tear, 0 (clean) to 1 (a weak station).
bands	number	2	Rolling bands that pass through every ten seconds, 0 to 6.
calm	number	2.5	Radius of the steady disc the pointer carries, em; 0 leaves only settle.
settle	number	0.5	How far the whole line steadies while hovered, 0 to 1. Keyboard focus steadies it fully.
grain	number	0.35	Ink dropping out in speckle, 0 to 1.
ghost	number	0.3	A faint echo trailing each row, as a reflected signal leaves, 0 to 1.
speed	number	1	How fast the noise moves, 0.25 to 2.
color	string	"currentColor"	Ink colour, any CSS colour; resolved on the element so it follows the theme.
seed	number	1	Seed for the noise, so two lines never fray in step.
trigger	"mount" \| "inView" \| "manual"	"inView"	When the signal comes in from full static.
active	boolean	true	With trigger="manual", the signal comes in when this turns true.
once	boolean	true	Come in once, or every time the line re-enters view.
delay	number	0	Wait before the signal comes in, ms.
onComplete	() => void	—	The signal has come in and settled.
paused	boolean	false	Hold the noise still.
interactive	boolean	true	The pointer and focus steady the line.
focusable	boolean	false	Put the element in the tab order, so keyboard focus can steady it.
dpr	number	2	Device pixel ratio cap for the canvas.
onCalmChange	(calm: boolean) => void	—	Fires when hover or focus steadies the line (true) and when it frays again (false).
className	string	—	Classes for the element; set the type here (size, weight, colour).