LED Background

A luminous LED matrix with a sweeping highlight and a soft glow around the pointer.

A luminous LED matrix with a sweeping highlight and a soft glow around the pointer. Designed for full-width sections with subdued lighting and room for readable content.

LED 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 led-background component from Hangry UI to this project.

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

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

How to use

tsx

import { LedBackground } from "@/components/hangry-ui/shader/led-background";

<LedBackground speed={1} interactive className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">Light up your next idea.</h2>
</LedBackground>

Props

Prop	Type	Default	Description
`speed`	`number`	`1`	Nonnegative animation speed multiplier. Set 0 to stop the automatic sweep.
`intensity`	`number`	`0.65`	Background brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Brighten LEDs around the pointer.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes on the container.

Dependencies

Motion
vgpu