KQ-1537 · LOG/RAIN

Log Rain

Columns of log-shaped glyphs rain at up to three depths, the far ones small, dim and slow, and any near column stops to be read: hover it, tap it or reach it with the arrow keys and its fall halts, then the stick of glyphs swings flat about the glyph under the pointer — every glyph upright on its arc, re-rolling centre-out into the real characters of a line from your logs — on one progress value driven by springs.snap, so the line lands with one crisp overshoot over a plate that keeps it readable. Leave it and, after the dwell, it tips back up on springs.glide and the column falls again from rest. Left and Right (or Up and Down) move between raining columns, Home and End jump, and Escape tips the line back.

KQ-1537 · LOG/RAIN

Gaugeworks · prod-eutail -f

raining · hover a column to read it

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/log-rain

Props

lines: readonly (string | LogRainLine)[]; default defaultLogRainLines; The log lines the columns become when they stop: { time?, source, text, level? } or plain strings shown as they are. Columns take lines in turn.
layers: number; default 3; How many depths rain, nearest first: 1 to 3.
fallSpeed: number; default 1; How fast the rain falls, 0 (held) to 3.
hue: number; default 250; The rain's hue in degrees, at the accent token's own lightness and chroma, so it suits both themes.
glyphs: string; default "0123456789abcdef{}[]<>/:=._-+*#"; The characters the rain is made of.
density: number; default 0.7; The share of columns that rain, 0 to 1.
size: number; default 14; Glyph size of the nearest depth in px (9 to 22); the others scale from it.
trail: number; default 0.5; How long the trails run, 0 to 1.
dwell: number; default 700; How long a line stays readable after the pointer leaves, in ms.
levelColors: boolean; default true; Colour a line's source by its level: warn and error in their tokens.
interactive: boolean; default true; Hover, tap and arrow keys stop a column to read it.
paused: boolean; default false; Hold the rain where it is; lines can still be read.
seed: number; default 1; Seeds the columns, their speeds and lengths.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onLineChange: (index: number | null) => void; default —; Fires with the index of the line that tipped in, and with null when it tips back.
label: string; default "Live log"; The field's accessible name.
className: string; default "h-96 w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
lines	readonly (string \| LogRainLine)[]	defaultLogRainLines	The log lines the columns become when they stop: { time?, source, text, level? } or plain strings shown as they are. Columns take lines in turn.
layers	number	3	How many depths rain, nearest first: 1 to 3.
fallSpeed	number	1	How fast the rain falls, 0 (held) to 3.
hue	number	250	The rain's hue in degrees, at the accent token's own lightness and chroma, so it suits both themes.
glyphs	string	"0123456789abcdef{}[]<>/:=._-+*#"	The characters the rain is made of.
density	number	0.7	The share of columns that rain, 0 to 1.
size	number	14	Glyph size of the nearest depth in px (9 to 22); the others scale from it.
trail	number	0.5	How long the trails run, 0 to 1.
dwell	number	700	How long a line stays readable after the pointer leaves, in ms.
levelColors	boolean	true	Colour a line's source by its level: warn and error in their tokens.
interactive	boolean	true	Hover, tap and arrow keys stop a column to read it.
paused	boolean	false	Hold the rain where it is; lines can still be read.
seed	number	1	Seeds the columns, their speeds and lengths.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onLineChange	(index: number \| null) => void	—	Fires with the index of the line that tipped in, and with null when it tips back.
label	string	"Live log"	The field's accessible name.
className	string	"h-96 w-full"	Sizes and shapes the box.