Light Ray Background

Curved white strands with inward light pulses, gentle pointer steering, and a click surge.

Curved white strands converge into depth, with glowing pulses traveling inward. Move the pointer to gently steer the tunnel, or press to send a surge through it. Designed for full-width sections with subdued lighting and room for readable content.

Light Ray 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-ray-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-ray-background.json

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

How to use

tsx

import { LightRayBackground } from "@/components/hangry-ui/shader/light-ray-background";

<LightRayBackground speed={0.1} interactive className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">Follow the light.</h2>
</LightRayBackground>

Props

Prop	Type	Default	Description
`speed`	`number`	`0.1`	Nonnegative pulse animation speed. Set 0 to stop pulse travel.
`intensity`	`number`	`1`	Background brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Steer the strands with the pointer and trigger a surge on press.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes on the container.

Dependencies

Motion
vgpu