Animated background layers for React. Drop one behind a hero or section and layer your content above it.
9 components · free and MIT-licensed · install with the shadcn CLI
Every background in the library, with everything each one pulls in.
The AnimatedBeam component draws a curved line between any two elements and sends a gradient pulse along it, remeasuring whenever the layout moves.
lucide-reactmotion
The Aurora component drifts three soft bands of colour behind your content on different periods, so the layer keeps rearranging itself instead of looping visibly. Pure CSS gradients and transforms, no canvas.
motion
The DotPattern component tiles a grid of dots behind your content and lights the ones nearest the pointer, using a masked second copy of the same grid so the bright dots land exactly on the dim ones.
motion
The GradientFlow component creates a flowing gradient animation effect for its children, adding visual interest to backgrounds or UI elements.
motion
The Meteors component drops a field of glowing streaks across its container, each one falling at its own pace so the shower never settles into a repeating pattern.
motion
The OrbitingElements component places children evenly around a circle and rotates them around a centre point, keeping each one upright.
lucide-reactmotion
The Particles component draws a drifting field of specks on a canvas and scatters them away from the pointer, holding positions as fractions of the frame so a resize redraws the field instead of reshuffling it.
motion
The RetroGrid component lays an infinite grid back in 3D and scrolls it toward the viewer, fading out into a horizon. A synthwave backdrop drawn entirely in CSS.
motion
The SparklingGrid component creates an animated grid of dots that ripples outward on mount and sparkles at random, ideal for dynamic, atmospheric backgrounds.
motion
Every component here is installable with the shadcn CLI, which also resolves its npm dependencies.
npx shadcn@latest add https://uibeats.com/r/animated-beam.json