Glowing rounded frames fly out of the distance in an endless tunnel. The vanishing point leans toward the pointer.
Night Transit
Streaming Friday at 22:00
npx shadcn@latest add https://hyperblur.dev/r/bg-light-tunnel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-light-tunnel.tsx.
import { BgLightTunnel } from "@/components/hyperblur/bg-light-tunnel"
<div className="relative h-96 bg-black"><BgLightTunnel /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Color of even rings, the rails and the core glow. |
| secondaryColor | string | "#b16cff" | Color of odd rings. |
| rings | number | 22 | Number of rings in the tunnel. |
| speed | number | 1 | Flight speed. |
| thickness | number | 1.6 | Base ring stroke width. Rings get thicker as they approach. |
| cornerRadius | number | 10 | Corner radius of the nearest rings in pixels. |
| follow | number | 0.7 | How far the vanishing point follows the pointer, from 0 (fixed center) to 1. |