Volcano
Animated volcanic eruption with lava, ash plume, and particle effects.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the volcano component:
npx shadcn@latest add https://www.terrae.dev/volcano.jsonIntensity
Control the eruption intensity with the intensity prop. Higher values create larger lava bursts with more particles. Combine with size to create volcanoes of different scales.
Custom Colors
Customize the lava and ash colors with lavaColor and ashColor. Create blue volcanic eruptions, green toxic blasts, or any color combination.
Eruption Phases
Control the eruption state with the phase prop. The volcano supports three phases: dormant (inactive cone with dim glow), rumbling (shaking cone with pulsing glow and reduced particles), and erupting (full eruption). Use the useVolcanoControl hook to switch phases dynamically.
Lava Spread
Enable spread to simulate lava spreading outward from the volcano base. Control the spread behavior with spreadSpeed (time between new lava sources), spreadRadius (how far lava spreads), and maxSpreadPoints (maximum number of lava pools). Spread only activates during the erupting phase.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the volcano effect |
coordinates | [number, number] | required | Volcano location as [longitude, latitude] |
size | number | 200 | Volcano size in pixels |
intensity | number | 0.4 | Eruption intensity (0.1 to 1) |
particleCount | number | 100 | Number of eruption particles |
lavaColor | string | #FF4500 | Lava and ember particle color |
ashColor | string | #555555 | Ash cloud particle color |
phase | "dormant" | "rumbling" | "erupting" | erupting | Eruption phase controlling visual behavior |
spread | boolean | false | Enable lava spreading from volcano base |
spreadSpeed | number | 2000 | Time in ms between new lava spread sources |
spreadRadius | number | 0.3 | Spread radius as fraction of size (0-1) |
maxSpreadPoints | number | 6 | Maximum number of lava spread sources |
autoStart | boolean | true | Start eruption on mount |
Use Cases
Geological Visualization
Display active volcanoes on geological survey maps
Disaster Monitoring
Visualize eruption risk levels on emergency response dashboards