Floating Particles — Free HTML CSS JS Canvas Snippet

<canvas id="canvas"></canvas>
<div class="content">
  <h1>Interactive Particles</h1>
  <p>Move your mouse to repel the particles</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #050810; overflow: hidden; }

canvas { position: fixed; inset: 0; }

.content {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  gap: 12px;
}
h1 { font-size: clamp(24px, 5vw, 48px); font-weight: 800; color: #f1f5f9; letter-spacing: -0.5px; }
p  { font-size: 14px; color: #334155; font-family: system-ui, sans-serif; }

const canvas = document.getElementById('canvas');
const ctx    = canvas.getContext('2d');
let W, H, particles = [], mouse = { x: -999, y: -999 };

function resize() {
  W = canvas.width  = window.innerWidth;
  H = canvas.height = window.innerHeight;
}

function Particle() {
  this.reset = function() {
    this.x  = Math.random() * W;
    this.y  = Math.random() * H;
    this.vx = (Math.random() - 0.5) * 0.4;
    this.vy = (Math.random() - 0.5) * 0.4;
    this.r  = Math.random() * 2 + 0.5;
    this.alpha = Math.random() * 0.5 + 0.2;
    this.color = ['#6366f1','#8b5cf6','#ec4899','#0ea5e9','#10b981'][Math.floor(Math.random()*5)];
  };
  this.reset();
}

function init() {
  resize();
  particles = Array.from({ length: 120 }, () => new Particle());
}

function draw() {
  ctx.clearRect(0, 0, W, H);

  particles.forEach(p => {
    const dx = p.x - mouse.x, dy = p.y - mouse.y;
    const dist = Math.sqrt(dx*dx + dy*dy);
    if (dist < 100) {
      const force = (100 - dist) / 100 * 2;
      p.vx += (dx / dist) * force * 0.3;
      p.vy += (dy / dist) * force * 0.3;
    }

    p.vx *= 0.97; p.vy *= 0.97;
    p.x += p.vx; p.y += p.vy;

    if (p.x < 0) p.x = W; if (p.x > W) p.x = 0;
    if (p.y < 0) p.y = H; if (p.y > H) p.y = 0;

    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.globalAlpha = p.alpha;
    ctx.fill();
  });

  // Draw connections
  ctx.globalAlpha = 1;
  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 d  = Math.sqrt(dx*dx + dy*dy);
      if (d < 80) {
        ctx.beginPath();
        ctx.moveTo(particles[i].x, particles[i].y);
        ctx.lineTo(particles[j].x, particles[j].y);
        ctx.strokeStyle = `rgba(99,102,241,${(1 - d/80) * 0.15})`;
        ctx.lineWidth = 0.5;
        ctx.stroke();
      }
    }
  }

  requestAnimationFrame(draw);
}

window.addEventListener('resize', resize);
document.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });

init(); draw();