Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-borealis/llms.txt

Use this file to discover all available pages before exploring further.

The AuroraBackground component renders a completely passive, full-screen backdrop that evokes the sweeping colour bands of the aurora borealis. It sits behind every page in the portfolio and is intentionally self-contained — no props, no configuration at the call site — so that the rest of the application can focus entirely on foreground content.

​
Visual output

Three semi-transparent motion.div gradient layers float and drift independently over a deep-navy base (#050814). Each layer uses a radial gradient centred on the viewport, a large blur filter to soften hard edges, and CSS mix-blend-mode: screen to let overlapping hues add together rather than occlude one another. On top of all three gradient layers sits an SVG whose single <path> cycles between three wave shapes, filled with a teal-to-violet linear gradient, completing the illusion of rolling light ribbons. The outer wrapper is set to opacity: 0.6 so the combined effect stays subtle and never competes with the foreground.

​
Layer reference

LayerDominant ColorBlend ModeBlurAnimation Duration
Base div#050814 (deep navy)——Static
Layer 1 (teal)rgba(45, 212, 191, 0.15)Normal60 px20 s
Layer 2 (cyan / violet)rgba(34, 211, 238, 0.15) + rgba(139, 92, 246, 0.1)Screen80 px25 s
Layer 3 (magenta)rgba(236, 72, 153, 0.1)Screen100 px30 s
SVG wave#2DD4BF → #22D3EE → #8B5CF6——15 s

​
Layer 1 — teal drift

A large motion.div at opacity-50 carries a radial gradient from teal (rgba(45, 212, 191, 0.15)) through a pale teal mid-stop (rgba(20, 184, 166, 0.05)) to transparent. The element deliberately overshoots the viewport by 100 % on every side (-inset-[100%]) so the gradient centre can travel into and out of the frame without revealing a hard edge. Framer Motion animates x, y, and scale on a 20 s looping linear cycle: 
x: ["-20%", "20%", "-20%"],
y: ["-10%", "10%", "-10%"],
scale: [1, 1.2, 1],

​
Layer 2 — cyan / violet counter-drift

At opacity-40 with mix-blend-mode: screen, this layer adds a second radial gradient blending cyan and violet. It travels in the opposite direction to Layer 1, creating a crossing-wave illusion. Duration is 25 s to ensure the two layers are never perfectly in phase.

​
Layer 3 — magenta figure-eight

The faintest layer (opacity-30, mix-blend-mode: screen) uses a pure magenta gradient and traces a figure-eight path over 30 s. The longer duration and unique path prevent any periodic repetition from being visible.

​
SVG wave overlay

An <svg> spanning the full viewport contains a single linearGradient (id="aurora-grad") defined diagonally from top-left (x1="0%" y1="0%") to bottom-right (x2="100%" y2="100%"):
StopColorStop Opacity
0 %#2DD4BF (teal)0.4
50 %#22D3EE (cyan)0.2
100 %#8B5CF6 (violet)0.4
A motion.path filled with url(#aurora-grad) morphs between three distinct wave shapes on a 15 s loop, adding an organic undulation that the blurred div layers cannot achieve alone.

​
Usage

import { A as AuroraBackground } from './components/AuroraBackground.js';

export default function App() {
  return (
    <>
      <AuroraBackground />
      {/* All foreground content goes here */}
    </>
  );
}
AuroraBackground accepts no props. All colours, speeds, and opacities live inside the component. See the Customization section below if you need to tweak them.

​
Implementation notes

Non-interactive by design

The outer container carries both pointer-events-none and z-0, ensuring the background can never intercept clicks, focus events, or scroll interactions from foreground elements.

Fixed positioning

fixed inset-0 pins the component to the viewport rather than the document flow, so it scrolls neither with the page nor with any positioned ancestor.

Overflow clipping

overflow-hidden on the outer container prevents the oversized Layer 1 element (which extends 100 % beyond every edge) from causing scrollbars or layout shifts.

GPU compositing

Framer Motion automatically adds will-change: transform to every motion.div it animates, promoting each layer to its own compositor layer and keeping the animation off the main thread.

​
Customization

All customization requires editing components/AuroraBackground.js directly, as the component exposes no props.

​
Changing gradient colors

Each layer’s color is controlled by the rgba values inside its background style. For example, to shift Layer 1 from teal to emerald: 
// Before
background: 'radial-gradient(ellipse at center, rgba(45, 212, 191, 0.15), rgba(20, 184, 166, 0.05), transparent)'

// After — emerald shift
background: 'radial-gradient(ellipse at center, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.05), transparent)'
The SVG wave gradient stops are set on the <linearGradient> element. Edit the stopColor and stopOpacity attributes on each <stop> to change the ribbon palette.

​
Changing animation speed

Each motion.div has a transition block with a duration key (in seconds). Lower values produce faster, more energetic motion; higher values produce a calmer drift: 
// Layer 1 — default 20 s, slowed to 40 s
transition={{ duration: 40, repeat: Infinity, ease: 'linear' }}
The SVG wave morphing speed is set separately on the motion.path transition. Its default is 15 s.

​
Changing overall opacity

The outer container defaults to opacity-60 (60 %). Swap this Tailwind class to adjust global intensity without touching individual layers: 
// More intense
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0 opacity-80">

// More subtle
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0 opacity-40">
Individual layer opacities (opacity-50, opacity-40, opacity-30) can be changed independently to balance the contribution of each color band.
When tuning colors, keep Layer 3 (magenta) at the lowest opacity of the three. Its function is to add warmth to neutral areas; making it dominant tends to flatten the aurora effect.
Avoid removing mix-blend-mode: screen from Layers 2 and 3. Without it, the layers will paint as solid rectangles and the color-addition effect disappears entirely.

Build docs developers (and LLMs) love

Get started for freeTalk to us