Cyclone
Animated cyclone funnel with swirling particles and debris.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the cyclone component:
npx shadcn@latest add https://www.terrae.dev/cyclone.jsonIntensity Levels
Control the cyclone strength with the intensity prop. Lower values create weaker cyclones with slower rotation, while higher values produce violent storms with faster swirling and wider spread.
Programmatic Control
Use the useCycloneControl hook to start, stop, or dynamically change the cyclone intensity. The cyclone smoothly transitions between intensity levels.
Movement
Make the cyclone travel along a path using the path prop. Control the travel time with duration and enable continuous movement with loop.
Growing Storm
Use the setScale method to dynamically change the cyclone size. This example shows a hurricane forming over the ocean and growing larger as it approaches the Florida coast, simulating real storm intensification.
Rotation Speed
Use the setRotationSpeed method to dynamically change how fast the cyclone spins.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the cyclone |
coordinates | [number, number] | required | Cyclone location as [longitude, latitude] |
path | [number, number][] | - | Array of coordinates for cyclone movement |
duration | number | 10000 | Time in milliseconds to traverse the path |
loop | boolean | false | Repeat path movement continuously |
size | number | 200 | Cyclone size in pixels |
intensity | number | 1 | Cyclone strength (0-2) |
scale | number | 1 | Cyclone scale multiplier (0.2-2) |
particleCount | number | 120 | Number of particles |
funnelColor | string | #8b9dc3 | Funnel cloud color |
debrisColor | string | #5c4033 | Debris and dust color |
rotationSpeed | number | 1 | Rotation speed multiplier |
autoStart | boolean | true | Start animation on mount |
Use Cases
Weather Maps
Visualize cyclone warnings and storm tracking
Emergency Services
Display active severe weather on emergency maps