Nebula Space Background

Heroes

About

A space background for dark UI: domain-warped noise clouds tinted by one hue over a near-black base with its own hue, sparse twinkling stars, film grain and a vignette. It drifts for 0-60 s with an ease-out and then rests - only the twinkle keeps ticking at a low rate, so the GPU stays almost idle. Optional hover glow: a faint light inside the clouds that follows the pointer and flickers like distant lightning. No loop mode on purpose: an endless full-screen shader is heavy on the GPU. Retina-crisp WebGL, zero dependencies.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Nebula Space Background to your project and fits it to your theme.

Code

How Nebula Space Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Copyright (c) 2026 haim repael azoulay. All rights reserved.
import NebulaSpaceBackground from "@/components/ui/nebula-space-background"

const settings = {
  motion: "settle",
  settleSeconds: 8, // 0–60 s of drift, then the GPU idles
  cloudSpeed: 0.15,
  scale: 1.6,
  intensity: 0.5,
  cloudTint: { r: 0.3, g: 0.2, b: 0.45, a: 1 },
  wispTint: { r: 0.42, g: 0.3, b: 0.62, a: 1 },
  baseTint: { r: 0.035, g: 0.04, b: 0.07, a: 1 }, // keep near black, only the hue shows
  starDensity: 0.15, // keep low
  twinkleStrength: 0.6,
  twinkleSpeed: 1,
  twinklePercent: 35,
  grain: 0.03,
  vignette: 0.45,
  seed: 0,
  hoverGlow: true, // faint light inside the clouds following the pointer
  glowStrength: 0.35,
  glowRadius: 0.45,
  glowColor: { r: 0.75, g: 0.7, b: 1, a: 1 },
}

export default function NebulaSpaceBackgroundDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="relative h-[480px] w-full overflow-hidden rounded-2xl">
      <NebulaSpaceBackground className="absolute inset-0" {...(s as any)} />
      <div className="relative z-10 flex h-full flex-col items-center justify-center gap-3 text-center">
        <h2 className="text-4xl font-semibold tracking-tight text-white">Nebula Space Background</h2>
        <p className="max-w-md text-sm text-white/60">
          Drifts for a few seconds, then rests. Move your pointer over the clouds.
        </p>
        <p className="text-xs text-white/35">
          No loop mode on purpose: an endless full-screen shader is heavy on the GPU.
        </p>
      </div>
    </div>
  )
}