Skip to main content

Documentation Index

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

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

AuroraBackground wraps four large, softly blurred Framer Motion div elements in the portfolio’s signature accent palette to simulate the sweeping glow of the aurora borealis across the night sky. Each blob drifts, breathes, and pulses independently through a looping animation, giving the background a sense of life without distracting from the content above it.

​
Usage

Mount <AuroraBackground /> once at the app root, directly after <StarfieldBackground />. It requires no props. 
import { S as StarfieldBackground } from '../components/cosmos/StarfieldBackground'
import { A as AuroraBackground } from '../components/cosmos/AuroraBackground'

// In your app shell:
<StarfieldBackground />
<AuroraBackground />
Both background components are always mounted regardless of the active route, so the atmosphere persists seamlessly through page transitions.

​
How It Works

The component renders a fixed, full-viewport container (fixed inset-0 overflow-hidden) set to opacity-60 mix-blend-screen. Inside it sit four absolutely positioned motion.div blobs. Each blob is a large rounded-full div with a heavy CSS blur filter applied, producing the diffused glow effect.

​
The four aurora blobs

BlobColor tokenBlurPositionAnimation duration
Teal orbbg-aurora-teal/30blur-[120px]Top-left (-10% / -10%)20 s
Magenta orbbg-aurora-magenta/20blur-[150px]Top-right (20% / -10%)25 s
Green orbbg-aurora-green/20blur-[130px]Bottom-center (-20% / 20%)22 s
Violet orbbg-aurora-violet/20blur-[100px]Center (40% / 40%)18 s
Each blob animates on a continuous loop with repeat: Infinity and ease: "easeInOut", keyframing through x, y, and scale values so the blobs drift across one another and swell gently over time.
1

Framer Motion keyframe loop

Every blob uses an animate prop with array values for x, y, and scale — e.g. x: ["0%", "20%", "0%"]. Framer Motion interpolates between each keyframe and loops back to the start, producing a seamless drift with no abrupt jumps.
2

Staggered delays

Each blob carries a different delay value (0 s, 2 s, 5 s, 1 s), so they never all peak at the same position simultaneously. This staggering prevents the colours from blending into a single muddy hue.
3

mix-blend-screen on the container

The outer wrapper uses mix-blend-screen, which adds the RGB values of overlapping colours rather than covering them. This keeps the aurora luminous rather than opaque, and lets the starfield below show through at full brightness.

​
Color References

The aurora blobs use Tailwind color tokens defined in the project’s theme. Here are the exact values alongside their usage: 
// Teal orb — largest, anchored top-left
<motion.div className="bg-aurora-teal/30 blur-[120px]" />
// aurora-teal = #3dd6c4  (30% opacity → rgba(61, 214, 196, 0.30))

// Magenta orb — tallest, anchored top-right
<motion.div className="bg-aurora-magenta/20 blur-[150px]" />
// aurora-magenta = #d96cf0  (20% opacity → rgba(217, 108, 240, 0.20))

// Green orb — widest, anchored bottom-center
<motion.div className="bg-aurora-green/20 blur-[130px]" />
// aurora-green = #7af0a8  (20% opacity → rgba(122, 240, 168, 0.20))

// Violet orb — smallest, anchored center
<motion.div className="bg-aurora-violet/20 blur-[100px]" />
// aurora-violet = #6b4fe0  (20% opacity → rgba(107, 79, 224, 0.20))

​
Z-Index Layering

The container div uses -z-10, which places it: 
StarfieldBackground  →  z-index: -20  (deepest background)
AuroraBackground     →  z-index: -10  (above starfield, below everything else)
Page content         →  z-index: auto / positive
AuroraBackground sits above the starfield deliberately. The two layers blend together at their boundary — the aurora’s soft glow illuminates the stars around it, just as real atmospheric light scatters across the night sky.

​
Customization

Blob colours

Swap any bg-aurora-* class for another theme token or an arbitrary value like bg-[#ff6b35]/20 to shift the palette.

Blur intensity

Increase blur-[120px] for a more diffused, wider glow; decrease it for tighter, more defined light pools. Values range from blur-[100px] to blur-[150px] in the source.

Animation speed

Change the duration inside each blob’s transition object. Lower values produce faster, more energetic movement; higher values create a slow, meditative drift.

Opacity

The container has opacity-60. Raising it toward opacity-100 makes the aurora more vivid; lowering it toward opacity-30 produces a subtler tint.
Because the blobs are positioned with percentage-based offsets and percentage-based sizes (w-[60%], h-[70%], etc.), the aurora scales naturally to any viewport size without media queries.

Build docs developers (and LLMs) love

Get started for freeTalk to us