[V0_FILE]typescriptreact:file="components/particle-background.tsx" isMerged="true" 'use client' import React from 'react' type ParticleBackgroundProps = { density?: number // particles per 10,000 px^2 speed?: number // pixels per second className?: string } export function ParticleBackground({ density = 0.12, speed = 12, className, }: ParticleBackgroundProps = { density: 0.12, speed: 12, className: '' }) { const canvasRef = React.useRef(null) const rafRef = React.useRef(null) const particlesRef = React.useRef< { x: number; y: number; vx: number; vy: number; r: number; a: number }[] >([]) const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) }, []) React.useEffect(() => { if (!mounted) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return let width = (canvas.width = window.innerWidth) let height = (canvas.height = window.innerHeight) const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches const initParticles = () => { particlesRef.current = [] const area = (width * height) / 10000 const count = Math.max(12, Math.floor(area * density)) for (let i = 0; i < count; i++) { const r = Math.random() * 1.6 + 0.4 const angle = Math.random() * Math.PI * 2 const v = prefersReduced ? 0 : (Math.random() * 0.6 + 0.4) * speed particlesRef.current.push({ x: Math.random() * width, y: Math.random() * height, vx: Math.cos(angle) * v, vy: Math.sin(angle) * v, r, a: Math.random() * 0.6 + 0.2, }) } } initParticles() const onResize = () => { width = canvas.width = window.innerWidth height = canvas.height = window.innerHeight initParticles() } window.addEventListener('resize', onResize) let last = performance.now() const render = (t: number) => { const dt = Math.min(0.033, (t - last) / 1000) last = t ctx.clearRect(0, 0, width, height) // subtle gradient background sheen const grad = ctx.createLinearGradient(0, 0, width, height) grad.addColorStop(0, 'rgba(20, 20, 30, 0.15)') grad.addColorStop(1, 'rgba(30, 20, 40, 0.12)') ctx.fillStyle = grad ctx.fillRect(0, 0, width, height) for (const p of particlesRef.current) { p.x += p.vx * dt p.y += p.vy * dt if (p.x < -5) p.x = width + 5 if (p.x > width + 5) p.x = -5 if (p.y < -5) p.y = height + 5 if (p.y > height + 5) p.y = -5 ctx.beginPath() ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2) ctx.closePath() ctx.fillStyle = `rgba(147, 197, 253, ${p.a * 0.15})` // soft cyan highlight ctx.fill() // twinkle stroke ctx.strokeStyle = `rgba(52, 211, 153, ${p.a * 0.12})` // emerald hint ctx.lineWidth = 0.4 ctx.stroke() } rafRef.current = requestAnimationFrame(render) } rafRef.current = requestAnimationFrame(render) return () => { window.removeEventListener('resize', onResize) if (rafRef.current) cancelAnimationFrame(rafRef.current) } }, [density, speed, mounted]) return (