Mesh Gradient

Light through frosted glass: four blurred fields on slow loops. Quiet in theme tones; vivid with a brand palette.

Install

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

Terminal

npx @galactrex/ui add mesh-gradient

Usage

Example

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

<section className="relative overflow-hidden">
  <MeshGradient colors={["var(--gxui-glow)", "var(--gxui-accent)"]} />
  <h1 className="relative">Studio</h1>
</section>

Source

Installs to components/galactrex/mesh-gradient.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
`colors`	`string[]`	—	Up to four CSS colours; defaults to theme tones.
`speed`	`number`	`22`	Seconds for the slowest loop; 0 holds still.
`blur`	`number`	`70`	Blend softness in px.
`opacity`	`number`	`0.45`	Strength, 0 to 1.
`className`	`string`	—	Extra classes for the outer element.

Variants

Theme. Quiet monochrome fields.
Brand. Pass `colors` for a colour mesh.

Accessibility

Decorative only and aria-hidden; never takes pointer events.
Check text contrast when passing bright colours.

Motion and reduced motion

Transform-only loops under one blur.
Still offscreen.
Reduced motion: still fields.