Flying low over endless wireframe mountains that rise from the haze and stream past, coloured from valley to peak.
Over the horizon
Customize
Usage
import { TerrainMesh } from "@/components/motionkit/terrain-mesh";
<TerrainMesh
className="h-[36rem] rounded-3xl pt-24 text-center"
>
<h1>Your hero</h1>
</TerrainMesh>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flight
Runs on its own
Outdoor, travel, gaming, mapping and data products, synthwave-styled launches, and heroes that want depth without WebGL.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/terrain-mesh. It saves the file to components/motionkit and installs its dependencies.
Terrain Mesh is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame. It also stops drawing off screen.
Over the horizon
Customize
Usage
import { TerrainMesh } from "@/components/motionkit/terrain-mesh";
<TerrainMesh
className="h-[36rem] rounded-3xl pt-24 text-center"
>
<h1>Your hero</h1>
</TerrainMesh>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flight
Runs on its own
The live preview is free to explore. Plus unlocks the source for Terrain Mesh and every other premium component.