Meteor
Animated meteor falling from the sky with a fiery trail and impact explosion effect.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the meteor component:
npx shadcn@latest add https://www.terrae.dev/meteor.jsonMeteor Shower
Enable shower mode to create multiple meteors falling in sequence. Use showerCount to control how many meteors appear in each wave.
Intensity
Control the overall power of the meteor with intensity. Higher values create larger meteors with longer tails, more trail particles, and bigger impact explosions. Use values below 1 for subtle effects or above 1 for dramatic strikes.
Custom Colors
Customize the meteor appearance with meteorColor (core color), trailColor (tail particles), and impactColor (explosion flash). Create ice comets, green meteors, or any color variation.
Programmatic Control
Use the useMeteorControl hook to trigger, stop, and reset the meteor animation programmatically. The hook also exposes the current phase (falling, impact, fading, idle).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the meteor effect |
target | [number, number] | required | Impact point coordinates [longitude, latitude] |
size | number | 300 | Canvas size in pixels |
angle | number | 45 | Travel direction in degrees (45 = falling from upper-left) |
speed | number | 2000 | Fall duration in milliseconds |
intensity | number | 1 | Overall power multiplier affecting size, tail, and impact |
meteorColor | string | #ffaa00 | Core meteor color (hex) |
trailColor | string | #ff6600 | Trail particle color (hex) |
impactColor | string | #ffdd00 | Impact flash color (hex) |
tailLength | number | 0.4 | Tail length as fraction of size (0-1) |
meteorSize | number | 8 | Meteor core radius in pixels |
impactSize | number | 0.3 | Impact flash radius as fraction of size |
autoStart | boolean | true | Start animation on mount |
loop | boolean | false | Repeat the meteor animation |
loopDelay | number | 2000 | Delay in ms between loops |
shower | boolean | false | Enable meteor shower mode |
showerCount | number | 4 | Number of meteors in shower mode |
Use Cases
Impact Events
Visualize meteor strikes or impact craters
Gaming Maps
Add dramatic meteor effects to game worlds