## Contour Field (S—010)

Live topographic contour lines over slowly drifting terrain. The pointer raises a hill they bend around.

- URL: https://sundaeui.dev/components/contour-field
- Category: Backgrounds & effects · Art direction: Editorial
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/contour-field.json`
- Tags: interactive, canvas, generative, animated, background, react, map

An editorial background drawn like a survey map. A 3D noise field is sampled on a grid, and marching squares trace iso-lines at evenly spaced elevations. Every fifth line is an index contour in the accent colour, as on a printed topographic sheet.
The terrain drifts slowly through time, so ridges form and dissolve. Move the pointer and a hill rises under it. The contours tighten into rings around the cursor and relax again when it leaves.
Rendering is capped at 30 frames per second, because terrain doesn’t need more. It pauses offscreen and in background tabs, and with reduced motion it draws a single still map that still responds to the pointer.

### Usage

```tsx
import { ContourField } from '@/components/sundae/contour-field'

<ContourField className="min-h-[70vh]" ink="#2b2a27" accent="#c2563a" paper="#efe9de" levels={18}>
  <YourHeroContent />
</ContourField>
```

### Props

- `ink` (`string`, default `'#2b2a27'`): Colour of regular contours.
- `accent` (`string`, default `'#c2563a'`): Colour of index contours.
- `accentEvery` (`number`, default `5`): Every n-th level is an index contour.
- `paper` (`string`, default `'#efe9de'`): Background colour.
- `levels` (`number`, default `18`): Number of elevation lines.
- `cell` (`number`, default `9`): Grid resolution in CSS px. Lower values are smoother and cost more.
- `speed` (`number`, default `1`): Terrain drift speed.
- `interactive` (`boolean`, default `true`): The pointer raises a hill.

### Accessibility

- The canvas is aria-hidden decoration. Put meaningful content in children.
- Reduced motion draws a static map with no animation loop.