Lightning
Pro
Branching electric bolts that strike at random, with a glow and a screen flash. A click strikes the pointer.
Strike first
Click anywhere to call a bolt
Customize
0.8
0.5
1
#ffa585
Installation
Lightning is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy lightning.tsx into components/ui and run npm install motion.
Usage
import { Lightning } from "@/components/ui/lightning";
<section className="relative h-[600px] bg-ink-950">
<Lightning frequency={0.8} branches={0.5} intensity={1} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffa585" | Glow color as a hex value. The core of each bolt burns close to white. |
| frequency | number | 0.8 | Average strikes per second. |
| branches | number | 0.5 | How much each bolt forks, from 0 (single bolt) to 1 (heavily forked). |
| intensity | number | 1 | Brightness of the glow and the screen flash, from 0 to 2. |
| interactive | boolean | true | Strike a bolt down to the pointer on click. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion