React Aurora Background
Northern lights effect that actually performs well. Build stunning React backgrounds with smooth CSS animations, TypeScript support, and zero JavaScript overhead for Next.js applications with shadcn/ui integration.
Powered by
Trying to implement animated backgrounds?
Join our Discord community for help from other developers.
Look, we've all tried to build aurora backgrounds. You either end up with a janky JavaScript animation that drops frames or a CSS mess that looks nothing like the northern lights. This React component uses pure CSS animations that actually run at 60fps without melting your CPU.
Smooth aurora animation
Mesmerizing northern lights effect that won't tank your performance metrics:
Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using CSS transforms, so your JavaScript thread stays free for actual logic. Works seamlessly with shadcn/ui design systems.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonConfigure animations for Tailwind CSS
Tailwind CSS v4
Add the aurora animation to your globals.css file:
@import "tailwindcss";
@theme inline {
--animate-aurora: aurora 60s linear infinite;
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}Tailwind CSS v3
Add the aurora animation to your tailwind.config.js file:
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// your paths
"./src/**/*.{ts,tsx}",
],
darkMode: "class",
theme: {
extend: {
animation: {
aurora: "aurora 60s linear infinite",
},
keyframes: {
aurora: {
from: {
backgroundPosition: "50% 50%, 50% 50%",
},
to: {
backgroundPosition: "350% 50%, 350% 50%",
},
},
},
},
},
plugins: [],
};Usage
import { AuroraBackground } from "@/components/ui/aurora-background";
export default function Hero() {
return (
<AuroraBackground>
<div className="relative z-10">
<h1>Your content here</h1>
</div>
</AuroraBackground>
);
}Why most aurora implementations suck
Most developers try to animate gradients with JavaScript. Bad idea. You're calculating positions on every frame, blocking the main thread, and wondering why your React app feels sluggish. Some use canvas, which sounds smart until you realize you're now managing a whole rendering context for a background effect.
This React component uses background-position animations with CSS transforms. The GPU handles everything. No JavaScript calculations, no frame drops, just smooth 60fps animation. The gradients use CSS variables that automatically sync with your Tailwind theme, so dark mode just works.
Features
- Zero JavaScript animation overhead - Pure CSS transforms run on GPU
- 60-second smooth loop with seamless transitions
- TypeScript definitions for proper IDE support in React projects
- Automatic theme sync with Tailwind CSS variables
- Radial gradient masking to focus attention where you want it
- Reduced motion support for accessibility in Next.js applications
- Dark mode ready without extra configuration
- shadcn/ui compatible for consistent design systems
API Reference
AuroraBackground
Main container component for the aurora effect.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content to display over the aurora background |
showRadialGradient | boolean | true | Apply radial gradient masking for focus |
className | string | - | Additional Tailwind CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All standard div props are supported |
Common gotchas
Animation not working: You forgot to add the keyframes to your CSS. The component needs those keyframes in your global styles or Tailwind config.
Performance issues on mobile: Some older phones struggle with large gradients. Consider using will-change: transform or reducing the animation area on mobile.
Colors look wrong: The aurora uses CSS variables from your Tailwind theme. If you're not using Tailwind's default colors, you'll need to adjust the gradient colors.
Content gets lost: The aurora can be overwhelming. Use the showRadialGradient prop to create a focus area, or add a semi-transparent overlay.
Accessibility concerns: The animation can be distracting. The component respects prefers-reduced-motion automatically.
You might also like
Explore other animated background components for React applications:
Vortex
Swirling particle effects that create mesmerizing depth and motion
Meteors
Falling star animations perfect for space-themed interfaces
Gradient
Animated color gradients that shift smoothly across surfaces
Beams
Flowing energy streams with organic movement patterns
Sparkles
Twinkling particle effects that add magical ambiance
Waves
Fluid wave animations for ocean and water themes
Questions developers actually ask
React Background Components
Background Components provides animated React backgrounds for modern interfaces. From fluid waves to particle systems to geometric patterns - all with TypeScript support, canvas performance, and full customization for Next.js applications with shadcn/ui.
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.