React Particles Background

Interactive particle systems that respond to mouse movement like magnetic fields. Build dynamic React background components with canvas rendering, physics simulation, customizable behavior, and TypeScript support for Next.js applications with shadcn/ui.

React

Canvas API

Mouse Events

Building interactive physics experiences?

Join our Discord community for help from other developers.

Static backgrounds are dead space. Wasted potential. What if your background could respond to users? React to their movement? This React component creates particle systems with realistic physics—particles that drift naturally but get pulled toward your cursor like iron filings to a magnet.

Interactive particle physics

Watch particles respond to cursor movement with magnetic attraction and natural drift:

Loading component...

'use client';import React from "react";import { useEffect, useRef, useState } from "react";import { cn } from "@/lib/utils";interface MousePosition {  x: number;  y: number;}function useMousePosition(): MousePosition {  const [mousePosition, setMousePosition] = useState<MousePosition>({    x: 0,    y: 0,  });  useEffect(() => {    const handleMouseMove = (event: MouseEvent) => {      setMousePosition({ x: event.clientX, y: event.clientY });    };    window.addEventListener("mousemove", handleMouseMove);    return () => {      window.removeEventListener("mousemove", handleMouseMove);    };  }, []);  return mousePosition;}export interface ParticlesProps {  className?: string;  quantity?: number;  staticity?: number;  ease?: number;  size?: number;  refresh?: boolean;  color?: string;  vx?: number;  vy?: number;}function hexToRgb(hex: string): number[] {  hex = hex.replace("#", "");  if (hex.length === 3) {    hex = hex      .split("")      .map((char) => char + char)      .join("");  }  const hexInt = parseInt(hex, 16);  const red = (hexInt >> 16) & 255;  const green = (hexInt >> 8) & 255;  const blue = hexInt & 255;  return [red, green, blue];}export const Particles: React.FC<ParticlesProps> = ({  className = "",  quantity = 100,  staticity = 50,  ease = 50,  size = 0.4,  refresh = false,  color = "#ffffff",  vx = 0,  vy = 0,}) => {  const canvasRef = useRef<HTMLCanvasElement>(null);  const canvasContainerRef = useRef<HTMLDivElement>(null);  const context = useRef<CanvasRenderingContext2D | null>(null);  const circles = useRef<Circle[]>([]);  const mousePosition = useMousePosition();  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });  const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;  useEffect(() => {    if (canvasRef.current) {      context.current = canvasRef.current.getContext("2d");    }    initCanvas();    animate();    window.addEventListener("resize", initCanvas);    return () => {      window.removeEventListener("resize", initCanvas);    };  }, [color]);  useEffect(() => {    onMouseMove();  }, [mousePosition.x, mousePosition.y]);  useEffect(() => {    initCanvas();  }, [refresh]);  const initCanvas = () => {    resizeCanvas();    drawParticles();  };  const onMouseMove = () => {    if (canvasRef.current) {      const rect = canvasRef.current.getBoundingClientRect();      const { w, h } = canvasSize.current;      const x = mousePosition.x - rect.left - w / 2;      const y = mousePosition.y - rect.top - h / 2;      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;      if (inside) {        mouse.current.x = x;        mouse.current.y = y;      }    }  };  type Circle = {    x: number;    y: number;    translateX: number;    translateY: number;    size: number;    alpha: number;    targetAlpha: number;    dx: number;    dy: number;    magnetism: number;  };  const resizeCanvas = () => {    if (canvasContainerRef.current && canvasRef.current && context.current) {      circles.current.length = 0;      canvasSize.current.w = canvasContainerRef.current.offsetWidth;      canvasSize.current.h = canvasContainerRef.current.offsetHeight;      canvasRef.current.width = canvasSize.current.w * dpr;      canvasRef.current.height = canvasSize.current.h * dpr;      canvasRef.current.style.width = `${canvasSize.current.w}px`;      canvasRef.current.style.height = `${canvasSize.current.h}px`;      context.current.scale(dpr, dpr);    }  };  const circleParams = (): Circle => {    const x = Math.floor(Math.random() * canvasSize.current.w);    const y = Math.floor(Math.random() * canvasSize.current.h);    const translateX = 0;    const translateY = 0;    const pSize = Math.floor(Math.random() * 2) + size;    const alpha = 0;    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));    const dx = (Math.random() - 0.5) * 0.1;    const dy = (Math.random() - 0.5) * 0.1;    const magnetism = 0.1 + Math.random() * 4;    return {      x,      y,      translateX,      translateY,      size: pSize,      alpha,      targetAlpha,      dx,      dy,      magnetism,    };  };  const rgb = hexToRgb(color);  const drawCircle = (circle: Circle, update = false) => {    if (context.current) {      const { x, y, translateX, translateY, size, alpha } = circle;      context.current.translate(translateX, translateY);      context.current.beginPath();      context.current.arc(x, y, size, 0, 2 * Math.PI);      context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;      context.current.fill();      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);      if (!update) {        circles.current.push(circle);      }    }  };  const clearContext = () => {    if (context.current) {      context.current.clearRect(        0,        0,        canvasSize.current.w,        canvasSize.current.h,      );    }  };  const drawParticles = () => {    clearContext();    const particleCount = quantity;    for (let i = 0; i < particleCount; i++) {      const circle = circleParams();      drawCircle(circle);    }  };  const remapValue = (    value: number,    start1: number,    end1: number,    start2: number,    end2: number,  ): number => {    const remapped =      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;    return remapped > 0 ? remapped : 0;  };  const animate = () => {    clearContext();    circles.current.forEach((circle: Circle, i: number) => {      // Handle the alpha value      const edge = [        circle.x + circle.translateX - circle.size, // distance from left edge        canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge        circle.y + circle.translateY - circle.size, // distance from top edge        canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge      ];      const closestEdge = edge.reduce((a, b) => Math.min(a, b));      const remapClosestEdge = parseFloat(        remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),      );      if (remapClosestEdge > 1) {        circle.alpha += 0.02;        if (circle.alpha > circle.targetAlpha) {          circle.alpha = circle.targetAlpha;        }      } else {        circle.alpha = circle.targetAlpha * remapClosestEdge;      }      circle.x += circle.dx + vx;      circle.y += circle.dy + vy;      circle.translateX +=        (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /        ease;      circle.translateY +=        (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /        ease;      drawCircle(circle, true);      // circle gets out of the canvas      if (        circle.x < -circle.size ||        circle.x > canvasSize.current.w + circle.size ||        circle.y < -circle.size ||        circle.y > canvasSize.current.h + circle.size      ) {        // remove the circle from the array        circles.current.splice(i, 1);        // create a new circle        const newCircle = circleParams();        drawCircle(newCircle);        // update the circle position      }    });    window.requestAnimationFrame(animate);  };  return (    <div      className={cn("pointer-events-none", className)}      ref={canvasContainerRef}      aria-hidden="true"    >      <canvas ref={canvasRef} className="size-full" />    </div>  );};Particles.displayName = "Particles";

Built for React applications with TypeScript and Next.js. Uses HTML5 Canvas with requestAnimationFrame for smooth 60fps physics simulation. Each particle has velocity, position, and responds to mouse proximity with configurable attraction force. Perfect for hero sections, landing pages, or any interface that needs to feel alive.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/particles.json

npx shadcn@latest add https://www.shadcn.io/registry/particles.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/particles.json

bunx shadcn@latest add https://www.shadcn.io/registry/particles.json

Usage

import { Particles } from "@/components/ui/particles";

export default function InteractiveHero() {
  return (
    <div className="relative h-screen bg-black overflow-hidden">
      {/* Your content */}
      <div className="relative z-10 flex items-center justify-center h-full">
        <div className="text-center">
          <h1 className="text-6xl font-bold text-white mb-4">
            Interactive Design
          </h1>
          <p className="text-xl text-gray-300">
            Move your cursor to experience the physics
          </p>
        </div>
      </div>
      
      {/* Interactive particles */}
      <Particles
        className="absolute inset-0"
        quantity={100}
        ease={80}
        staticity={50}
        color="#ffffff"
        size={0.8}
      />
    </div>
  );
}

Why most particle systems feel lifeless

Most developers use CSS keyframes to animate dots in circles or straight lines. It's predictable, robotic, obviously programmed. Others use JavaScript libraries that animate with basic math—particles move in perfect curves that look like geometry homework. Some try canvas particles but without physics, just random movement that feels chaotic.

This React component simulates real particle physics. Each particle has position, velocity, and acceleration. Mouse proximity creates attraction forces that feel magnetic. Particles drift naturally when idle, creating organic movement. Canvas rendering with requestAnimationFrame keeps it smooth at 60fps without the overhead of DOM manipulation.

Features

Physics-based simulation with position, velocity, and acceleration for realistic movement
Magnetic mouse interaction creating attraction forces based on cursor proximity
Canvas rendering providing smooth 60fps animation with hardware acceleration
Configurable physics parameters controlling attraction, drift, easing, and particle behavior
Automatic edge detection with particle regeneration at container boundaries
Performance optimized using requestAnimationFrame and efficient canvas operations
Responsive container adaptation automatically adjusting to window and container changes
TypeScript definitions for all physics parameters and visual customizations
Memory efficient implementation preventing performance degradation over time
shadcn/ui compatible with proper layering and interaction handling

Examples

Interactive Experience

Advanced demo with mouse tracking and enhanced visual feedback:

Loading component...

'use client';import React from "react";import { useEffect, useRef, useState } from "react";import { cn } from "@/lib/utils";interface MousePosition {  x: number;  y: number;}function useMousePosition(): MousePosition {  const [mousePosition, setMousePosition] = useState<MousePosition>({    x: 0,    y: 0,  });  useEffect(() => {    const handleMouseMove = (event: MouseEvent) => {      setMousePosition({ x: event.clientX, y: event.clientY });    };    window.addEventListener("mousemove", handleMouseMove);    return () => {      window.removeEventListener("mousemove", handleMouseMove);    };  }, []);  return mousePosition;}export interface ParticlesProps {  className?: string;  quantity?: number;  staticity?: number;  ease?: number;  size?: number;  refresh?: boolean;  color?: string;  vx?: number;  vy?: number;}function hexToRgb(hex: string): number[] {  hex = hex.replace("#", "");  if (hex.length === 3) {    hex = hex      .split("")      .map((char) => char + char)      .join("");  }  const hexInt = parseInt(hex, 16);  const red = (hexInt >> 16) & 255;  const green = (hexInt >> 8) & 255;  const blue = hexInt & 255;  return [red, green, blue];}export const Particles: React.FC<ParticlesProps> = ({  className = "",  quantity = 100,  staticity = 50,  ease = 50,  size = 0.4,  refresh = false,  color = "#ffffff",  vx = 0,  vy = 0,}) => {  const canvasRef = useRef<HTMLCanvasElement>(null);  const canvasContainerRef = useRef<HTMLDivElement>(null);  const context = useRef<CanvasRenderingContext2D | null>(null);  const circles = useRef<Circle[]>([]);  const mousePosition = useMousePosition();  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });  const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;  useEffect(() => {    if (canvasRef.current) {      context.current = canvasRef.current.getContext("2d");    }    initCanvas();    animate();    window.addEventListener("resize", initCanvas);    return () => {      window.removeEventListener("resize", initCanvas);    };  }, [color]);  useEffect(() => {    onMouseMove();  }, [mousePosition.x, mousePosition.y]);  useEffect(() => {    initCanvas();  }, [refresh]);  const initCanvas = () => {    resizeCanvas();    drawParticles();  };  const onMouseMove = () => {    if (canvasRef.current) {      const rect = canvasRef.current.getBoundingClientRect();      const { w, h } = canvasSize.current;      const x = mousePosition.x - rect.left - w / 2;      const y = mousePosition.y - rect.top - h / 2;      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;      if (inside) {        mouse.current.x = x;        mouse.current.y = y;      }    }  };  type Circle = {    x: number;    y: number;    translateX: number;    translateY: number;    size: number;    alpha: number;    targetAlpha: number;    dx: number;    dy: number;    magnetism: number;  };  const resizeCanvas = () => {    if (canvasContainerRef.current && canvasRef.current && context.current) {      circles.current.length = 0;      canvasSize.current.w = canvasContainerRef.current.offsetWidth;      canvasSize.current.h = canvasContainerRef.current.offsetHeight;      canvasRef.current.width = canvasSize.current.w * dpr;      canvasRef.current.height = canvasSize.current.h * dpr;      canvasRef.current.style.width = `${canvasSize.current.w}px`;      canvasRef.current.style.height = `${canvasSize.current.h}px`;      context.current.scale(dpr, dpr);    }  };  const circleParams = (): Circle => {    const x = Math.floor(Math.random() * canvasSize.current.w);    const y = Math.floor(Math.random() * canvasSize.current.h);    const translateX = 0;    const translateY = 0;    const pSize = Math.floor(Math.random() * 2) + size;    const alpha = 0;    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));    const dx = (Math.random() - 0.5) * 0.1;    const dy = (Math.random() - 0.5) * 0.1;    const magnetism = 0.1 + Math.random() * 4;    return {      x,      y,      translateX,      translateY,      size: pSize,      alpha,      targetAlpha,      dx,      dy,      magnetism,    };  };  const rgb = hexToRgb(color);  const drawCircle = (circle: Circle, update = false) => {    if (context.current) {      const { x, y, translateX, translateY, size, alpha } = circle;      context.current.translate(translateX, translateY);      context.current.beginPath();      context.current.arc(x, y, size, 0, 2 * Math.PI);      context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;      context.current.fill();      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);      if (!update) {        circles.current.push(circle);      }    }  };  const clearContext = () => {    if (context.current) {      context.current.clearRect(        0,        0,        canvasSize.current.w,        canvasSize.current.h,      );    }  };  const drawParticles = () => {    clearContext();    const particleCount = quantity;    for (let i = 0; i < particleCount; i++) {      const circle = circleParams();      drawCircle(circle);    }  };  const remapValue = (    value: number,    start1: number,    end1: number,    start2: number,    end2: number,  ): number => {    const remapped =      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;    return remapped > 0 ? remapped : 0;  };  const animate = () => {    clearContext();    circles.current.forEach((circle: Circle, i: number) => {      // Handle the alpha value      const edge = [        circle.x + circle.translateX - circle.size, // distance from left edge        canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge        circle.y + circle.translateY - circle.size, // distance from top edge        canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge      ];      const closestEdge = edge.reduce((a, b) => Math.min(a, b));      const remapClosestEdge = parseFloat(        remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),      );      if (remapClosestEdge > 1) {        circle.alpha += 0.02;        if (circle.alpha > circle.targetAlpha) {          circle.alpha = circle.targetAlpha;        }      } else {        circle.alpha = circle.targetAlpha * remapClosestEdge;      }      circle.x += circle.dx + vx;      circle.y += circle.dy + vy;      circle.translateX +=        (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /        ease;      circle.translateY +=        (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /        ease;      drawCircle(circle, true);      // circle gets out of the canvas      if (        circle.x < -circle.size ||        circle.x > canvasSize.current.w + circle.size ||        circle.y < -circle.size ||        circle.y > canvasSize.current.h + circle.size      ) {        // remove the circle from the array        circles.current.splice(i, 1);        // create a new circle        const newCircle = circleParams();        drawCircle(newCircle);        // update the circle position      }    });    window.requestAnimationFrame(animate);  };  return (    <div      className={cn("pointer-events-none", className)}      ref={canvasContainerRef}      aria-hidden="true"    >      <canvas ref={canvasRef} className="size-full" />    </div>  );};Particles.displayName = "Particles";

API Reference

Particles

Main component for interactive canvas-based particle physics systems.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the canvas container
`quantity`	`number`	`100`	Number of particles to simulate (recommended: 50-200)
`staticity`	`number`	`50`	Mouse attraction strength (0=no attraction, 100=strong)
`ease`	`number`	`50`	Movement smoothing factor (higher=smoother)
`size`	`number`	`0.4`	Particle radius in pixels (0.2-2.0 recommended)
`refresh`	`boolean`	`false`	Force particle regeneration (useful for prop changes)
`color`	`string`	`"#ffffff"`	Particle color (hex, rgb, or named CSS colors)
`vx`	`number`	`0`	Base horizontal drift velocity (-5 to 5)
`vy`	`number`	`0`	Base vertical drift velocity (-5 to 5)

Physics Parameters

Understand how particle behavior is controlled:

// Subtle ambient particles
quantity={50} staticity={80} ease={90} size={0.3}

// Interactive magnetic field
quantity={100} staticity={30} ease={60} size={0.8}

// Dense particle cloud
quantity={200} staticity={50} ease={40} size={0.5}

// Flowing directional particles
quantity={75} vx={2} vy={-1} ease={70} size={0.6}

Physics Simulation Details

Position tracking: Each particle maintains x/y coordinates and velocity vectors
Mouse attraction: Distance-based force calculation creates magnetic pull effect
Edge regeneration: Particles respawn at random positions when leaving bounds
Easing calculation: Smooth interpolation prevents jarring movement transitions
Canvas optimization: Efficient rendering with requestAnimationFrame timing

Common gotchas

Performance with high quantities: Each particle requires physics calculations every frame. 200+ particles might impact performance on older devices. Test on target hardware.

Z-index content layering: Canvas sits behind content by default. Your content needs relative z-10 or higher. If content disappears, check z-index values.

Mouse interaction boundaries: Mouse tracking works within the canvas bounds. Particles outside these bounds won't respond to cursor movement until they drift back in.

Color format flexibility: Supports hex (#ffffff), rgb(), hsl(), and named colors. However, very transparent colors (alpha < 0.1) might be invisible on some backgrounds.

Canvas sizing responsiveness: Canvas adapts to container dimensions. Very small containers (under 200px) might not show particle movement effectively.

Touch device limitations: Mobile devices don't have mouse hover. Particles will drift naturally but won't respond to touch unless the user is actively dragging.

Explore other interactive and dynamic background components for React applications:

Interactive particle physics

Installation

Usage

Why most particle systems feel lifeless

Features

Examples

Interactive Experience

API Reference

Particles

Physics Parameters

Physics Simulation Details

Common gotchas

You might also like

Meteors

Sparkles

Vortex

Fireworks Background

Shooting Stars

Flickering Grid

Questions developers actually ask

On this page

React Particles Background

Reactparticles

Reactparticles

Meteors

Sparkles

Vortex

Fireworks Background

Shooting Stars

Flickering Grid

Can I use gradient or multiple colors for particles?

How do I make particles more or less responsive to mouse?

How many particles can I use without lag?

Can I make particles flow in a specific direction?

How do I disable mouse interaction for purely ambient particles?

Can I use different shapes instead of circles?

On this page