Topographic Lines Bg
Contour lines drifting outward, like elevation rising. Install with npx remotion-ui@latest add topographic-lines-bg.
PrimitivePrimitives
$ npx remotion-ui@latest add topographic-lines-bgA survey-map background.
import { TopographicLinesBg } from "@/remotion/primitives/topographic-lines-bg";
<AbsoluteFill>
<TopographicLinesBg speed={1} />
<YourScene />
</AbsoluteFill>How the contours are built
Real contours come out of a height field by marching squares, which is far too expensive to run per frame. This inverts the problem. A landform is a stack of closed polar curves around a centre, each radius modulated by three harmonics, so the family is nested by construction and can never self-intersect — which is the one thing a contour map must never do.
Two overlapping landforms give the crossing, merging look of a real survey sheet. One landform on its own reads as a target.
Peaks
<TopographicLinesBg
peaks={[
{ x: 20, y: 34, size: 72, roughness: 1.05 },
{ x: 84, y: 74, size: 54, roughness: 1.35 },
]}
/>x and y are percentages of the frame, size is the outermost contour's
radius as a percentage of the short edge, and roughness scales the harmonics.
At roughness={0} you get concentric circles.
Index contours
Every indexEvery-th line is drawn heavier, which is the convention that makes
a real map legible. A contour keeps its identity as it travels outward, so an
index contour stays an index contour rather than flickering between weights when
the stack wraps.
Motion
Contours travel outward, which reads as elevation rising under the camera. They
fade in at the peak and out at the rim, so nothing appears or vanishes
mid-frame. speed={0} freezes the map into a still.
lineWidth is in pixels at any output size — the stroke is pinned with
vectorEffect="non-scaling-stroke", because the drawing space is a fixed
160x90 box and an unpinned stroke would triple in weight between a preview and
a 4K render.
Not marching squares — far too expensive per frame. Each landform is a stack of polar curves modulated by three harmonics, so the family is nested by construction. Contours travel outward and wrap, fading in at the peak and out at the rim.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/topographic-lines-bg- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: backgroundColor, lineColor, indexColor, peaks, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { TopographicLinesBg } from "@/remotion/primitives/topographic-lines-bg";
<AbsoluteFill>
<TopographicLinesBg speed={1} />
<YourScene />
</AbsoluteFill>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#07080e" | Plate behind the contours. `transparent` layers them over footage. |
| lineColor | string | "rgba(232,184,109,0.5)" | Contour colour. |
| indexColor | string | "rgba(232,184,109,0.95)" | Colour of the heavier index contour. |
| peaks | TopographicPeak[] | two peaks | Landforms: `{ x, y, size, roughness }` in percent. One peak reads as a target; two read as terrain. |
| lineCount | number | 12 | Contours per landform. |
| indexEvery | number | 4 | Every n-th contour is drawn heavier. 0 makes them uniform. |
| lineWidth | number | 1.4 | Contour weight in px, independent of output size. |
| speed | number | 1 | How fast elevation rises. 0 freezes the map. |
| intensity | number | 1 | Overall brightness. |
| seed | number | 1 | Changes the terrain without changing any other prop. |