Particle Animation Generator - Customize Your Website Hero

✨ Particle Animation Generator

Design stunning particle animations with live preview and export production-ready code instantly

'; };var debouncedRestart = debounce(restartAnimation, 250);ui.primaryColor.addEventListener('change', restartAnimation); ui.secondaryColor.addEventListener('change', restartAnimation); ui.bgColor.addEventListener('change', restartAnimation); ui.particleCount.addEventListener('input', debouncedRestart); ui.flowSpeed.addEventListener('input', debouncedRestart); ui.particleSize.addEventListener('input', debouncedRestart); ui.connectionDistance.addEventListener('input', debouncedRestart); ui.fadeOpacity.addEventListener('input', debouncedRestart); ui.repulsionRadius.addEventListener('input', debouncedRestart); ui.repulsionStrength.addEventListener('input', debouncedRestart); ui.mouseInteraction.addEventListener('change', restartAnimation); ui.particleShape.addEventListener('change', restartAnimation);window.addEventListener('resize', debounce(restartAnimation, 300));canvas.addEventListener('mousemove', function(e) { var rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });canvas.addEventListener('touchmove', function(e) { e.preventDefault(); var rect = canvas.getBoundingClientRect(); mouse.x = e.touches[0].clientX - rect.left; mouse.y = e.touches[0].clientY - rect.top; });canvas.addEventListener('mouseleave', function() { mouse.x = null; mouse.y = null; });canvas.addEventListener('touchend', function() { mouse.x = null; mouse.y = null; });ui.copyCodeBtn.addEventListener('click', function() { var code = generateProductionCode(); if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(code).then(function() { showMessage('✅ Code copied to clipboard!', true); }).catch(function() { fallbackCopy(code); }); } else { fallbackCopy(code); } });function fallbackCopy(text) { var textArea = document.createElement('textarea'); textArea.value = text; textArea.style.position = 'fixed'; textArea.style.left = '-9999px'; textArea.style.top = '-9999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showMessage('✅ Code copied successfully!', true); } catch (err) { showMessage('❌ Copy failed. Please try again.', false); } document.body.removeChild(textArea); }ui.downloadBtn.addEventListener('click', function() { try { var code = generateProductionCode(); var blob = new Blob([code], { type: 'text/html' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'particle-animation.html'; document.body.appendChild(a); a.click(); setTimeout(function() { document.body.removeChild(a); URL.revokeObjectURL(url); }, 200); showMessage('✅ Download started successfully!', true); } catch (err) { showMessage('❌ Download failed. Please try again.', false); } });restartAnimation(); })();

The Particle Animation Generator:
Lightweight & Code-Ready

Stop using heavy video backgrounds. Design a stunning, **performance-optimized** particle hero section and instantly export pure HTML/JS code.

---

Why Build with Our Generator?

⚡ SEO-First Performance

Generated code is **vanilla JavaScript** and Canvas-based, meaning zero library overhead. Keep your Core Web Vitals green and your load times fast.

🎨 Unlimited Customization

Adjust color, particle shape (circle, star, hexagon), density, speed, and responsiveness, all in a live preview.

✨ Clean, Deployable Code

Instantly copy or download a **standalone HTML file** containing only the code needed. No bulky downloads or configuration files.

---

Get Your Hero Animation in 3 Steps

1. 1.

   Tweak the Controls

   Use the sliders and color pickers on the left to set particle density, flow speed, size, and connection distance for your perfect visual.

2. 2.

   Test the Interaction

   Move your mouse over the live canvas. Our **repulsion logic** is built in to create a dynamic, engaging user experience.

3. 3.

   Export & Deploy

   Click **'Copy Code'** or **'Download HTML File'**. Paste the resulting code into your WordPress custom HTML block or website header. Done!