Light Beams
Pro
Volumetric light rays falling from above, swaying slowly, with dust drifting through them.
Into the light
Customize
7
0.6
Origin
#ffa585
Installation
Light Beams is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy light-beams.tsx into components/ui and run npm install motion.
Usage
import { LightBeams } from "@/components/ui/light-beams";
<section className="relative h-[600px] bg-ink-950">
<LightBeams origin="top-left" count={7} spread={0.6} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffa585" | Light color as a hex value. |
| count | number | 7 | Number of beams. |
| spread | number | 0.6 | How wide the beams fan out, from 0 (parallel) to 1 (wide fan). |
| speed | number | 1 | Sway and shimmer speed multiplier. |
| origin | "top" | "top-left" | "top-right" | "top" | Where the light comes from. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion