Topography
A free topographic background effect for calm, layered sections.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Topography is a free background component for Next.js and React that draws three groups of irregular contour lines behind your content. It answers the need for a topographic background svg react pattern with an oversized inline SVG, one CSS transform animation, and Tailwind utilities, so you can place it inside any relative container without changing layout or interaction.
The whole field drifts diagonally as a single group and pauses whenever it is fully offscreen or the document is hidden. The SVG is decorative and pointer inert, while prefers-reduced-motion keeps every contour visible at its authored resting position with no movement.
Template Empire
Contours in motion, clarity at rest
Three hand-drawn contour fields drift together behind an opaque, readable surface. The line art stays decorative, never intercepts input, and settles into a complete static composition whenever you prefer reduced motion.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-topographyUsage
import { BgTopography } from "@/components/bg-topography";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgTopography />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted">Contour lines drift behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Topography exposes two component tokens in its registry item: --topo-line controls the contour stroke and defaults to the border token, while --topo-opacity controls the opacity of the complete field and defaults to 0.5. Override them from :root or any ancestor without editing the component:
:root {
--topo-line: var(--primary);
--topo-opacity: 0.35;
}Frequently asked questions
- Is Topography free for commercial use?
- Yes. Topography is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Topography affect performance or accessibility?
- Only one SVG group animates, and it changes transform only. The loop pauses while fully offscreen or while the document is hidden. The component is aria-hidden, cannot receive focus or pointer input, and renders as a complete static field when reduced motion is enabled.
- How do I change the contour colour or opacity?
- Override --topo-line and --topo-opacity from :root or any ancestor element. The line token accepts any CSS colour and the opacity token controls the complete SVG field.