Terrain Background for React

A shaded relief map behind your content: the ground climbs in fifteen levels from sage valleys through olive and sand to warm stone and snowy peaks, each level lit from the north-west, so it catches a thin line of light on one side and casts a soft shadow on the level below on the other. A fine contour line edges every level, and every fifth one is heavier, like the index contours on a survey map. On a light page it's a paper map; on a dark one, a cool slate relief at night. The map is traced from a seeded noise field when the component renders, so the same seed always draws the same hills, on the server and in the browser; the light and shadow are CSS drop shadows, drawn once, and the map pans slowly back and forth with one CSS animation, so nothing is recomputed or repainted while it moves.

Use it for outdoor, travel, mapping, geo and climate pages, behind a hero or a section. For contour lines alone, use Topography; for flat seeded cells instead of landforms, Voronoi; for soft color without any shapes, Mesh Gradient.

Installation

Usage

import { Terrain } from "@/components/ui/terrain";

<Terrain className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Map the world</h1>
</Terrain>

Terrain is a container: give it a size, put your content inside, and the map sits behind it. The palette is quiet in both themes, so copy can sit on the map directly. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Paper relief

lines={false} drops the contour lines, so the levels show as stacked, lit terraces, like a relief cut from layers of paper. scale={1.6} draws smaller hills, more of them in the card, and seed={9} draws another map.

Monochrome

colors takes up to five CSS colors, valleys first; the levels between are mixed from them. Here five tints of the theme's text over its background give a gray relief that follows light and dark mode, and --terrain-line, set in className, softens the contour lines to the text color at 30%.

Accessibility

The map is decoration: it's hidden from assistive tech and never takes the pointer. With reduced motion it stays where it is, the whole relief still drawn. Nothing flashes.

Put copy over it in your foreground color (text-foreground). The default palettes keep it readable everywhere: the light map stays pale, its shadows included, and the night relief stays dark, its lit peaks included. With your own colors, check your copy against the darkest and the lightest of them.

FAQ

API Reference