Contour Field
Live topographic contour lines over slowly drifting terrain. The pointer raises a hill they bend around.
Overview
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.
When to use
- Hero areas and empty states that need atmosphere behind real content.
When not to use
- Behind long-form text, where motion competes with reading.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/contour-field.jsonnpx shadcn@latest add https://sundaeui.dev/r/contour-field.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/contour-field.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/contour-field.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy contour-field.tsx into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ContourField } from '@/components/sundae/contour-field'
<ContourField className="min-h-[70vh]" ink="#2b2a27" accent="#c2563a" paper="#efe9de" levels={18}>
<YourHeroContent />
</ContourField>Props
| Prop | Type | Default |
|---|---|---|
inkColour of regular contours. | string | '#2b2a27' |
accentColour of index contours. | string | '#c2563a' |
accentEveryEvery n-th level is an index contour. | number | 5 |
paperBackground colour. | string | '#efe9de' |
levelsNumber of elevation lines. | number | 18 |
cellGrid resolution in CSS px. Lower values are smoother and cost more. | number | 9 |
speedTerrain drift speed. | number | 1 |
interactiveThe pointer raises a hill. | boolean | true |
Accessibility
- The canvas is aria-hidden decoration. Put meaningful content in children.
- Reduced motion draws a static map with no animation loop.
Customization
- For a night chart, use paper="#101214", ink="#9aa4ad" and accent="#e2b25a".
- Fewer levels (8 to 10) read as minimal, and 24 or more read as dense survey sheets.
FAQ
- Is Contour Field free?
- Contour Field is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Contour Field?
- Run npx shadcn@latest add https://sundaeui.dev/r/contour-field.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Contour Field support keyboard and screen readers?
- The canvas is aria-hidden decoration. Put meaningful content in children. Reduced motion draws a static map with no animation loop.
- Does Contour Field respect reduced motion?
- Reduced motion draws a static map with no animation loop.
More like this
All backgrounds →Ink Field
Backgrounds · Organic- Pro
Dot Grid
Backgrounds · Understated - Pro
Silk Shader
Backgrounds · Expressive Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Atelier
Templates · Editorial