System Requirements Document (SRD)

Project Name: shadow-storytelling

1. Introduction

The shadow-storytelling project is a deeply personal, interactive, and cinematic digital experience designed to celebrate the 17th birthday of Minahil. This project aims to create an emotionally engaging, story-driven website that feels like a private romantic journey. The website will incorporate smooth animations, immersive storytelling, and a soft Urdu aesthetic to make the experience heartfelt and memorable.

This document outlines the system requirements for the project, ensuring every detail aligns with the intended emotional tone and technical functionality.

2. System Overview

The shadow-storytelling website will guide Minahil through a series of interactive and visually stunning sections, each designed to evoke curiosity, surprise, nostalgia, and love. The experience begins with a password-protected entry and culminates in a fireworks display, symbolizing celebration and joy.

The website will feature:

• A customizable password gate (default: "03-05-2009").
• A romantic storytelling journey with Urdu-English blended text.
• A photo gallery showcasing 10 key moments (images to be manually uploaded by the user).
• Smooth animations, transitions, and interactive elements.
• A responsive design optimized for mobile and desktop.

The goal is to create a digital love letter that Minahil will cherish forever.

3. Functional Requirements

The following story points outline the core functionality of the shadow-storytelling project:

• As a User, I should be able to enter the website using the password "03-05-2009".
• As a User, I should see a cinematic intro with typing text animation and a button to proceed.
• As a User, I should experience multiple story sections with smooth transitions and Urdu-English blended text.
• As a User, I should interact with a button that generates random reasons for love dynamically.
• As a User, I should view a photo gallery with 10 images displayed in a responsive grid layout.
• As a User, I should experience a fireworks animation at the end of the journey.
• As a User, I should hear romantic background music that starts after my first interaction.
• As a User, I should experience a soft Urdu aesthetic throughout the website.

4. User Personas

1. Primary User: Minahil

• Age: 17
• Role: The recipient of the website.
• Goals: To feel loved, surprised, and emotionally connected through an immersive digital experience.

2. Administrator: Awais Khan

• Role: The creator and maintainer of the website.
• Goals: To ensure the website functions smoothly, upload images, and customize content as needed.

5. Visuals Colors and Theme

The visual design of the shadow-storytelling project will reflect a romantic, cinematic, and Gen-Z aesthetic. Below is the unique color palette:

Color Palette

• primary: #ff4b7d (romantic pink)
• primary_light: #ff758c (lighter pink for hover states)
• secondary: #6a5acd (soft indigo for emphasis and links)
• accent: #ffd700 (golden for CTAs and highlights)
• highlight: #ff4500 (warm orange for notifications and active states)
• bg: linear-gradient(black, #2e004f) (dark purple gradient background)
• surface: rgba(46, 0, 79, 0.8) (semi-transparent purple for cards/panels)
• text: #ffffff (white for primary text)
• text_muted: #d3d3d3 (light gray for secondary text)
• border: rgba(255, 75, 125, 0.2) (subtle pink border)

6. Signature Design Concept

Concept Name: "Romantic Storybook Journey"

The homepage will feel like opening a magical storybook. Upon entering the password, the screen will "unlock" with a glowing animation, revealing a cinematic intro. Each section will appear as if flipping through the pages of a digital storybook.

Key Features:

• Interactive Storybook Animation: Each section will "turn" like a page, with smooth transitions powered by framer-motion.
• Floating Hearts: Subtle heart animations will rise continuously in the background, creating a romantic atmosphere.
• Dynamic Love Reasons Generator: Clicking a button will reveal random reasons for love, displayed with a typewriter effect.
• Fireworks Finale: The final section will trigger a fireworks animation using canvas and gsap, with bursts in pink, red, and gold.

This concept will make the website feel alive, interactive, and deeply personal.

7. Interaction Model & Motion Direction

Landing/Home Page Interaction Model: Parallax

The homepage will use a parallax effect to create depth and immersion. Layers of floating hearts and glowing text will move at different speeds as the user scrolls.

Internal Pages: Animated

Each section will feature smooth fade/slide transitions, hover effects, and interactive elements.

Motion Details:

• Typing Animation: Text will appear letter by letter in the intro and story sections.
• Hover Effects: Buttons will scale slightly and glow on hover.
• Fireworks Animation: Fireworks will burst dynamically in the final section.

8. Non-Functional Requirements

• The website must load within 3 seconds on a standard 4G connection.
• All animations must run smoothly at 60 FPS.
• The website must be fully responsive and optimized for mobile devices.
• The password must be securely stored and customizable.

9. Tech Stack

Frontend

• React for Web
• Framer Motion for animations
• GSAP for advanced animations (fireworks, transitions)

Backend

• Python with FastAPI for password validation and content management

Database

• MySQL for storing password and dynamic content

AI Tools

• None required for this project

Orchestration

• Docker for local development
• Kubernetes for server-side orchestration

10. Assumptions and Constraints

• The user will manually upload images to replace placeholders (pic1.jpg to pic10.jpg).
• The website will be hosted on a platform supporting React and Python.
• The password will remain static unless updated by the administrator.

11. Glossary

• Parallax: A design effect where background elements move slower than foreground elements, creating depth.
• Framer Motion: A React library for animations.
• GSAP: A JavaScript library for creating high-performance animations.
• Responsive Design: A design approach ensuring the website works seamlessly on all devices.