Contour Field React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ContourField from "./ContourField";

export default function Example() {
  return (
    <ContourField
      color={"#bbabce"}
      background={"#19161e"}
      lines={24}
      spacing={12}
      speed={24}
      lineWidth={0.9}
      interactive={true}
      children={"Off the map."}
      minHeight={400}
      style={{
        "fontSize": 40,
        "letterSpacing": "-.05em",
        "color": "#eee6f3"
      }}
    />
  );
}

Using Contour Field

Use Contour Field behind a heading or as a section background. lines and spacing change the density of the contour pattern.

Turn interactive off when pointer movement would distract from nearby controls. Keep lineWidth low for a fine cartographic appearance.

Props

Name	Type	Required	Default	Description
color	string	No	"#bbabce"	Contour stroke colour.
background	string	No	"#19161e"	Container background.
lines	number	No	22	Number of contours, clamped from 3 to 45.
spacing	number	No	12	Distance between contour radii in SVG units.
speed	number	No	24	Duration of each drifting cycle in seconds.
lineWidth	number	No	0.8	Contour stroke width.
interactive	boolean	No	true	Let the field follow the pointer with a slight offset.
children	ReactNode	No	undefined	Optional foreground React content.
minHeight	number \| string	No	380	Minimum height in pixels or a CSS length. The component can fill a taller parent.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.