Шлейф из конфетти за курсором мыши в Gridbox

/* Полноэкранный холст частиц поверх интерфейса */#confetti-cursor-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999;}

document.addEventListener('DOMContentLoaded', () => { // Отключаем на мобильных тач-устройствах для экономии ресурсов if ('ontouchstart' in window || navigator.maxTouchPoints > 0) return; let canvas = document.getElementById('confetti-cursor-canvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'confetti-cursor-canvas'; document.body.appendChild(canvas); } const ctx = canvas.getContext('2d'); let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight); const colors = ['#f43f5e', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#06b6d4']; let particles = []; class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 7 + 4; this.color = colors[Math.floor(Math.random() * colors.length)]; this.vx = (Math.random() - 0.5) * 4; this.vy = (Math.random() - 0.5) * 4 - 1.5; this.rotation = Math.random() * 360; this.vRot = (Math.random() - 0.5) * 10; this.opacity = 1; this.gravity = 0.12; this.decay = Math.random() * 0.02 + 0.015; } update() { this.x += this.vx; this.y += this.vy; this.vy += this.gravity; this.rotation += this.vRot; this.opacity -= this.decay; } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate((this.rotation * Math.PI) / 180); ctx.globalAlpha = Math.max(0, this.opacity); ctx.fillStyle = this.color; ctx.fillRect(-this.size / 2, -this.size / 4, this.size, this.size / 2); ctx.restore(); } } window.addEventListener('mousemove', (e) => { for (let i = 0; i < 3; i++) { particles.push(new Particle(e.clientX, e.clientY)); } }); function animate() { ctx.clearRect(0, 0, width, height); for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(); particles[i].draw(); if (particles[i].opacity <= 0) { particles.splice(i, 1); } } requestAnimationFrame(animate); } animate(); window.addEventListener('resize', () => { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; });});