Shader Background

Domain-warped noise drawn between two colours, the theme background and ink by default, with optional contour lines. On devices without hardware graphics it shows a still gradient instead.

Install

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

Terminal

npx @galactrex/ui add shader-background

Usage

Example

import { ShaderBackground } from "@/components/galactrex/shader-background";

<section className="relative overflow-hidden">
  <ShaderBackground />
  <h1 className="relative">Rendered live</h1>
</section>

Source

Installs to components/galactrex/shader-background.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
`speed`	`number`	`0.25`	Flow speed; 0 holds still.
`scale`	`number`	`2.2`	Swirl size; higher is busier.
`intensity`	`number`	`0.35`	How far the light reaches toward `to`, 0 to 1.
`contours`	`boolean`	`false`	Topographic contour lines.
`from`	`string`	`"--gxui-bg"`	Dark end: CSS colour or --gxui-* name.
`to`	`string`	`"--gxui-ink"`	Light end: CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Marble. Smooth flow.
Topographic. `contours` draws lines through the flow.

Accessibility

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

Motion and reduced motion

WebGL at half resolution.
Pauses offscreen.
Reduced motion: one still frame.
No hardware graphics: a CSS gradient, the shader never runs.