shadow-storytelling

byAwais Khan

Act as an elite front-end developer, UI/UX designer, and romantic storytelling expert. Your task is to create a fully interactive, cinematic, emotionally engaging birthday website for a 17-year-old girl named Minahil. The website should feel like a private, romantic, story-driven digital experience — not just a simple webpage. It should be smooth, animated, immersive, and emotionally impactful. ----------------------------------- 🌌 CORE EXPERIENCE & FLOW ----------------------------------- The website must follow a storytelling journey with sections appearing step-by-step: 1. PASSWORD SCREEN (ENTRY GATE) - Full screen centered layout - Background: dark romantic gradient (black + deep purple/pink glow) - Text: "Enter Secret 💖" - Input field (password type) - Button: "Unlock 🔐" - When correct password is entered → transition smoothly to main experience - Wrong password → soft emotional alert (not harsh) 2. INTRO / LANDING SCENE - Cinematic intro - Text appears with typing animation: "Hey Minahil… I made something just for you ❤️" - Button: "Enter 🌙" - Background music starts after click - Subtle floating hearts animation in background 3. STORY SECTIONS (MULTIPLE SCREENS) Each section should fade/slide transition smoothly: Section 1: - Title: "Happy 17th Birthday My Jaana 💖" - Short emotional line Section 2: - "Our First Moment ✨" - Reference first meeting (black mask, eyes) Section 3: - "You Changed My Life ❤️" - Healing, emotional impact Section 4: - "Why I Love You 💕" - Add interactive button: → When clicked, shows random love reasons dynamically 4. PHOTO GALLERY SECTION - Title: "Our Moments 📸" - Grid layout (responsive) - Exactly 10 images - Rounded corners + hover zoom effect - Soft glow around images 5. FINAL SECTION (EMOTIONAL CLIMAX) - Title: "Happy Birthday My Queen ❤️" - Long emotional paragraph (romantic + dua/prayer tone) - This is the emotional peak 6. FIREWORKS SCENE (AFTER FINAL) - Automatically trigger fireworks animation on canvas - Fireworks should: - Burst from center - Use pink, red, golden colors - Fade naturally - Background slightly darkens for contrast ----------------------------------- 🎨 DESIGN SYSTEM (VERY IMPORTANT) ----------------------------------- COLOR THEME: - Primary: #ff4b7d (romantic pink) - Secondary: #ff758c - Background: black → dark purple gradient - Accent glow: soft neon pink shadows TYPOGRAPHY: - Font: modern soft (Segoe UI or Poppins) - Headings: large, glowing text - Paragraphs: readable, slightly spaced VISUAL STYLE: - Romantic, cinematic, Gen-Z aesthetic - Soft glow effects everywhere - Smooth transitions (no harsh jumps) ----------------------------------- ✨ ANIMATIONS & INTERACTIONS ----------------------------------- - Typing text animation (intro) - Smooth fade/slide transitions between sections - Floating hearts continuously rising - Button hover scale effect - Image hover zoom - Fireworks particle animation (canvas-based) - Love reasons generator (random text on click) ----------------------------------- 🎵 AUDIO ----------------------------------- - Background romantic music - Should NOT autoplay immediately (browser restriction) - Start after first user interaction (button click) ----------------------------------- 🔐 LOGIC (IMPORTANT) ----------------------------------- - Password must be customizable - Only correct password unlocks site - Sections controlled via JavaScript (show/hide or scroll-based) - Fireworks triggered ONLY on final section ----------------------------------- 📸 MEDIA PLACEHOLDERS ----------------------------------- - Use placeholders for: pic1.jpg → pic10.jpg - Music file placeholder: YOUR-MUSIC.mp3 ----------------------------------- 📱 RESPONSIVENESS ----------------------------------- - Must work perfectly on mobile (priority) - Buttons large and clickable - Text centered and readable ----------------------------------- 💖 EMOTIONAL TONE ----------------------------------- The entire website must feel: - Personal - Soft - Deep - Romantic but respectful - Slight mix of Urdu + English tone in text ----------------------------------- ⚡ FINAL GOAL ----------------------------------- When she opens the link: - She feels curiosity (password) - Then surprise (intro) - Then emotional connection (story) - Then nostalgia (gallery) - Then love (final message) - Then WOW moment (fireworks) This is not just a website. This is a digital love experience. ----------------------------------- Generate full HTML, CSS, and JavaScript in a single file. Ensure code is clean, well-structured, and ready to deploy.