KQ-1378 · SCRAMBLE/BRUSH

Scramble Brush

Text you can brush: letters within a radius of the pointer turn to re-rolling noise, hot at the brush's core and cooling toward muted ink, and each returns to its letter a moment after the pointer last touched it — the core holding longer than the rim — so the cursor drags a tapering wake through the paragraph. Every true letter drops back in from a nudge above on springs.snap, so the wake settles in a ripple; with the text focused, the arrow keys hold one word scrambled and the word left behind ripples back to type.

KQ-1378 · SCRAMBLE/BRUSH

Gaugeworks 4.2 · release notes

Readings now arrive in order, even over a weak link. Gauges that drop out mid-sync pick up where they left off, and a noisy sensor is flagged before its numbers reach your charts.

settled · brush the paragraph

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/scramble-brush

Props

text: string; default —; The text. Read once by assistive technology, and copied as written.
as: "p" | "div" | "span" | "h1" | "h2" | "h3" | "h4"; default "p"; The element the text renders as.
radius: number; default 48; How far from the pointer letters scramble, px.
restore: number; default 420; How long a letter stays scrambled after the pointer last touched it, ms.
glyphs: "symbols" | "binary" | "blocks" | "letters"; default "symbols"; The noise a scrambled letter shows.
characters: string; default —; A custom glyph set; overrides glyphs.
rate: number; default 70; How often a scrambled letter re-rolls its glyph, ms.
falloff: number; default 0.6; How much longer the brush's core holds its noise than its rim, 0 to 1.
color: string; default "var(--accent-bright)"; The noise's colour at the brush's core; it cools toward muted ink.
keyboard: boolean; default true; The text is focusable and the arrow keys brush it word by word.
disabled: boolean; default false; Nothing scrambles.
seed: number; default 0; Seeds the noise.
onScrambleChange: (count: number) => void; default —; How many letters are scrambled, as it changes.
className: string; default —; Classes for the text element; size, leading and colour are inherited.

Prop	Type	Default	Description
text	string	—	The text. Read once by assistive technology, and copied as written.
as	"p" \| "div" \| "span" \| "h1" \| "h2" \| "h3" \| "h4"	"p"	The element the text renders as.
radius	number	48	How far from the pointer letters scramble, px.
restore	number	420	How long a letter stays scrambled after the pointer last touched it, ms.
glyphs	"symbols" \| "binary" \| "blocks" \| "letters"	"symbols"	The noise a scrambled letter shows.
characters	string	—	A custom glyph set; overrides glyphs.
rate	number	70	How often a scrambled letter re-rolls its glyph, ms.
falloff	number	0.6	How much longer the brush's core holds its noise than its rim, 0 to 1.
color	string	"var(--accent-bright)"	The noise's colour at the brush's core; it cools toward muted ink.
keyboard	boolean	true	The text is focusable and the arrow keys brush it word by word.
disabled	boolean	false	Nothing scrambles.
seed	number	0	Seeds the noise.
onScrambleChange	(count: number) => void	—	How many letters are scrambled, as it changes.
className	string	—	Classes for the text element; size, leading and colour are inherited.