topolines — animated topographic contour backgrounds for React

01 Relief

Animated topographic contour backgrounds.
One React component. Zero dependencies. Drawn on the GPU.

npm i topolines
DocsOpen playground →

Usage

One component. It fills its parent, sizes itself with a resize observer, and pauses when off screen.

import { Topolines } from "topolines/react";

export default function Background() {
  return <Topolines seed="topo" color="#F2EFE6" opacity={0.34} />;
}
See the docs →

Presets

01 Reliefopacity 0.34 · warp 0.22
02 Ridgelinescale 0.8 · warp 0.3
03 Surveylevels 18 · lineWidth 0.8
04 Basinscale 0.6 · speed 0.02
05 Glasswarp 0 · lineWidth 2.2
06 Driftspeed 0.03 · levels 10

Recipes

Theme it from CSS variables, animate color on scroll, pin a section and freeze the pan, or stitch two instances into one continuous map.

Read the docs →