Atmospheres / background

Grainient

A slowly warped, three-color atmosphere with fine film grain.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Give the component a container with an explicit height. It fills that container.
The included Demo.tsx recreates the complete preview; the main component contains only the background.
Reduced motion renders a still frame. Hidden/offscreen instances stop requesting frames; pause and replay are supported.
A static CSS atmosphere remains when graphics acceleration is unavailable. Canvas resolution is capped at 2048 pixels per dimension.

React 19WebGL2OGL 1.0.11

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`color1`	string	`#FF9FFC`	First color
`color2`	string	`#5227FF`	Second color
`color3`	string	`#B497CF`	Third color
`timeSpeed`	number	`0.25`	Motion speed
`colorBalance`	number	`0`	Color balance
`warpStrength`	number	`1`	Warp strength
`warpFrequency`	number	`5`	Warp frequency
`warpSpeed`	number	`2`	Warp speed
`warpAmplitude`	number	`50`	Warp amplitude
`blendAngle`	number	`0`	Blend angle
`blendSoftness`	number	`0.05`	Blend softness
`rotationAmount`	number	`500`	Rotation
`noiseScale`	number	`2`	Noise scale
`grainAmount`	number	`0.1`	Grain amount
`grainScale`	number	`2`	Grain scale
`contrast`	number	`1.5`	Contrast
`gamma`	number	`1`	Gamma
`saturation`	number	`1`	Saturation
`centerX`	number	`0`	Center X
`centerY`	number	`0`	Center Y
`zoom`	number	`0.9`	Zoom
`grainAnimated`	boolean	`false`	Animate grain
`paused`	boolean	`false`	Freeze the current frame.
`replayToken`	number	`0`	Change this value to restart the animation.
`className`	string	`''`	Additional outer classes.