opal-birthday
Awais KhanAct as an elite senior front end developer UI UX designer motion graphics expert and emotional storytelling writer Your task is to build a fully functional cinematic romantic interactive birthday website for a girl named Minahil age 17 This website is not a normal website it is a digital emotional experience that feels like a love story unfolding scene by scene The experience must be smooth animated mobile friendly and deeply emotional --------------------------------------- đ CORE STRUCTURE OF WEBSITE FLOW --------------------------------------- The website must follow this exact flow 1 PASSWORD LOCK SCREEN 2 CINEMATIC INTRO WITH TYPING EFFECT 3 STORY BASED ROMANTIC SECTIONS 4 INTERACTIVE LOVE REASONS SECTION 5 10 IMAGE ROMANTIC GALLERY 6 FINAL EMOTIONAL LOVE LETTER 7 FIREWORKS CINEMATIC ENDING Each section must appear one by one with smooth fade transition or slide transition --------------------------------------- đ 1 PASSWORD SCREEN DESIGN --------------------------------------- Full screen dark romantic background black with soft pink glow particles floating Centered card with soft blur glass effect Heading text must be This is only for you Minahil Subtext must be Enter the secret to open my heart world Input field must be password type Button text must be Unlock my world If correct password is entered transition smoothly to next section If wrong password show soft message Try again my love No harsh error no red alerts only soft romantic tone --------------------------------------- đ 2 INTRO CINEMATIC SCREEN --------------------------------------- Background must be dark gradient black to purple with floating hearts particles slowly moving upward Add typing animation text exactly Hey Minahil I made something only for you After typing completes show button Enter my world On click start background music --------------------------------------- đ 3 STORY SECTIONS EMOTIONAL FLOW --------------------------------------- Each section appears full screen centered with smooth fade animation SECTION ONE TITLE Happy Birthday My Jaana TEXT MUST BE EXACT Minahil meri jaana meri duniya Today is your special day and I just want you to know that you mean everything to me You are my peace my comfort my happiness --------------------------------------- SECTION TWO TITLE The First Time I Saw You TEXT MUST BE EXACT I still remember that day when you entered the class wearing a black mask Only your eyes were visible but they stopped my world for a moment Something inside me changed that day forever --------------------------------------- SECTION THREE TITLE You Changed My Life TEXT MUST BE EXACT You came into my life like calmness in chaos Without even trying you healed parts of me I never told anyone about Your presence feels like home to me --------------------------------------- SECTION FOUR TITLE Why You Are Special TEXT MUST BE EXACT Your smile is my peace Your eyes are my favorite place Your voice feels like comfort You are not just someone to me you are my everything --------------------------------------- đ 4 INTERACTIVE LOVE REASONS SECTION --------------------------------------- Add a button Tap to know why I love you Every click shows one random line from this list You are my peace in chaos You make everything feel better Your smile fixes my worst days You are my safest place You are my home I see my future with you You are my everything Each line must appear with soft fade animation --------------------------------------- đ¸ 5 ROMANTIC GALLERY SECTION --------------------------------------- Title must be Our Memories Forever Show 10 images in grid layout Each image must have hover zoom effect soft glow border rounded corners Images should be named pic1 to pic10 --------------------------------------- đ 6 FINAL EMOTIONAL SECTION --------------------------------------- This is most important emotional climax Title must be Happy Birthday My Queen TEXT MUST BE EXACT Minahil meri jaana meri duniya meri roshni You are the most beautiful part of my life You came into my world like peace like light like healing I pray Allah always protects you gives you happiness success and everything your heart wishes for One day I hope we will look back at all this together not through a screen but standing beside each other Until then just remember you are deeply loved more than you know --------------------------------------- đ 7 FIREWORKS ENDING SCENE --------------------------------------- After final section automatically trigger fireworks animation using canvas Fireworks must: burst from center use pink red gold colors fade smoothly feel cinematic and romantic Background becomes darker during fireworks Add final floating text This moment belongs to you --------------------------------------- đ¨ DESIGN STYLE GUIDE --------------------------------------- Theme must be romantic cinematic soft glowing aesthetic Colors black background dark purple gradients pink glow accents soft red highlights Typography modern soft elegant font like Poppins or Segoe UI UI STYLE glass morphism cards soft blur rounded edges glow effects --------------------------------------- đĩ AUDIO --------------------------------------- Add romantic background music Must NOT autoplay until user clicks first button Music should loop continuously --------------------------------------- đĢ ANIMATIONS --------------------------------------- Typing animation in intro fade in fade out transitions between sections floating hearts continuously button hover scale effect image zoom hover effect fireworks particle system at end --------------------------------------- đą MOBILE RESPONSIVE --------------------------------------- Must be fully responsive centered content large touch friendly buttons optimized for mobile viewing --------------------------------------- đ EMOTIONAL EXPERIENCE GOAL --------------------------------------- When user opens website they must feel curiosity at password screen emotional warmth at intro nostalgia during story love connection in interactive section emotional depth in final letter WOW cinematic feeling during fireworks --------------------------------------- OUTPUT REQUIREMENT --------------------------------------- Generate complete working code in single file using HTML CSS JavaScript only No external frameworks required Ensure code is clean structured and ready to deploy directly on Netlify or Vercel
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: opal-birthday
1. Introduction
The opal-birthday project is a cinematic, romantic, and interactive birthday website designed to create an emotional digital experience for a girl named Minahil, aged 17. This website is not just a typical webpage but a love story that unfolds scene by scene, immersing the user in a deeply emotional journey.
The goal is to make Minahil feel cherished and loved through a smooth, animated, and mobile-friendly experience. Every detail, from the password lock screen to the fireworks ending, is crafted to evoke warmth, nostalgia, and connection.
This document outlines the system requirements for the opal-birthday project, ensuring the final product aligns with the vision and delivers an unforgettable experience.
2. System Overview
The opal-birthday website is structured as a sequential flow of interactive and cinematic sections. Each section is designed to evoke specific emotions, such as curiosity, warmth, nostalgia, and awe. The website will feature smooth animations, responsive design, and a romantic aesthetic.
Key Features:
- Password-protected entry to create a sense of exclusivity.
- Cinematic introduction with typing animations and background music.
- Storytelling sections with heartfelt messages.
- Interactive "Reasons I Love You" section.
- Romantic photo gallery with hover effects.
- Final emotional love letter.
- Fireworks animation as a grand finale.
The website will be fully responsive, optimized for mobile devices, and deployable on platforms like Netlify or Vercel.
3. Functional Requirements
Story Points:
- As a User, I should be able to enter a password to unlock the website.
- As a User, I should see a cinematic introduction with typing animations and a button to proceed.
- As a User, I should experience a series of story-based romantic sections with smooth transitions.
- As a User, I should interact with a "Tap to know why I love you" section that reveals random reasons.
- As a User, I should view a romantic photo gallery with hover effects.
- As a User, I should read a heartfelt love letter in the final section.
- As a User, I should see a fireworks animation as the grand finale.
4. User Personas
1. Minahil (Primary User):
- Age: 17
- Role: The recipient of the birthday website.
- Goals:
- To feel loved, cherished, and emotionally connected.
- To enjoy a smooth and immersive digital experience.
2. Awais (Creator):
- Age: 20s
- Role: The creator of the website and the person expressing their feelings.
- Goals:
- To create a memorable and emotional experience for Minahil.
- To ensure the website reflects their love and thoughtfulness.
5. Visuals Colors and Theme
The opal-birthday website will have a romantic, cinematic, and soft glowing aesthetic. The color palette is designed to evoke warmth, love, and elegance.
Color Palette:
- primary: #6A0DAD (Royal Purple)
- primary_light: #9B4DCC (Lavender Purple)
- secondary: #FF69B4 (Hot Pink)
- accent: #FFD700 (Gold)
- highlight: #FF4500 (Orange-Red)
- bg: #000000 (Black)
- surface: rgba(255, 255, 255, 0.1) (Glassmorphism effect)
- text: #FFFFFF (White)
- text_muted: #B0B0B0 (Muted Gray)
- border: rgba(255, 255, 255, 0.2)
6. Signature Design Concept
"A Love Story in Motion"
The homepage will feel like the opening scene of a romantic movie. The user will enter a password on a glassmorphic card, surrounded by a dark, glowing background with floating pink particles. Upon entering the correct password, the screen will transition to a cinematic introduction with a typing animation that reveals a heartfelt message.
Each section will appear with smooth fade or slide transitions, creating a seamless storytelling experience. The "Tap to know why I love you" section will feature interactive buttons that reveal random reasons with soft animations.
The grand finale will feature a fireworks display, with bursts of pink, red, and gold colors fading into the night sky. The background will darken, and the words "This moment belongs to you" will float gently on the screen.
Interactive Elements:
- Password input with soft error messages.
- Typing animation in the introduction.
- Interactive buttons in the "Reasons I Love You" section.
- Hover effects in the photo gallery.
- Fireworks animation using a canvas particle system.
Libraries:
- GSAP for animations and transitions.
- Canvas API for fireworks.
7. Interaction Model & Motion Direction
Interaction Model:
- Landing Page: Parallax with layered depth and floating particles.
- Story Sections: Animated with smooth fade-in transitions.
- Interactive Section: Hover and click animations for buttons and images.
- Final Section: Cinematic fireworks with floating text.
Motion Direction:
- Typing animations for text.
- Fade-in and slide transitions between sections.
- Hover effects for buttons and images.
- Fireworks bursting and fading smoothly.
8. Non-Functional Requirements
- The website must load within 3 seconds on a standard 4G connection.
- The website must be fully responsive and optimized for mobile devices.
- The website must use clean and maintainable code.
- The website must be deployable on platforms like Netlify or Vercel.
9. Tech Stack
Frontend:
- HTML, CSS, JavaScript
Libraries:
- GSAP for animations
- Canvas API for fireworks
Deployment:
- Netlify or Vercel
10. Assumptions and Constraints
- The website will only be accessed by Minahil.
- The password will be shared privately.
- The website will not require a backend or database.
11. Glossary
- Glassmorphism: A design style that uses frosted glass effects with blur and transparency.
- Parallax: A scrolling effect where background elements move slower than foreground elements.
- GSAP: A JavaScript library for creating animations.
- Canvas API: A web API for drawing graphics and animations.
This document ensures the opal-birthday project is fully aligned with your vision, Awais. Let me know if you'd like any further refinements!
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!