93:I[903690,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 95:T16de,[V0_FILE]typescriptreact:file="components/kokonutui/beams-background.tsx" "use client" import type React from "react" import { useEffect, useRef } from "react" import { motion } from "motion/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): Beam { const angle = -35 + Math.random() * 10 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: angle, speed: 0.6 + Math.random() * 1.2, opacity: 0.12 + Math.random() * 0.16, hue: 190 + Math.random() * 70, 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 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 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)) } 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 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 = 190 + (index * 70) / 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) // Calculate pulsing opacity const pulsingOpacity = beam.opacity * (0.8 + Math.sin(beam.pulse) * 0.2) * opacityMap[intensity] const gradient = ctx.createLinearGradient(0, 0, 0, beam.length) // Enhanced gradient with multiple color stops gradient.addColorStop(0, `hsla(${beam.hue}, 85%, 65%, 0)`) gradient.addColorStop(0.1, `hsla(${beam.hue}, 85%, 65%, ${pulsingOpacity * 0.5})`) gradient.addColorStop(0.4, `hsla(${beam.hue}, 85%, 65%, ${pulsingOpacity})`) gradient.addColorStop(0.6, `hsla(${beam.hue}, 85%, 65%, ${pulsingOpacity})`) gradient.addColorStop(0.9, `hsla(${beam.hue}, 85%, 65%, ${pulsingOpacity * 0.5})`) gradient.addColorStop(1, `hsla(${beam.hue}, 85%, 65%, 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) } } }, [intensity]) return (

) } 89:["$","$L93",null,{"chatId":"vJOULrOZMVP","children":["$","$L94",null,{"data":{"@\"active-block\",\"vJOULrOZMVP\",":{"id":"b_wOUThtNr9tG","messageId":"FnpQ2JYGFiXYyVQGtrWdltqxKDYGF4sL","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"vJOULrOZMVP\",":false},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This