[V0_FILE]typescriptreact:file="components/cosmic-shader-background.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useCallback } from "react" interface Particle { x: number y: number vx: number vy: number life: number maxLife: number size: number hue: number } interface InteractionPoint { x: number y: number strength: number decay: number } export function CosmicShaderBackground() { const canvasRef = useRef(null) const animationRef = useRef() const particlesRef = useRef([]) const interactionPointsRef = useRef([]) const mouseRef = useRef({ x: 0, y: 0, isActive: false }) const timeRef = useRef(0) // Configuration parameters const config = { particleCount: 150, flowFieldStrength: 0.02, gravityStrength: 0.5, interactionRadius: 150, glowIntensity: 0.8, turbulenceScale: 0.003, colorShiftSpeed: 0.001, } // Perlin noise implementation for smooth random values const noise = (x: number, y: number, time: number) => { const n = Math.sin(x * 0.01 + time * 0.001) * Math.cos(y * 0.01 + time * 0.001) return (n + 1) * 0.5 } // Initialize particles const initParticles = (width: number, height: number) => { const particles: Particle[] = [] for (let i = 0; i < config.particleCount; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, life: Math.random(), maxLife: 0.5 + Math.random() * 0.5, size: 1 + Math.random() * 3, hue: Math.random() * 360, }) } return particles } // Update particle physics const updateParticles = (particles: Particle[], width: number, height: number, time: number) => { const mouse = mouseRef.current const interactions = interactionPointsRef.current particles.forEach((particle) => { // Apply flow field based on noise const noiseX = noise(particle.x, particle.y, time) - 0.5 const noiseY = noise(particle.x + 1000, particle.y + 1000, time) - 0.5 particle.vx += noiseX * config.flowFieldStrength particle.vy += noiseY * config.flowFieldStrength // Mouse interaction - gravity well effect if (mouse.isActive) { const dx = mouse.x - particle.x const dy = mouse.y - particle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < config.interactionRadius && distance > 0) { const force = (config.interactionRadius - distance) / config.interactionRadius const angle = Math.atan2(dy, dx) particle.vx += Math.cos(angle) * force * config.gravityStrength particle.vy += Math.sin(angle) * force * config.gravityStrength } } // Interaction points (ripples from clicks) interactions.forEach((point) => { const dx = point.x - particle.x const dy = point.y - particle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 200 && distance > 0) { const force = (point.strength * (200 - distance)) / 200 const angle = Math.atan2(dy, dx) particle.vx -= Math.cos(angle) * force * 0.1 particle.vy -= Math.sin(angle) * force * 0.1 } }) // Apply velocity with damping particle.x += particle.vx particle.y += particle.vy particle.vx *= 0.98 particle.vy *= 0.98 // Boundary wrapping if (particle.x < 0) particle.x = width if (particle.x > width) particle.x = 0 if (particle.y < 0) particle.y = height if (particle.y > height) particle.y = 0 // Update life cycle particle.life += 0.005 if (particle.life > particle.maxLife) { particle.life = 0 particle.hue = Math.random() * 360 } // Color shifting particle.hue += config.colorShiftSpeed * 60 if (particle.hue > 360) particle.hue -= 360 }) // Update interaction points interactionPointsRef.current = interactions.filter((point) => { point.strength *= point.decay return point.strength > 0.01 }) } // Render particles with glow effects const renderParticles = (ctx: CanvasRenderingContext2D, particles: Particle[], time: number) => { // Create gradient background const gradient = ctx.createRadialGradient( ctx.canvas.width / 2, ctx.canvas.height / 2, 0, ctx.canvas.width / 2, ctx.canvas.height / 2, Math.max(ctx.canvas.width, ctx.canvas.height), ) const hueShift = (time * 0.05) % 360 gradient.addColorStop(0, `hsla(${240 + hueShift}, 70%, 5%, 0.1)`) gradient.addColorStop(0.5, `hsla(${280 + hueShift}, 60%, 3%, 0.05)`) gradient.addColorStop(1, `hsla(${320 + hueShift}, 50%, 1%, 0.02)`) ctx.fillStyle = gradient ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) // Render particles with glow particles.forEach((particle) => { const alpha = Math.sin(particle.life * Math.PI) * config.glowIntensity const size = particle.size * (1 + Math.sin(particle.life * Math.PI) * 0.5) // Outer glow const glowGradient = ctx.createRadialGradient(particle.x, particle.y, 0, particle.x, particle.y, size * 8) glowGradient.addColorStop(0, `hsla(${particle.hue}, 80%, 60%, ${alpha * 0.8})`) glowGradient.addColorStop(0.3, `hsla(${particle.hue}, 70%, 50%, ${alpha * 0.4})`) glowGradient.addColorStop(1, `hsla(${particle.hue}, 60%, 40%, 0)`) ctx.fillStyle = glowGradient ctx.beginPath() ctx.arc(particle.x, particle.y, size * 8, 0, Math.PI * 2) ctx.fill() // Core particle ctx.fillStyle = `hsla(${particle.hue}, 90%, 70%, ${alpha})` ctx.beginPath() ctx.arc(particle.x, particle.y, size, 0, Math.PI * 2) ctx.fill() }) // Render energy connections between nearby particles ctx.strokeStyle = `hsla(${hueShift + 180}, 60%, 50%, 0.1)` ctx.lineWidth = 0.5 for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x const dy = particles[i].y - particles[j].y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 100) { const alpha = ((100 - distance) / 100) * 0.2 ctx.strokeStyle = `hsla(${(particles[i].hue + particles[j].hue) / 2}, 70%, 60%, ${alpha})` ctx.beginPath() ctx.moveTo(particles[i].x, particles[i].y) ctx.lineTo(particles[j].x, particles[j].y) ctx.stroke() } } } } // Animation loop const animate = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return timeRef.current += 1 ctx.clearRect(0, 0, canvas.width, canvas.height) updateParticles(particlesRef.current, canvas.width, canvas.height, timeRef.current) renderParticles(ctx, particlesRef.current, timeRef.current) console.log("[v0] Mouse active:", mouseRef.current.isActive, "Position:", mouseRef.current.x, mouseRef.current.y) animationRef.current = requestAnimationFrame(animate) } // Handle mouse/touch interactions const handleMouseMove = useCallback((e: MouseEvent | TouchEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const clientX = "touches" in e ? e.touches[0]?.clientX : e.clientX const clientY = "touches" in e ? e.touches[0]?.clientY : e.clientY if (clientX !== undefined && clientY !== undefined) { mouseRef.current = { x: (clientX - rect.left) * (canvas.width / rect.width), y: (clientY - rect.top) * (canvas.height / rect.height), isActive: true, } } }, []) const handleMouseLeave = useCallback(() => { mouseRef.current.isActive = false }, []) const handleClick = useCallback((e: MouseEvent | TouchEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const clientX = "touches" in e ? e.touches[0]?.clientX : e.clientX const clientY = "touches" in e ? e.touches[0]?.clientY : e.clientY if (clientX !== undefined && clientY !== undefined) { const x = (clientX - rect.left) * (canvas.width / rect.width) const y = (clientY - rect.top) * (canvas.height / rect.height) interactionPointsRef.current.push({ x, y, strength: 10, decay: 0.95, }) } }, []) // Setup and cleanup useEffect(() => { const canvas = canvasRef.current if (!canvas) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight particlesRef.current = initParticles(canvas.width, canvas.height) } resizeCanvas() animate() const handleWindowMouseMove = (e: MouseEvent) => handleMouseMove(e) const handleWindowMouseLeave = () => handleMouseLeave() const handleCanvasClick = (e: MouseEvent) => handleClick(e) const handleTouchMove = (e: TouchEvent) => { e.preventDefault() handleMouseMove(e) } const handleTouchStart = (e: TouchEvent) => { e.preventDefault() handleClick(e) } // Event listeners window.addEventListener("mousemove", handleWindowMouseMove, { passive: true }) document.addEventListener("mouseleave", handleWindowMouseLeave) canvas.addEventListener("click", handleCanvasClick) canvas.addEventListener("touchmove", handleTouchMove, { passive: false }) canvas.addEventListener("touchstart", handleTouchStart, { passive: false }) window.addEventListener("resize", resizeCanvas) return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } window.removeEventListener("mousemove", handleWindowMouseMove) document.removeEventListener("mouseleave", handleWindowMouseLeave) canvas.removeEventListener("click", handleCanvasClick) canvas.removeEventListener("touchmove", handleTouchMove) canvas.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("resize", resizeCanvas) } }, [handleMouseMove, handleMouseLeave, handleClick]) return (

Explore the Cosmos of Possibilities

Innovative Solutions

Cutting-Edge Technology

Global Reach

User-Centric Design

Experience the Magic

About

Tags

Share

About

Tags

Share

More from fryad

About

Tags

Share

About

Tags

Share

More from fryad