Browse components
Plasma Wave
A glowing horizontal band of plasma wrapped in flickering electric filaments; it bends toward the cursor. WebGL.
Plasma Wave
Installation
npx shadcn@latest add @glint-ui/plasma-waveFirst 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/plasma-wave.json
Usage
import { PlasmaWave } from "@/components/ui/plasma-wave";
<div className="relative h-96">
<PlasmaWave colorA="#38bdf8" colorB="#a855f7" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | string | "#38bdf8" | Color on one end of the band. |
| colorB | string | "#a855f7" | Color on the other end. |
| speed | number | 1 | Animation speed multiplier. |
| amplitude | number | 1 | Wave height. |
| thickness | number | 1 | Band thickness. |
| filaments | number | 6 | Electric filaments around the core. |
| intensity | number | 1 | Brightness. |
| className | string | — | Extra classes for the root element. |