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.

Glassmorphism is the primary UI surface language in Aurora Drift. Rather than solid opaque cards, every panel floats above the navy background as a semi-transparent, blurred pane — letting the animated aurora layers bleed through and keeping the cosmic atmosphere intact. This is achieved through a combination of a reusable .glass-panel CSS class, Tailwind opacity utilities, and carefully tuned backdrop-filter blur values.

​
The .glass-panel Utility Class

The .glass-panel class is defined in assets/main.css and serves as the baseline glassmorphism building block. Apply it to any container that should look like frosted deep-space glass. 
.glass-panel {
  border-width: 1px;
  border-color: #ffffff0d;               /* white at ~5% opacity   */
  background-color: #0a112866;           /* navy-800 at ~40% opacity */
  backdrop-filter: blur(12px);           /* backdrop-blur-md        */
}

​
Property Breakdown

border — #ffffff0d (~5% white)

A hairline 1 px border at just 5% white opacity. It catches light subtly without drawing the eye — creates a delicate edge that separates the panel from the background without harsh contrast.

background — #0a112866 (~40% opacity)

The navy-800 surface color (#0A1128) at approximately 40% opacity. This transparency level lets the animated aurora layers bleed through clearly while keeping panel content legible against busy backgrounds.

backdrop-filter: blur(12px)

A 12 px gaussian blur applied to everything behind the panel. This is the key glassmorphism effect — the aurora gradient beneath becomes a soft, dreamy wash rather than a sharp distraction. Maps to Tailwind’s backdrop-blur-md.

border-width: 1px

Explicit 1 px border ensures the hairline edge renders consistently across browsers, including those that need the border declared separately from border-color.

​
Applying .glass-panel in JSX

// Basic glass panel container
<div className="glass-panel rounded-xl p-6">
  <h3 className="font-serif text-white text-xl mb-2">Panel Title</h3>
  <p className="text-slate-300 text-sm leading-relaxed">
    Panel content floats over the aurora background with 12px backdrop blur.
  </p>
</div>

// Glass panel with hover glow
<div className="glass-panel rounded-xl p-6 transition-shadow duration-300
                hover:shadow-[0_0_20px_rgba(167,243,208,0.4)]">
  <p className="text-slate-200">Hover me for the aurora-mint glow effect.</p>
</div>

​
Nav Glassmorphism

The navigation bar uses a slightly different formula — thinner background opacity to feel more atmospheric at the top of the viewport: 
// From Nav.js
<nav className="fixed top-0 w-full z-50
                bg-navy/50 backdrop-blur-md border-b border-white/5">
PropertyValueEffect
bg-navy/50#050814 at 50% opacityHalf-transparent — aurora is visible above the nav
backdrop-blur-mdblur(12px)Blurs page content scrolling behind the nav bar
border-b1 px bottom borderHairline separator at the bottom of the nav
border-white/5White at 5% opacityBarely-there divider, consistent with .glass-panel

​
Card and Surface Backgrounds

Beyond .glass-panel, the project uses several opacity-modified background classes for layering surfaces:
ClassValueUsage
bg-navy-800/80#0A1128 at 80% opacityPrimary card surface — darker panel background
bg-navy/40#050814 at 40% opacityDeep overlay sections, hero gradient overlays
bg-navy/50#050814 at 50% opacityNav bar background
bg-navy/60#050814 at 60% opacityModal and drawer backdrops
bg-white/5White at 5% opacityVery subtle light surface on dark panels
bg-white/10White at 10% opacityHovered light surface (e.g. nav mobile drawer)

​
Glow Shadow Utilities

Glow effects are implemented as Tailwind arbitrary box-shadow values. They simulate the light emission of the aurora colors bleeding through the glass panels.
Tailwind ClassColorHexSpreadOpacityUse Case
hover:shadow-[0_0_20px_rgba(167,243,208,0.4)]aurora-mint#A7F3D020 px40%Card hover — soft mint bloom
shadow-[0_0_10px_rgba(45,212,191,0.5)]aurora-turquoise#2DD4BF10 px50%Active dot / icon glow
shadow-[0_0_15px_rgba(20,184,166,0.6)]aurora-teal#14B8A615 px60%Focused input / selected border
shadow-[0_0_30px_rgba(20,184,166,0.4)]aurora-teal#14B8A630 px40%Large card section highlight

​
Typical Card Pattern

A standard project or content card in Aurora Drift combines bg-navy-800/80, a subtle white border, rounded corners, padding, and a hover state that shifts the border color and adds an aurora glow: 
<div
  className="bg-navy-800/80 border border-white/10 rounded-xl p-6
             transition-all duration-300
             hover:border-aurora-teal/50
             hover:shadow-[0_0_20px_rgba(167,243,208,0.4)]"
>
  {/* Card header */}
  <div className="flex items-center gap-3 mb-4">
    <span className="text-aurora-turquoise text-2xl">✦</span>
    <h3 className="font-serif text-white text-xl">Project Name</h3>
  </div>

  {/* Card body */}
  <p className="text-slate-300 text-sm leading-relaxed mb-4">
    A brief description of the project — what it does and the technologies used.
  </p>

  {/* Tech tags */}
  <div className="flex flex-wrap gap-2">
    <span className="font-mono text-xs text-aurora-cyan bg-aurora-teal/10
                     px-2 py-1 rounded border border-aurora-teal/20">
      React
    </span>
    <span className="font-mono text-xs text-aurora-cyan bg-aurora-teal/10
                     px-2 py-1 rounded border border-aurora-teal/20">
      Tailwind CSS
    </span>
  </div>
</div>

​
Aurora Layer Blending

The three animated aurora SVG paths in AuroraBackground.js each use a different CSS blend mode — mix-blend-screen on the outer SVG wrapper, mix-blend-overlay on layer 2, and mix-blend-color-dodge on layer 3. When glass panels sit above these layers, the backdrop-filter: blur(12px) averages the aurora colors behind each panel into a gentle wash. To intensify how much aurora color bleeds into a panel, reduce the background opacity (for example by switching from bg-navy-800/80 to bg-navy-800/50), or add mix-blend-screen to the panel element itself for a lighter, more luminous effect.

​
Dark-Only Theme

Aurora Drift is designed exclusively for dark mode. There are no light-mode overrides, no prefers-color-scheme: light media queries, and no dark: Tailwind variants. The navy background, translucent glass surfaces, and aurora glow effects all depend on a dark canvas to function correctly. Do not add light-mode styles — the entire visual language would collapse without the dark foundation.

Build docs developers (and LLMs) love

Get started for freeTalk to us