HTML, CSS & JavaScript 5 min read

Heart Animation ❤️

Create a romantic heart trail effect that follows your mouse. Move the cursor and hearts appear at your pointer, then float upward with a smooth hue-rotate animation. Simple HTML, CSS, and JavaScript — perfect for Valentine's Day, love pages, or any romantic surprise!

This Heart Animation project uses a single HTML page with linked CSS and JavaScript. On mousemove, a heart element is created at the cursor position with a random size. The CSS animates each heart moving upward with a hue-rotate effect, then it is removed after a few seconds. The heart image is loaded from an external icon URL; you can replace it with your own image.

All files sit in one folder: heart/ — index.html, style.css, and index.js.

Preview
❤️
🚀 Open Live Demo

📦 Get the Complete Project

Copy the HTML, CSS, and JavaScript from the code blocks below. Keep the same folder structure so paths work.

⬇️ Full code below

📄 Complete HTML Code

Copy this into index.html in your heart/ folder.

index.html 
Loading code...

🎨 Complete CSS Code

Copy this into style.css. It styles the full-screen black background and the heart animation.

style.css 
Loading code...

⚡ Complete JavaScript Code

Copy this into index.js. Listens for mousemove and creates heart elements at the cursor.

index.js 
Loading code...

📁 Project Assets

Keep the assets in this structure so all paths work: 

pages/
├── assets/
│   └── heart/
│       ├── index.html
│       ├── style.css
│       └── index.js
  • All files in one folder: heart/
  • Hearts use an external icon URL in CSS; you can replace with a local image path

📦 Get Project on GitHub

Download the full project source from our GitHub repository.

⬇️ View GitHub

Key Features

  • ❤️ Heart trail that follows mouse movement
  • 🌈 Hue-rotate animation as hearts float up
  • 📐 Random heart size for each spawn
  • 🧹 Elements removed after animation to avoid memory bloat
  • 📱 Works on desktop (mouse); touch devices can be extended

Customization Tips

  • Heart image: Change the url(...) in style.css to your own image
  • Speed/height: Adjust translate(-50%, -5000%) and 6s in the CSS animation
  • Size: Change Math.random() * 100 in index.js for heart size range

Related Projects

📢 Thanks for your support

English: We keep our projects free thanks to supporters like you. View the content below if you'd like, then press OK to continue to the download.

हिंदी: आप जैसे सपोर्टर्स की वजह से हम ये प्रोजेक्ट मुफ्त रख पाते हैं। नीचे का कंटेंट देख सकते हैं, फिर डाउनलोड के लिए OK दबाएं।

📢 Loading Demo

English: Please wait while we load the demo. You'll be redirected automatically in a few seconds.

हिंदी: कृपया प्रतीक्षा करें, हम डेमो लोड कर रहे हैं। आप कुछ सेकंड में स्वचालित रूप से रीडायरेक्ट हो जाएंगे।

Frequently Asked Questions

How does the heart trail follow the cursor?

JavaScript listens for mousemove events and spawns a small heart element at the cursor's coordinates with a fade animation.

Will this slow down older laptops?

It limits the number of hearts on screen, so even budget laptops handle it fine.

Can I drop this effect into my existing site?

Yes — copy the JS file, the CSS for .heart, and one line of init code into your page.