Animated Grid

A board that looks like it is thinking: behind status pages, dashboards and product heroes. The cell under the pointer answers too.

Install

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

Terminal

npx @galactrex/ui add animated-grid

Usage

Example

import { AnimatedGrid } from "@/components/galactrex/animated-grid";

<section className="relative overflow-hidden">
  <AnimatedGrid />
  <h1 className="relative">Status</h1>
</section>

Source

Installs to components/galactrex/animated-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.
`lit`	`number`	`8`	Cells lit at once.
`fade`	`number`	`2.4`	Seconds for a cell to glow and fade.
`hover`	`boolean`	`true`	Light the cell under the pointer.
`opacity`	`number`	`0.5`	Grid line strength, 0 to 1.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name for lit cells.
`className`	`string`	—	Extra classes for the outer element.

Variants

Thinking. Random cells glow and fade.
Hover only. `lit={0}` lights only the cell under the pointer.

Accessibility

Decorative only and aria-hidden; never takes pointer events (it listens on the parent).

Motion and reduced motion

One canvas, drawn once per frame.
Pauses offscreen.
Reduced motion: a still grid with a few lit cells.