GSAP Interactive Topographic Lines Canvas Background
Overview
A topographic map background for React and Next.js, drawn live on a canvas. Contour lines drift slowly across the section, the cursor raises a hill with glowing rings on top, and a click sends a ripple through the terrain.
It works the way a real contour map does: a height is worked out for each point on a grid, and lines are traced wherever the terrain crosses a level, so the lines close, split and merge on their own. The cursor adds a hill to that terrain, and only the highest ground reaches the accent colour, which in practice means the top of that hill.
Details
- Category
- Backgrounds
- Interaction
- Mouse Move + On Click + On Load
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 068 / Backgrounds
GSAP Interactive Canvas Background: Needle Field
Mouse Move · On Click · On Load
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
No. 102 / Backgrounds
Liquid Gold Metaball Hero Background in JavaScript
On Load · Mouse Move · On Click
(02)FAQ
GSAP Interactive Topographic Lines Canvas Background — FAQ
01How do I change the look of the terrain?
scale sets the size of the hills, gap sets the height between lines, and speed sets how fast it drifts. A smaller gap draws more lines. color and accent set the two line colours.
02Will it slow my page down?
It's built to stay light: batched drawing, a grid capped at 7,000 cells, thirty updates a second and nothing at all off screen. For an even lighter version, raise gap so there are fewer lines to draw.
03How do I set the background colour?
The canvas is transparent, so set it on the component with className or on the section behind it.
04Can buttons inside it still be clicked?
Yes. Children render normally above the canvas, and the cursor and ripples are read from the window. Clicking one also sends a ripple from that spot.
05What happens with reduced motion?
It draws one still map, with no hill, ripples or drift.