Light Tunnel Background

Luminous perspective rings recede into a dark vanishing point, with gentle pointer steering.

Luminous perspective rings recede into a dark vanishing point, with gentle pointer steering. Hover to steer the vanishing point. The background stays at its original size.

Light Tunnel Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the light-tunnel-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/light-tunnel-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { LightTunnelBackground } from "@/components/hangry-ui/shader/light-tunnel-background";

<LightTunnelBackground rings={5} speed={0.2} intensity={0.9}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">Into the light.</h2>
</LightTunnelBackground>

Props

Prop	Type	Default	Description
`rings`	`number`	`5`	Ring frequency, clamped to 2–12.
`speed`	`number`	`0.2`	Nonnegative ambient animation speed. Set 0 to freeze the ambient field.
`intensity`	`number`	`0.9`	Background brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Enable the pointer effect.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu