Introducing Blocks
Map components that just work
Composable and animated React components that replace hundreds of lines of imperative map code with simple, declarative props.
Cyclone Tracking
Cyclone Tracking
Category 4
active
Meteor Impact
Meteor Alert
Impact detected
Grand Canyon, AZ
Lightning Storm
Storm Warning
Electrical storm
Central US
Route Tracking
Route Tracking
Manhattan, NY
8 steps
Wildfire Spread
Wildfire Alert
Paradise, CA
spreading
Made for builders
For design engineers, developers, and everyone who wants to ship stunning, modern maps — in no time.
Design Engineers
Create stunning map animations with smooth, GPU-accelerated performance. Cyclones, meteors, lightning — all ready to go.
Frontend Engineers
Drop composable components into your React app. Enjoy TypeScript-first APIs with full type safety.
Vibe Coders
Just vibe and ship. Prompt a map, drop in a cyclone, add some fire — no docs needed.
Write maps in minutes, not hours
See how Terrae replaces hundreds of lines of imperative code with clean, declarative components.
Mapbox GL JS
map.on("load", () => {
const el = document.createElement("div")
el.className = "marker"
el.style.width = "32px"
el.style.height = "32px"
el.style.borderRadius = "50%"
el.style.backgroundColor = "#3b82f6"
el.style.cursor = "pointer"
const popup = new mapboxgl.Popup({ offset: 25 })
.setHTML("<h3>New York</h3><p>The Big Apple</p>")
el.addEventListener("click", () => {
popup.addTo(map)
})
new mapboxgl.Marker(el)
.setLngLat([-74.006, 40.7128])
.setPopup(popup)
.addTo(map)
})Terrae
<MapMarker coordinates={[-74.006, 40.7128]}>
<MarkerContent>
<div className="size-8 rounded-full bg-blue-500" />
</MarkerContent>
<MarkerPopup>
<h3>New York</h3>
<p>The Big Apple</p>
</MarkerPopup>
</MapMarker>