Hero

Heroes 220

About

Hero Section – Aurora Background A visually immersive hero section with a smooth aurora-style animated background. Enhances first impressions with subtle motion while supporting both light and dark themes. Ideal for landing pages, portfolios, and apps that need a captivating entry point.

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

Code

How Hero 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 { AuroraHero } from "@/components/ui/hero-2"; // Adjust the import path as needed

export default function AuroraHeroDemo() {
  return (
    <AuroraHero>
      <motion.h1
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="bg-gradient-to-b from-foreground to-muted-foreground bg-clip-text text-center text-4xl font-bold tracking-tight text-transparent md:text-6xl"
      >
        Experience the Aurora
      </motion.h1>
      <motion.p
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.5,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="mx-auto mt-4 max-w-lg text-center text-base text-muted-foreground"
      >
        A stunning, animated background that brings your hero sections to
        life, adapting beautifully to both light and dark themes.
      </motion.p>
    </AuroraHero>
  );
}