——Background · Free
Aurora Background
A slow conic-gradient aurora that drifts behind your hero. Pure Framer Motion + Tailwind, GPU-cheap, 60fps.
Aurora
import { motion } from "framer-motion";
export function AuroraBackground({ children }) {
return (
<div className="relative h-full w-full overflow-hidden rounded-2xl bg-[#05070d]">
<motion.div
aria-hidden
className="absolute -inset-[40%] opacity-70 blur-3xl"
style={{ background: "conic-gradient(from 0deg, #4fa0ff, #9f7bff, #38e8b0, #4fa0ff)" }}
animate={{ rotate: 360 }}
transition={{ duration: 18, repeat: Infinity, ease: "linear" }}
/>
<div className="relative flex h-full w-full items-center justify-center">
{children}
</div>
</div>
);
}How it works
Aurora Background is a hand-built background component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components