Rain Effect
Add realistic rain and weather effects to your maps.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the rain effect component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-rain.jsonThis example uses createZoomInterpolation() to gradually reveal the rain effect as users zoom in, preventing it from being visible at lower zoom levels.
Note: Rain effect requires Mapbox GL JS v3.9 or higher.
Custom Rain Properties
Customize the rain appearance with various properties including density, color, intensity, droplet size, and wind direction.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
density | number | expression | 0.5 | Rain intensity/amount (0-1 or Mapbox expression) |
intensity | number | 1.0 | Overall effect strength (0-1) |
color | string | "#a8adbc" | Rain droplet color (hex format) |
opacity | number | 0.7 | Rain transparency (0-1) |
vignette | number | expression | 1.0 | Edge darkening effect strength (0-1) |
vignetteColor | string | "#464646" | Color for edge darkening |
direction | [number, number] | [0, 80] | Wind direction vector [x, y] |
dropletSize | [number, number] | [2.6, 18.2] | Droplet size range [min, max] |
distortionStrength | number | 0.7 | Visual distortion intensity (0-1) |
centerThinning | number | 0 | Screen coverage (0 = full screen) |
Zoom-Based Reveal
Use the createZoomInterpolation() helper function to create zoom-based expressions for properties like density and vignette. This gradually reveals the effect as users zoom in.
import { MapRain, createZoomInterpolation } from "@/registry/map";
<MapRain
density={createZoomInterpolation(0.5, 11, 13)}
vignette={createZoomInterpolation(1.0, 11, 13)}
/>This creates an interpolation that starts at zoom level 11 (value: 0) and reaches the target value at zoom 13.
Notes
- Requires Mapbox GL JS v3.9 or higher
- Works best with tilted maps (pitch between 45-75 degrees)
- For optimal performance, use zoom-based expressions to hide effect at low zoom levels
- Rain effect is automatically removed when the component unmounts
- Only one rain effect can be active per map instance