LavaLamp

Wax-like blobs that rise, sink and merge behind content.

Groovy

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/lava-lamp.json

React
import LavaLamp from "@/components/fx/lava-lamp"

<LavaLamp className="px-8 py-24"><h2>Groovy</h2></LavaLamp>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) holds the blobs still at different heights.

Prop	Type	Default	Description
colors	[string, string]	pink, violet	Blob gradient.
speed	number	12	Seconds per rise and fall.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.