Topography
Pro
Contour lines over a slowly shifting height field, like a living topographic map. The pointer raises a hill.
Map the unknown
Move your pointer to raise a hill
Customize
14
1
1
#ff784f
Installation
Topography is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy topography.tsx into components/ui and run npm install motion.
Usage
import { Topography } from "@/components/ui/topography";
<section className="relative h-[600px] bg-ink-950">
<Topography lines={14} scale={1} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Line color as a hex value. |
| lines | number | 14 | Number of contour levels. Every fifth one is drawn heavier. |
| scale | number | 1 | Size of the hills. Larger values make broader terrain. |
| speed | number | 1 | How fast the terrain shifts. |
| lineWidth | number | 1 | Line thickness in pixels. |
| interactive | boolean | true | Raise a hill under the pointer. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion