MenuClose

Starfield — React Animated Background

Hashed star grid with twinkle and slow parallax drift — deep-space depth from one fullscreen pass.

View source
PreviewWEBGPU
Starting live preview

Usage

import { Starfield, STARFIELD_PRESETS } from "@/components/Starfield";

export function SpaceSection() {
  return (
    <section style={{ position: "relative", minHeight: "80vh" }}>
      <Starfield {...STARFIELD_PRESETS.midnight}
        {...{
          interactive: true,
          density: 0.4,
          twinkle: 0.85,
          speed: 1,
          color: "#d6e4ff"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "6rem 2rem" }}>
        <h2>Built for the dark</h2>
      </div>
    </section>
  );
}
Implementation notes & API

Purpose: subtle animated star backdrop for dark sections; cheapest of the background effects (few ALU ops per pixel). Mount: absolute layer inside any sized container; safe to run several instances per page. Props: color (star tint), density (0-1 star coverage), twinkle (0-1), speed (drift rate). Pointer: the three star layers parallax against the cursor, near layers shifting most; interactive={false} pins them. Guardrails: on light backgrounds set color to a dark tone or visibility suffers; WebGPU required with fallback prop.

PropertyTypeNotes / default
interactivebooleanfalse in the library; enabled in this preview
fallbackReactNodeShown when the renderer is unavailable
className / stylestring / CSSPropertiesApplied to the outer container
View source on GitHubFree for commercial projects · MIT