MenuClose

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.

View source
PreviewWEBGPU
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.

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