Explosion
Animated explosion burst effect with radial particles and flash.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the explosion component:
npx shadcn@latest add https://www.terrae.dev/explosion.jsonNuclear Type
Set type="nuclear" for a dramatic mushroom cloud explosion. Features a rising fireball, expanding mushroom cap, shockwave ring, and longer-lasting particles. Automatically increases size and duration for maximum impact.
Custom Colors
Customize the explosion colors with coreColor (center flash) and outerColor (particle trails). Create fiery, electric, or magical explosion effects.
Multiple Explosions
Compose multiple MapExplosion instances in the same area with staggered timing to simulate a barrage. Each explosion runs independently with its own size, duration, and loop delay.
Programmatic Control
Use useExplosionControl hook to trigger explosions programmatically. Set autoStart=false to prevent the explosion from firing on mount, then call control.trigger() when needed.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the explosion |
coordinates | [number, number] | required | Explosion location as [longitude, latitude] |
type | "burst" | "nuclear" | "burst" | Explosion style - burst (radial) or nuclear (mushroom cloud) |
size | number | 150 | Explosion size in pixels (nuclear min: 200) |
particleCount | number | 60 | Number of explosion particles (nuclear min: 80) |
duration | number | 3000 | Total visible time from appear to fade (nuclear min: 4000) |
coreColor | string | #ffffff | Center flash color |
outerColor | string | #ff6600 | Particle trail color |
autoStart | boolean | true | Trigger explosion on mount |
loop | boolean | false | Repeat explosion continuously |
loopDelay | number | 3000 | Delay between loops in milliseconds |
Use Cases
Gaming Maps
Impact effects for strategy and battle games
Event Triggers
Visual feedback for user interactions or achievements