Aurora Hero

Hero with animated aurora borealis light bands that drift and pulse. Multiple blurred color layers create a mesmerizing northern lights effect.

heroauroraglowanimated

Installation

bash

# Copy aurora-hero.tsx to your project
cp components/ui/aurora-hero.tsx your-project/components/ui/aurora-hero.tsx

How to use

tsx

import { AuroraHero } from "@/components/ui/aurora-hero";

tsx

<AuroraHero
  heading={<>Experience the<br /><span className="text-blue-400">northern lights</span></>}
  subheading="Animated aurora borealis hero section."
  colors={["#3b82f6", "#8b5cf6", "#14b8a6"]}
>
  <button className="px-6 py-3 bg-blue-600 text-white rounded-full">Explore</button>
</AuroraHero>

Dependencies

framer-motion

Exports

AuroraHero

File

components/ui/aurora-hero.tsx

Preview

Experience the
northern lights

Mesmerizing aurora borealis animation with drifting color bands and subtle grid overlay.