# Hero shader (goodtabs UI)

A full-height hero over a slow monochrome light field drawn in WebGL.

## Install

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

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

## Usage

```tsx
import { HeroShader } from "@/components/hero-shader"
import { Button } from "@/components/ui/button"

<HeroShader
  className="h-dvh min-h-96"
  title="Quiet interfaces, built carefully"
  actions={<Button>Get started</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The headline. |
| description | `ReactNode` |  | One or two sentences under the title. |
| actions | `ReactNode` |  | Buttons and links. |

## When to use

- The top of a landing page that should feel alive without any colour
- A single short headline and one or two actions
- When the first screen is the whole pitch

## When not to use

- Pages with more than one live canvas: browsers cap WebGL contexts near 16
- Long intros or dense text, which compete with the moving light
- Low-power or print-first contexts; use the plain hero

## Notes for agents

- The section fills its box and sets no height; pass className such as h-dvh min-h-96
- 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 a CSS gradient shows. No GSAP is involved
- The canvas is aria-hidden and the text sits above it, so the light never carries information

## The maths

- The field is 0.5 + (a + b + c) / 6 where each term is a sine, so it stays inside 0 to 1 without clamping.
- Opacity is (0.03 + 0.2 × field²) × (1 - y)^1.6, so light gathers low and is nearly gone by the headline.
- Noise of ±0.5 / 255 is added before output, below one 8-bit step, which breaks banding in the gradient.

Docs: https://ui.goodtabs.co/components/hero-shader