Ambient by default
Customize
Usage
import { AuroraBackground } from "@/components/motionkit/aurora-background";
<AuroraBackground
className="h-96 rounded-3xl"
>
<h1>Your hero</h1>
</AuroraBackground>Motion
The exact curves this component runs, plotted with Motion's own maths.
Drift (fastest of 3 fields)
Runs on its own
Works in the App Router as is. Requires Tailwind CSS v4.
npm install motionSave as components/motionkit/aurora-background.tsx.
"use client";
import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
type AuroraBackgroundProps = {
children?: ReactNode;
/** Three blob colors. */
colors?: [string, string, string];
className?: string;
};
const paths = [
{ x: ["-10%", "15%", "-10%"], y: ["-10%", "10%", "-10%"], duration: 14 },
{ x: ["20%", "-5%", "20%"], y: ["15%", "-10%", "15%"], duration: 18 },
{ x: ["5%", "25%", "5%"], y: ["25%", "5%", "25%"], duration: 22 },
];
export function AuroraBackground({
children,
colors = ["#0E7C86", "#A56D5B", "#7D9E9D"],
className = "",
}: AuroraBackgroundProps) {
const reduceMotion = useReducedMotion();
return (
<div className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}>
<div aria-hidden className="absolute inset-0 -z-10">
{paths.map((path, index) => (
<motion.div
key={index}
className="absolute left-[10%] top-[5%] h-[60%] w-[60%] rounded-full opacity-50 mix-blend-screen blur-3xl"
style={{ backgroundColor: colors[index] }}
animate={reduceMotion ? undefined : { x: path.x, y: path.y }}
transition={{ duration: path.duration, repeat: Infinity, ease: "easeInOut" }}
/>
))}
<div className="absolute inset-0 bg-[radial-gradient(transparent,rgb(12_16_16/0.85))]" />
</div>
{children}
</div>
);
}
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#0E7C86", "#A56D5B", "#7D9E9D"] | Three blob colors. |
| children | ReactNode | — | Content rendered above the effect. |
Northern lights
Aurora Mesh
Fields of violet, blue and cyan light drift and blend under swaying aurora ribbons.
Warm, textured, alive
Grain Gradient
Slow, drifting colour with a fine film grain, for warm editorial heroes.
Look up
Star Field
A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.