KQ-822 · CODE/SCAFFOLD

Code Scaffold

A code block that shows its shape before its text. Every line is present as a grey bar at its indentation and as long as its text, cascading in on glide, and each arriving line is revealed left to right by a clip tween while its bar fades beneath it, so the shape develops into the line. The copy control mounts on snap only once the last line lands; Tab reaches it and Enter or Space copies, stamping a tick drawn on flick.

KQ-822 · CODE/SCAFFOLD

deploy.plan · 12 lines

Nothing written yet

Idle · press write

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/code-scaffold

Props

lines: string[]; default —; The complete code, one entry per line; the scaffold takes its shape from these.
arrived: number; default 0; Lines that have arrived, top to bottom.
generating: boolean; default false; Generation is open: the scaffold shows and aria-busy is set.
filename: string; default —; Shown in the header rail.
label: string; default —; Names the block for assistive technology.
onCopy: (text: string) => void; default —; Fires from the copy control with the full text.
copyLabel: string; default "Copy"; Copy control text.

Prop	Type	Default	Description
lines	string[]	—	The complete code, one entry per line; the scaffold takes its shape from these.
arrived	number	0	Lines that have arrived, top to bottom.
generating	boolean	false	Generation is open: the scaffold shows and aria-busy is set.
filename	string	—	Shown in the header rail.
label	string	—	Names the block for assistive technology.
onCopy	(text: string) => void	—	Fires from the copy control with the full text.
copyLabel	string	"Copy"	Copy control text.