Particle Animation Generator - Customize Your Website Hero

`; };// --- Event Listeners --- const debouncedRestart = debounce(restartAnimation, 250); Object.values(ui).forEach(element => { if (element.tagName === 'INPUT' && element.type === 'range') { element.addEventListener('input', debouncedRestart); } else if (!element.id.includes('Btn')) { element.addEventListener('change', restartAnimation); } });window.addEventListener('resize', debounce(restartAnimation, 300));canvas.addEventListener('mousemove', e => { const rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });canvas.addEventListener('mouseleave', () => { mouse.x = null; mouse.y = null; });// Improved Copy Code Handler with fallback & retries ui.copyCodeBtn.addEventListener('click', async () => { const codeToCopy = generateProductionCode(); if (navigator.clipboard && window.isSecureContext) { try { await navigator.clipboard.writeText(codeToCopy); showMessage('Code copied successfully!'); } catch { try { const textArea = document.createElement("textarea"); textArea.value = codeToCopy; textArea.style.position = "fixed"; textArea.style.top = "-9999px"; textArea.style.left = "-9999px"; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showMessage('Code copied using fallback!'); } catch (e) { showMessage('Copy failed. Try again.', false); } } } else { try { const textArea = document.createElement("textarea"); textArea.value = codeToCopy; textArea.style.position = "fixed"; textArea.style.top = "-9999px"; textArea.style.left = "-9999px"; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showMessage('Code copied using fallback!'); } catch (e) { showMessage('Copy failed. Try again.', false); } } });// Improved Download Handler with delayed blob revocation ui.downloadBtn.addEventListener('click', () => { try { const code = generateProductionCode(); const blob = new Blob([code], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'particle-animation.html'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 200); showMessage('Download started!'); } catch (e) { showMessage('Download failed.', false); console.error(e); } });// --- Initial Kick-off --- 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!