Contour

Contour is an animated topographic background. A soft field of color drifts slowly beneath glowing contour lines, and when the cursor moves over it, the terrain swells so the lines bend around it, then settle back when it leaves.

Drop it behind a hero section, inside a card, or anywhere you want a surface with quiet motion. Need text or buttons on top? Place them in the Content slot.

Features

Four-stop color field with smooth, seamless gradients

Adjustable line count, width and glow

Two Tone mode: lines shift between two colors in a slow traveling wave

Interactive hover swell with adjustable strength and radius

Flow speed, scale, warp and seed to shape the terrain

Top fade into your page color, smooth and band-free

Film grain to keep gradients clean on any screen

Works with Framer color tokens, including light and dark mode

Content slot for text, buttons or any layer

Performance

Rendered with WebGL. It pauses automatically when off screen or in a background tab, and respects the reduced-motion setting.