Gradient Mesh

Lines fade from faint at the back to strong at the front, so it reads as depth without colour: terrain, sound, a calm sea. Optional full wireframe.

Install

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

Terminal

npx @galactrex/ui add gradient-mesh

Usage

Example

import { GradientMesh } from "@/components/galactrex/gradient-mesh";

<section className="relative overflow-hidden">
  <GradientMesh />
  <h1 className="relative">Signal</h1>
</section>

Source

Installs to components/galactrex/gradient-mesh.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
`lines`	`number`	`28`	How many lines make the mesh.
`amplitude`	`number`	`26`	Swell height in px.
`speed`	`number`	`0.5`	How fast it rolls; 0 holds still.
`wireframe`	`boolean`	`false`	Draw the cross lines too.
`opacity`	`number`	`0.55`	Nearest-line strength, 0 to 1.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Contours. Horizontal lines only.
Wireframe. `wireframe` adds the cross lines.

Accessibility

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

Motion and reduced motion

One canvas, drawn once per frame.
Pauses offscreen.
Reduced motion: a still surface.