Thư viện particles.js cho phép xây dựng hệ thống hạt tương tác trực quan bằng Canvas mà không cần viết mã vật lý từ đầu. Chỉ với ba lệnh cơ bản, bạn có thể kích hoạt nền động hỗ trợ trọng lực, va chạm và phản ứng theo hành vi người dùng — tất cả trong vài giây.

Cài đặt nhanh

Thêm một phần tử <div> làm vùng hiển thị và tải thư viện qua CDN:

<div id="canvas-bg"></div>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

Kích hoạt hệ thống hạt

Gọi hàm khởi tạo với ID vùng và cấu hình tối giản:

particlesJS('canvas-bg', {
  particles: { number: { value: 60 }, move: { enable: true, speed: 1.5 } }
});

Tùy chỉnh hành vi vật lý

Các tham số trong khối move điều khiển chuyển động thực tế:

• direction: "bottom" → mô phỏng trọng lực hướng xuống
• out_mode: "bounce" + bounce: true → bật phản xạ khi chạm biên
• random: true kết hợp speed: 0.8 → tạo luồng chuyển động tự nhiên như khói

Kết nối và tương tác

Hai tính năng chính nâng cao trải nghiệm:

• line_linked: vẽ đường nối giữa các hạt trong bán kính xác định (ví dụ: distance: 80)
• interactivity: kích hoạt chế độ grab (kéo gần), repulse (đẩy xa) hoặc push (thêm hạt khi click)

Tối ưu hiệu năng

Để duy trì 60 FPS trên đa số thiết bị:

• Giới hạn số hạt ở mức 40–120
• Vô hiệu hóa hiệu ứng không cần thiết như opacity.anim.enable
• Bật phát hiện màn hình Retina: retina_detect: true
• Giảm khoảng cách kết nối nếu dùng line_linked

Mẫu cấu hình sao trời tương tác

Dưới đây là cấu hình hoàn chỉnh cho nền sao mờ với hiệu ứng kéo và thêm hạt:

particlesJS('canvas-bg', {
  particles: {
    number: { value: 95 },
    color: { value: "#e6f7ff" },
    shape: { type: "circle" },
    opacity: { value: 0.6 },
    size: { value: 1.8 },
    line_linked: { enable: true, distance: 120, opacity: 0.15 },
    move: { enable: true, speed: 0.9, random: true, out_mode: "out" }
  },
  interactivity: {
    events: {
      onhover: { enable: true, mode: "grab" },
      onclick: { enable: true, mode: "push" }
    }
  }
});