AuroraBackground

Heroes 29

About

A mesmerizing animated background using Framer Motion and CSS gradients. Perfect for landing pages, hero sections, or immersive UI experiences.

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 from "react";
import { motion } from "framer-motion";
import AuroraBackground from "@/components/ui/aurora-background-1";

const DemoOne = () => {
  return (
    <AuroraBackground>
      <motion.div
        initial={{ opacity: 0.0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="relative flex flex-col items-center justify-center gap-4 px-4"
      >
        <div className="text-center text-3xl font-thin md:text-7xl dark:text-white">
          Aurora Background
        </div>
        <div className="font-extralight text-base md:text-4xl dark:text-neutral-200 py-4">
          A new, unique, and mesmerizing animated background effect.
        </div>
        <button className="rounded-full bg-black w-fit px-4 py-2 text-white dark:bg-white dark:text-black">
          Explore
        </button>
      </motion.div>
    </AuroraBackground>
  );
};

export default DemoOne;