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
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
Enter fullscreen mode Exit fullscreen mode
import { Topolines } from "topolines/react";
export default function Hero() {
return <Topolines seed="hello" color="#F2EFE6" style={{ position: "fixed", inset: 0 }} />;
}
Enter fullscreen mode Exit fullscreen mode
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.
