Starfield Background

A wrapper for hero sections that renders a starfield behind your content. Stars project in perspective, twinkle subtly, and move forward as if you’re flying through space.

Behavior

• Canvas-based — draws efficiently with device-pixel awareness and cached radial sprites.
• Perspective projection — stars are distributed in a disk and advanced forward in Z-space.
• Twinkle & fade — brightness varies with depth and a subtle sine wave.
• Warp mode — stars stretch toward the center for a lightspeed effect.
• Additive blending — overlapping stars can glow brighter if additive is enabled.
• Responsive — resizes with container via ResizeObserver.

Props

• children?: ReactNode — overlay content (title, CTA, etc.) shown above the starfield.
• className?: string — custom classes for the wrapper (e.g. height).
• speed?: number — forward speed of stars (default: 6).
• sizeBoost?: number — scales star sprite size (default: 1).
• additive?: boolean — use "lighter" compositing for glowing overlaps (default: true).
• warp?: boolean — enable warp streaks (default: false).
• warpStrength?: number — scale of streak stretch (default: 1; try 0.5–2 for subtle, 10+ for extremes).

Starfield Background (Slow)

Starfield Background (Fast)

By increasing the blur, maxRadius, and bubbleCount, you can create the ever-moving gradient, and with the speed prop you can make it as slow or fast as you want.

Starfield Background (Warp Speed)

By making the warp prop true and warpStrength at 10, this is what we get.