# Noise field (goodtabs UI)

Slow flowing fractal noise as soft ink or smoke, drawn in raw WebGL on theme tokens.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/noise-field.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/noise-field`

## Usage

```tsx
import { NoiseField } from "@/components/ui/noise-field"

<NoiseField className="grid h-96 place-items-center">
  <h2>Let the surface breathe</h2>
</NoiseField>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| scale | `number` | `1` | Size of the shapes. 1 is about 600 CSS pixels across. |
| speed | `number` | `1` | Multiplies how fast the ink flows. |
| intensity | `number` | `0.16` | Strongest ink, from 0 to 1. Keep it under 0.3 behind text. |

## When to use

- A hero or section background with texture and no colour
- Behind one short heading, at the default intensity
- Empty states or sign-in pages that would otherwise be a flat fill

## When not to use

- Behind body text, where moving tone competes with reading
- Above an intensity of 0.3 with text on top, because contrast drops
- More than two or three times on a page: browsers cap live WebGL contexts near 16

## Notes for agents

- The element needs a height. It fills its box and does nothing to set one
- It installs components/ui/shader-canvas.tsx, which pauses off screen, follows the theme and handles reduced motion
- Under reduced motion it draws one frame, and without WebGL two soft CSS gradients show through
- The canvas is aria-hidden, so never put information in the field. No GSAP is involved here

## The maths

- Octave weights fall by 0.38 as frequency rises by 1.7, 0.62 + 0.24 + 0.09 = 0.95, so the sum stays inside plus or minus one.
- Ink is smoothstep(-0.7, 0.85, v)², a falloff across nearly the whole range of v, so the ink has no edge.
- Device pixel ratio caps at 1.5, which cuts shaded pixels on a 3x phone by 1 - 1.5² / 3² = 75 percent.

Docs: https://ui.goodtabs.co/components/noise-field