# Shader Background

> Marbled flow rendered on the graphics card.

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.

- Family: Backgrounds
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/shader-background/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add shader-background
```

It installs to `components/galactrex/shader-background.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

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

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

## 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

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