KQ-1795 · HEADING/GLYPHS

Heading Glyphs

A cursor trail set in monospaced type behind your content: every cell the pointer crosses takes the character that fits the stroke there — a dash, pipe or slash for its heading, a weight from dots to hashes for its speed — then cools down the ramp a character at a time while its ink walks from hot to cold, so a fast stroke lingers and a slow one is soon gone. A click stamps an asterisk whose eight rays reach out on springs.recoil, one cell past and back, and cool from the centre outward. Keyboard focus on any child draws a short underline stroke under it, and Enter or Space there stamps at its centre.

KQ-1795 · HEADING/GLYPHS

Waylight Type · specimen 04

Every stroke has a character.

resting · move across the specimen, click to stamp

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/heading-glyphs

Props

ramp: "ascii" | "box" | "dots"; default "ascii"; The type the trail is set in: plain ASCII, box-drawing strokes, or braille dots.
fade: number; default 1400; How long a cell takes to cool through the whole ramp, ms (200 to 5000).
cell: number; default 14; Cell height in px (8 to 28); a cell is a monospaced character wide (about 0.62 of that) and the glyphs are set to fit.
colors: readonly string[]; default ["var(--accent-bright)", "color-mix(in oklab, var(--accent-bright) 40%, var(--ink-2))", "var(--ink-3)"]; Inks from hot to cold, as CSS colours, mixed in oklab into eight steps.
sensitivity: number; default 1600; Pointer speed, px/s, that reaches the heaviest weight of the ramp.
burst: number; default 3; Ray length of the asterisk a click stamps, in cells; 0 turns the stamp off.
focusStroke: boolean; default true; Draw a short underline stroke under a child that takes keyboard focus.
grid: boolean; default true; A faint dot lattice at rest, like an empty type case.
weight: number; default 500; Font weight of the glyphs.
intro: boolean; default true; The first time the box comes into view, a stroke sets itself across it — slow, fast, slow — to show the ramp; never under reduced motion.
interactive: boolean; default true; The pointer, clicks and keyboard focus draw.
paused: boolean; default false; Holds every glyph where it is.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onStamp: (cell: { col: number; row: number }) => void; default —; A stamp landed, with the cell it centred on.
children: React.ReactNode; default —; Content set above the type; it stays fully interactive.
className: string; default "h-56 w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
ramp	"ascii" \| "box" \| "dots"	"ascii"	The type the trail is set in: plain ASCII, box-drawing strokes, or braille dots.
fade	number	1400	How long a cell takes to cool through the whole ramp, ms (200 to 5000).
cell	number	14	Cell height in px (8 to 28); a cell is a monospaced character wide (about 0.62 of that) and the glyphs are set to fit.
colors	readonly string[]	["var(--accent-bright)", "color-mix(in oklab, var(--accent-bright) 40%, var(--ink-2))", "var(--ink-3)"]	Inks from hot to cold, as CSS colours, mixed in oklab into eight steps.
sensitivity	number	1600	Pointer speed, px/s, that reaches the heaviest weight of the ramp.
burst	number	3	Ray length of the asterisk a click stamps, in cells; 0 turns the stamp off.
focusStroke	boolean	true	Draw a short underline stroke under a child that takes keyboard focus.
grid	boolean	true	A faint dot lattice at rest, like an empty type case.
weight	number	500	Font weight of the glyphs.
intro	boolean	true	The first time the box comes into view, a stroke sets itself across it — slow, fast, slow — to show the ramp; never under reduced motion.
interactive	boolean	true	The pointer, clicks and keyboard focus draw.
paused	boolean	false	Holds every glyph where it is.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onStamp	(cell: { col: number; row: number }) => void	—	A stamp landed, with the cell it centred on.
children	React.ReactNode	—	Content set above the type; it stays fully interactive.
className	string	"h-56 w-full"	Sizes and shapes the box.