# Creating Interactive Particle Backgrounds in React Interactive particle backgrounds can add a dynamic and engaging element to your web applications. In this post, we'll explore how to create a performant particle system using React and the HTML5 Canvas API. ## Setting Up the Canvas Component First, let's create a basic canvas component: ```typescript import { useEffect, useRef } from 'react'; interface Particle { x: number; y: number; vx: number; vy: number; radius: number; color: string; } export function ParticleBackground() { const canvasRef = useRef(null); const particles = useRef([]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; // Initialize particles particles.current = Array.from({ length: 100 }, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: Math.random() * 3 + 1, color: `hsl(${Math.random() * 360}, 50%, 50%)` })); // Animation loop let animationFrameId: number; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.current.forEach(particle => { // Update position particle.x += particle.vx; particle.y += particle.vy; // Bounce off walls if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1; if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1; // Draw particle ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = particle.color; ctx.fill(); }); animationFrameId = requestAnimationFrame(animate); }; animate(); return () => { cancelAnimationFrame(animationFrameId); }; }, []); return (

Blog