Tsunami
Animated tsunami wave effect with incoming wave from the sea, crashing foam, and debris particles.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the tsunami component:
npx shadcn@latest add https://www.terrae.dev/tsunami.jsonOrigin & Target
The tsunami uses two coordinate props: origin (where the wave starts, in the sea) and target (where the wave crashes, on land). The direction is calculated automatically from origin to target, ensuring the wave always travels from sea to shore.
Speed & Height
Adjust the wave behavior with speed (time in ms for the wave to reach the target) and waveHeight (height as a fraction of size). Faster waves create more dramatic impacts.
Custom Colors
Customize the wave appearance with waterColor (main wave color) and foamColor (foam and spray color). Create dark storm waves, tropical blue waves, or any color variation.
Programmatic Control
Use the useTsunamiControl hook to trigger, stop, and reset the wave animation programmatically. The hook also exposes the current phase (approaching, crashing, receding, idle).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | auto-generated | Unique identifier for programmatic control via useTsunamiControl |
origin | [number, number] | required | Wave starting point in the sea [longitude, latitude] |
target | [number, number] | required | Wave crash point on land [longitude, latitude] |
size | number | 300 | Canvas size in pixels |
waveHeight | number | 0.4 | Wave height as fraction of size (0-1) |
waveWidth | number | 0.8 | Wave width as fraction of size (0-1) |
speed | number | 3000 | Time in ms for wave to reach target |
waterColor | string | #0077be | Main wave color (hex) |
foamColor | string | #ffffff | Foam and spray color (hex) |
particleCount | number | 40 | Number of foam/debris particles on crash |
autoStart | boolean | true | Start animation on mount |
loop | boolean | false | Repeat the wave animation |
loopDelay | number | 2000 | Delay in ms between loops |
Use Cases
Tsunami Simulation
Visualize tsunami waves for emergency planning and drills
Coastal Hazards
Show storm surge and coastal flooding risks