KQ-1377 · CHAR/CAST

Char Cast

Your headline recast in characters: the real text is rasterised from its own layout and redrawn on a canvas as a grid of glyphs picked by a density ramp, with a slow value noise drifting through them, and it casts in on a seeded sweep where each cell's density follows the springs.snap step response — one step heavier, then settled. The pointer carries a soft light that trails the hand on springs.glide, inside which finer characters resolve the true letterforms; with the headline focused the arrow keys walk the light, and touch drags it.

KQ-1377 · CHAR/CAST

Gaugeworks · signal desk

Signal, not noise

casting · move the pointer to read the letters

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/char-cast

Props

text: string; default —; The headline. It stays real text — transparent over the characters — so it reads, selects and copies.
as: "h1" | "h2" | "h3" | "h4" | "p" | "span" | "div"; default "div"; The element the headline renders as.
cell: number; default 6; The character cell's width, px; rows are 1.4 times taller, as mono glyphs are.
ramp: "fine" | "short" | "blocks" | "dots"; default "short"; The density ramp the coverage is cast through, light to dense.
characters: string; default —; A custom ramp, lightest first (start with a space); overrides ramp.
light: number; default 72; The radius of the light the pointer carries, px; 0 turns it off.
tint: string; default "var(--accent-bright)"; The colour the finer characters warm toward at the light's centre.
drift: number; default 1; How fast the noise drifts through the glyphs, 0 (still) to 2.
contrast: number; default 1; The coverage curve: above 1 thins the strokes, below 1 fattens them; 0.5 to 2.
trigger: "mount" | "inView" | "manual"; default "inView"; What casts the headline.
once: boolean; default true; With inView, cast only the first time it is seen.
active: boolean; default —; With manual: true casts the headline, false shows it as plain type.
duration: number; default 700; How long the cast takes to sweep across, ms.
interactive: boolean; default true; The pointer, a touch or the arrow keys carry the light.
dpr: number; default 2; Caps the canvas's device pixel ratio; never above 2.
seed: number; default 0; Seeds the noise and the cast's order.
onComplete: () => void; default —; The cast has settled.
className: string; default —; Classes for the headline element; its font, size, weight and colour are what get cast.

Prop	Type	Default	Description
text	string	—	The headline. It stays real text — transparent over the characters — so it reads, selects and copies.
as	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span" \| "div"	"div"	The element the headline renders as.
cell	number	6	The character cell's width, px; rows are 1.4 times taller, as mono glyphs are.
ramp	"fine" \| "short" \| "blocks" \| "dots"	"short"	The density ramp the coverage is cast through, light to dense.
characters	string	—	A custom ramp, lightest first (start with a space); overrides ramp.
light	number	72	The radius of the light the pointer carries, px; 0 turns it off.
tint	string	"var(--accent-bright)"	The colour the finer characters warm toward at the light's centre.
drift	number	1	How fast the noise drifts through the glyphs, 0 (still) to 2.
contrast	number	1	The coverage curve: above 1 thins the strokes, below 1 fattens them; 0.5 to 2.
trigger	"mount" \| "inView" \| "manual"	"inView"	What casts the headline.
once	boolean	true	With inView, cast only the first time it is seen.
active	boolean	—	With manual: true casts the headline, false shows it as plain type.
duration	number	700	How long the cast takes to sweep across, ms.
interactive	boolean	true	The pointer, a touch or the arrow keys carry the light.
dpr	number	2	Caps the canvas's device pixel ratio; never above 2.
seed	number	0	Seeds the noise and the cast's order.
onComplete	() => void	—	The cast has settled.
className	string	—	Classes for the headline element; its font, size, weight and colour are what get cast.