KQ-1431 · FORGE/FLOW

Forge Flow

A background of molten metal moving under a cooling crust: a heat field carried along a swirling flow and coloured from ember red through molten orange to white heat, and wherever it cools a crust of dark plates closes over it, cracked along borders that glow with the heat beneath and re-heal as the metal moves, the glow breathing in patches. The hand is heat — the spot follows on springs.glide and warms on springs.drift, opening the crust into a bright pool and leaving a trail that crusts over behind it — and a press stokes it, the pool heaving open on springs.recoil; the first time it is seen the surface is poured molten, every current running hot, and cools into its crust on springs.drift. Keyboard focus on content inside it brings the heat to the focused element.

KQ-1431 · FORGE/FLOW

Basinworks Foundry

Steel, poured to order

Small-batch castings, 48-hour pour

pouring · the crust is setting

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/forge-flow

Props

children: React.ReactNode; default —; The content above the metal: a hero, a heading, a call to action.
heat: number; default 0.6; The temperature, 0 to 1: how much melt shows and how bright the currents run.
crust: number; default 0.55; How much of the surface the cooling crust covers, 0 to 1, and how thick its plates read.
flow: number; default 1; How fast the metal flows, 0 to 2; 0 holds it still while the glow and the hand still work.
colors: readonly string[]; default —; Four CSS colours: crust, ember, molten, white heat. Defaults to a crust mixed from the page colour (near-black on dark, bronze on light) and three warm pigments.
scale: number; default 1; The size of the currents and the crust's plates, 0.5 to 2.
pulse: number; default 0.5; How strongly the heat glow breathes, 0 to 1.
direction: number; default -18; The heading of the flow in degrees: 0 runs rightward, positive turns clockwise.
interactive: boolean; default true; The hand (and keyboard focus inside) heats the metal under it, and a press stokes it.
pointerStrength: number; default 0.7; How hot the hand runs and how wide it opens the crust, 0 to 1.
radius: number; default 90; The size of the hand's heat, in CSS px.
seed: number; default 1; Picks the surface: the same seed draws the same currents and plates.
paused: boolean; default false; Holds the flow and the glow still; the hand still heats.
intro: boolean; default true; Pour the surface molten and let it cool into its crust the first time it is seen.
dpr: number; default 1.5; The highest device pixel ratio the surface renders at, never above 2.
onIntroEnd: () => void; default —; Fires once the crust has set after the pour — at once when there is no pour (intro off, reduced motion, no WebGL2).
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the metal.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the metal: a hero, a heading, a call to action.
heat	number	0.6	The temperature, 0 to 1: how much melt shows and how bright the currents run.
crust	number	0.55	How much of the surface the cooling crust covers, 0 to 1, and how thick its plates read.
flow	number	1	How fast the metal flows, 0 to 2; 0 holds it still while the glow and the hand still work.
colors	readonly string[]	—	Four CSS colours: crust, ember, molten, white heat. Defaults to a crust mixed from the page colour (near-black on dark, bronze on light) and three warm pigments.
scale	number	1	The size of the currents and the crust's plates, 0.5 to 2.
pulse	number	0.5	How strongly the heat glow breathes, 0 to 1.
direction	number	-18	The heading of the flow in degrees: 0 runs rightward, positive turns clockwise.
interactive	boolean	true	The hand (and keyboard focus inside) heats the metal under it, and a press stokes it.
pointerStrength	number	0.7	How hot the hand runs and how wide it opens the crust, 0 to 1.
radius	number	90	The size of the hand's heat, in CSS px.
seed	number	1	Picks the surface: the same seed draws the same currents and plates.
paused	boolean	false	Holds the flow and the glow still; the hand still heats.
intro	boolean	true	Pour the surface molten and let it cool into its crust the first time it is seen.
dpr	number	1.5	The highest device pixel ratio the surface renders at, never above 2.
onIntroEnd	() => void	—	Fires once the crust has set after the pour — at once when there is no pour (intro off, reduced motion, no WebGL2).
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the metal.