AuroraBackground

Heroes 97

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AuroraBackground to your project and fits it to your theme.

Code

How AuroraBackground is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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;