# Install

Topographic terrain rendered with WebGL. Generate a land or turn a real place into a topographic terrain.

```sh
npm install topographic
```

## Web component

```html
<script type="module">
  import 'topographic/element';
</script>

<topographic-view shape="dunes" line-count="30"></topographic-view>
```

## React

```sh
npm install topographic topographic-react
```

```tsx
import { Topography } from 'topographic-react';

export function Hero() {
  return (
    <Topography shape="granite" terrain={{ roughness: 0.3 }} style={{ height: '100vh' }}>
      <h1>Hello</h1>
    </Topography>
  );
}
```

## Vanilla JS

```js
import { createTopography } from 'topographic';

const topography = createTopography(document.querySelector('#hero'), {
  shape: 'gentle-summit',
  lines: { count: 36, indexEvery: 5 },
  theme: { mode: 'dark' },
});

topography.update({ terrain: { peaks: 3 } });   // live, clamped
const png = await topographic.snapshot({ width: 1920, height: 1080 });
topography.destroy();
```

## Colours

```css
topographic-view {
  --topographic-ink: #9fb3c8;      /* line colour */
  --topographic-paper: transparent; /* let the page show through */
}
```