Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsBackgrounds & visual effects

Topographic Background

Slowly reshaping contour lines traced by marching squares over a noise field, with one ember level.

Preview

Route planner

Every climb, before your boots are on

Elevation, water and shelter for 3,200 trails. The ember line marks 1,400 m.

Dense · no accent

+842 m

Total climb, Serra loop

Summit

1,993 m

Broad hills

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
levelsnumber11Number of contour levels.
scalenumber220Size of a terrain feature in px; larger is broader hills.
resolutionnumber8Sampling cell in px. Smaller is smoother and costs more.
speednumber1Drift speed multiplier. 0 holds the map still.
accentLevelnumber | false6Contour level drawn in ember, or false for none.
seednumber3Terrain seed.
fadebooleantrueFade the map out towards the edges.
canvasClassNamestring—Extra classes for the canvas layer.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗