KQ-1824 · FOLDED/STEEL

Folded Steel

A polished bar of pattern-welded steel drawn per pixel in WebGL2: every pixel works out which layer of the twisted, pressed billet it was ground from, so twisting brings up chevrons and roses and folding presses waves into ladder rungs, etched dark with a crystalline grain and lit by a brushed sheen that follows the pointer on springs.glide. Dragging twists and folds it 1:1 and a release projects the throw and glides there; arrow keys step on springs.snap. A double click or Enter quenches it: a cool temper flash runs out from the strike and the layers relax straight on springs.drift, and the first time it is seen the etch comes up along it.

KQ-1824 · FOLDED/STEEL

Coldbrook · billet 14 · 24 layers

Chef's blank, before the grind

twist 0.75 turns · fold 20% · twist

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/folded-steel

Props

twist / defaultTwist: number; default 0.75; How far the billet is twisted, in turns along the bar, −3 to 3; controlled or the uncontrolled start.
onTwistChange: (twist: number) => void; default —; Fires from the drag release, key or quench that changed the twist, rounded to 0.05 turn.
fold / defaultFold: number; default 0.2; How deeply the layers are pressed into waves and ladder rungs, 0 to 1; controlled or the uncontrolled start.
onFoldChange: (fold: number) => void; default —; Fires from the drag release, key or quench that changed the fold, rounded to 0.05.
layers: number; default 24; How many layers were welded into the billet, 8 to 64.
etch: number; default 0.6; How deep the acid bit: 0 a polished blank, 1 dark sunk layers with a crystalline grain.
rungs: number; default 7; How many ladder rungs a full fold presses along the bar, 3 to 14.
sheen: number; default 0.7; The brushed sheen under the light, 0 to 1.
brightColor: string; default —; The nickel-bright layers, any CSS colour; defaults to a cool steel from the tokens.
darkColor: string; default —; The etched carbon layers, any CSS colour; defaults to a deep blued grey.
sheenColor: string; default —; The light's colour on the brushed surface; defaults to a cool white.
reveal: "inView" | "mount" | "none"; default "inView"; When the etch first comes up: the first time it is seen, at mount, or already etched.
onQuench: () => void; default —; Fires when a double click or Enter quenches the bar to straight layers.
interactive: boolean; default true; The light follows the pointer and drags twist and fold.
label: string; default "Pattern-welded steel bar"; The slider's accessible name.
seed: number; default 7; Seeds the hand-forged wobble in the layers.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; No twisting, folding or quenching.
className: string; default —; Sizes the piece; the bar fills it less a small margin. 144px tall by default.

Prop	Type	Default	Description
twist / defaultTwist	number	0.75	How far the billet is twisted, in turns along the bar, −3 to 3; controlled or the uncontrolled start.
onTwistChange	(twist: number) => void	—	Fires from the drag release, key or quench that changed the twist, rounded to 0.05 turn.
fold / defaultFold	number	0.2	How deeply the layers are pressed into waves and ladder rungs, 0 to 1; controlled or the uncontrolled start.
onFoldChange	(fold: number) => void	—	Fires from the drag release, key or quench that changed the fold, rounded to 0.05.
layers	number	24	How many layers were welded into the billet, 8 to 64.
etch	number	0.6	How deep the acid bit: 0 a polished blank, 1 dark sunk layers with a crystalline grain.
rungs	number	7	How many ladder rungs a full fold presses along the bar, 3 to 14.
sheen	number	0.7	The brushed sheen under the light, 0 to 1.
brightColor	string	—	The nickel-bright layers, any CSS colour; defaults to a cool steel from the tokens.
darkColor	string	—	The etched carbon layers, any CSS colour; defaults to a deep blued grey.
sheenColor	string	—	The light's colour on the brushed surface; defaults to a cool white.
reveal	"inView" \| "mount" \| "none"	"inView"	When the etch first comes up: the first time it is seen, at mount, or already etched.
onQuench	() => void	—	Fires when a double click or Enter quenches the bar to straight layers.
interactive	boolean	true	The light follows the pointer and drags twist and fold.
label	string	"Pattern-welded steel bar"	The slider's accessible name.
seed	number	7	Seeds the hand-forged wobble in the layers.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	No twisting, folding or quenching.
className	string	—	Sizes the piece; the bar fills it less a small margin. 144px tall by default.