Join our Discord Community
shadcn.io
Shadcn UIShadcn MCPAI ElementsBackgroundBlocksText AnimationsComponentsChartsHooks
Previous: Exploding Beams BackgroundNext: React Background Boxes

React Background Beams

Flowing energy streams that never repeat the same pattern. Create organic React backgrounds with 50 unique SVG paths, smooth gradient animations, TypeScript support, and zero performance cost for Next.js applications with shadcn/ui.

Powered by

Framer Motion

Framer Motion

Trying to implement animated backgrounds?

Join our Discord community for help from other developers.


Static backgrounds are dead. Particle systems are overdone. You need something that flows—organic, continuous, mesmerizing. This React component generates 50 unique curved beams that never repeat their patterns, creating a living background that keeps users engaged without being distracting.

Flowing energy streams

Watch mathematical curves come to life with gradient animations:

Loading component...

Built for React applications using TypeScript and Next.js. Each beam follows a unique mathematical curve with randomized timing between 10-20 seconds. The gradients flow using Framer Motion's GPU-accelerated animations, so your JavaScript thread stays free for actual work.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-beams.json
npx shadcn@latest add https://www.shadcn.io/registry/background-beams.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-beams.json
bunx shadcn@latest add https://www.shadcn.io/registry/background-beams.json

Usage

import { BackgroundBeams } from "@/components/ui/background-beams";

export default function Hero() {
  return (
    <div className="relative">
      <BackgroundBeams className="absolute inset-0" />
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </div>
  );
}

Why most animated backgrounds fail

Most developers reach for particle systems or simple CSS animations. Particles are CPU-hungry and look generic. CSS animations loop predictably. Canvas requires a whole rendering context for what should be a background effect.

This React component uses SVG paths with animated linear gradients. 50 unique curves, each with its own timing and delay. The result? An organic flow that never looks mechanical. React.memo prevents unnecessary re-renders, and Framer Motion handles the heavy lifting on the GPU.

Features

  • 50 unique curved paths with mathematical precision
  • Randomized 10-20 second cycles for organic movement
  • Gradient flow animation from cyan through purple
  • TypeScript definitions for proper IDE support in React projects
  • React.memo optimized to prevent re-renders
  • GPU-accelerated animations via Framer Motion
  • Responsive SVG scaling using viewBox mathematics
  • shadcn/ui compatible with Tailwind CSS integration

API Reference

BackgroundBeams

Container component that renders animated SVG beam paths.

PropTypeDefaultDescription
classNamestring-Additional Tailwind CSS classes for the wrapper

Common gotchas

Z-index layering: Your content needs relative z-10 or higher. The beams use absolute positioning within their container.

Container positioning: Parent element must have relative positioning. Otherwise the beams will position relative to the nearest positioned ancestor.

Performance on low-end devices: 50 animated paths might be too much for really old phones. Consider reducing the path count or disabling on mobile.

Color customization: The gradients are hardcoded (#18CCFC → #6344F5 → #AE48FF). To change colors, you'll need to modify the gradient definitions in the component.

Blur effects: Adding backdrop-blur over the beams looks amazing but costs performance. Test on target devices.

You might also like

Explore other animated background components for React applications:

Beams with Collision

Energy beams that explode into particles on impact

Aurora

Northern lights effect with smooth gradient animations

Vortex

Swirling particle effects that create mesmerizing depth

Gradient

Animated color gradients that shift smoothly across surfaces

Waves

Fluid wave animations for ocean and water themes

Particles

Interactive particle systems that respond to mouse movement

Questions developers actually ask

Exploding Beams Background

Energy beams that explode into particles on impact. Build interactive React backgrounds with real-time collision detection, TypeScript support, and smooth Framer Motion animations for Next.js applications with shadcn/ui integration.

React Background Boxes

Isometric grid that lights up like a retro arcade floor. Build interactive React backgrounds with 15,000 hoverable cells, TypeScript support, and buttery-smooth 60fps performance for Next.js applications with shadcn/ui.