System Requirements Document (SRD)

Project Name: mellow-ai

1. Introduction

The mellow-ai project aims to create an immersive, scroll-stopping website for the AI content creation company Frame Forge. The website will showcase the company's expertise in producing premium content, integrating interactive 3D elements, and providing seamless navigation to its portfolio of YouTube channels and services. The design will emphasize light colors, specifically purple and white, to align with the brand's aesthetic and logo.

2. System Overview

The website will serve as a digital hub for Frame Forge, highlighting its capabilities in AI-driven content creation. It will feature:

• Interactive 3D elements that respond to user scrolling.
• YouTube channel integration for direct access to projects like Cafe Stories, Hidden Library, and Viktor Reconstructions.
• Premium design with a purple-and-white color palette, modern typography, and animations.
• Contact form for inquiries and collaboration opportunities.
• Content showcase for advertisements and featured projects.

The system will leverage cutting-edge tools like Claude Code, Framer Motion, and Three.js to deliver a visually stunning and interactive experience.

3. Functional Requirements

• As a User, I should be able to view interactive 3D models that move as I scroll.
• As a User, I should be able to click on YouTube channel cards to navigate directly to the respective channels.
• As a User, I should be able to view featured ads and content in a dedicated section.
• As a User, I should be able to fill out a contact form for inquiries.
• As a User, I should experience smooth animations and transitions throughout the website.

4. User Personas

1. Admin

• Manages website content, including ads, featured projects, and YouTube links.
• Updates 3D models and animations as needed.

2. User

• Visits the website to explore Frame Forge's services and portfolio.
• Interacts with 3D elements and navigates to YouTube channels.
• Uses the contact form to reach out for collaborations or inquiries.

5. Visuals Colors and Theme

Color Palette

• primary: #9B59B6 (Amethyst Purple)
• primary_light: #DCC6E0 (Lavender Mist)
• secondary: #FFFFFF (Pure White)
• accent: #F39C12 (Amber Glow)
• highlight: #E74C3C (Crimson Red)
• bg: #2C3E50 (Deep Midnight Blue)
• surface: rgba(44, 62, 80, 0.8) (Semi-transparent Midnight Blue)
• text: #FFFFFF (White)
• text_muted: #BDC3C7 (Muted Silver)
• border: rgba(189, 195, 199, 0.2) (Soft Silver Border)

6. Signature Design Concept

Interactive 3D Scroll Experience
The homepage will feature a dynamic 3D environment where elements like floating geometric shapes, glowing particles, and interactive models move and transform as users scroll.

Key Features:

• Hero Section: A glowing 3D logo (Frame Forge) surrounded by animated particles that react to cursor movements.
• Scroll-triggered Animations: Sections reveal themselves with smooth transitions, while 3D models rotate, scale, or morph based on scroll position.
• Interactive YouTube Cards: Cards for Cafe Stories, Hidden Library, and Viktor Reconstructions flip and expand on hover, with embedded links to the respective channels.
• Content Showcase: Ads and featured projects displayed in a carousel with subtle motion effects.

Tools:

• Three.js for 3D elements.
• Framer Motion for animations and transitions.
• React for seamless interactivity.

7. Interaction Model & Motion Direction

Interaction Model: Parallax

The landing page will use a parallax scrolling effect, creating depth and immersion. Layers of content will move at different speeds, enhancing the visual experience.

Motion Direction:

• Scroll-triggered reveals for sections.
• Hover animations for interactive elements like YouTube cards.
• Spring physics for smooth transitions between states.

8. Non-Functional Requirements

• Performance: The website must load within 3 seconds on standard broadband connections.
• Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
• Responsiveness: The design must adapt seamlessly to desktop, tablet, and mobile devices.
• Scalability: Support future additions of new content and features without significant redesign.

9. Tech Stack

Frontend

• React
• Framer Motion
• Three.js

Backend

• FastAPI

Database

• MongoDB

AI Tools

• Claude Code
• Langchain

Local Orchestration

• Docker

Server-side Orchestration

• Kubernetes

10. Assumptions and Constraints

• The user does not have pre-existing 3D assets; all models will be custom-created.
• The website must integrate YouTube links seamlessly without external plugins.
• The design must align with the provided logo and color palette.

11. Glossary

• Parallax: A scrolling technique where background images move slower than foreground images, creating a sense of depth.
• Framer Motion: A library for creating animations and transitions in React applications.
• Three.js: A JavaScript library used to create and display 3D graphics in web browsers.
• Claude Code: An AI tool for generating websites and code from prompts.

This document outlines the requirements for the mellow-ai project, ensuring a premium, immersive experience for Frame Forge's website.