Contour fieldPro

Topographic lines from seeded noise or an image's luminance, drawn as SVG strokes in `currentColor`.

Markdown

On this page

ProNoise terrain drifting slowly, or a portrait read as elevation.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/contour-field

Usage

tsx

import { ContourField } from "@/components/ui/chatcn/pro/contour-field"

<ContourField levels={16} className="text-chatcn-fg-muted" />

Lines are SVG strokes in currentColor, so a text class themes them and they stay sharp at any size. Every fifth line is an index line, drawn heavier, like a survey map. With src, the image's luminance becomes the terrain: it is blurred a little first, so photo grain does not become a rash of tiny rings. Images must be same origin or serve CORS.

Examples

Levels and uses

ProSparse and dense levels, no index lines, accent ink, and a decorative use behind a stat.

Props

Prop	Type	Notes
`src`	`string`	Image to read as elevation. Without it, noise
`levels`	`number`	Contour levels. Default 14
`indexEvery`	`number`	Heavier line every n levels; 0 turns it off. Default 5
`resolution`	`number`	Columns sampled. Default 96
`scale`	`number`	Noise zoom. Default 2.4
`seed`	`number`	Same seed, same terrain
`animate`	`boolean`	Slow drift for noise terrain. Default false
`aspectRatio`	`string`	Default `"16 / 9"`
`label`	`string`	Accessible name. Default "Contour map"

Accessibility

The field is an image named by label. Pass an empty label when it is only decoration.
It loops past 5 s, so a pause control sits in its corner (WCAG 2.2.2): quiet until hover or focus, always shown on touch screens and while paused.
Under forced-colors the canvas gives way to a plain outline.

Motion

With animate, the terrain drifts through the third noise axis and rebuilds 12 times a second, slow enough to read as weather rather than motion.
The loop runs from the shared frame clock only while the effect is on screen, the tab is visible and nothing paused it. Under reduced motion it draws one still frame.