Warp Starfield
A depth starfield you fly through — cursor parallax and an optional hyperspace warp.
Stars stream toward you out of the dark, with the cursor gently steering the
field for parallax. Flip on warp for a hyperspace jump where the stars stretch
into streaks. Drop it as the first child of a relative container.
Reach the stars
Move your cursor to steer.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/warp-starfield.json"Usage
tsx
import { WarpStarfield } from "@/components/godui/warp-starfield";
<div className="relative overflow-hidden">
<WarpStarfield />
<YourContent />
</div>The layer is absolute inset-0 z-base; parent must be relative, content at
z-raised+. Star color defaults to --color-foreground (tracks light/dark — it
reads on light surfaces too). Caps DPR at 2, pauses off-screen and on hidden
tabs, and renders a static frame under prefers-reduced-motion.
Examples
Hyperspace
Props
| Prop | Type | Default | Description |
|---|---|---|---|
starCount | number | 400 | Number of stars (auto-scaled to area). |
speed | number | 1 | Forward speed multiplier. |
depth | number | 1.5 | Field depth — larger is deeper. |
color | string | --color-foreground | Star color. |
warp | boolean | false | Hyperspace mode — stars become streaks. |
parallax | number | 30 | Cursor parallax strength (px). |
Also accepts standard div attributes (e.g. className, style).