I built topolines, an animated topographic contour background for React

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.