Floating Hearts 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>Floating Hearts Cursor</title> <style> body { margin: 0; overflow: hidden; background: #000; } .heart { position: absolute; width: 10px; height: 10px; background: red; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); pointer-events: none; animation: float 1s linear infinite; } @keyframes float { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(0, -50px) scale(1.5); opacity: 0; } } </style> </head> <body> <script> document.addEventListener('mousemove', function(e) { const heart = document.createElement('div'); heart.className = 'heart'; heart.style.left = `${e.pageX}px`; heart.style.top = `${e.pageY}px`; document.body.appendChild(heart); setTimeout(() => heart.remove(), 1000); }); </script> </body> </html>