Components
A React component that renders a beautiful, full-screen animated background. It uses CSS to create a large, multi-colored linear gradient (featuring purple, cyan, and white) and continuously animates its position. This produces a smooth, shifting "aurora" effect that loops infinitely, designed to sit behind your main page content to add a dynamic and modern visual touch.
npx @21st-dev/cli add dhileepkumargm/animated-aurora-backgroundLoading preview...
import AnimatedAuroraBackground from "@/components/ui/animated-aurora-background";
export default function DemoOne() {
return (
// Main container for your page content
// 'relative' is needed so the 'absolute' background stays within it.
// 'z-0' ensures content stays on top of the background ('-z-10').
<div className="relative z-0 flex h-screen w-full items-center justify-center overflow-hidden bg-white">
{/* The Animated Background Component */}
<AnimatedAuroraBackground />
{/* Your content goes here
The example text card has been removed as requested.
*/}
</div>
);
}