# topographic > Animated contour lines, like those on a topographic map, as the background of a web page. One WebGL shader, seven terrain styles, readable settings. Live playground: https://topographic.yahyapak.dev/ The playground page holds its state in short query params. Only values that differ from a base are written. The base is the style's defaults, or a named look from the dock (`look=night-lobes`). Keys: `s` style, `seed`, one short key per parameter (`lc` line count, `lw` line width, `lo` line opacity, `ix` bold line every, `pk` peaks, `sp` spread, `rg` roughness, `sh` sharpness, `tr` terracing, `va` variant, `sd` speed, `wp` warp, `sk` sparkle, `an` anchor, `fd` centre fade), `m` theme (light, dark or auto), `ink` and `paper` colours (hex without `#`), `mode=3d`, `ex` extent (endless is the default, so only `ex=block` is written), `ev` elevation, `dl` detail, `ql` quality (auto is the default, so only `low`, `medium` or `high` is written), `az` azimuth, `ce` camera elevation, `rd` radius, `cm` camera motion, `px` and `pz` the pan (only when off centre). The library's default camera (azimuth 349.7, camera elevation 33.6, radius 1.92) is not written. The page writes that URL a few times a second at most, and again when a drag or pinch ends, so a gesture does not call `replaceState` on every frame. Examples: `?s=dunes&lc=24`, `?look=night-lobes&mode=3d&cm=orbit`, `?s=gentle-summit&seed=4&m=dark&ink=9fb0cc&paper=0b0b0d`. A real place is `?region=west,south,east,north` (or JSON `{"bbox":[west,south,east,north]}`). Named places: `place=istanbul`, `place=cyprus`, `place=matterhorn`, `place=geirangerfjord`, `place=grand-canyon`, `place=yosemite`, `place=torres-del-paine`, `place=fuji`, `place=everest`, `place=kilimanjaro`. Place params combine with the settings params, for example `?look=night-lobes&lc=40&place=istanbul`. While those heights are still loading, the page sets `data-loading=terrain`, hides the default terrain, and `get_region` returns `loading: true` with message `Loading terrain`. In the playground, drag in 3D to orbit. A horizontal drag in 2D changes `layout.anchor` (0 keeps the summit to the side, 1 centres it). The dock shows terrain previews, fades the end that still has more, and a chevron scrolls to the next one. Theme, shuffle and the two colours sit in a 2×2 grid. The link tab shows a labelled still of the terrain the link opens. The page's share image is `og-a.png`, a dark granite still, with `twitter:card` set to `summary_large_image`. ## Packages - [topographic](https://www.npmjs.com/package/topographic): core and the `` web component - [topographic-react](https://www.npmjs.com/package/topographic-react): React component and hook ## Docs - [Install](docs/install.md) - [API](docs/api.md) - [Parameters, styles and presets](docs/params.md) - [WebMCP tools](docs/webmcp.md) - [Everything in one file](llms-full.txt) ## WebMCP tools on the playground page - `list_styles` (read-only): Lists the terrain styles and the presets, with ids, names and descriptions. - `get_settings` (read-only): Returns the current settings: the full resolved object, the minimal config JSON (only non-default values), and the graphics tier actually drawing (quality, fps, frameMs, mesh). - `set_settings`: Changes the background. Takes a partial settings object; values are merged into the current settings, clamped to their ranges, and applied live. Returns the resulting config and any adjustments made. - `randomize`: Picks a new random seed. With style: true, also picks a random style. - `take_screenshot` (read-only): Renders the current background to a PNG and returns it as a data URL. Defaults to 1200 px wide at the screen aspect ratio. With region, only that slice of the current view, at full detail (for example a phone-shaped strip). - `record_video` (read-only): Renders a short 3D clip of the current terrain with a moving camera. Returns an MP4 or WebM data URL. Defaults to a 2 second orbit at 640×360. - `get_embed_code` (read-only): Returns code that reproduces the current background: html (web component), react, vanilla (JS) or json (config). - `get_install_instructions` (read-only): Returns install and setup instructions for npm, the web component, React or vanilla JS. Place tools: - `set_region`: Sets the map region that becomes the terrain. Give place (istanbul, cyprus, matterhorn, geirangerfjord, grand-canyon, yosemite, torres-del-paine, fuji, everest, kilimanjaro) or a bbox in degrees. The same values are written to the page URL as ?place= for a named place, or ?region= for a box. Like Apply in the Map popover, it switches to 3D with the map terrain view: 36 lines, width 0, opacity 0.9, an index line every 4, a block at elevation 0.12, and the camera at azimuth 341.8, elevation 39.3, radius 1.32. Each landscape (every place but Istanbul and Cyprus) brings its own camera angle and elevation, and Cyprus its own look. - `get_region` (read-only): Returns the current region, its height range, load status and the URL query. loading is true and message is "Loading terrain" while a shared place is still fetching, before the default terrain is shown. - `clear_region`: Removes the region and returns to the procedural terrain and to the lines, camera, extent and elevation from before the region. Details and input schemas: [docs/webmcp.md](docs/webmcp.md). ## Quick start ```html ```