Light Rays

A volumetric light background drawn on canvas 2D: a set of rays pours out from a light-source anchor, each shimmering and swaying slowly, softly fading out at the far end to create a god-rays atmosphere. Foreground content can be layered on top.

Light Rays is a React god rays (volumetric light) background built with canvas 2D, laid out with Tailwind CSS and using Motion for reduced-motion detection. The beams come from a fixed seed, so they look the same on every render, and foreground content goes straight into children.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<LightRays/>

    </div>
  );
}

When to use

• Hero backgrounds for product launches or SaaS home pages
• Key visuals for events, exhibitions or concerts, with warm light for a stage feel
• Sparse layouts that need atmosphere, such as sign-in or waitlist pages
• Accent backgrounds behind a pricing or CTA section

Installation

npx webberui@latest add https://webberui.com/r/light-rays.en.json

Usage

import { LightRays } from "@/components/ui/light-rays";

<LightRays color="#ffe8b0" origin="top" className="h-[340px] w-full rounded-xl">
  {/* foreground content */}
</LightRays>

origin accepts "top", "top-left", "top-right", "left", "right", or "center", controlling the direction the rays pour from.

Examples

Centered hero

Put the foreground layout straight into className; followMouse nudges the light source toward the cursor.

<LightRays
  followMouse
  className="flex h-[520px] w-full flex-col items-center justify-center text-center"
>
  <h1 className="text-4xl font-semibold text-white">The new console is live</h1>
  <p className="mt-3 max-w-md text-neutral-300">Deploy history, traffic and error tracking on one screen.</p>
</LightRays>

Cool side light with grain

origin="left" casts the light in from the left. grain reduces banding across large gradients, and a smaller blur gives sharper beam edges.

<LightRays
  origin="left"
  color="#9ad7ff"
  rayCount={20}
  spread={40}
  blur={16}
  intensity={0.5}
  grain
  className="h-96 w-full rounded-2xl"
/>

Light background

The default background is bg-neutral-950. Classes are merged with cn, so passing another background colour overrides it; lower intensity and use a deeper ray colour to match.

<LightRays
  color="#f59e0b"
  intensity={0.35}
  speed={0.6}
  className="h-80 w-full bg-amber-50"
>
  {/* foreground content */}
</LightRays>

Props

Accessibility

• When the user has "reduce motion" enabled at the system level, only a static frame of rays is rendered and the animation loop is never entered
• The canvas is marked aria-hidden — decorative only, so it does not interfere with assistive technology
• The ray layer is pointer-events-none and never intercepts interaction with the foreground content

FAQ

Does it work with the Next.js App Router?

Yes. The file already starts with "use client", so import it from a Server Component page as usual. The canvas only starts drawing after mount, so the first render matches the SSR output and there is no hydration mismatch.

What about performance?

Frames are drawn with requestAnimationFrame, and an IntersectionObserver pauses the loop when the component scrolls out of view, resuming when it returns. The device pixel ratio is capped at 2 to keep the canvas size reasonable on high-density screens.

How do I change colour, density and speed?

color sets the light colour, rayCount the number of rays, spread the total fan angle, speed the animation speed multiplier and intensity the overall brightness. Softness comes from blur, which is a CSS filter: blur() on the canvas.

Does followMouse work on touch devices?

No. Only pointer events with pointerType of mouse are handled, so touch and pen input do not move the light source.

Does it respect reduced motion?

Yes. With "reduce motion" on, it draws a single static frame and never starts the animation loop.