Beams Background

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Beams Background
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { useEffect, useRef } from "react";
15import { cn } from "@/lib/utils";
16 
17interface AnimatedGradientBackgroundProps {
18  className?: string;
19  children?: React.ReactNode;
20  intensity?: "subtle" | "medium" | "strong";
21}
22 
23interface Beam {
24  x: number;
25  y: number;
26  width: number;
27  length: number;
28  angle: number;
29  speed: number;
30  opacity: number;
31  hue: number;
32  pulse: number;
33  pulseSpeed: number;
34}
35 
36function createBeam(width: number, height: number, isDarkMode: boolean): Beam {
37  const angle = -35 + Math.random() * 10;
38  const hueBase = isDarkMode ? 190 : 210;
39  const hueRange = isDarkMode ? 70 : 50;
40 
41  return {
42    x: Math.random() * width * 1.5 - width * 0.25,
43    y: Math.random() * height * 1.5 - height * 0.25,
44    width: 30 + Math.random() * 60,
45    length: height * 2.5,
46    angle,
47    speed: 0.6 + Math.random() * 1.2,
48    opacity: 0.12 + Math.random() * 0.16,
49    hue: hueBase + Math.random() * hueRange,
50    pulse: Math.random() * Math.PI * 2,
51    pulseSpeed: 0.02 + Math.random() * 0.03,
52  };
53}
54 
55export default function BeamsBackground({
56  className,
57  intensity = "strong",
58}: AnimatedGradientBackgroundProps) {
59  const canvasRef = useRef<HTMLCanvasElement>(null);
60  const beamsRef = useRef<Beam[]>([]);
61  const animationFrameRef = useRef<number>(0);
62  const MINIMUM_BEAMS = 20;
63  const isDarkModeRef = useRef<boolean>(false);
64 
65  const opacityMap = {
66    subtle: 0.7,
67    medium: 0.85,
68    strong: 1,
69  };
70 
71  useEffect(() => {
72    const canvas = canvasRef.current;
73    if (!canvas) return;
74 
75    const ctx = canvas.getContext("2d");
76    if (!ctx) return;
77 
78    // Check for dark mode
79    const updateDarkMode = () => {
80      isDarkModeRef.current =
81        document.documentElement.classList.contains("dark");
82    };
83 
84    const observer = new MutationObserver(updateDarkMode);
85    observer.observe(document.documentElement, {
86      attributes: true,
87      attributeFilter: ["class"],
88    });
89 
90    updateDarkMode();
91 
92    const updateCanvasSize = () => {
93      const dpr = window.devicePixelRatio || 1;
94      canvas.width = window.innerWidth * dpr;
95      canvas.height = window.innerHeight * dpr;
96      canvas.style.width = `${window.innerWidth}px`;
97      canvas.style.height = `${window.innerHeight}px`;
98// … truncated