I built topolines, an animated topographic contour background for React

Alexandru Pavelescu — Fri, 24 Jul 2026 12:33:00 +0000

Every couple of projects I ended up rebuilding the same effect: an animated topographic map background, the kind with slowly drifting contour lines. After copy pasting the same WebGL shader for the third time I gave up and turned it into a proper library.

It's called topolines. One React component, zero dependencies, everything drawn on the GPU.

Repo: https://github.com/idleCyrex/topolines
Playground: https://topolines.idlee.xyz/playground

How it works

The lines are not an image or SVG. A small fragment shader generates a noise field (simplex noise + fbm) and draws contour bands from it, so it animates smoothly at any resolution for basically no CPU cost. The component just manages a canvas and the WebGL state around it.

Usage

npm i topolines

import { Topolines } from "topolines/react";

export default function Hero() {
  return <Topolines seed="hello" color="#F2EFE6" style={{ position: "fixed", inset: 0 }} />;
}

Same seed always renders the same field, so your background is stable between visits. There are props for speed, scale, line width, colors, drift, and an interactive mode where contour rings bloom around the cursor.

Things I cared about

Zero dependencies, the whole thing is one shader and some glue code
SSR safe, works in a Next.js server component tree
Pauses when offscreen or when the tab is hidden
Respects prefers-reduced-motion (renders one static frame)
Clean fallback when WebGL is not available

The playground lets you tweak every knob and copy the resulting code out: https://topolines.idlee.xyz/playground

It's v0.1 and my first published library, so feedback and feature ideas are very welcome.

DEV Community: Alexandru Pavelescu

I built topolines, an animated topographic contour background for React

How it works

Usage

Things I cared about