Light Rays

1"use client";
2 
3import * as React from "react";
4 
5export type LightRaysProps = React.HTMLAttributes<HTMLDivElement> & {
6  /** Number of rays in the fan. */
7  rayCount?: number;
8  /**
9   * Ray color, any CSS color string. Defaults to the `--color-primary` token.
10   */
11  color?: string;
12  /** Sweep speed multiplier. `1` is the calm default. */
13  speed?: number;
14  /** Base angle (deg) the fan points from. */
15  angle?: number;
16  /** Overall ray opacity, `0`–`1`. */
17  intensity?: number;
18  /** Film-grain amount, `0`–`1`. `0` disables the grain layer. */
19  grain?: number;
20};
21 
22/**
23 * Volumetric light rays — a soft fan of god-rays that slowly sweeps and
24 * breathes, with optional film grain. Pure CSS. Drop it as the first child of a
25 * `relative overflow-hidden` container; your content sits above it.
26 */
27const LightRays = React.forwardRef<HTMLDivElement, LightRaysProps>(
28  (
29    {
30      className,
31      style,
32      rayCount = 14,
33      color = "var(--primary)",
34      speed = 1,
35      angle = 0,
36      intensity = 0.6,
37      grain = 0.05,
38      ...props
39    },
40    ref,
41  ) => {
42    const rootRef = React.useRef<HTMLDivElement>(null);
43    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);
44    const grainId = `light-rays-grain-${React.useId().replace(/:/g, "")}`;
45 
46    const step = 360 / rayCount;
47    const rayColor = `color-mix(in oklab, ${color}, transparent 55%)`;
48 
49    return (
50      <div
51        ref={rootRef}
52        data-slot="light-rays"
53        aria-hidden="true"
54        className={`absolute inset-0 z-base overflow-hidden ${className ?? ""}`}
55        style={
56          {
57            "--rays-speed": `${14 / speed}s`,
58            "--rays-angle": `${angle}deg`,
59            "--rays-intensity": `${intensity}`,
60            ...style,
61          } as React.CSSProperties
62        }
63        {...props}
64      >
65        {/* Source glow at the top. */}
66        <div
67          className="absolute inset-0"
68          style={{
69            backgroundImage: `radial-gradient(ellipse 60% 40% at 50% -5%, color-mix(in oklab, ${color}, transparent 70%), transparent 70%)`,
70          }}
71        />
72 
73        {/* The ray fan — oversized so rotation never reveals an edge, blurred for
74            softness, and faded out toward the bottom. */}
75        <div
76          className="absolute inset-[-50%] origin-top motion-reduce:animate-none animate-light-rays-sweep [will-change:transform,opacity]"
77          style={{
78// … truncated