GalactrexAccountBackgrounds
CreativeNoise Background
Texture with no pattern to spot. Computed at low resolution and scaled up, so it stays cheap behind a full-width section.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add noise-backgroundUsage
import { NoiseBackground } from "@/components/galactrex/noise-background";
<section className="relative overflow-hidden">
<NoiseBackground />
<h1 className="relative">Soft weather</h1>
</section>Source
Installs to components/galactrex/noise-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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
scale | number | 10 | Smallest feature in px; larger is softer and cheaper. |
speed | number | 0.12 | How fast the clouds evolve; 0 holds still. |
detail | number | 3 | Layers of detail, 1 to 4. |
opacity | number | 0.22 | Brightest cloud, 0 to 1. |
color | string | "--gxui-ink" | CSS colour or --gxui-* name. |
className | string | — | Extra classes for the outer element. |
Variants
- Weather. Slowly evolving clouds.
- Paper. `speed={0} detail={4}` for a still texture.
Accessibility
- Decorative only and aria-hidden; never takes pointer events.
Motion and reduced motion
- Computed on a small canvas and scaled up.
- Pauses offscreen.
- Reduced motion: a still texture.