Light Rays

1"use client";
2 
3import { useRef, useEffect, useMemo, useState, type CSSProperties } from "react";
4import * as THREE from "three";
5 
6interface AnimationConfig {
7  animate: boolean;
8  speed: number;
9}
10 
11interface SingleColorConfig {
12  mode: "single";
13  color: string;
14}
15 
16interface MultiColorConfig {
17  mode: "multi";
18  color1: string;
19  color2: string;
20}
21 
22interface RandomColorConfig {
23  mode: "random";
24}
25 
26type RaysColorConfig = SingleColorConfig | MultiColorConfig | RandomColorConfig;
27 
28interface RaysProps {
29  intensity?: number;
30  rays?: number;
31  reach?: number;
32  position?: number;
33  radius?: string;
34  backgroundColor?: string;
35  animation?: AnimationConfig;
36  raysColor?: RaysColorConfig;
37  style?: CSSProperties;
38  className?: string;
39}
40 
41const RAY_Y_POSITION_1 = -0.4;
42const RAY_Y_POSITION_2 = -0.5;
43 
44export default function Rays({
45  intensity = 13,
46  rays = 32,
47  reach = 16,
48  position = 50,
49  radius = "0px",
50  backgroundColor = "#000",
51  animation = { animate: true, speed: 10 },
52  raysColor = { mode: "single", color: "#639AFF" },
53  style,
54  className,
55}: RaysProps) {
56  const containerRef = useRef<HTMLDivElement>(null);
57  const meshRef = useRef<THREE.Mesh | null>(null);
58  const frameIdRef = useRef<number | undefined>(undefined);
59  const animationRef = useRef<AnimationConfig>(animation);
60 
61  const [isMounted, setIsMounted] = useState(false);
62 
63  useEffect(() => {
64    setIsMounted(true);
65    return () => setIsMounted(false);
66  }, []);
67 
68  useEffect(() => {
69    animationRef.current = animation;
70  }, [animation]);
71 
72  const [randomColor1RGB, randomColor2RGB] = useMemo(() => {
73    if (raysColor.mode === "random") {
74      const h = Math.random() * 360;
75      const s = 60 + Math.random() * 40;
76      return [hslToRgb(h, s, 50), hslToRgb(h, s, 65)];
77    }
78    return [
79      [1, 1, 1],
80      [1, 1, 1],
81    ] as [[number, number, number], [number, number, number]];
82  }, [raysColor.mode]);
83 
84  const [color1RGB, color2RGB] = useMemo((): [
85    [number, number, number],
86    [number, number, number],
87  ] => {
88    if (raysColor.mode === "random") {
89      return [randomColor1RGB, randomColor2RGB] as [
90        [number, number, number],
91        [number, number, number],
92      ];
93    }
94 
95    let color1 = "#fff";
96    let color2 = "#fff";
97 
98    if (raysColor.mode === "single") {
99      color1 = raysColor.color;
100      color2 = raysColor.color;
101    } else if (raysColor.mode === "multi") {
102      color1 = raysColor.color1;
103      color2 = raysColor.color2;
104    }
105 
106// … truncated