Lightning
Animated lightning bolt strikes with branching and flash effects.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the lightning component:
npx shadcn@latest add https://www.terrae.dev/lightning.jsonCustom Colors
Customize the lightning appearance with boltColor and flashColor. Create purple electrical storms, blue plasma bolts, or any color combination.
Manual Strike Control
Disable automatic strikes with autoStrike={false} and use the useLightningControl hook to trigger strikes programmatically. Perfect for user-triggered events or synchronized effects.
Lightning Storm
Create dramatic storm scenes by placing multiple lightning components with different strikeInterval values. Vary the size to create depth and randomness.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the lightning effect |
coordinates | [number, number] | required | Lightning location as [longitude, latitude] |
size | number | 200 | Lightning bolt size in pixels |
boltColor | string | #ffffff | Lightning bolt color |
flashColor | string | #e0e8ff | Flash effect color |
flashIntensity | number | 0.6 | Flash intensity (0-1) |
autoStrike | boolean | true | Enable automatic lightning strikes |
strikeInterval | number | 4000 | Time in ms between strikes (min: 500) |
boltWidth | number | 4 | Width of the lightning bolt |
branchProbability | number | 0.3 | Probability of bolt branching (0-1) |
Use Cases
Weather Visualization
Display active thunderstorms on weather maps
Gaming Maps
Add dramatic weather effects to game world maps