Star Tide — React Animated Background
A field of stars drifting on slow luminous waves — two hashed star grids ride a shared interference field so the whole sky visibly sloshes like a tide.

Starting live preview
Usage
import { StarTide, STAR_TIDE_PRESETS } from "@/components/StarTide";
export function TideHero() {
return (
<section style={{ position: "relative", minHeight: "100dvh" }}>
<StarTide {...STAR_TIDE_PRESETS.midnight}
{...{
interactive: true,
speed: 1,
intensity: 1,
density: 1,
waveAmp: 1,
twinkle: 0.5,
to: "#dbe7ff",
accent: "#5eead4"
}}
/>
<div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
<h1>The sky, at high tide</h1>
</div>
</section>
);
}Implementation notes & API
Purpose: celestial-wave backdrop — stars brighten on wave crests, twinkle on their own phases, and a faint glow trace makes the wave readable between them. Mount: full-bleed layer behind content; the night base is opaque. Props: speed, intensity, density, waveAmp, waveFreq, twinkle, from/to/accent (sky, star, crest colors). Pointer: interactive is off by default; set it and the cursor stirs the wave phase. Guardrails: WebGPU required with fallback prop; reduced motion holds a settled sky; safe for several instances per page.
| 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