Steam
Rising steam effect with wispy particle animation for map locations.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the steam component:
npx shadcn@latest add https://www.terrae.dev/steam.jsonIntensity
Control the steam density with the intensity prop. Higher values create denser, more visible steam. Combine with size to create steam plumes of different scales.
Custom Colors
Customize the steam color with the color prop. Create white water vapor, yellowish sulfuric steam, or greenish toxic fumes.
Programmatic Control
Use the useSteamControl hook to start, stop, or adjust steam intensity programmatically.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | auto-generated | Unique identifier for programmatic control via useSteamControl |
coordinates | [number, number] | required | Steam location as [longitude, latitude] |
size | number | 100 | Steam plume size in pixels |
intensity | number | 1 | Steam density and opacity |
particleCount | number | 40 | Number of steam particles |
color | string | #ffffff | Steam color (hex) |
drift | number | 0.4 | Horizontal drift amount |
riseSpeed | number | 1 | Vertical rise speed |
autoStart | boolean | true | Start animation on mount |
Use Cases
Geothermal Activity
Display hot springs, geysers, and volcanic vents
Industrial Sites
Show factories, power plants, or cooling towers