Topographic Lines Background

A decorative background of SVG topographic contour lines slowly drifting and morphing.

The closed SVG contour lines of several hills slowly morph and drift, each on its own phase, forming a low-contrast topographic map layer. Content is layered above the background through children, which suits hero sections and pages with an outdoor or exploration mood.

Loading preview…

npx shadcn@latest add https://webberui.com/r/topographic-lines-background.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Contour ring countdensity

Animation speedspeed

Line weightstrokeWidth

Line opacitylineOpacity

0.5

<TopographicLinesBackground />

Installation

npx shadcn@latest add https://webberui.com/r/topographic-lines-background.json

Or, once registries are configured in components.json, install it as @webberui/topographic-lines-background.

Usage

import { TopographicLinesBackground } from "@/components/ui/topographic-lines-background";

<TopographicLinesBackground className="rounded-2xl border">
  <section className="px-8 py-20 text-center">
    <h2 className="text-3xl font-semibold">Walk among the contours</h2>
    <p className="mt-3 text-neutral-500">Read the shape of every mountain with your own two feet.</p>
  </section>
</TopographicLinesBackground>

Props

Prop	Type	Default	Description
`lineColor`	`string`	`"currentColor"`	Contour line color, adjustable separately for light and dark mode via a `text-*` class on the wrapper
`density`	`number`	`6`	Number of contour rings per hill (2–12) — higher means denser lines
`speed`	`number`	`1`	Speed multiplier for the drift and morph — higher is faster
`strokeWidth`	`number`	`1`	Line thickness (in SVG coordinate units)
`lineOpacity`	`number`	`0.5`	Upper bound on the innermost ring's opacity, decreasing step by step outward
`children`	`React.ReactNode`	—	Foreground content layered above the background
`className`	`string`	—	Merged into the outermost container's className

Accessibility

The background SVG is decorative only, marked aria-hidden and pointer-events-none, so it is never announced by assistive technology and never intercepts foreground interaction
When the user has "reduce motion" enabled at the system level, the morph and drift animations stop and the contours become static
The contours are low-contrast and low-opacity and sit beneath the content layer (-z-10), so they do not affect the legibility of foreground text
The shapes come from a deterministic pseudo-random function seeded by index, so SSR and client rendering agree and no hydration jitter occurs