AuroraBackground: Animated Aurora Gradient Component

AuroraBackground is the visual soul of Aurora Cosmos. It paints a continuously shifting aurora curtain across the entire viewport using three independent Framer Motion gradient layers, each blending in mix-blend-mode: screen over the deep bg-space-900 base. Because it is fixed in place and completely inert to pointer events, every other element in the app floats naturally above it without any z-index juggling.

Overview

AuroraBackground is a fixed, full-viewport layer that always sits at z-index 0. The component:

Covers the entire screen with fixed inset-0 overflow-hidden
Sets the base canvas colour to space-900 (#020617)
Applies pointer-events-none so it never intercepts clicks, hovers, or focus from content above it
Renders completely autonomously — it accepts no props and manages its own animation lifecycle internally

The outermost wrapper also holds a subtle radial gradient overlay (from-space-800 via-space-900 to-space-900, opacity 80%) anchored at the top-right corner. This gradient deepens the corners and frames the aurora glow without competing with it.

Structure

The component renders four children inside the fixed wrapper:

Radial gradient base

A static absolute inset-0 div with a top-right radial gradient from space-800 through space-900. Opacity 80%. Provides depth behind the moving layers.

Layer 1 — turquoise curtain

from-aurora-turquoise via-aurora-teal to-cosmic-violet. Positioned top-left (-top-[20%] -left-[10%]), w-[120%] h-[60%]. Blur 100px, opacity 0.40.

Layer 2 — magenta arc

from-cosmic-magenta via-cosmic-violet to-aurora-teal. Positioned top-right (top-[10%] -right-[20%]), w-[100%] h-[50%]. Blur 120px, opacity 0.30.

Layer 3 — green horizon

from-aurora-green via-aurora-teal to-transparent. Anchored to the bottom (bottom-0 left-[10%]), w-[80%] h-[40%]. Blur 90px, opacity 0.20.

Every coloured layer is a motion.div set to mix-blend-screen so the gradients add light rather than cover content — the effect is only visible against a dark background.

Animation

Each motion.div uses Framer Motion’s animate prop with a looping transition. All three run on independent timers so the aurora never repeats itself exactly.

// Layer 1 — 25 s cycle, turquoise-to-violet curtain
<motion.div
  animate={{
    x: ["-10%", "5%", "-10%"],
    y: ["-5%", "5%", "-5%"],
    rotate: [0, 2, 0],
  }}
  transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
  className="absolute -top-[20%] -left-[10%] w-[120%] h-[60%]
             opacity-40 mix-blend-screen filter blur-[100px]"
>
  <div className="absolute inset-0 bg-gradient-to-r
                  from-aurora-turquoise via-aurora-teal to-cosmic-violet
                  rounded-full transform -rotate-12 scale-y-50" />
</motion.div>

// Layer 2 — 30 s cycle, magenta-to-teal arc
<motion.div
  animate={{
    x: ["5%", "-5%", "5%"],
    y: ["5%", "-5%", "5%"],
    rotate: [0, -2, 0],
  }}
  transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
  className="absolute top-[10%] -right-[20%] w-[100%] h-[50%]
             opacity-30 mix-blend-screen filter blur-[120px]"
>
  <div className="absolute inset-0 bg-gradient-to-l
                  from-cosmic-magenta via-cosmic-violet to-aurora-teal
                  rounded-full transform rotate-12 scale-y-50" />
</motion.div>

// Layer 3 — 20 s cycle, green horizon glow
<motion.div
  animate={{
    x: ["-5%", "5%", "-5%"],
    y: ["10%", "0%", "10%"],
  }}
  transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
  className="absolute bottom-0 left-[10%] w-[80%] h-[40%]
             opacity-20 mix-blend-screen filter blur-[90px]"
>
  <div className="absolute inset-0 bg-gradient-to-t
                  from-aurora-green via-aurora-teal to-transparent
                  rounded-full scale-y-50" />
</motion.div>

Layer	Gradient direction	Duration	Blur	Opacity
1	`gradient-to-r`	25 s	100px	0.40
2	`gradient-to-l`	30 s	120px	0.30
3	`gradient-to-t`	20 s	90px	0.20

Usage

AuroraBackground is rendered once in the application shell, before any page content, so it underlies every route automatically.

// App.jsx — top-level shell
import AuroraBackground from "./components/AuroraBackground";
import Starfield        from "./components/Starfield";
import Navigation       from "./components/Navigation";

export default function App() {
  return (
    <>
      {/* Layer 0 — always behind everything */}
      <AuroraBackground />
      <Starfield />

      {/* Layer 50 — navigation chrome */}
      <Navigation />

      {/* Page content rendered by the router sits above z-0 */}
      <main className="relative z-10">
        <Outlet />
      </main>
    </>
  );
}

Because AuroraBackground is position: fixed and z-index: 0, any page-level element with position: relative (or higher z-index) will automatically render in front of it — no additional CSS is needed.

Simplified component structure

import { motion } from "framer-motion";

export default function AuroraBackground() {
  return (
    <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-space-900">

      {/* Static radial depth gradient */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]
                      from-space-800 via-space-900 to-space-900 opacity-80" />

      {/* Layer 1 — turquoise / teal / violet, 25 s */}
      <motion.div
        animate={{ x: ["-10%","5%","-10%"], y: ["-5%","5%","-5%"], rotate: [0,2,0] }}
        transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
        className="absolute -top-[20%] -left-[10%] w-[120%] h-[60%]
                   opacity-40 mix-blend-screen filter blur-[100px]"
      >
        <div className="absolute inset-0 bg-gradient-to-r
                        from-aurora-turquoise via-aurora-teal to-cosmic-violet
                        rounded-full transform -rotate-12 scale-y-50" />
      </motion.div>

      {/* Layer 2 — magenta / violet / teal, 30 s */}
      <motion.div
        animate={{ x: ["5%","-5%","5%"], y: ["5%","-5%","5%"], rotate: [0,-2,0] }}
        transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
        className="absolute top-[10%] -right-[20%] w-[100%] h-[50%]
                   opacity-30 mix-blend-screen filter blur-[120px]"
      >
        <div className="absolute inset-0 bg-gradient-to-l
                        from-cosmic-magenta via-cosmic-violet to-aurora-teal
                        rounded-full transform rotate-12 scale-y-50" />
      </motion.div>

      {/* Layer 3 — green / teal horizon, 20 s */}
      <motion.div
        animate={{ x: ["-5%","5%","-5%"], y: ["10%","0%","10%"] }}
        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
        className="absolute bottom-0 left-[10%] w-[80%] h-[40%]
                   opacity-20 mix-blend-screen filter blur-[90px]"
      >
        <div className="absolute inset-0 bg-gradient-to-t
                        from-aurora-green via-aurora-teal to-transparent
                        rounded-full scale-y-50" />
      </motion.div>

    </div>
  );
}

AuroraBackground uses mix-blend-mode: screen on every gradient layer. This blend mode adds the brightness of the layer to whatever is behind it. It only produces the correct aurora effect against a very dark background. If you change the base colour away from bg-space-900 (#020617) to anything lighter than approximately #111, the gradients will wash out and the aurora effect will be lost.

Customisation

All visual parameters live inside the component itself — there are no props to configure. To adjust the aurora, edit the values directly.

Changing gradient colours

Swap any Tailwind colour token in the inner div’s gradient classes:

// Before
<div className="... bg-gradient-to-r from-aurora-turquoise via-aurora-teal to-cosmic-violet ..." />

// After — warm sunset palette
<div className="... bg-gradient-to-r from-orange-400 via-rose-500 to-purple-600 ..." />

The available Aurora Cosmos tokens and their hex values are:

Token	Hex
`aurora-turquoise`	`#5eead4`
`aurora-teal`	`#14b8a6`
`aurora-green`	`#34d399`
`cosmic-violet`	`#8b5cf6`
`cosmic-magenta`	`#ec4899`

Changing animation speed

Increase duration to slow a layer down, decrease it to speed it up:

// Slow, dreamy 60 s drift
transition={{ duration: 60, repeat: Infinity, ease: "linear" }}

// Fast, energetic 10 s pulse
transition={{ duration: 10, repeat: Infinity, ease: "linear" }}

Adjusting intensity

Change the opacity-* class on each motion.div wrapper to make a layer more or less prominent:

// More visible turquoise layer
className="... opacity-60 ..."  // was opacity-40

// Nearly invisible green horizon
className="... opacity-10 ..."  // was opacity-20

Layout

Pages

AuroraBackground: Animated Aurora Gradient Component

Overview

Structure

Radial gradient base

Layer 1 — turquoise curtain

Layer 2 — magenta arc

Layer 3 — green horizon

Animation

Usage

Simplified component structure

Customisation

Changing gradient colours

Changing animation speed

Adjusting intensity

Build docs developers (and LLMs) love

Layout

Pages

Documentation Index

​Overview

​Structure

Radial gradient base

Layer 1 — turquoise curtain

Layer 2 — magenta arc

Layer 3 — green horizon

​Animation

​Usage

​Simplified component structure

​Customisation

​Changing gradient colours

​Changing animation speed

​Adjusting intensity

Build docs developers (and LLMs) love

Overview

Structure

Animation

Usage

Simplified component structure

Customisation

Changing gradient colours

Changing animation speed

Adjusting intensity