Warp Field

Travel at speed: stars stretch into streaks as they near the edges. For launch moments, loading screens and space heroes.

Install

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

Terminal

npx @galactrex/ui add warp-field

Usage

Example

import { WarpField } from "@/components/galactrex/warp-field";

<section className="relative overflow-hidden">
  <WarpField />
  <h1 className="relative">Launching</h1>
</section>

Source

Installs to components/galactrex/warp-field.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
`stars`	`number`	`260`	How many stars (capped at 800).
`speed`	`number`	`1.2`	1 is a cruise, 4 is a jump.
`originX`	`number`	`0.5`	Vanishing point across the width, 0 to 1.
`originY`	`number`	`0.5`	Vanishing point down the height, 0 to 1.
`opacity`	`number`	`0.8`	Line strength, 0 to 1.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Cruise. Calm forward travel.
Jump. `speed={4}` for hyperspace.

Accessibility

Decorative only and aria-hidden; never takes pointer events.
High speeds are intense; keep them for short moments.

Motion and reduced motion

One canvas, drawn once per frame.
Pauses offscreen.
Reduced motion: stars hold still as points.