Moon Terrain

A Three.js landscape with simplex-noise terrain, a glowing moon, distance fog, and twenty lights that follow the ground.

3D terrainmoonlightsimplex noise

Live

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/moon-terrain.json

Installs 1 files into components/shaders. Requires three, simplex-noise, @types/three. The CLI installs these dependencies.

Usage

Mount it behind your content

app/hero.tsx

import { MoonTerrain } from "@/components/shaders/moon-terrain/moon-terrain";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <MoonTerrain className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else.

API reference

Props

Prop	Type	Default	Description
paused	boolean	false	Pauses animation. Reduced motion is respected automatically.
className	string	—	Canvas classes.
style	CSSProperties	—	Inline canvas styles.

Keep exploring

More shaders

08

Dot Globe

A thousand dots turning in perspective.

Canvas 2Dperspectivepoint sphere

09

Floating Grove

A low-poly island where trees spring up, sway and reseed.

3D low-polyelastic growthsoft shadows