# Contour lines (goodtabs UI)

Topographic lines drifting over a noise height field, one hairline wide at every slope.

## Install

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

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

## Usage

```tsx
import { ContourLines } from "@/components/ui/contour-lines"

<ContourLines className="grid h-96 place-items-center">
  <h2 className="bg-[radial-gradient(closest-side,var(--background)_55%,transparent)] p-16">Surfaces step up</h2>
</ContourLines>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| density | `number` | `16` | Lines per unit of height. Higher packs them closer. |
| speed | `number` | `1` | Multiplies how fast the terrain shifts. |

## When to use

- A hero or section background with structure and no colour
- Pages about depth, layers, maps or data
- A quiet full-bleed texture with one short heading on top

## When not to use

- Behind text with nothing behind it: lines cut through letters
- Small areas under about 200px, where the terrain has no room to read
- 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
- Text on top needs a soft clearing in the page colour, because hairlines cross it otherwise
- Under reduced motion it draws one frame, and without WebGL CSS rings show through. No GSAP is involved here

## The maths

- Slope comes from finite differences, (h(x + e) - h) / e, in three samples per pixel, with e at 1.5 CSS pixels.
- Distance to a line in pixels is |level - nearest| / (density × slope), so a line stays 1px wide on steep and flat ground.
- Every fifth level, mod(round(level), 5) = 0, is drawn at 2.3 times the alpha, like an index contour on a survey map.

Docs: https://ui.goodtabs.co/components/contour-lines