Starfield

Night sky with parallax: near stars drift faster than far ones and each twinkles at its own pace. Density scales with size, so a wide hero matches a small card.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add starfield

Usage

Example

import { Starfield } from "@/components/galactrex/starfield";

<section className="relative overflow-hidden bg-gxui-bg">
  <Starfield />
  <h1 className="relative">Night build</h1>
</section>

Source

Installs to components/galactrex/starfield.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`density`	`number`	`30`	Stars per 100,000 square px.
`speed`	`number`	`6`	Drift of near stars in px per second; 0 holds still.
`twinkle`	`boolean`	`true`	Stars brighten and dim.
`opacity`	`number`	`0.9`	Brightest star, 0 to 1.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Drifting. Slow parallax drift.
Still sky. `speed={0}` keeps only the twinkle.

Accessibility

Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

One canvas; stars are seeded, so the sky is the same on every visit.
Pauses offscreen.
Reduced motion: a still sky.