Light Rays
A free light rays background for atmospheric dark sections.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Light Rays is a free light rays background CSS React component for Next.js, React and Tailwind that casts three blurred volumetric beams from the top edge. Plain CSS keyframes sway each beam around its authored angle using transforms only, while the glow, blur and gradient remain static.
A subtle noise overlay dithers the wide falloffs so dark screens stay free of visible colour bands. The decorative fill layer ignores pointer input and focus, pauses whenever it is fully offscreen or the document is hidden, and becomes a complete static composition when the user prefers reduced motion.
Volumetric light
Where light becomes atmosphere
Three dithered beams sway from the top edge while this foreground copy stays crisp, readable and completely still.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-raysUsage
import { BgRays } from "@/components/bg-rays";
export function Example() {
return (
<section className="relative overflow-hidden bg-background">
<BgRays />
<div className="relative z-10">
<h2 className="text-4xl font-semibold text-foreground">
Your content here
</h2>
<p className="text-muted">Soft beams sway behind this copy.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Light Rays exposes two Tier 3 tokens. --rays-color controls the beam and glow colour with the exact Template Empire accent and vanilla ring fallback, while --rays-opacity controls the peak beam opacity. Override either token from :root or any ancestor:
:root {
--rays-color: var(--color-accent-400, var(--ring));
--rays-opacity: 0.32;
}Frequently asked questions
- Is Light Rays free for commercial use?
- Yes. Light Rays is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Light Rays accessible and performant?
- Yes. The entire layer is decorative, aria-hidden and unable to receive pointer input or focus. Its three loops animate transforms only, keep blur and dithering static, pause while offscreen or in a hidden document, and stop completely under reduced motion.
- How do I customise the ray colour and intensity?
- Override --rays-color with a semantic colour token and set --rays-opacity to the desired peak beam opacity. The built-in nested colour fallback keeps the component usable in both Template Empire and vanilla shadcn themes.