Components
Loading preview...
A visually engaging, animated aurora-like background component built with Tailwind CSS and Framer Motion (with optional Lottie support). Ideal for hero sections, landing pages, or any immersive UI.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/aurora-background-2"use client";
import React, { useEffect } from "react";
import { motion } from "framer-motion";
import AuroraBackground from "@/components/ui/aurora-background-2";
const DemoOne = () => {
useEffect(() => {
// Dynamically load the lottie-player script
const script = document.createElement("script");
script.src =
"https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<AuroraBackground>
<div className="relative z-10 flex flex-col items-center justify-center h-full px-4 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.9, ease: "easeInOut" }}
>
<lottie-player
src="https://lottie.host/8cf4ba71-e5fb-44f3-8134-178c4d389417/0CCsdcgNIP.json"
background="transparent"
speed="1"
style={{ width: "250px", height: "250px" }}
loop
autoplay
></lottie-player>
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.1, duration: 0.9, ease: "easeInOut" }}
className="text-4xl font-bold text-white md:text-6xl"
>
Aurora Background
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.4, duration: 0.9, ease: "easeInOut" }}
className="mt-4 text-lg text-gray-300 md:text-xl max-w-lg"
>
A beautiful and unique aurora-like background effect using Framer Motion.
</motion.p>
</div>
</AuroraBackground>
);
};
export default DemoOne;