glacial-system

byHarshita Verma

Create a beautiful romantic interactive website called **"Open Letters ❤️"** with a soft pastel aesthetic, elegant typography, floating heart animations, smooth page transitions, and full mobile responsiveness. ### Landing Page * Full-screen cover page with a romantic background photo. * Centered title: **"Open Letters ❤️"** * A glowing button: **"Open Letters ❤️"** * Soft floating hearts in the background. * Optional autoplay background music with a mute/unmute button. * Smooth fade transition when entering the next page. ### Envelope Selection Page After clicking the button, show **4 envelopes** arranged in a responsive 2×2 grid. Design: * Vintage romantic envelopes. * Hover animation (slight floating effect). * Click animation where the envelope cracks/opens realistically. * Once opened, the envelope remains visibly cracked to indicate progress. * Save progress using local storage so opened envelopes stay opened on refresh. ### Envelope 1 When Envelope 1 is clicked: * Play opening/cracking animation. * Open a fullscreen modal. * Reveal the photo from PDF **Page 4**: * Love You calendar collage. * June calendar. * Multiple photos. * "Love You ♥" * "xoxo" * Add subtle zoom-in animation. * Include button: **"Back to Letters"** ### Envelope 2 When Envelope 2 is clicked: * Play opening/cracking animation. * Open fullscreen modal. * Reveal the photo from PDF **Page 9**: * "I ♥ you" * "may all ur wish comes true" * Kiss/lips illustration. * Couple line-art illustration. * Add romantic fade-in effect. * Include button: **"Back to Letters"** ### Envelope 3 When Envelope 3 is clicked: * Play opening/cracking animation. * Open fullscreen modal. * Reveal the photo from PDF **Page 8**: * "To the love of my soul" * Heartfelt letter page. * Couple photograph. * Add elegant paper-opening animation. * Include button: **"Back to Letters"** ### Envelope 4 (Final Reveal) When Envelope 4 is clicked: * Play the most special opening animation. * Transition to a dedicated final page instead of a modal. Show the photo from PDF **Page 6**: * "I Love US" * "Together" * Romantic scrapbook collage. Overlay a typewriter animation displaying this heartfelt message: "My favorite place has never been a city, a country, or a destination. It has always been beside you. Every smile, every memory, every little moment with you has made my life more beautiful. You are my comfort, my happiness, my safe place, and my forever favorite person. No matter where life takes us, my heart will always choose you. I love us. I love our story. And most of all, I love you ❤️" ### Visual Effects * Floating hearts throughout the site. * Soft pastel pink, cream, beige, and blush color palette. * Elegant romantic fonts (Playfair Display + Poppins). * Smooth animations using Framer Motion or CSS animations. * Glassmorphism cards where appropriate. * Gentle background particles/hearts. * Romantic fade and scale transitions between pages. ### Technical Requirements * HTML, CSS, and JavaScript (or React + Tailwind). * Fully responsive on mobile and desktop. * LocalStorage to remember opened envelopes. * Accessible buttons and animations. * Optimized image loading. ### Exact PDF Photo Sequence Envelope 1 → PDF Page 4 → Love You Calendar Collage Envelope 2 → PDF Page 9 → I ♥ You / May All Ur Wish Comes True / Kiss Illustration Envelope 3 → PDF Page 8 → To The Love Of My Soul Letter Page Envelope 4 → PDF Page 6 → I Love US / Together Collage + Typewriter Final Message No Continue button after Envelope 4. The typewriter message appears directly on the final photo page.