Spark UI
Route Covered

Customize

Backdrop
Card Color
Contour Lines
Compass Ring
Accent
Camp Pins
Signal Pins
Map Title
Log Title
Contour Lines
32
Terrain Roughness
100
Terrain Seed
7
Layout
Show Climbing Log
Climber Marker
Auto Rotate
Animation Speed
100
Auto Tour

Route Covered

Widgets
121 views•6 uses

Props

18 properties
backdropcolor#adbfc3
Colour behind the cards.
cardColorcolor#1c1c1e
Card and terrain fill.
contourColorcolor#98989d
Stroke of the terrain contour lines.
ringColorcolor#9dbdc2
Compass ellipse and rear ticks.
accentColorcolor#e4efa4
New view label, status text, climber and selection.
campColorcolor#a9c7cf
Camp pins and links.
signalColorcolor#f0643c
Signal beacon pins.
titlestringRoute covered
Heading of the map card.
logTitlestringClimbing log
Heading of the log card.
contourLevelsnumber32
Number of stacked contour levels.
roughnessnumber100
How wiggly the contour lines are.
terrainSeednumber7
Generates a different mountain.
layoutenumauto
How the two cards are arranged.
showLogbooleantrue
Show the log card next to the map.
showClimberbooleantrue
Animate a marker along the route.
autoRotatebooleanfalse
Slowly spin the mountain on its compass.
speednumber100
Speed of the intro and loops.
autoPlaybooleanfalse
Step through the log entries automatically.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add route-covered

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

An expedition dashboard: a 3D contour-line mountain on a compass ring with a dashed climbing route and map pins, paired with a climbing log that stays in sync with the map.

KEY FEATURES

  • ·Terrain is generated procedurally and traced with marching squares, then stacked as filled contours so upper terraces hide what's behind them
  • ·Intro sequence: the compass ring draws, contour layers rise out of the floor, pins shoot up on their stems, then the dashed route draws itself
  • ·A climber marker loops along the route and signal beacons pulse
  • ·Click a pin to highlight and scroll to its log entry, or click an entry to highlight its pin; hover a pin for a tooltip
  • ·Drag the map to spin the mountain around its compass with momentum, or tap W, N, E or S to swing that side to the front; hidden trail segments and pins tuck behind the ridge
  • ·New view morphs the scene between the perspective view and a top-down map with a spring
  • ·Lays itself out side by side on wide screens and stacked on tall ones