Fire
Realistic animated fire effect with particle simulation.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the fire component:
npx shadcn@latest add https://www.terrae.dev/fire.jsonIntensity
Control the fire intensity with the intensity prop. Higher values create larger, more vigorous flames with wider particle spread. Combine with size to create fires of different scales.
Custom Colors
Customize the flame colors with baseColor (bottom of flame) and tipColor (top of flame). Create magical blue flames, green toxic fires, or any color combination.
Spreading Fire
Enable spread to simulate fire spreading across an area, like a forest fire. Control the spread behavior with spreadSpeed (time between new fire sources), spreadRadius (how far fire spreads), and maxSpreadPoints (maximum number of fire points).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the fire effect |
coordinates | [number, number] | required | Fire location as [longitude, latitude] |
size | number | 120 | Fire size in pixels |
intensity | number | 1 | Fire intensity (affects spread and velocity) |
particleCount | number | 50 | Number of fire particles |
baseColor | string | #ffcc00 | Base flame color (bottom) |
tipColor | string | #ff3300 | Tip flame color (top) |
spread | boolean | false | Enable fire spreading behavior |
spreadSpeed | number | 2000 | Time in ms between new fire points |
spreadRadius | number | 0.4 | Spread radius as fraction of size (0-1) |
maxSpreadPoints | number | 8 | Maximum number of fire sources |
autoStart | boolean | true | Start animation on mount |
Use Cases
Wildfire Visualization
Display active wildfire locations on emergency maps
Gaming Maps
Add fire effects to game world maps and battle scenes