React Terrain Background
Satellite-style terrain background for React and Next.js — filled altitude bands morph from deep water blue through plains and hills to snowy peaks in a continuously flowing continental map.
React Terrain Background preview
A living satellite map, as if you were slowly drifting over an unknown continent — oceans fade into beaches, beaches climb through plains and forests, hills rise into rock and finally into snowcapped peaks. Each pixel's altitude is a three-octave noise field, quantised into discrete altitude tiers and pushed through a palette lookup so the result reads unmistakably as a topographic satellite view rather than a blurred gradient. Built in a single file on a tiny offscreen canvas with zero dependencies, it stays at 60fps on mid-range laptops while the bands gently morph to suggest a world that keeps rearranging itself. Ideal for mapping and geo SaaS hero sections, climate and data-viz landing pages, travel and outdoor product pages, or any premium surface that wants an earthly, grounded atmosphere.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the terrain background into my projectRelated Components
Topography
Contour-line topographic map
Fog
Drifting atmospheric fog layers
Mesh Gradient
Stripe-style blurred gradient blobs
Nebula
Deep-space cosmic cloud field
Aurora
Emerald northern-lights sheets
Hexagon
Honeycomb hex grid pattern
FAQ
Was this page helpful?
Sign in to leave feedback.
Swarm
Animated flocking swarm background for React and Next.js — triangular boids glide, split, and rejoin using the classic Craig Reynolds alignment, cohesion, and separation rules for emergent group motion.
Tesseract
Rotating 4D hypercube wireframe background for React and Next.js — 16 vertices and 32 edges projected from 4D to 2D, producing the unmistakable inside-out turning motion of a true tesseract.