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

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.
| Property | Type | Notes / default |
|---|---|---|
interactive | boolean | false in the library; enabled in this preview |
fallback | ReactNode | Shown when the renderer is unavailable |
className / style | string / CSSProperties | Applied to the outer container |
View source on GitHubFree for commercial projects · MIT