KQ-1422 · LAVA/BLOBS

Lava Blobs

A tall column of warm liquid where wax rises and falls: each blob carries a temperature that the coil raises on the floor and the cap lowers at the top, buoyancy follows it, and touching blobs pull together, share heat and travel as one mass until their heat parts them. The wax is a metaball field drawn in one WebGL2 pass with soft light — wrap diffuse, a glossy specular, a rim and an inner glow that follows temperature — so blobs merge with smooth necks and pinch apart. The pointer adds its own blob that follows on springs.glide and swells in on springs.snap, drawing wax along; pressing grips nearby wax into one mass and releasing throws it with the pointer's velocity. Keyboard focus sends the hand to the focused control and Enter or Space grips there.

KQ-1422 · LAVA/BLOBS

Fernworks · Lumen lamp

Warm wax, slow light.

£84

Ships in two weeks

wax rising · 6 blobs

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/lava-blobs

Props

children: React.ReactNode; default —; Content laid over the lamp, such as a headline. It keeps every click, focus and key.
count: number; default 6; How many blobs of wax, 3 to 10.
speed: number; default 1; How fast the wax lives: 0.25 is a slow evening, 2 a lamp left on all day.
colors: "amber" | "rose" | "cobalt" | "moss" | readonly string[]; default "amber"; The wax: a named set from the theme tokens, or your own [cool wax, hot wax, liquid tint] CSS colours.
size: number; default 1; Blob size relative to the column, 0.6 to 1.4.
heat: number; default 0.5; How hard the base heats the wax, 0 to 1: more heat keeps more of it aloft.
gloss: number; default 0.6; The glossy specular and rim light on the wax, 0 to 1.
glow: number; default 0.5; The wax's inner glow and the coil's light in the liquid, 0 to 1.
pull: number; default 0.6; How strongly the pointer's own blob draws wax toward it, 0 to 1.
handSize: number; default 30; The pointer blob's radius, in px.
interactive: boolean; default true; The pointer adds its blob; a press grips nearby wax and a release throws it.
followFocus: boolean; default true; Keyboard focus on a control inside sends the pointer blob there; Enter or Space grips.
paused: boolean; default false; Hold the wax still and stop the frame loop.
seed: number; default 5; Seed for the sizes, the starting composition and the wander.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
onGripChange: (gripped: boolean) => void; default —; Fires when a press (or Enter/Space on a control inside) grips wax, and again when it lets go.
className: string; default —; Classes for the box. Give it a height; children are laid out inside it.

Prop	Type	Default	Description
children	React.ReactNode	—	Content laid over the lamp, such as a headline. It keeps every click, focus and key.
count	number	6	How many blobs of wax, 3 to 10.
speed	number	1	How fast the wax lives: 0.25 is a slow evening, 2 a lamp left on all day.
colors	"amber" \| "rose" \| "cobalt" \| "moss" \| readonly string[]	"amber"	The wax: a named set from the theme tokens, or your own [cool wax, hot wax, liquid tint] CSS colours.
size	number	1	Blob size relative to the column, 0.6 to 1.4.
heat	number	0.5	How hard the base heats the wax, 0 to 1: more heat keeps more of it aloft.
gloss	number	0.6	The glossy specular and rim light on the wax, 0 to 1.
glow	number	0.5	The wax's inner glow and the coil's light in the liquid, 0 to 1.
pull	number	0.6	How strongly the pointer's own blob draws wax toward it, 0 to 1.
handSize	number	30	The pointer blob's radius, in px.
interactive	boolean	true	The pointer adds its blob; a press grips nearby wax and a release throws it.
followFocus	boolean	true	Keyboard focus on a control inside sends the pointer blob there; Enter or Space grips.
paused	boolean	false	Hold the wax still and stop the frame loop.
seed	number	5	Seed for the sizes, the starting composition and the wander.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
onGripChange	(gripped: boolean) => void	—	Fires when a press (or Enter/Space on a control inside) grips wax, and again when it lets go.
className	string	—	Classes for the box. Give it a height; children are laid out inside it.