Topographic Contour Map

An animated contour map with elevation palettes, major lines, stable labels, and interactive terrain deformation.

Animated elevation contours on a near-black canvas, with height-based colors, stronger major lines, and small elevation labels. Hover to raise the terrain; press to create a depression. The left side fades into the background to leave room for content.

Topographic Contour Map is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the topographic-contour-map component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/topographic-contour-map.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { TopographicContourMap } from "@/components/hangry-ui/shader/topographic-contour-map";

<TopographicContourMap
  colorScheme="amber"
  showLabels
  mouseInfluence
  scale={3}
  density={24}
  lineWidth={1}
  speed={0.08}
  className="grid place-items-center p-12"
>
  <h2 className="typography-section-title text-white">Find your own path.</h2>
</TopographicContourMap>

Props

Prop	Type	Default	Description
`colorScheme`	`"studio"`, `"amber"`, `"teal"`, or `"violet"`	`"amber"`	Height-based low, middle, and high contour colors.
`color`	`[number, number, number]`	—	Optional custom RGB color from 0 to 1; overrides the palette with matching darker and brighter shades.
`mouseInfluence`	`boolean`	`true`	Raise terrain around the pointer; pressing creates a depression.
`showLabels`	`boolean`	`true`	Stable numeric labels projected onto major contours.
`fadeLeft`	`boolean`	`true`	Fade the left side into the background.
`backgroundColor`	`[number, number, number]`	`[0.012, 0.012, 0.012]`	Background RGB channels from 0 to 1.
`scale`	`number`	`3`	Terrain frequency; larger values reveal more terrain. Minimum 0.1.
`density`	`number`	`24`	Contour levels across the height field; clamped to 2–100.
`lineWidth`	`number`	`1`	Minor contour width in CSS pixels; clamped to 0.25–8. Major contours are thicker.
`speed`	`number`	`0.08`	Nonnegative terrain evolution speed. Set 0 to stop ambient animation.
`children`	`ReactNode`	—	Content placed above the shader.
Native div props	`ComponentProps`	—	Classes, style, IDs, and accessibility attributes. Color is reserved for the shader.

The terrain is generated for decoration; it does not represent a real geographic location. The noise field evolves smoothly over time. Every fourth contour is emphasized. Labels follow their elevation contours and use a built-in bitmap font without additional font dependencies.

Dependencies

Motion
vgpu