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 →

The other one

Same hands, same rules: one effect, no runtime dependencies, all of it on the GPU.

revealed

Paint one image out of another. Two pictures are stacked in the same box, and wherever the pointer moves the top one is eaten away along a fractal, noise-carved edge that bulges, tears itself into islands and keeps travelling for about a second after you stop. Then it heals over.

npm i revealed

revealed.idlee.xyz →GitHub