Browse components
Beams Upstream
Thin light beams rise along the vertical lines of a softly masked grid, trailing a glowing tail. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/beams-upstreamFirst 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-upstream.json
Usage
import { BeamsUpstream } from "@/components/ui/beams-upstream";
<div className="relative h-96">
<BeamsUpstream color="#38bdf8" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#38bdf8" | Beam color. |
| gridColor | string | "#334155" | Grid line color. |
| gap | number | 56 | Grid cell size in px. |
| speed | number | 1 | Rise speed multiplier. |
| density | number | 4 | Beams on screen per 10 grid columns. |
| length | number | 0.28 | Beam length as a fraction of the height. |
| className | string | — | Extra classes for the root element. |