Pro
Contour field
A topographic map that slowly breathes: contour lines over drifting terrain, with every fifth line drawn heavier like an index contour. Resting the pointer raises a hill, so the lines gather into rings around it and relax when it leaves.
pnpm dlx shadcn@latest add @caliper/contour-fieldWhen to use
Use it for
- Backdrops for outdoor, mapping, logistics and climate products.
- Hero and empty-state surfaces that want texture without imagery.
Skip it when
- Real terrain; it is generated and means nothing geographically.
- Behind long text.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- A hill that lags
- The raised hill follows the pointer with a short lag and sinks back over about a second, so it feels like ground, not a cursor.
Styling
- Two weights, like a survey map
- Minor contours are faint hairlines; index contours are heavier, which gives the map depth without shading.
Installation
pnpm dlx shadcn@latest add @caliper/contour-field
Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { ContourField } from "@/components/ui/contour-field"
The worked example comes with Pro
The 22-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
ContourField
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden and aria-pressed in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Flow fieldFine ink strands drifting through a slowly turning current, like iron filings or wind on a weather map. The pointer stirs an eddy that the strands bend around. Content placed inside sits above it.
- Dotted mapA dotted world with places on it and routes between them. Routes draw in once, then a short light runs along each in its direction. Choosing a place keeps its routes lit and dims the rest.
- Shader backgroundA GPU-drawn animated background.