Perspective Grid

Depth behind a hero, a launch page or a game menu without competing with the words. Low contrast by default.

Install

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

Terminal

npx @galactrex/ui add perspective-grid

Usage

Example

import { PerspectiveGrid } from "@/components/galactrex/perspective-grid";

<section className="relative overflow-hidden">
  <PerspectiveGrid />
  <h1 className="relative">Launch week</h1>
</section>

Source

Installs to components/galactrex/perspective-grid.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
`cell`	`number`	`48`	Cell size in px.
`speed`	`number`	`2.4`	Seconds per cell; 0 holds still.
`angle`	`number`	`62`	Tilt of the floor in degrees.
`opacity`	`number`	`0.35`	Line opacity, 0 to 1.
`horizon`	`number`	`0.35`	Where the floor fades out, from the top.
`color`	`string`	`var(--gxui-muted)`	Line colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Moving. Glides toward the viewer.
Still. `speed={0}` for a static floor.

Accessibility

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

Motion and reduced motion

One transform loop per cell.
Stops while offscreen.
Reduced motion: a still floor.