50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1b29,"use client"; /** * @author: @dorianbaffier * @description: Beams Background * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { motion } from "motion/react"; import { useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; interface AnimatedGradientBackgroundProps { className?: string; children?: React.ReactNode; intensity?: "subtle" | "medium" | "strong"; } interface Beam { x: number; y: number; width: number; length: number; angle: number; speed: number; opacity: number; hue: number; pulse: number; pulseSpeed: number; } function createBeam(width: number, height: number, isDarkMode: boolean): Beam { const angle = -35 + Math.random() * 10; const hueBase = isDarkMode ? 190 : 210; const hueRange = isDarkMode ? 70 : 50; return { x: Math.random() * width * 1.5 - width * 0.25, y: Math.random() * height * 1.5 - height * 0.25, width: 30 + Math.random() * 60, length: height * 2.5, angle, speed: 0.6 + Math.random() * 1.2, opacity: 0.12 + Math.random() * 0.16, hue: hueBase + Math.random() * hueRange, pulse: Math.random() * Math.PI * 2, pulseSpeed: 0.02 + Math.random() * 0.03, }; } export default function BeamsBackground({ className, intensity = "strong", }: AnimatedGradientBackgroundProps) { const canvasRef = useRef(null); const beamsRef = useRef([]); const animationFrameRef = useRef(0); const MINIMUM_BEAMS = 20; const isDarkModeRef = useRef(false); const opacityMap = { subtle: 0.7, medium: 0.85, strong: 1, }; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; // Check for dark mode const updateDarkMode = () => { isDarkModeRef.current = document.documentElement.classList.contains("dark"); }; const observer = new MutationObserver(updateDarkMode); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); updateDarkMode(); const updateCanvasSize = () => { const dpr = window.devicePixelRatio || 1; canvas.width = window.innerWidth * dpr; canvas.height = window.innerHeight * dpr; canvas.style.width = `${window.innerWidth}px`; canvas.style.height = `${window.innerHeight}px`; ctx.scale(dpr, dpr); const totalBeams = MINIMUM_BEAMS * 1.5; beamsRef.current = Array.from({ length: totalBeams }, () => createBeam(canvas.width, canvas.height, isDarkModeRef.current) ); }; updateCanvasSize(); window.addEventListener("resize", updateCanvasSize); function resetBeam(beam: Beam, index: number, totalBeams: number) { if (!canvas) return beam; const column = index % 3; const spacing = canvas.width / 3; const hueBase = isDarkModeRef.current ? 190 : 210; const hueRange = isDarkModeRef.current ? 70 : 50; beam.y = canvas.height + 100; beam.x = column * spacing + spacing / 2 + (Math.random() - 0.5) * spacing * 0.5; beam.width = 100 + Math.random() * 100; beam.speed = 0.5 + Math.random() * 0.4; beam.hue = hueBase + (index * hueRange) / totalBeams; beam.opacity = 0.2 + Math.random() * 0.1; return beam; } function drawBeam(ctx: CanvasRenderingContext2D, beam: Beam) { ctx.save(); ctx.translate(beam.x, beam.y); ctx.rotate((beam.angle * Math.PI) / 180); const pulsingOpacity = beam.opacity * (0.8 + Math.sin(beam.pulse) * 0.2) * opacityMap[intensity]; const gradient = ctx.createLinearGradient(0, 0, 0, beam.length); const saturation = isDarkModeRef.current ? "85%" : "75%"; const lightness = isDarkModeRef.current ? "65%" : "45%"; gradient.addColorStop( 0, `hsla(${beam.hue}, ${saturation}, ${lightness}, 0)` ); gradient.addColorStop( 0.1, `hsla(${beam.hue}, ${saturation}, ${lightness}, ${ pulsingOpacity * 0.5 })` ); gradient.addColorStop( 0.4, `hsla(${beam.hue}, ${saturation}, ${lightness}, ${pulsingOpacity})` ); gradient.addColorStop( 0.6, `hsla(${beam.hue}, ${saturation}, ${lightness}, ${pulsingOpacity})` ); gradient.addColorStop( 0.9, `hsla(${beam.hue}, ${saturation}, ${lightness}, ${ pulsingOpacity * 0.5 })` ); gradient.addColorStop( 1, `hsla(${beam.hue}, ${saturation}, ${lightness}, 0)` ); ctx.fillStyle = gradient; ctx.fillRect(-beam.width / 2, 0, beam.width, beam.length); ctx.restore(); } function animate() { if (!(canvas && ctx)) return; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.filter = "blur(35px)"; const totalBeams = beamsRef.current.length; beamsRef.current.forEach((beam, index) => { beam.y -= beam.speed; beam.pulse += beam.pulseSpeed; // Reset beam when it goes off screen if (beam.y + beam.length < -100) { resetBeam(beam, index, totalBeams); } drawBeam(ctx, beam); }); animationFrameRef.current = requestAnimationFrame(animate); } animate(); return () => { window.removeEventListener("resize", updateCanvasSize); if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } observer.disconnect(); }; }, [intensity]); return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/beams-background.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/beams-background.tsx"}],"className":"h-[70svh] min-h-80"}]]}]