Light Rays

1"use client"
2 
3import { useEffect, useState, type CSSProperties } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface LightRaysProps extends React.HTMLAttributes<HTMLDivElement> {
9  ref?: React.Ref<HTMLDivElement>
10  count?: number
11  color?: string
12  blur?: number
13  speed?: number
14  length?: string
15}
16 
17type LightRay = {
18  id: string
19  left: number
20  rotate: number
21  width: number
22  swing: number
23  delay: number
24  duration: number
25  intensity: number
26}
27 
28const createRays = (count: number, cycle: number): LightRay[] => {
29  if (count <= 0) return []
30 
31  return Array.from({ length: count }, (_, index) => {
32    const left = 8 + Math.random() * 84
33    const rotate = -28 + Math.random() * 56
34    const width = 160 + Math.random() * 160
35    const swing = 0.8 + Math.random() * 1.8
36    const delay = Math.random() * cycle
37    const duration = cycle * (0.75 + Math.random() * 0.5)
38    const intensity = 0.6 + Math.random() * 0.5
39 
40    return {
41      id: `${index}-${Math.round(left * 10)}`,
42      left,
43      rotate,
44      width,
45      swing,
46      delay,
47      duration,
48      intensity,
49    }
50  })
51}
52 
53const Ray = ({
54  left,
55  rotate,
56  width,
57  swing,
58  delay,
59  duration,
60  intensity,
61}: LightRay) => {
62  return (
63    <motion.div
64      className="pointer-events-none absolute -top-[12%] left-[var(--ray-left)] h-[var(--light-rays-length)] w-[var(--ray-width)] origin-top -translate-x-1/2 rounded-full bg-linear-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-0 mix-blend-screen blur-[var(--light-rays-blur)]"
65      style={
66        {
67          "--ray-left": `${left}%`,
68          "--ray-width": `${width}px`,
69        } as CSSProperties
70      }
71      initial={{ rotate: rotate }}
72      animate={{
73        opacity: [0, intensity, 0],
74        rotate: [rotate - swing, rotate + swing, rotate - swing],
75      }}
76      transition={{
77        duration: duration,
78        repeat: Infinity,
79        ease: "easeInOut",
80        delay: delay,
81        repeatDelay: duration * 0.1,
82      }}
83    />
84  )
85}
86 
87export function LightRays({
88  className,
89  style,
90  count = 7,
91  color = "rgba(160, 210, 255, 0.2)",
92  blur = 36,
93  speed = 14,
94  length = "70vh",
95  ref,
96  ...props
97}: LightRaysProps) {
98  const [rays, setRays] = useState<LightRay[]>([])
99  const cycleDuration = Math.max(speed, 0.1)
100 
101  useEffect(() => {
102    setRays(createRays(count, cycleDuration))
103  }, [count, cycleDuration])
104 
105  return (
106    <div
107      ref={ref}
108// … truncated