86:I[903690,["/chat-static/_next/static/immutable/chunks/0z71t94qsshgw.js","/chat-static/_next/static/immutable/chunks/43l1-9kpkaaik.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3b4j-von_zpu6.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/00fzvwtf9a4fp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2ecvpv3_q12k0.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3mrb_b-kbj0sp.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0z71t94qsshgw.js","/chat-static/_next/static/immutable/chunks/43l1-9kpkaaik.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3b4j-von_zpu6.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/00fzvwtf9a4fp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2ecvpv3_q12k0.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3mrb_b-kbj0sp.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"SWRDataProvider"] 88: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 (

) } 7c:["$","$L86",null,{"chatId":"vJOULrOZMVP","children":["$","$L87",null,{"data":{"@\"active-block\",\"vJOULrOZMVP\",":{"id":"b_wOUThtNr9tG","messageId":"FnpQ2JYGFiXYyVQGtrWdltqxKDYGF4sL","source":"$88","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,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This