# Terrain Mesh

> Flying low over endless wireframe mountains that rise from the haze and stream past, coloured from valley to peak.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-26 · Live demo: https://www.motionkitui.com/components/terrain-mesh

## When to use it

Outdoor, travel, gaming, mapping and data products, synthwave-styled launches, and heroes that want depth without WebGL.

## How it works

The ground is value noise built from an integer hash, layered at three scales for ridges and smaller bumps. Forty rows stretch away from the camera; each is drawn as one line across the canvas, its points projected by dividing by depth, so far rows bunch towards the horizon. Rows move towards you as you fly and are coloured by their highest point, from valley to peak. They're drawn far to near, so close ridges overlap distant ones, and a haze gradient hides where new rows appear.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/terrain-mesh` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string]` | `["#0E7C86", "#A56D5B"]` | Valley and peak colours. |
| `speed` | `number` | `1` | Flying speed. 0 holds it still. |
| `height` | `number` | `0.6` | Mountain height, 0 to 1. |
| `interactive` | `boolean` | `true` | Bank towards the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame. It also stops drawing off screen.
- **Colour contrast: Pass.** The sky above the horizon stays clear, so ivory text there measures 16.9:1.