Browse components
Beams
Soft volumetric light beams slanting across a dark scene, drifting and breathing through noisy haze. WebGL.
Beams
Installation
npx shadcn@latest add @glint-ui/beamsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/beams.json
Usage
import { Beams } from "@/components/ui/beams";
<div className="relative h-96">
<Beams color="#9fb4ff" count={9} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#9fb4ff" | Light color of the beams. |
| count | number | 9 | Number of beams. |
| angle | number | 28 | Slant in degrees. |
| speed | number | 1 | Drift speed multiplier. |
| intensity | number | 1 | Overall brightness. |
| haze | number | 0.7 | How much drifting haze breaks up the beams. |
| className | string | — | Extra classes for the root element. |