Browse components
Light Pillar
A tall column of light filled with slowly swirling volumetric smoke. WebGL.
Light Pillar
Installation
npx shadcn@latest add @glint-ui/light-pillarFirst 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/light-pillar.json
Usage
import { LightPillar } from "@/components/ui/light-pillar";
<div className="relative h-96">
<LightPillar topColor="#a78bfa" bottomColor="#22d3ee" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| topColor | string | "#a78bfa" | Color at the top of the pillar. |
| bottomColor | string | "#22d3ee" | Color at the bottom of the pillar. |
| width | number | 0.32 | Width as a fraction of the container height. |
| intensity | number | 1 | Brightness. |
| speed | number | 1 | Animation speed multiplier. |
| twist | number | 2.5 | How much the smoke swirls around the axis. |
| angle | number | 0 | Rotation in degrees. |
| className | string | — | Extra classes for the root element. |