Lightweight & Performant

react-lava-background

A lightweight animated lava background component for React. Add flowing, mesmerizing animations to your projects with minimal performance impact.

Choose your package manager:

npm install react-lava-background

pnpm add react-lava-background

yarn add react-lava-background

Live Demo

Explore different configurations and see how the component adapts to various settings.

Adjust the properties in real-time to see how the component responds to different configurations.

Blob Count: 8

Min Radius: 20

Max Radius: 80

Speed: 1.0

Pixel Skip: 2

Colors

Top:#1E4482

Mid:#1F6382

Bot:#1EAC82

Complete API reference and usage examples

Prop	Type	Description	Default
blobCount	number	Number of animated blobs rendered. Controls complexity and visual density.	8
minRadius	number	Smallest blob radius (in px).	20
maxRadius	number	Largest blob radius (in px).	80
speed	number	Speed multiplier for animation. Higher = faster movement.	1
blobColors	[string, string, string]	Array of three color stops (top, middle, bottom) used for the gradient lava effect.	['#ff0080', '#7928ca', '#5e1ba9']
pixelSkip	number	Optional pixel step for performance tuning. Higher values = lower quality but faster rendering.	1