Contour lines of a slowly shifting terrain, like a living survey map. The pointer raises a hill that pulls the lines into rings around it.
npx shadcn@latest add https://hyperblur.dev/r/bg-topography.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-topography.tsx.
import { BgTopography } from "@/components/hyperblur/bg-topography"
<div className="relative h-96"><BgTopography /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "rgba(255,255,255,0.16)" | Color of the minor contour lines. |
| accent | string | "#7fb3ff" | Color of every fourth contour and of lines near the pointer. |
| levels | number | 12 | Contour levels per unit of height. More levels draw denser lines. |
| scale | number | 190 | Size of terrain features in pixels. |
| cellSize | number | 10 | Sampling resolution in pixels. Smaller is smoother and slower. |
| lift | number | 0.55 | Height of the hill raised under the pointer. 0 disables it. |
| radius | number | 150 | Radius of the pointer hill in pixels. |
| speed | number | 1 | How fast the terrain shifts. |
| seed | number | 11 | Seed for the terrain. The same seed gives the same map. |