React Light Rays Background

React light rays background with WebGL rendering. Features customizable ray origins, mouse interaction, pulsing effects, and volumetric lighting using OGL.

React

OGL

Creating cinematic lighting effects?

Join our Discord community for help from other developers working with WebGL volumetric lighting.

Remember those breathtaking moments in movies when dramatic light rays pierce through smoke or mist, creating that cinematic atmosphere that makes everything feel epic? The way sunlight streams through clouds or spotlights cut through darkness with visible beams that seem to have weight and presence? Most interfaces settle for flat gradients or simple shadows that feel lifeless. This React component recreates that volumetric lighting magic with mathematically accurate light ray simulation, complete with mouse interaction, pulsing effects, and customizable origins that make your interface feel like a movie scene.

Volumetric light rays with mouse interaction

Watch cinematic light beams emanate from customizable origins with realistic falloff:

Loading component...

'use client';import { useRef, useEffect, useState, forwardRef } from "react";// @ts-ignoreimport { Renderer, Program, Triangle, Mesh } from "ogl";import { cn } from '@/lib/utils';export type RaysOrigin =  | "top-center"  | "top-left"  | "top-right"  | "right"  | "left"  | "bottom-center"  | "bottom-right"  | "bottom-left";export interface LightRaysBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {  raysOrigin?: RaysOrigin;  raysColor?: string;  raysSpeed?: number;  lightSpread?: number;  rayLength?: number;  pulsating?: boolean;  fadeDistance?: number;  saturation?: number;  followMouse?: boolean;  mouseInfluence?: number;  noiseAmount?: number;  distortion?: number;}const DEFAULT_COLOR = "#ffffff";const hexToRgb = (hex: string): [number, number, number] => {  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);  return m    ? [        parseInt(m[1], 16) / 255,        parseInt(m[2], 16) / 255,        parseInt(m[3], 16) / 255,      ]    : [1, 1, 1];};const getAnchorAndDir = (  origin: RaysOrigin,  w: number,  h: number): { anchor: [number, number]; dir: [number, number] } => {  const outside = 0.2;  switch (origin) {    case "top-left":      return { anchor: [0, -outside * h], dir: [0, 1] };    case "top-right":      return { anchor: [w, -outside * h], dir: [0, 1] };    case "left":      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };    case "right":      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };    case "bottom-left":      return { anchor: [0, (1 + outside) * h], dir: [0, -1] };    case "bottom-center":      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };    case "bottom-right":      return { anchor: [w, (1 + outside) * h], dir: [0, -1] };    default: // "top-center"      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };  }};export const LightRaysBackground = forwardRef<HTMLDivElement, LightRaysBackgroundProps>(({  className,  raysOrigin = "top-center",  raysColor = DEFAULT_COLOR,  raysSpeed = 1,  lightSpread = 1,  rayLength = 2,  pulsating = false,  fadeDistance = 1.0,  saturation = 1.0,  followMouse = true,  mouseInfluence = 0.1,  noiseAmount = 0.0,  distortion = 0.0,  ...props}, ref) => {  // props already contains only DOM props after destructuring above  const domProps = props;  const containerRef = useRef<HTMLDivElement>(null);  const uniformsRef = useRef<any>(null);  const rendererRef = useRef<Renderer | null>(null);  const mouseRef = useRef({ x: 0.5, y: 0.5 });  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });  const animationIdRef = useRef<number | null>(null);  const meshRef = useRef<any>(null);  const cleanupFunctionRef = useRef<(() => void) | null>(null);  const [isVisible, setIsVisible] = useState(false);  const observerRef = useRef<IntersectionObserver | null>(null);  useEffect(() => {    if (!containerRef.current) return;    observerRef.current = new IntersectionObserver(      (entries) => {        const entry = entries[0];        setIsVisible(entry.isIntersecting);      },      { threshold: 0.1 }    );    observerRef.current.observe(containerRef.current);    return () => {      if (observerRef.current) {        observerRef.current.disconnect();        observerRef.current = null;      }    };  }, []);  useEffect(() => {    if (!isVisible || !containerRef.current) return;    if (cleanupFunctionRef.current) {      cleanupFunctionRef.current();      cleanupFunctionRef.current = null;    }    const initializeWebGL = async () => {      if (!containerRef.current) return;      await new Promise((resolve) => setTimeout(resolve, 10));      if (!containerRef.current) return;      const renderer = new Renderer({        dpr: Math.min(window.devicePixelRatio, 2),        alpha: true,      });      rendererRef.current = renderer;      const gl = renderer.gl;      gl.canvas.style.width = "100%";      gl.canvas.style.height = "100%";      while (containerRef.current.firstChild) {        containerRef.current.removeChild(containerRef.current.firstChild);      }      containerRef.current.appendChild(gl.canvas);      const vert = `attribute vec2 position;varying vec2 vUv;void main() {  vUv = position * 0.5 + 0.5;  gl_Position = vec4(position, 0.0, 1.0);}`;      const frag = `precision highp float;uniform float iTime;uniform vec2  iResolution;uniform vec2  rayPos;uniform vec2  rayDir;uniform vec3  raysColor;uniform float raysSpeed;uniform float lightSpread;uniform float rayLength;uniform float pulsating;uniform float fadeDistance;uniform float saturation;uniform vec2  mousePos;uniform float mouseInfluence;uniform float noiseAmount;uniform float distortion;varying vec2 vUv;float noise(vec2 st) {  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);}float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,                  float seedA, float seedB, float speed) {  vec2 sourceToCoord = coord - raySource;  vec2 dirNorm = normalize(sourceToCoord);  float cosAngle = dot(dirNorm, rayRefDirection);  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;    float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));  float distance = length(sourceToCoord);  float maxDistance = iResolution.x * rayLength;  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);    float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;  float baseStrength = clamp(    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),    0.0, 1.0  );  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);    vec2 finalRayDir = rayDir;  if (mouseInfluence > 0.0) {    vec2 mouseScreenPos = mousePos * iResolution.xy;    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));  }  vec4 rays1 = vec4(1.0) *               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,                           1.5 * raysSpeed);  vec4 rays2 = vec4(1.0) *               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,                           1.1 * raysSpeed);  fragColor = rays1 * 0.5 + rays2 * 0.4;  if (noiseAmount > 0.0) {    float n = noise(coord * 0.01 + iTime * 0.1);    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);  }  float brightness = 1.0 - (coord.y / iResolution.y);  fragColor.x *= 0.1 + brightness * 0.8;  fragColor.y *= 0.3 + brightness * 0.6;  fragColor.z *= 0.5 + brightness * 0.5;  if (saturation != 1.0) {    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);  }  fragColor.rgb *= raysColor;}void main() {  vec4 color;  mainImage(color, gl_FragCoord.xy);  gl_FragColor  = color;}`;      const uniforms = {        iTime: { value: 0 },        iResolution: { value: [1, 1] },        rayPos: { value: [0, 0] },        rayDir: { value: [0, 1] },        raysColor: { value: hexToRgb(raysColor) },        raysSpeed: { value: raysSpeed },        lightSpread: { value: lightSpread },        rayLength: { value: rayLength },        pulsating: { value: pulsating ? 1.0 : 0.0 },        fadeDistance: { value: fadeDistance },        saturation: { value: saturation },        mousePos: { value: [0.5, 0.5] },        mouseInfluence: { value: mouseInfluence },        noiseAmount: { value: noiseAmount },        distortion: { value: distortion },      };      uniformsRef.current = uniforms;      const geometry = new Triangle(gl);      const program = new Program(gl, {        vertex: vert,        fragment: frag,        uniforms,      });      const mesh = new Mesh(gl, { geometry, program });      meshRef.current = mesh;      const updatePlacement = () => {        if (!containerRef.current || !renderer) return;        renderer.dpr = Math.min(window.devicePixelRatio, 2);        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;        renderer.setSize(wCSS, hCSS);        const dpr = renderer.dpr;        const w = wCSS * dpr;        const h = hCSS * dpr;        uniforms.iResolution.value = [w, h];        const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);        uniforms.rayPos.value = anchor;        uniforms.rayDir.value = dir;      };      const loop = (t: number) => {        if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {          return;        }        uniforms.iTime.value = t * 0.001;        if (followMouse && mouseInfluence > 0.0) {          const smoothing = 0.92;          smoothMouseRef.current.x =            smoothMouseRef.current.x * smoothing +            mouseRef.current.x * (1 - smoothing);          smoothMouseRef.current.y =            smoothMouseRef.current.y * smoothing +            mouseRef.current.y * (1 - smoothing);          uniforms.mousePos.value = [            smoothMouseRef.current.x,            smoothMouseRef.current.y,          ];        }        try {          renderer.render({ scene: mesh });          animationIdRef.current = requestAnimationFrame(loop);        } catch (error) {          console.warn("WebGL rendering error:", error);          return;        }      };      window.addEventListener("resize", updatePlacement);      updatePlacement();      animationIdRef.current = requestAnimationFrame(loop);      cleanupFunctionRef.current = () => {        if (animationIdRef.current) {          cancelAnimationFrame(animationIdRef.current);          animationIdRef.current = null;        }        window.removeEventListener("resize", updatePlacement);        if (renderer) {          try {            const canvas = renderer.gl.canvas;            const loseContextExt =              renderer.gl.getExtension("WEBGL_lose_context");            if (loseContextExt) {              loseContextExt.loseContext();            }            if (canvas && canvas.parentNode) {              canvas.parentNode.removeChild(canvas);            }          } catch (error) {            console.warn("Error during WebGL cleanup:", error);          }        }        rendererRef.current = null;        uniformsRef.current = null;        meshRef.current = null;      };    };    initializeWebGL();    return () => {      if (cleanupFunctionRef.current) {        cleanupFunctionRef.current();        cleanupFunctionRef.current = null;      }    };  }, [    isVisible,    raysOrigin,    raysColor,    raysSpeed,    lightSpread,    rayLength,    pulsating,    fadeDistance,    saturation,    followMouse,    mouseInfluence,    noiseAmount,    distortion,  ]);  useEffect(() => {    if (!uniformsRef.current || !containerRef.current || !rendererRef.current)      return;    const u = uniformsRef.current;    const renderer = rendererRef.current;    u.raysColor.value = hexToRgb(raysColor);    u.raysSpeed.value = raysSpeed;    u.lightSpread.value = lightSpread;    u.rayLength.value = rayLength;    u.pulsating.value = pulsating ? 1.0 : 0.0;    u.fadeDistance.value = fadeDistance;    u.saturation.value = saturation;    u.mouseInfluence.value = mouseInfluence;    u.noiseAmount.value = noiseAmount;    u.distortion.value = distortion;    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;    const dpr = renderer.dpr;    const { anchor, dir } = getAnchorAndDir(raysOrigin, wCSS * dpr, hCSS * dpr);    u.rayPos.value = anchor;    u.rayDir.value = dir;  }, [    raysColor,    raysSpeed,    lightSpread,    raysOrigin,    rayLength,    pulsating,    fadeDistance,    saturation,    mouseInfluence,    noiseAmount,    distortion,  ]);  useEffect(() => {    const handleMouseMove = (e: MouseEvent) => {      if (!containerRef.current || !rendererRef.current) return;      const rect = containerRef.current.getBoundingClientRect();      const x = (e.clientX - rect.left) / rect.width;      const y = (e.clientY - rect.top) / rect.height;      mouseRef.current = { x, y };    };    if (followMouse) {      window.addEventListener("mousemove", handleMouseMove);      return () => window.removeEventListener("mousemove", handleMouseMove);    }  }, [followMouse]);  return (    <div      ref={(node) => {        containerRef.current = node;        if (typeof ref === 'function') ref(node);        else if (ref) ref.current = node;      }}      className={cn("w-full h-full pointer-events-none z-[3] overflow-hidden relative", className)}      {...domProps}    />  );});LightRaysBackground.displayName = 'LightRaysBackground';

Built for React applications with TypeScript and Next.js. Uses WebGL through OGL for hardware-accelerated volumetric rendering that maintains 60fps with complex ray calculations and distance falloffs. The mathematical lighting model creates authentic ray scattering while mouse interaction adds dynamic realism. Perfect for hero sections, cinematic interfaces, or any application needing dramatic atmospheric lighting. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/light-rays-background.json

npx shadcn@latest add https://www.shadcn.io/registry/light-rays-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/light-rays-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/light-rays-background.json

Why flat lighting feels amateur

Developers add a linear gradient or drop shadow and consider the lighting complete. Maybe they throw in a subtle glow effect. The problem? Flat lighting doesn't create depth or atmosphere. It doesn't communicate drama or guide the viewer's attention like professional cinematography.

Volumetric light rays change everything. They tap into our instinctive response to dramatic lighting—the way our eyes are naturally drawn to light sources, how atmospheric perspective creates depth, the emotional impact of rays cutting through darkness. The mathematical precision of ray strength calculations and falloff functions creates lighting that feels physically authentic.

This component handles the complex WebGL shader calculations automatically. Ray origin positioning, directional vectors, distance-based falloffs, and mouse influence all work together seamlessly. The result feels like professional lighting design, not a simple CSS effect.

Features

Volumetric ray calculation using mathematically accurate light scattering and falloff algorithms
Eight ray origins including corners, sides, and centers for flexible light source positioning
Mouse interaction with smooth tracking and configurable influence strength
Pulsating effects with customizable frequency for breathing light animations
Distance-based falloff creating realistic light attenuation over distance
Color saturation control for fine-tuning the lighting mood and intensity
Noise integration for organic light variation and atmospheric effects
Ray distortion with sine wave modulation for dynamic beam movement
Performance optimization with intersection observer and cleanup management
TypeScript support with complete prop forwarding and type safety

API Reference

LightRaysBackground

Prop	Type	Default	Description
`raysOrigin`	`RaysOrigin`	`"top-center"`	Light source position (8 predefined locations)
`raysColor`	`string`	`"#ffffff"`	Hex color for the light rays
`raysSpeed`	`number`	`1`	Animation speed multiplier for ray movement
`lightSpread`	`number`	`1`	Ray cone angle - higher values create wider spread
`rayLength`	`number`	`2`	Maximum ray distance as screen width multiplier
`pulsating`	`boolean`	`false`	Enable rhythmic pulsing animation
`fadeDistance`	`number`	`1.0`	Distance-based fade intensity (0.1 to 2.0)
`saturation`	`number`	`1.0`	Color saturation level (0.0 = grayscale, 2.0 = hyper-saturated)
`followMouse`	`boolean`	`true`	Enable mouse tracking for ray direction
`mouseInfluence`	`number`	`0.1`	Mouse influence strength (0.0 to 1.0)
`noiseAmount`	`number`	`0.0`	Random noise intensity for organic variation
`distortion`	`number`	`0.0`	Sine wave distortion strength for ray movement
`className`	`string`	-	Additional CSS classes for the container
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props supported

Ray Origins

Choose from eight strategic light source positions:

Origin	Position	Visual Effect	Use Case
`"top-center"`	Top middle (default)	Classic sunbeam from above	Hero sections, divine light
`"top-left"`	Top left corner	Angular dramatic lighting	Photography-style side lighting
`"top-right"`	Top right corner	Complementary side lighting	Balanced composition
`"left"`	Middle left edge	Horizontal side lighting	Spotlight effects
`"right"`	Middle right edge	Stage lighting from wings	Theater-style illumination
`"bottom-center"`	Bottom middle	Upward stage lighting	Footer illumination
`"bottom-left"`	Bottom left corner	Ground-up lighting	Dramatic under-lighting
`"bottom-right"`	Bottom right corner	Corner accent lighting	Asymmetrical composition

Effect Combinations

// Cinematic hero lighting
<LightRaysBackground
  raysOrigin="top-center"
  raysColor="#ffffff"
  lightSpread={1.5}
  pulsating={true}
  followMouse={true}
/>

// Dramatic side lighting
<LightRaysBackground
  raysOrigin="left"
  raysColor="#ff6b35"
  lightSpread={0.8}
  rayLength={3.0}
  distortion={0.3}
/>

// Subtle atmospheric effect
<LightRaysBackground
  raysColor="#f0f9ff"
  raysSpeed={0.5}
  fadeDistance={0.5}
  noiseAmount={0.2}
  mouseInfluence={0.05}
/>

// High-energy club lighting
<LightRaysBackground
  raysOrigin="bottom-center"
  raysColor="#8b5cf6"
  pulsating={true}
  raysSpeed={2.0}
  distortion={1.0}
/>

Mathematical lighting model

Ray Strength Calculation: Uses dot product mathematics to calculate the angular relationship between ray direction and pixel position, combined with distance-based falloff functions for realistic light attenuation.

Volumetric Scattering: The shader simulates how light scatters through atmospheric particles using layered sine waves with different frequencies and phases, creating the visible beam effect.

Distance Falloff: Implements physically-based inverse square law approximations for authentic light diminishing over distance, combined with customizable fade curves for artistic control.

Mouse Integration: Uses smooth interpolation between default ray direction and mouse-influenced direction, with configurable influence strength for subtle or dramatic interactive effects.

Performance considerations

Intersection Observer: The component only renders when visible in the viewport, automatically pausing expensive shader calculations when off-screen to conserve battery and GPU resources.

WebGL Context Management: Proper initialization and cleanup prevents memory leaks. The component handles WebGL context loss gracefully and provides fallback behavior for unsupported devices.

Shader Complexity: The fragment shader performs trigonometric calculations per pixel. On lower-end devices, consider reducing rayLength or lightSpread to decrease computational load.

Mouse Smoothing: Uses exponential smoothing (92% retention) to prevent jittery mouse movements from causing performance issues or visual artifacts in the ray calculations.

Common gotchas

Pointer Events: The container uses pointer-events-none by default to allow interaction with underlying content. Override with pointer-events-auto if you need the rays to capture mouse events.

Z-Index Layering: Default z-[3] ensures rays appear above most content. Adjust the z-index in your className if you need different layering behavior with complex interfaces.

Color Blending: Light rays work best over dark backgrounds. On light backgrounds, consider using darker ray colors or blend modes like mix-blend-mode: multiply for better visibility.

Ray Direction: Origins outside the visible area (by 20%) ensure rays enter the viewport naturally. This means the actual light source position is slightly off-screen for more realistic beam angles.

Animation Continuity: The pulsing and distortion effects use time-based functions. Rapidly changing props during animation may cause brief visual discontinuities until the next animation cycle stabilizes.

React Light Rays Background

Volumetric light rays with mouse interaction

Installation

Why flat lighting feels amateur

Features

API Reference

LightRaysBackground

Ray Origins

Effect Combinations

Mathematical lighting model

Performance considerations

Common gotchas

You might also like

Aurora Background

Shooting Stars

Sparkles Background

Background Beams

Questions developers actually ask

On this page

React Light Rays Background