Animated background layers for React. Drop one behind a hero or section and layer your content above it.
5 components · free and MIT-licensed · install with the shadcn CLI
Every background component in the library, with the packages 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 GradientFlow component creates a flowing gradient animation effect for its children, adding visual interest to backgrounds or UI elements.
motion
The OrbitingElements component places children evenly around a circle and rotates them around a centre point, keeping each one upright.
lucide-reactmotion
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