KQ-1199 · LAVA/DRIFT

Lava Drift

An inline loader drawn as a small lava lamp whose wax really convects: each blob carries a temperature, heats on the bulb, floats once it is half-warm and loses heat as it climbs — faster near the cool cap — so it rises, lingers, cools and sinks back into the pool, every blob on its own time, and blobs that touch pull their speed and heat together and travel as one mass until their heat parts them. The wax is circles joined by analytic metaball necks, so it merges and splits crisply with no blur. The pointer is a warm hand that heats the nearest blob while the glass glows under it (a warmth that rises on the drift spring), Space or Enter warms the blob on the bulb, and given progress the pool drains into a cap under the top on the glide spring while blobs ride up between them until the lamp goes still.

KQ-1199 · LAVA/DRIFT

Warming the model

Sandbox warming upPress to warm the wax on the bulb; the pointer warms the blob nearest it.

rising · 0%

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lava-drift

Props

label: string; default "Loading"; What is warming up: the loader's accessible name, shown beside the lamp unless hideLabel.
hideLabel: boolean; default false; Keep the label for assistive technology only.
size: number; default 24; The glyph's box in px, crisp from 16 to 64. Below 24 at most three blobs and no halo; below 44 no shine, glass highlight or base band.
speed: number; default 1; How fast the wax heats, rises, cools and sinks (a cycle of about seven seconds at 1), 0.5 to 2.
progress: number; default —; The share of the wax that has risen, 0 to 1; the label becomes a progressbar. The pool drains, a cap gathers under the top and blobs ride up between them; at 1 the lamp goes still. Omitted, the blobs rise and fall on their own.
wax: "amber" | "rose" | "teal"; default "amber"; The wax and the liquid it floats in — amber in red, rose in violet, teal in blue — as fixed pigments that read the same in both themes.
blobs: number; default 4; How many blobs rise and fall, 2 to 6; with progress, how many ride up at once.
glow: number; default 0.6; How much the lamp glows, 0 to 1: the halo round the glass, the bulb's light up the liquid and the shine on the wax.
disabled: boolean; default false; The lamp keeps flowing but cannot be warmed by the pointer or a press.
className: string; default —; Classes for the root, an inline-flex row of the lamp and its label.

Prop	Type	Default	Description
label	string	"Loading"	What is warming up: the loader's accessible name, shown beside the lamp unless hideLabel.
hideLabel	boolean	false	Keep the label for assistive technology only.
size	number	24	The glyph's box in px, crisp from 16 to 64. Below 24 at most three blobs and no halo; below 44 no shine, glass highlight or base band.
speed	number	1	How fast the wax heats, rises, cools and sinks (a cycle of about seven seconds at 1), 0.5 to 2.
progress	number	—	The share of the wax that has risen, 0 to 1; the label becomes a progressbar. The pool drains, a cap gathers under the top and blobs ride up between them; at 1 the lamp goes still. Omitted, the blobs rise and fall on their own.
wax	"amber" \| "rose" \| "teal"	"amber"	The wax and the liquid it floats in — amber in red, rose in violet, teal in blue — as fixed pigments that read the same in both themes.
blobs	number	4	How many blobs rise and fall, 2 to 6; with progress, how many ride up at once.
glow	number	0.6	How much the lamp glows, 0 to 1: the halo round the glass, the bulb's light up the liquid and the shine on the wax.
disabled	boolean	false	The lamp keeps flowing but cannot be warmed by the pointer or a press.
className	string	—	Classes for the root, an inline-flex row of the lamp and its label.