Topographic Lines Background: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add topographic-lines-background.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TopographicLinesBackground/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/topographic-lines-background.en.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

Topographic Lines Background