Shooting Stars

Faint fixed stars with the occasional streak, trailing light that fades from its head. Rare enough to feel like a moment.

Install

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

Terminal

npx @galactrex/ui add shooting-stars

Usage

Example

import { ShootingStars } from "@/components/galactrex/shooting-stars";

<section className="relative overflow-hidden">
  <ShootingStars />
  <h1 className="relative">Make one</h1>
</section>

Source

Installs to components/galactrex/shooting-stars.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
`every`	`number`	`2.2`	Average seconds between streaks.
`angle`	`number`	`28`	Direction in degrees; 0 is left to right.
`length`	`number`	`140`	Trail length in px.
`speed`	`number`	`620`	Travel speed in px per second.
`stars`	`boolean`	`true`	Faint fixed stars behind.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Night. Streaks over fixed stars.
Streaks only. `stars={false}` over your own background.

Accessibility

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

Motion and reduced motion

One canvas; streaks are spawned at random intervals.
Pauses offscreen.
Reduced motion: only the fixed stars.