Photon Corridor

Monochrome light trails stream through a dark perspective corridor.

Smooth monochrome dots form evenly spaced, aligned rows along perspective walls toward a dark vanishing point. Random individual lines light up with traveling highlights, bright cores, and soft bloom inspired by Light Ray. Move the pointer to gently steer the corridor.

Photon Corridor 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 photon-corridor-background component from Hangry UI to this project.

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

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

How to use

tsx

import { PhotonCorridorBackground } from "@/components/hangry-ui/shader/photon-corridor-background";

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

Props

Prop	Type	Default	Description
`speed`	`number`	`0.2`	Nonnegative animation speed. Set 0 to freeze the ambient flow.
`intensity`	`number`	`0.9`	Color brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Gently steer the vanishing point with the pointer.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu