Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

React animated backgrounds

14 animated backgroundsLive previewFull source in your repo

Moving backgrounds for hero sections and landing pages, from a few blurred shapes in plain CSS to full width WebGL shaders. One command copies the source into your React project, and you keep every line of it.

Browse motion background blocksRead the docs

Works with

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS

WebGL and Three.js shader backgrounds

Full width section backgrounds drawn by Three.js shaders: water caustics, topographic contour lines, a warp tunnel, colour bands and a noise field. Each ships light and dark palettes.

CSS animated backgrounds with no WebGL

Lava lamp shapes, a soft aurora gradient and a morphing blob, built from blur and keyframes instead of a shader, so they paint with the page and never wait on a GPU context.

Interactive backgrounds that react to the cursor

Pointer reactive layers for a hero, drawn in WebGL or on canvas: gradient stripes that rise toward the cursor, film grain light leaks, fluted glass and a photo under rippling water.

How to add an animated background to a React website

An animated background is a layer that moves behind a section while the content on top stays still. In React it is a component positioned absolutely behind its children, filling the section, with the headline and buttons rendered above it. The first decision is the technique, because it sets the cost: CSS moves shapes and gradients the browser already knows how to paint, while WebGL runs a shader that computes every pixel on every frame.

The usual CSS recipe for an animated gradient background is a gradient four times wider than its element, with keyframes sliding background-position back and forth. It works, but the browser repaints the whole area on every frame. Moving pre-blurred shapes with transform keeps the work on the compositor instead, which is how Aurora Background drifts its colour blobs through Framer Motion. Morphing Shape Background goes further and needs no library at all: each shape is a div whose border radius and rotation run on keyframes under heavy blur, so it reads as a slow lava lamp rather than distinct shapes.

Large soft gradients show banding, visible steps where the colour should be smooth, and the fix is grain. Morphing Shape Background and Aurora Background both lay a fine noise overlay over the colour for exactly that reason, and Gradient Grain makes the grain the look, with light that blooms out of black and burns to white like a leak on film. A mesh gradient, colour blended from several points instead of along one line, is the still version of the same idea, and Gradient Grain includes a mesh composition that moves.

Reach for WebGL when the surface depends on light rather than on shapes. Refracted water caustics, contour lines that keep an even stroke on a slope, and streaks rushing toward a vanishing point cannot be built from moving rectangles. The five background blocks here are written on Three.js for that reason, with colour, warp and motion exposed as props. They compile a shader before the first frame, so give the section a solid background colour underneath and the effect fades in over it instead of over a white flash.

Performance is where an animated background earns or loses its place. Above the fold, a WebGL layer can become the element Google times for Largest Contentful Paint, and on a mid range phone the shader compile is a visible pause. The cursor driven components here limit the cost in different ways: Gradient Stripes and Gradient Grain stop drawing when they scroll out of view, Fluted Glass caps pixel density and pauses once settled, and Particle Image and Liquid Ripple Image park their loops when nothing is moving.

Readability decides which background suits which section. A field whose brightness moves needs its own scrim behind any text, because contrast against an average colour is not contrast. The contour lines block is drawn in line rather than in fill, so most of its surface stays empty and a paragraph on top keeps its contrast. The warp tunnel pulls the eye to its centre and suits one claim in large type, not a section of body copy, and the colour bands block renders on a transparent canvas, so the design already behind the section keeps showing through.

Respect reduced motion. A drifting or rushing background is a common motion sickness trigger, and the browser reports when someone has asked for less movement through the prefers-reduced-motion media query. Every component in the cursor and CSS sections above settles to a still frame when that setting is on. For the WebGL blocks, test once with the setting enabled before shipping, especially the warp tunnel, where it matters most.

Frequently asked questions

Put the background on an element positioned behind your content, then animate it with @keyframes. For a moving gradient, make the gradient larger than the element and animate background-position. For something softer and cheaper to run, blur a few coloured shapes and animate their transform, which stays on the compositor. Add a faint noise layer on top to hide colour banding, and stop the animation under prefers-reduced-motion.

Wrap the section in a relatively positioned container, render the background component absolutely positioned to fill it, and render the headline and buttons above it as children. The background components here are client components, marked use client, so they work in the Next.js App Router as they are. Give the container a real height, because a background that fills its parent has nothing to fill otherwise.

Vanta.js is an MIT licensed library of animated 3D backgrounds drawn with three.js or p5.js. You call an effect such as VANTA.WAVES on a container element and must call destroy() when the React component unmounts. It suits a quick drop in. The backgrounds here take a different route: each one is a React component whose source you own, with colours and motion as props, so there is no global script to load and no effect instance to clean up by hand.

Only for the classic look of floating dots joined by lines, which is what those libraries are built for and which this library does not ship. Particle Image takes a different route: it rebuilds a photo from thousands of dots on springs that scatter from the pointer, drawn in a single WebGL call with no dependencies.

A CSS background that animates transform or opacity costs very little. A WebGL background has to load its code and compile a shader before the first frame, which can delay Largest Contentful Paint when it sits above the fold. Keep WebGL layers below the fold where you can, give them a solid colour underneath, and pick versions that stop drawing off screen and in background tabs.

Put a scrim, a semi transparent layer of the page colour, between the moving background and the text, and keep fast or bright motion away from body copy. Line based backgrounds such as topographic contour lines leave most of the surface empty, so paragraphs stay readable on them. Save the loudest effects, such as a warp tunnel, for a single headline.

Where to go next