Contour lines

A background of live topographic lines that bend around the cursor. Click to send a wave through the terrain; put anything on top.

Backgrounds, hover and press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/contour-lines.tsx https://motion-brew.com/r/contour-lines.tsx

One self contained file for React and Tailwind CSS: contour-lines.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { ContourLines } from "@/components/contour-lines";

export default function Hero() {
  return (
    <ContourLines className="h-[480px] rounded-3xl bg-white" lines={14}>
      <div className="relative grid h-full place-items-center">
        <h1 className="text-[32px] font-medium tracking-tight">Find your way</h1>
      </div>
    </ContourLines>
  );
}

Props

Prop	Type	Default	Description
color	string	"#242423"	Line colour
lines	number	14	Contour levels to trace; more is tighter
scale	number	1	Size of the hills and valleys
speed	number	1	Drift speed
lift	number	1	How high the pointer's hill rises
interactive	boolean	true	Raise a hill under the pointer and wave on press
children	ReactNode		Content laid over the lines
className	string		Size and placement; it fills its width

More backgrounds

Pixel scroll: A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band.
Magnetic flow: Cards follow the leader like a snake, then burst open like the sun.
Gravity tag pile: Tags fall, bounce, spin and pile up with real physics.
Prism flow: A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism.

All animated react backgrounds and shaders