A beautiful, interactive web application for creating and sharing romantic digital love letters. Perfect for Valentine's Day, anniversaries, or expressing your feelings in a unique and memorable way.
- Modern gradient backgrounds with floating hearts animation
- Handwritten-style fonts (Dancing Script, Caveat)
- Glass-morphism paper effects with realistic shadows
- Smooth animations and transitions
- Mobile-responsive design
- Drag & Drop: Click and drag papers to move them around
- Rotation: Right-click to rotate papers for dynamic layouts
- Touch Support: Full mobile and tablet compatibility
- Keyboard Navigation: Use arrow keys for accessibility
- Double-click Reset: Randomize paper positions
- Sparkle Effects: Hover effects with animated sparkles
- Background music toggle
- Romantic ambient sounds (customizable)
- Visual feedback for all interactions
R- Randomize all paper positionsC- Center all papers in organized layoutSpace- Toggle background musicArrow Keys- Move focused paper (accessibility)Enter/Space- Reset focused paper position
- Semantic HTML5 structure
- Comprehensive meta tags
- Open Graph and Twitter Card support
- Structured data (Schema.org)
- Accessibility features (WCAG compliant)
- Mobile-first responsive design
- Clone or Download this repository
- Open
index.htmlin your web browser - Customize the content in the HTML file:
- Replace images in the
images/folder - Edit text content in the paper elements
- Modify colors and fonts in
style.css
- Replace images in the
├── index.html # Main HTML file with love letters
├── style.css # Beautiful CSS styling and animations
├── script.js # Interactive JavaScript functionality
├── README.md # This documentation file
└── images/ # Photo folder
├── 1.jpeg # Replace with your photos
├── 2.jpeg
├── 3.jpg
├── bg.jpeg
├── heart.webp
└── paper.webp
Replace the images in the images/ folder with your own romantic photos. The application automatically optimizes them for display.
Edit the text content in index.html:
<p class="handwriting">Your custom message here</p>
<p class="handwriting highlight">Special highlighted text ❤️</p>Modify the CSS color scheme in style.css:
/* Main gradient background */
background: linear-gradient(135deg, #your-color1 0%, #your-color2 100%);
/* Paper highlights */
.highlight {
color: #your-accent-color;
}Add your own romantic background music:
- Place your audio file in the project folder
- Update the audio source in
index.html:
<source src="your-music-file.mp3" type="audio/mpeg">- ✅ Chrome (recommended)
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
The application is fully optimized for mobile devices with:
- Touch-friendly drag interactions
- Responsive paper sizing
- Optimized animations for performance
- Mobile-first CSS design
- Keyboard Navigation: Full keyboard support for all interactions
- Screen Reader Friendly: Proper ARIA labels and semantic HTML
- Focus Management: Clear focus indicators
- Skip Navigation: Quick access to main content
- Color Contrast: WCAG AA compliant color ratios
- 💕 Valentine's Day surprises
- 💒 Anniversary celebrations
- 💐 Romantic proposals
- 🎂 Birthday love messages
- 💌 Just because moments
- 🎁 Digital gift presentations
- Pure Vanilla JavaScript - No frameworks required
- CSS3 Animations - Smooth 60fps animations
- Mobile-First Design - Responsive across all devices
- SEO Optimized - Search engine friendly
- Performance Optimized - Fast loading and smooth interactions
- Use High-Quality Images: Photos look best at 400x300px or similar ratios
- Keep Messages Concise: Shorter messages have more visual impact
- Test on Mobile: Ensure your customizations work well on phones
- Add Personal Touches: Include inside jokes, special dates, or memories
Made with 💕 for spreading love and joy through interactive digital art.
Remember: The most beautiful love letters come from the heart. Use this as a canvas for your genuine feelings!