Skip to main content

Documentation Index

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

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

The NebulaBackground component renders a fixed, full-viewport nebula overlay that sits between the animated Starfield and the page content. It applies a soft, radial cosmic gradient and uses the CSS mix-blend-mode: screen property to blend its colours with the starfield below, creating the rich purple-and-teal atmospheric glow characteristic of deep-space nebulae. At 60 % opacity, it adds colour depth without drowning out the star layers underneath.

​
Visual Role

Where Starfield provides the raw pixel density of individual stars, NebulaBackground supplies the ambient colour environment — the hazy, light-diffusion effect that makes the cosmos feel volumetric rather than flat. The bg-nebula-radial utility class drives the radial gradient (deep violet/purple at the edges, fading toward a darker core), while mix-blend-screen causes the nebula colours to lighten and blend with the star colours rather than simply cover them. The result is a glowing atmosphere that changes subtly as the starfield layers animate behind it. The component is fixed to the viewport at z-index: -1 — one layer above the starfield (z-index: -2) but below all page content. Like Starfield, it is completely non-interactive (pointer-events-none).

​
Usage

Place <NebulaBackground /> directly after <Starfield /> in your root layout. The stacking order in JSX determines the visual layering: Starfield → NebulaBackground → page content. 
// app/App.jsx (root layout)
import Starfield from "../../components/cosmic/Starfield.js";
import NebulaBackground from "../../components/cosmic/NebulaBackground.js";

export default function App() {
  return (
    <>
      {/* Layer 1: individual animated stars (z-index: -2) */}
      <Starfield />

      {/* Layer 2: ambient nebula colour wash (z-index: -1) */}
      <NebulaBackground />

      {/* Layer 3 and above: all page sections */}
      <main>
        {/* ... */}
      </main>
    </>
  );
}

​
Props

NebulaBackground is a zero-configuration component and accepts no props. Its appearance is entirely driven by the bg-nebula-radial Tailwind CSS utility and the fixed opacity and blend-mode values defined in the component.
The mix-blend-mode: screen blending means the nebula only ever lightens what is behind it — it cannot darken pixels. This ensures that even at high opacity the starfield stars remain visible and the bg-space-black base colour shows through in areas where the gradient fades to black.

​
Implementation Notes

​
Rendering approach

The entire component is a single <div> with four Tailwind classes: 
<div className="fixed inset-0 z-[-1] pointer-events-none bg-nebula-radial opacity-60 mix-blend-screen" />
No children, no state, no effects — just CSS. This makes it one of the cheapest components in the scene to render, while delivering substantial visual impact.

​
bg-nebula-radial

The bg-nebula-radial class is a custom Tailwind utility defined in the project’s Tailwind config. It expands to a radial-gradient from a deep violet/nebula-purple at the outer edges inward toward a near-black core. This gradient shape mimics the appearance of emission nebulae viewed from within, where the brightest glow appears at the periphery of the field of view.

​
Blend mode and opacity interaction

The opacity-60 and mix-blend-screen properties work together:
  • opacity-60 reduces the nebula’s overall contribution so it never fully washes out the starfield.
  • mix-blend-screen ensures the nebula’s colour is composited additively: the final colour at any pixel is 1 - (1 - nebula) × (1 - starfield), so both layers contribute brightness.
To intensify or soften the nebula glow for a specific section, wrap that section’s content in a local overlay rather than modifying NebulaBackground directly. Keeping the global nebula layer unchanged preserves visual consistency across all pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us