Topographic Flow

Pro

A contour-line background with gently moving map-like paths, adjustable line strength, scale, motion, and colors.

Prev Next

Theme

Upgrade to Pro

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<ShaderTopographicFlow
  contourDrift={0.28}
  contourScale={3.4}
  lineStrength={0.75}
  mapWashColor="#1a857a"
  contourLineColor="#2e8ffa"
  majorLineColor="#dbb870"
/>

Props

prop	type	default	description
`contourDrift`	`number`	`0.28`	Contour drift multiplier.
`contourScale`	`number`	`3.4`	Contour field scale.
`lineStrength`	`number`	`0.75`	Contour line strength.
`opacity`	`number`	`0.94`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.
`mapWashColor`	`string`	`"#1a857a"`	Map wash color as a CSS color or normalized RGB.
`contourLineColor`	`string`	`"#2e8ffa"`	Contour line color as a CSS color or normalized RGB.
`majorLineColor`	`string`	`"#dbb870"`	Major line color as a CSS color or normalized RGB.