"use client" import { useEffect, useState, type CSSProperties } from "react" import { motion } from "motion/react" import { cn } from "@/lib/utils" interface LightRaysProps extends React.HTMLAttributes { ref?: React.Ref count?: number color?: string blur?: number speed?: number length?: string } type LightRay = { id: string left: number rotate: number width: number swing: number delay: number duration: number intensity: number } const createRays = (count: number, cycle: number): LightRay[] => { if (count <= 0) return [] return Array.from({ length: count }, (_, index) => { const left = 8 + Math.random() * 84 const rotate = -28 + Math.random() * 56 const width = 160 + Math.random() * 160 const swing = 0.8 + Math.random() * 1.8 const delay = Math.random() * cycle const duration = cycle * (0.75 + Math.random() * 0.5) const intensity = 0.6 + Math.random() * 0.5 return { id: `${index}-${Math.round(left * 10)}`, left, rotate, width, swing, delay, duration, intensity, } }) } const Ray = ({ left, rotate, width, swing, delay, duration, intensity, }: LightRay) => { return ( ) } export function LightRays({ className, style, count = 7, color = "rgba(160, 210, 255, 0.2)", blur = 36, speed = 14, length = "70vh", ref, ...props }: LightRaysProps) { const [rays, setRays] = useState([]) const cycleDuration = Math.max(speed, 0.1) useEffect(() => { setRays(createRays(count, cycleDuration)) }, [count, cycleDuration]) return (

{rays.map((ray) => ( ))}

) }

Light Rays

Instalação

Dependências