KQ-1868 · HEAT/PUTTY

Heat Putty

A soft blob of thermochromic putty on a stone slab: a resting pointer warms the spot beneath it and a halo of colour spreads outward through the palette as the heat diffuses in a small WebGL2 field, while the putty slumps wider and lower on springs.drift's constants as it warms. Moving away lets it cool fastest where it is thin, so the colour draws back from its edges inward and a rested hand leaves a fading print; a press squashes it on springs.snap and lets it go on springs.recoil with two wobbles. The putty is a button: focus puts a hand on it, arrow keys move the hand and Space or Enter held presses.

KQ-1868 · HEAT/PUTTY

Basinworks thermo putty · rest a finger on it

cool · warm it with your hand

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/heat-putty

Props

warmth: number; default 1; How quickly a resting hand warms the putty, 0.2 to 2; a moving hand warms it far less.
cooling: number; default 1; How quickly it cools back, 0.2 to 2.
palette: "mood" | "sunset" | "glacier" | "orchid" | string[]; default "sunset"; The thermochromic pigment from cool to hot: a preset, or 2–5 CSS colours mixed in linear light.
handprints: number; default 0.6; How long a rested hand's print lingers, 0 (gone at once) to 1 (a long while).
slump: number; default 0.5; How much warmth softens the putty so it slumps wider and lower, 0 to 1.
squash: number; default 0.6; How far a press flattens it, 0 to 1.
hand: number; default 30; The radius of a warm touch, px; a press warms a palm half as wide again.
seed: number; default 7; The blob's outline: any number gives its own lump.
slab: boolean; default true; Draw the stone slab it rests on (the page's own surface colour); off, it sits on whatever is behind with its contact shadow.
interactive: boolean; default true; Pointer, touch and keys warm and press it.
paused: boolean; default false; Hold the putty as it is: no warming, no cooling.
dpr: number; default 2; Device-pixel-ratio cap for the canvas, at most 2.
onHeatChange: (heat: number) => void; default —; Fires with the putty's mean warmth, in tenths, as it changes.
label: string; default "Thermochromic putty"; The putty's accessible name.
disabled: boolean; default false; Shows the putty as it is; nothing warms or presses it.
className: string; default "h-56"; Size with a height class; the putty fits the box's height.

Prop	Type	Default	Description
warmth	number	1	How quickly a resting hand warms the putty, 0.2 to 2; a moving hand warms it far less.
cooling	number	1	How quickly it cools back, 0.2 to 2.
palette	"mood" \| "sunset" \| "glacier" \| "orchid" \| string[]	"sunset"	The thermochromic pigment from cool to hot: a preset, or 2–5 CSS colours mixed in linear light.
handprints	number	0.6	How long a rested hand's print lingers, 0 (gone at once) to 1 (a long while).
slump	number	0.5	How much warmth softens the putty so it slumps wider and lower, 0 to 1.
squash	number	0.6	How far a press flattens it, 0 to 1.
hand	number	30	The radius of a warm touch, px; a press warms a palm half as wide again.
seed	number	7	The blob's outline: any number gives its own lump.
slab	boolean	true	Draw the stone slab it rests on (the page's own surface colour); off, it sits on whatever is behind with its contact shadow.
interactive	boolean	true	Pointer, touch and keys warm and press it.
paused	boolean	false	Hold the putty as it is: no warming, no cooling.
dpr	number	2	Device-pixel-ratio cap for the canvas, at most 2.
onHeatChange	(heat: number) => void	—	Fires with the putty's mean warmth, in tenths, as it changes.
label	string	"Thermochromic putty"	The putty's accessible name.
disabled	boolean	false	Shows the putty as it is; nothing warms or presses it.
className	string	"h-56"	Size with a height class; the putty fits the box's height.