Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', () => { | |
| // Initialize any interactive elements | |
| const pulseVisualization = document.querySelector('.pulse-visualization'); | |
| if (pulseVisualization) { | |
| // Add dynamic particles to visualization | |
| for (let i = 0; i < 20; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'absolute rounded-full bg-white/10'; | |
| particle.style.width = `${Math.random() * 10 + 2}px`; | |
| particle.style.height = particle.style.width; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random animation for each particle | |
| const duration = Math.random() * 10 + 10; | |
| particle.style.animation = `float ${duration}s linear infinite`; | |
| pulseVisualization.appendChild(particle); | |
| } | |
| // Add CSS for particle animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) scale(1); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) scale(0); opacity: 0; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| } | |
| }); |