KQ-1415 · MOLTEN/MARK

Molten Mark

An SVG mark or a word filled with liquid metal in one WebGL2 pass inside the shape's own mask: an exact distance transform rolls the edge like a meniscus, a slow churn of warped noise moves across the surface, and every pixel reflects a procedural studio tinted chrome, gold, copper or the accent, with a key light that follows the pointer on springs.glide and drifts home on springs.drift. The first time it is in view the metal pours into the empty mould from its foot, white-hot at the front and cooling to metal, and a click drops a ring ripple into the surface. It is an image to assistive technology, has nothing to focus, and shows a still metallic gradient without WebGL2.

KQ-1415 · MOLTEN/MARK

Basinworks

Foundry · cast to order

mould ready · the pour starts in view

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/molten-mark

Props

path: string; default a ring with a droplet in it; The mark as SVG path data in viewBox units, filled with the nonzero rule.
viewBox: string; default "0 0 100 100"; The viewBox the path is drawn in.
text: string; default —; A word to pour instead of the path, set in the inherited font at heavy weight.
label: string; default text, or "Molten mark"; The mark's accessible name.
tint: "chrome" | "gold" | "copper" | "accent" | string; default "chrome"; The metal: a preset (each a token pigment at a fixed lightness) or any CSS colour.
flow: number; default 1; How fast the surface churns, as a multiple of the house pace (0 to 3); 0 holds it still and stops the loop.
shine: number; default 0.6; Polish, 0 to 1: satin with soft broad highlights to a mirror with small hard ones.
bevel: number; default 0.75; How rounded the metal stands at its edges, 0.1 to 1: a flat pour with a rolled rim to a full pillow.
ripple: number; default 0.5; How deep the churning ripples run, 0 to 1.
heat: number; default 1; How hot the pour runs, 0 to 1: white-hot at the front and cooling through ember; 0 pours cold.
padding: number; default 0.08; Space around the mark, as a share of the box on each side (0 to 0.3).
intro: boolean; default true; Pour the metal in the first time the mark comes into view; off, it is cast already.
pourKey: string | number; default —; Change it to pour again.
interactive: boolean; default true; The key light follows the pointer, and a click drops a ripple into the metal.
paused: boolean; default false; Holds the surface still and stops the loop.
seed: number; default 5; Seed for the flow's pattern.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
onPour: () => void; default —; Fires when a pour begins: on first view, or when pourKey changes.
onPoured: () => void; default —; Fires when the mark is cast: a pour has filled it and cooled, or, with no pour to run, the first time it is in view.
className: string; default "h-40 w-full"; Classes for the box; give it a size.

Prop	Type	Default	Description
path	string	a ring with a droplet in it	The mark as SVG path data in viewBox units, filled with the nonzero rule.
viewBox	string	"0 0 100 100"	The viewBox the path is drawn in.
text	string	—	A word to pour instead of the path, set in the inherited font at heavy weight.
label	string	text, or "Molten mark"	The mark's accessible name.
tint	"chrome" \| "gold" \| "copper" \| "accent" \| string	"chrome"	The metal: a preset (each a token pigment at a fixed lightness) or any CSS colour.
flow	number	1	How fast the surface churns, as a multiple of the house pace (0 to 3); 0 holds it still and stops the loop.
shine	number	0.6	Polish, 0 to 1: satin with soft broad highlights to a mirror with small hard ones.
bevel	number	0.75	How rounded the metal stands at its edges, 0.1 to 1: a flat pour with a rolled rim to a full pillow.
ripple	number	0.5	How deep the churning ripples run, 0 to 1.
heat	number	1	How hot the pour runs, 0 to 1: white-hot at the front and cooling through ember; 0 pours cold.
padding	number	0.08	Space around the mark, as a share of the box on each side (0 to 0.3).
intro	boolean	true	Pour the metal in the first time the mark comes into view; off, it is cast already.
pourKey	string \| number	—	Change it to pour again.
interactive	boolean	true	The key light follows the pointer, and a click drops a ripple into the metal.
paused	boolean	false	Holds the surface still and stops the loop.
seed	number	5	Seed for the flow's pattern.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
onPour	() => void	—	Fires when a pour begins: on first view, or when pourKey changes.
onPoured	() => void	—	Fires when the mark is cast: a pour has filled it and cooled, or, with no pour to run, the first time it is in view.
className	string	"h-40 w-full"	Classes for the box; give it a size.