🎨 A stunning, interactive Valentine's Day proposal with glassmorphism design, live typing romantic shayari, floating hearts, particle effects, and much more!
Valentine especial (even he is single 😂) wants some fun so crafted with heart...
✨ Features • 🚀 Quick Start • ⚙️ Configuration • 📖 Documentation • 🤝 Contributing
- 💝 Name Input System - Personalized experience with name collection
- 🎨 Glassmorphism Design - Modern, Apple-inspired glass effect UI
- 📜 Live Typing Shayari - Romantic messages type out character by character
- 💫 Floating Hearts - Hearts float from all directions (top, bottom, sides)
- 🎯 Interactive Touch Hearts - Click/touch anywhere to generate hearts
- ✨ Particle System - 200+ animated particles in the background
- 🎵 Background Music - Romantic music with fade effects
- 🎉 Celebration Mode - Massive confetti and heart explosion on "Yes"
- 😂 Playful "No" Button - The "No" button runs away when you try to click it!
- 🌐 Bilingual Support - English and Hindi romantic messages
- 📱 Fully Responsive - Perfect on desktop, tablet, and mobile
- 🎭 Smooth Animations - 60fps hardware-accelerated effects
- ⚙️ Highly Configurable - Easy customization through config.js
- 📸 Image Support - Add person's photo with heart-shaped masking
- 🎚️ Sound Effects - Celebration sounds, whoosh effects
- 💾 State Persistence - Remembers user's name
- 🎨 Multiple Color Themes - Pre-configured beautiful gradients
- 📊 Stats Display - Shows hearts generated and love percentage
- Slow Reveal Design - Experience builds up gradually
- Multi-Section Scrolling - Long, engaging journey
- Real-Time Typing Effect - Messages appear letter by letter
- Heart Rain - Continuous heart shower during celebration
- Touch-Generated Hearts - Every touch creates hearts
- No Button Grows Yes - The more you avoid "No", the bigger "Yes" gets!
valentine-proposal/
├── index.html # Main HTML file
├── config.js # Configuration file (CUSTOMIZE THIS!)
├── css/
│ ├── styles.css # Main styles
│ └── animations.css # Animation keyframes
├── js/
│ ├── main.js # Main orchestrator
│ ├── hearts.js # Hearts generation system
│ ├── shayari.js # Romantic messages system
│ ├── particles.js # Particle effects
│ ├── interactions.js # User interactions
│ ├── music.js # Music & sounds
│ └── animations.js # Animation utilities
├── assets/ # Audio files (add your own)
│ ├── romantic-music.mp3
│ ├── celebration.mp3
│ ├── heart-pop.mp3
│ └── whoosh.mp3
├── images/ # Images (optional)
│ └── [your images here]
├── README.md # This file
├── SETUP.md # Setup guide
└── CUSTOMIZATION.md # Customization guide
- Download/clone this repository
- Open
index.htmlin your browser - That's it! The app works immediately! 🎉
- Download/clone the repository
- Edit
config.jsto customize (name, colors, messages, etc.) - (Optional) Add music files to
assets/folder - (Optional) Add person's image to
images/folder - Open
index.htmlin your browser
- Fork/clone this repository
- Push to your GitHub account
- Enable GitHub Pages in repository settings
- Your romantic proposal will be live! 💖
All customization is done through config.js. Here are the main options:
preFillName: "HerName", // Pre-fill name (skip input screen)
yourName: "Ankit Chaubey", // Your name
personImage: "images/her.jpg", // Person's photobackgroundMusic: "assets/romantic-music.mp3",
startMusicAfterName: true,
musicVolume: 0.3,floatingHeartsCount: 150, // Number of floating hearts
particlesCount: 200, // Number of particles
heartsPerTouch: 5, // Hearts per click/touch
enable3DEffects: true, // Enable 3D transformsAdd your own romantic messages in both English and Hindi:
romanticMessages: [
{
english: "Every moment with you feels like a dream... 💕",
hindi: "तुम्हारे साथ हर पल एक ख्वाब जैसा लगता है... 💕"
},
// Add more messages...
]See CUSTOMIZATION.md for complete customization options.
The app supports background music and sound effects:
-
Find Free Music:
- YouTube Audio Library (free, no attribution needed)
- Bensound (free with attribution)
- Incompetech (Creative Commons)
- Pixabay Music (free, no attribution)
-
Add Files:
assets/ ├── romantic-music.mp3 (background music) ├── celebration.mp3 (celebration sound) ├── heart-pop.mp3 (heart sound) └── whoosh.mp3 (whoosh effect) -
Update config.js:
backgroundMusic: "assets/romantic-music.mp3",
Note: Music files are optional. The app works perfectly without them!
- SETUP.md - Detailed setup instructions
- CUSTOMIZATION.md - How to customize everything
- DEPLOYMENT.md - Deploy to GitHub Pages
- MUSIC_GUIDE.md - Where to find free music
- Name input with glassmorphism design
- Optional person's image
- Floating hearts animation
- Smooth transitions
- Personalized greeting using entered name
- Live typing romantic message
- Particles and hearts start floating
- Multiple romantic shayari/messages
- Real-time typing effect
- Bilingual support (English/Hindi)
- Scroll-based reveals
- Beautiful memory cards
- Fade-in animations
- Customizable memories
- "Will You Be My Valentine?"
- Interactive Yes/No buttons
- No button dodges clicks (hilarious!)
- Yes button grows with each No attempt
- Massive confetti explosion
- Heart rain animation
- Stats display
- Romantic success message
- Replay option
- HTML5 - Semantic markup
- CSS3 - Glassmorphism, animations, gradients
- Vanilla JavaScript - No frameworks!
- Canvas API - Particle system
- Web Audio API - Music and sounds
- LocalStorage - State persistence
- Intersection Observer - Scroll animations
- Hardware-accelerated CSS transforms
- RequestAnimationFrame for smooth 60fps
- Efficient particle management
- Mobile optimizations (reduced effects)
- Lazy loading for sections
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
Requirements:
- Modern browser with backdrop-filter support
- JavaScript enabled
- (Optional) Audio support for music
The app is fully responsive and optimized for mobile:
- Touch events for heart generation
- Reduced particle count on mobile
- Responsive typography
- Optimized animations
- Touch-friendly buttons
// config.js
preFillName: "", // Show name inputSend them the link → They enter name → Romantic journey begins!
// config.js
preFillName: "HerName", // Skip input, show personalized welcome
personImage: "images/sarah.jpg",Opens directly with their name → More surprising!
// config.js
romanticMessages: [
{
english: "365 days of love... and counting! 💕",
hindi: "प्यार के 365 दिन... और गिनती जारी है! 💕"
},
// Add anniversary-specific messages
]Contributions are welcome! Here's how:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- 🎨 New color themes
- 💝 More romantic messages
- 🌍 Additional language support
- 🎵 Sound effect improvements
- 📱 PWA support
- ✨ New animation effects
MIT License © 2026 Ankit Chaubey
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
Ankit Chaubey
- GitHub: @ankit-chaubey
- Email: m.ankitchaubey@gmail.com
- Project: github.com/ankit-chaubey/valentine
Valentine especial (even he is single 😂) wants some fun so crafted with heart...
If you love this project:
- ⭐ Star this repository
- 🍴 Fork it for your own proposal
- 📢 Share it with friends
- 💬 Give feedback via issues
- 💕 Use it for your Valentine's proposal!
- Inspired by love and romance 💕
- Built with passion and late nights ☕
- Powered by modern web technologies ⚡
- Made for creating beautiful memories 📸
- Test it first - Open locally before sharing
- Customize messages - Make it personal!
- Add music - Sets the perfect mood
- Use their photo - More meaningful
- Send at right time - Timing matters!
- Have fun! - That's what it's all about! 😄