Moving Grid

Calmer than a perspective floor: a conveyor or scrolling-map feel behind dashboards, docs heroes and empty states.

Install

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

Terminal

npx @galactrex/ui add moving-grid

Usage

Example

import { MovingGrid } from "@/components/galactrex/moving-grid";

<section className="relative overflow-hidden">
  <MovingGrid direction="up" />
  <h1 className="relative">Docs</h1>
</section>

Source

Installs to components/galactrex/moving-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`	`40`	Cell size in px.
`direction`	`"up" \| "down" \| "left" \| "right" \| "diagonal"`	`"diagonal"`	Direction of travel.
`speed`	`number`	`3`	Seconds per cell; 0 holds still.
`opacity`	`number`	`0.4`	Line opacity, 0 to 1.
`fade`	`boolean`	`true`	Fade out toward the edges.
`color`	`string`	`var(--gxui-line)`	Line colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Diagonal. Drifts down and to the right.
Still. `speed={0}` for a plain grid.

Accessibility

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

Motion and reduced motion

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