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.

Every visual property in Aurora Borealis lives in one of three places: the rgba gradient values inside components/AuroraBackground.js, the Canvas 2D drawing calls inside components/StarField.js, or Tailwind utility classes applied directly on component elements. Knowing which file controls which effect is the fastest path to a custom look.

​
Color palette

Aurora Borealis uses a fixed palette across all visual layers. The table below maps each layer to the color it uses, its hex value, and its design role.
LayerColorHex / ValueRole
Base backgroundDeep navy#050814Page backdrop applied via bg-[#050814]
Aurora layer 1Tealrgba(45, 212, 191, …)Primary aurora glow (Tailwind teal-400)
Aurora layer 1 innerTeal darkrgba(20, 184, 166, …)Layer 1 radial falloff (Tailwind teal-500)
Aurora layer 2Cyanrgba(34, 211, 238, …)Secondary aurora glow (Tailwind cyan-400)
Aurora layer 2 blendVioletrgba(139, 92, 246, …)Layer 2 mix-blend-screen accent (Tailwind violet-500)
Aurora layer 3Magentargba(236, 72, 153, …)Tertiary soft pulse (Tailwind pink-500)
SVG gradient startTeal#2DD4BFAurora SVG path gradient stop 0%
SVG gradient midCyan#22D3EEAurora SVG path gradient stop 50%
SVG gradient endViolet#8B5CF6Aurora SVG path gradient stop 100%
Stars / shooting starsCyan-50rgba(236, 254, 255, …)Canvas star fill and shooting-star stroke

​
Changing aurora gradient colors

The three animated motion.div layers in AuroraBackground.js each have an inline background style built from a radial-gradient. Edit the rgba values directly to shift the hues: 
// AuroraBackground.js — Layer 1 (teal, duration 20 s)
style={{
  background: "radial-gradient(ellipse at center, rgba(45, 212, 191, 0.15) 0%, rgba(20, 184, 166, 0.05) 40%, transparent 70%)",
  filter: "blur(60px)",
}}

// Layer 2 (cyan → violet, duration 25 s)
style={{
  background: "radial-gradient(ellipse at center, rgba(34, 211, 238, 0.15) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%)",
  filter: "blur(80px)",
}}

// Layer 3 (magenta, duration 30 s)
style={{
  background: "radial-gradient(ellipse at center, rgba(236, 72, 153, 0.1) 0%, transparent 50%)",
  filter: "blur(100px)",
}}
Replace any rgba(r, g, b, …) triple with your target color’s RGB components. Keep the alpha channel values (the fourth number) unchanged to preserve relative layer brightness. The SVG aurora path at the bottom of the component uses a linearGradient with three named stopColor attributes — update #2DD4BF, #22D3EE, and #8B5CF6 to match your new hues.

​
Changing the base background color

The base background is applied on the innermost <div> inside AuroraBackground.js: 
<div className="absolute inset-0 bg-[#050814]" />
Replace #050814 with any six-digit hex value using Tailwind’s arbitrary-value syntax — for example bg-[#020a18] for a deeper blue-black, or bg-[#0a0808] for a dark red-brown.
Keep the background very dark (luminance below 5%). The aurora layers use low-opacity radial gradients, so a lighter background will wash them out.

​
Aurora animation tuning

Each of the three motion.div aurora layers has its own transition object. The relevant fields are duration (seconds for one full loop) and the opacity classes on the element itself.

​
Changing animation duration

Find the transition prop on each aurora layer and edit the duration value: 
// Layer 1 — currently 20 seconds
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}

// Layer 2 — currently 25 seconds
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}

// Layer 3 — currently 30 seconds
transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
Shorter values (e.g. 10) produce a faster, more energetic aurora. Larger values (e.g. 60) create a slow, meditative drift. Keeping the three durations at different prime-like ratios (20 / 25 / 30) prevents the layers from synchronizing visually.

​
Changing layer opacity

Each layer carries a Tailwind opacity class that controls its base visibility. The entire component also has an outer opacity-60 class: 
// Outer wrapper — overall aurora intensity
<div className="fixed inset-0 … opacity-60">

// Layer 1
<motion.div className="absolute -inset-[100%] opacity-50" …>

// Layer 2
<motion.div className="absolute -inset-[100%] opacity-40 mix-blend-screen" …>

// Layer 3
<motion.div className="absolute -inset-[100%] opacity-30 mix-blend-screen" …>
To make the aurora more vivid, raise opacity-60 on the wrapper to opacity-80 or higher. To dim individual colors without affecting others, reduce only that layer’s class — for example, change layer 2’s opacity-40 to opacity-20.

​
Adjusting blur intensity

The filter: "blur(…)" inline style on each layer controls how diffuse the glow appears: 
// Layer 1 — tightest glow
filter: "blur(60px)"

// Layer 2 — medium diffusion
filter: "blur(80px)"

// Layer 3 — widest, softest wash
filter: "blur(100px)"
Smaller blur values (e.g. blur(20px)) make the aurora look more defined and structured. Larger values (e.g. blur(150px)) create a full-sky luminous wash. Keeping layer blur values in ascending order (60 → 80 → 100) gives the layered depth effect.
AuroraBackground.js, StarField.js, and ConstellationNav.js are pre-built component modules included directly in the deployed repository — you can edit them in place without a build step. However, page-level UI and Tailwind class changes live inside assets/main.js, which is the Vite production bundle. Modifying that file requires access to the original Vite source project; after editing source, run vite build to regenerate assets/main.js and assets/main.css.

​
Star field tuning

Star rendering is handled entirely in components/StarField.js using the Canvas 2D API. All parameters are local JavaScript variables, not CSS classes.

​
Adjusting star density

Star count is calculated from the canvas dimensions using integer division: 
const count = Math.floor(canvas.width * canvas.height / 4000);
The divisor 4000 controls density. Increase the divisor (e.g. 8000) to halve the star count and produce a sparser sky. Decrease it (e.g. 2000) to double the star count for a denser, milkier look.
Very low divisors (below ~1000) can generate thousands of stars and may noticeably impact performance on lower-end devices, particularly mobile.

​
Changing star color

All stars and shooting stars share the same color constant. Find the fillStyle line in the star drawing loop: 
ctx.fillStyle = `rgba(236, 254, 255, ${star.opacity})`;
Replace 236, 254, 255 (Tailwind cyan-50) with any RGB triple. For a warmer sky, try 255, 248, 220 (cream). For a pure white sky, use 255, 255, 255. The alpha channel (star.opacity) is driven by the twinkling animation and should not be replaced with a fixed value. The shooting-star gradient uses the same color: 
gradient.addColorStop(0, `rgba(236, 254, 255, ${shooter.opacity})`);
gradient.addColorStop(1, "rgba(236, 254, 255, 0)");
Update both occurrences to keep shooting stars visually consistent with the static stars.

​
Disabling shooting stars

To disable shooting stars entirely, remove the p() call from the animation loop (the function is the shooting-star spawner). Alternatively, raise the random spawn threshold from its current value so it is never satisfied: 
// Current: shoots when random() > 0.995
if (Math.random() > 0.995 && shooters.length < 3) { … }

// Disabled: threshold set to 1 — condition is never true
if (Math.random() > 1 && shooters.length < 3) { … }

​
Limiting maximum simultaneous shooting stars

The < 3 guard in the spawner caps the number of shooting stars visible at once: 
if (Math.random() > 0.995 && shooters.length < 3) { … }
Change 3 to any positive integer. Set it to 1 for a rare, dramatic single streak; set it to 10 for a meteor-shower effect.

​
Typography and layout

All layout and typography classes are Tailwind utility classes applied directly on JSX elements in assets/main.js. Because assets/main.js is the Vite production bundle, you cannot edit Tailwind classes at runtime — any changes require modifying the source JSX files and rebuilding with vite build. The deployed repository does not include a tailwind.config.js or source JSX; those files exist only in the original Vite source project. Common adjustments (requires source project access):
  • Font families — The project references font-space, font-serif-italic, font-mono, and font-inter via Tailwind’s fontFamily config. Edit tailwind.config.js in the source project to change which typefaces these map to.
  • Spacing and max-width — Each page component uses utility classes such as max-w-5xl mx-auto px-6 on its <main> element. Change these per-page in the source JSX to adjust the content column width.
  • Glass panel style — The glass-panel class is a custom utility defined in the Tailwind config or a CSS layer file. Its compiled output can be found in assets/main.css; editing assets/main.css directly will adjust styles without a rebuild, but changes will be overwritten if you later run vite build.
Run vite (the local dev server) while making style changes in the source project so that hot-module replacement reflects edits in the browser instantly, without a full rebuild.

Build docs developers (and LLMs) love

Get started for freeTalk to us