Skip to main content

Documentation Index

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

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

AuroraBackground is the visual centrepiece of the Aurora Drift template. It paints a full-screen, fixed-position layer of animated aurora light beneath all page content: three slowly morphing SVG paths filled with teal, magenta, and mint gradients float in an infinite loop while subtly tracking mouse movement through spring-physics parallax. A faint base64-encoded starfield adds depth, and a radial vignette fades the edges into the deep navy background colour (#050814). Because it uses pointer-events-none throughout and sits at z-index: -1, it is completely transparent to user interaction.

​
Usage

Render AuroraBackground once at the root of your application, outside any scroll container, so it stays fixed as the user navigates between pages. 
// src/main.jsx  (or App.jsx)
import { AuroraBackground } from './components/AuroraBackground'
import { CursorGlow }       from './components/CursorGlow'

export default function App() {
  return (
    <>
      {/* Rendered once — fixed behind everything */}
      <AuroraBackground />
      <CursorGlow />

      {/* Router / page content goes here */}
      <RouterOutlet />
    </>
  )
}
AuroraBackground sets pointer-events-none on every element it renders. It will never intercept clicks, hovers, or keyboard events no matter where it appears in the tree.

​
Props

AuroraBackground accepts no props. All colours, durations, and spring values are baked into the component. To customise them, edit the source directly.

​
How it works

1

Fixed container

The outermost element is a div with classes fixed inset-0 z-[-1] overflow-hidden bg-navy pointer-events-none. This tiles the navy base colour edge-to-edge and places the whole layer behind the page stack.
2

Starfield texture

An absolute inset-0 div renders a base64-encoded SVG (three white circles of radius 1 on a 400 × 400 grid) as a CSS background-image. It is shown at 30 % opacity with mix-blend-screen, creating a subtle shimmer against the navy background.
3

Mouse-parallax wrapper

A Framer Motion motion.div sized at w-full h-[150vh] -top-[25vh] receives two useSpring values — one for x, one for y. On each mousemove event the raw offset is computed as (clientX / window.innerWidth - 0.5) * 20, giving a ±10 px travel range. The spring smooths that into a gentle parallax drift.
4

Animated SVG paths

Inside the motion wrapper, a full-width SVG with viewBox="0 0 1200 800" and blur-3xl mix-blend-screen opacity-60 hosts three motion.path elements. Each path morphs its d attribute between two keyframe shapes in an infinite easeInOut loop.
5

Radial vignette

A final absolute inset-0 div applies bg-[radial-gradient(ellipse_at_center,...)] from-transparent via-navy/50 to-navy to fade the aurora glow towards the edges, anchoring the composition to the navy colour space.

​
Animation reference

PathGradient IDColours (0 % → 50 % → 100 %)DurationDelayBlend mode
aurora1aurora1#2dd4bf → #06b6d4 → transparent20 s0 s(SVG default)
aurora2aurora2#c084fc → #14b8a6 → transparent25 s2 smix-blend-overlay
aurora3aurora3#a7f3d0 → #2dd4bf → transparent30 s5 smix-blend-color-dodge
All three gradients end at stopOpacity: 0 so they dissolve cleanly into the navy base.

​
Spring config (parallax)

The useSpring calls that drive the parallax wrapper use these parameters:
ParameterValue
damping50
stiffness400
Higher damping and stiffness produce a tightly-coupled, lag-free follow. Lower values add more inertia and overshoot. See CursorGlow for a snappier comparison.

​
Customisation

Each gradient is defined inside the SVG <defs> block. Edit the stopColor values on the three linearGradient elements — aurora1, aurora2, aurora3 — to shift the palette. Keep stopOpacity: 0 on the final stop so paths still fade into the background.
Find the three variant objects (c, m, x in the minified source). Each has a transition.duration key. Increase the values for a slower, more meditative drift; decrease for a livelier effect.
Remove (or comment out) the div with the bg-[url('data:image/svg+xml;base64,...')] class to eliminate the starfield layer entirely.

Build docs developers (and LLMs) love

Get started for freeTalk to us