A survey map of slowly reshaping hills: nested contour lines that merge where hills meet, bolder index lines with elevation labels, summit markers and edge ticks.
npx shadcn@latest add https://hyperblur.dev/r/bg-contour-lines.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-contour-lines.tsx.
import { BgContourLines } from "@/components/hyperblur/bg-contour-lines"
<div className="relative h-96"><BgContourLines peaks={2}><h1>Trail guide</h1></BgContourLines></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7fb3ff" | Color of the contour lines, labels and edge ticks. |
| accent | string | "#2f7bff" | Color of the summit markers. |
| background | string | "#070a10" | Map paper color, also used behind the labels. |
| peaks | number | 3 | Number of hills, from 1 to 5. |
| lines | number | 14 | Contour lines per hill, from 4 to 30. Every fifth line is an index line. |
| labels | boolean | true | Shows elevation labels on index lines and next to summits. |
| speed | number | 1 | Speed of the terrain morph. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |