Sparkle Explosion Cursor - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sparkle Explosion Cursor</title> <style> body { margin: 0; overflow: hidden; background: #000; } .sparkle { position: absolute; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; animation: explode 1s linear infinite; } @keyframes explode { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(calc(var(--dx) * 10px), calc(var(--dy) * 10px)) scale(0.5); opacity: 0; } } </style> </head> <body> <script> document.addEventListener('mousemove', function(e) { for (let i = 0; i < 10; i++) { const sparkle = document.createElement('div'); sparkle.className = 'sparkle'; sparkle.style.setProperty('--dx', (Math.random() - 0.5) * 2); sparkle.style.setProperty('--dy', (Math.random() - 0.5) * 2); sparkle.style.left = `${e.pageX}px`; sparkle.style.top = `${e.pageY}px`; document.body.appendChild(sparkle); setTimeout(() => sparkle.remove(), 1000); } }); </script> </body> </html>