Browse components
Light Tunnel
An endless flight through a bending tunnel of glowing rings and spark-lit lines. WebGL.
Light Tunnel
Installation
npx shadcn@latest add @glint-ui/light-tunnelFirst 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-tunnel.json
Usage
import { LightTunnel } from "@/components/ui/light-tunnel";
<div className="relative h-96">
<LightTunnel colorA="#38bdf8" colorB="#f472b6" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | string | "#38bdf8" | First ring color. |
| colorB | string | "#f472b6" | Second ring color, blended by depth. |
| speed | number | 1 | Flight speed multiplier. |
| density | number | 2 | Rings per unit of depth. |
| lines | number | 16 | Lengthwise lines; 0 hides them. |
| twist | number | 1 | Spiral of the lengthwise lines. |
| glow | number | 1 | Line glow strength. |
| interactive | boolean | true | Vanishing point drifts toward the cursor. |
| className | string | — | Extra classes for the root element. |