react
Featured
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It uniquely fuses historical cartographic aesthetics with futuristic overlays, leverages free AWS Open Data terrain tiles without API keys, and includes advanced features like depth-of-field, radar scans, and cinematic camera tours.
Who it is for
- Cartography enthusiasts and map hobbyists
- Game developers needing procedural or real-world terrain
- Geographers and educators for topographic visualization
- Data visualization and UI/UX designers
Use cases
- Exploring real-world terrain for any location on Earth
- Generating procedural mountain ranges for game environments
- Creating cinematic flyover tours for presentations or demos
- Teaching topographic concepts with interactive contour lines and spot elevations
Strengths
- Free real-world elevation data via AWS Open Data with no API keys required
- Extensive real-time parameter customization through a GUI (map overlay, materials, camera, HUD, performance)
- Distinctive visual style merging vintage topographic sheets with a sci-fi UI
- Built-in cinematic camera tours with Catmull-Rom path smoothing and depth of field
Considerations
- Requires WebGL support and may have performance constraints at high zoom/terrain detail
- Depends on the Terrain Tiles dataset, which may have limited resolution for some regions
- No built-in offline mode; elevation data is fetched live from AWS
README quick start
MONOLITH — interactive 3D topographic map
An interactive, real-time 3D terrain map in the style of a vintage USGS topographic sheet, crossed with a sci-fi FUI overlay. Load real-world elevation data for anywhere on Earth, or generate procedural mountain ranges — then explore them with contour lines, hypsometric tinting, survey grids, spot elevations, clickable peak markers, radar scans, and cinematic camera tours.
Live demo: https://kaolti.github.io/monolith-terrain/
How to use
| Action | How |
|---|---|
| Look around | Drag to orbit, scroll to zoom, right-drag to pan |
| Inspect a peak / basin | Click a PK-xx / DEP-xx marker — the camera flies in and a data panel opens |
| Go back | Click ✕ on the panel — the camera returns to where you were |
| Cinematic flyover | Open Tour, pick from / to, press ▶ start tour (drag to cancel mid-flight) |
| Radar scan | HUD → trigger scan — a wave sweeps the terrain and physically lifts the surface |
| Change location | Terrain source → location presets, or Custom + latitude/longitude, then load location |
| Save your settings | copy parameters puts the full state on your clipboard as JSON |
Terrain sources
- real world (DEM) — fetches elevation tiles for the chosen coordinates and rebuilds the map with true landforms. Spot elevations and peak data show real values.
- detail (zoom) — z10–14: how large an area you get (z12 ≈ 28 km across, z13 ≈ 14 km)
- vertical scale — relief exaggeration; real proportions read flat at map scale, so 1.5–3 is typical
- procedural noise — seeded multi-octave simplex terrain with a hovering monolith and an excavated instrument basin. Every knob (octaves, warp, amplitude…) is live.
Parameter folders
Map overlay (hypsometric gradient stops, contour interval/color, survey grid) · Surface material (roughness, micro bump) · Camera & focus (real depth of field with autofocus) · Look (exposure, contrast, grain, fog) · HUD (accent/ink colors, scan wave shape + displacement) · Motion / Tour (fly-to easing, tour path smoothing, banking, look-ahead) · Performance (render scale, static shadows, shadow resolution) · Light (sun azimuth/elevation, shadow softness).
Run locally
npm install
npm run dev # http://localhost:5173
npm run build # static build in dist/
No API ke
Description
Interactive 3D topographic map — real-world elevation data rendered as a vintage USGS topo sheet with a sci-fi HUD. Three.js.
Related repositories
Similar projects matched by category, topics, and programming language.
tandpfun
Featured
wardrobe
A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.
mshumer
Featured
Claude-of-Duty
A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.