Lava Lamp React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import LavaLamp from "./LavaLamp";

export default function Example() {
  return (
    <LavaLamp
      color={"#d79c79"}
      liquidColor={"#37273d"}
      background={"#1d1921"}
      speed={12}
      paused={false}
      height={420}
    />
  );
}

Using Lava Lamp

Use Lava Lamp as a decorative illustration beside your own content. All shapes are drawn with SVG, and each instance receives unique filter and clipping IDs.

Adjust the form and glass colours together for contrast. The paused prop freezes the animation and reduced motion shows the lamp without movement.

Props

Name	Type	Required	Default	Description
color	string	No	"#d79c79"	Colour of the merging forms.
liquidColor	string	No	"#37273d"	Colour inside the glass.
background	string	No	"#1d1921"	Background surface.
speed	number	No	12	Duration of each rise or fall in seconds.
paused	boolean	No	false	Pause the motion.
height	number \| string	No	420	Reserved height of the illustration.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.