Sandstorm
Atmospheric sandstorm effect with horizontal particle movement and reduced visibility.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the sandstorm component:
npx shadcn@latest add https://www.terrae.dev/sandstorm.jsonIntensity
Control the sandstorm intensity with the intensity prop. Higher values create denser particle clouds and reduced visibility. This affects both particle count and the haze overlay.
Wind Direction
Change the wind direction with windDirection (in degrees). Combine with windSpeed to control how fast particles move across the screen.
Custom Colors
Customize the sand color with the color prop. Use darker browns for dust storms or lighter tans for desert sand. Adjust visibility to control the haze intensity.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | auto-generated | Unique identifier for programmatic control via useSandstormControl |
intensity | number | 1 | Overall storm intensity (affects density and visibility) |
particleCount | number | 200 | Number of sand particles |
color | string | #d4a574 | Sand/dust particle color (hex) |
windSpeed | number | 4 | Wind speed multiplier |
windDirection | number | 0 | Wind direction in degrees (0 = east, 90 = south) |
visibility | number | 0.3 | Haze/visibility reduction (0-1) |
turbulence | number | 0.5 | Particle wobble/turbulence amount |
autoStart | boolean | true | Start animation on mount |
Use Cases
Weather Visualization
Display dust storms and sandstorms on weather maps
Desert Environments
Add atmospheric effects to desert region maps