A canvas height field rendered as contour lines. The ridges drift slowly, closer to a topo map than a particle grid.
9
18px
1.15px
1
1
0.55
tsx
import { Contour } from "@/components/motion/contour"export function Example() { return ( <Contour className="h-[420px] w-full" color="#3b82f6" levels={9} cellSize={18} lineWidth={1.15} speed={1} warp={1} opacity={0.55} /> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add contourUsage
import { Contour } from "@/components/motion/contour"<Contour className="h-[420px] w-full" color="#3b82f6" levels={9}/>API Reference
Contour
| Prop | Type | Default |
|---|---|---|
| color | string | #3b82f6 |
| backgroundColor | string | — |
| levels | number | 9 |
| cellSize | number | 18 |
| lineWidth | number | 1.15 |
| speed | number | 1 |
| warp | number | 1 |
| opacity | number | 0.55 |
| dpr | number | 1.5 |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes. cellSize and lineWidth are in pixels.