System Requirements Document for terra-a

Introduction

The project "terra-a" aims to create a premium, next-level interactive website UI. This document outlines the system requirements for the project, focusing on enhancing the user interface with immersive 3D elements, smooth micro-interactions, and a refined dark-to-vibrant color palette. The design will incorporate glassmorphism accents and high-end motion design to elevate the user experience while maintaining usability and content hierarchy.

System Overview

The terra-a project is designed to provide users with an engaging and interactive experience through a sleek modern layout. The website will feature spacious sections, visually rich cards, dynamic hover states, and polished transitions. The core functionality revolves around user flows that guide both first-time and returning users through a personalized journey.

Functional Requirements as Story Points

• As a First Time User, I should be able to create my own Dopamine Menu starting from the landing page.
• As a Returning User, I should be able to log in and access my dashboard to continue my streak.
• As a User, I should be able to navigate through the Morning Menu and complete my routine.
• As a User, I should be able to manage and edit my menus from the dashboard.
• As a User, I should be able to engage with Brain Snacks and choose activities based on available time.
• As a User, I should be able to track my activities and view insights on my behavior trends.
• As a User, I should be able to set and track goals, including attaching activities and monitoring progress.
• As a User, I should be able to maintain a journal with entries, templates, and export options.
• As a User, I should be able to view and claim rewards based on my current points.
• As a User, I should be able to perform breathing exercises with guided animations.
• As a User, I should be able to use a focus timer to manage my work sessions.
• As a User, I should be able to set reminders and view their history.
• As a User, I should be able to access and modify settings related to my account, notifications, and privacy.

User Personas

• First Time User: New users who are exploring the platform for the first time and need guidance through the setup process.
• Returning User: Users who have previously interacted with the platform and are looking to continue their journey.
• Admin: Users with administrative privileges to manage content and user interactions.

Core User Flows

1. First Time User Flow:

   • Landing → Create Your Own Dopamine Menu → Introduction → Personalization → Your Core → Your Energy → Your World → Your Aspirations → Morning Routine → Final Touch → Generating Menu → Menu Created → Choose Template → Preview → Print (optional) → Dashboard

2. Returning User Flow:

   • Landing → Login → Dashboard → Continue Streak → Morning Menu → Today's Brain Snacks → Reflection → History

3. Morning Menu Flow:

   • Dashboard → Morning Menu → Today's Routine → Wake Up → Hydrate → Movement → Deep Work → Journal → Morning Complete → Dashboard

4. My Menus Flow:

   • Dashboard → My Menus → Select Menu → Preview → Edit → Duplicate → Delete → Print Again

5. Brain Snacks Flow:

   • Dashboard → Brain Snacks → Choose Time (5 min, 10 min, 20 min) → Activity → Done → Next Snack → Complete Session → Rewards

Visuals Colors and Theme

• primary: #1A1A1D (dark slate)
• primary_light: #4E4E50 (lighter slate)
• secondary: #C3073F (crimson)
• accent: #950740 (deep red)
• highlight: #6F2232 (burgundy)
• bg: #16161A (dark background)
• surface: #2C2C34 (card/panel background)
• text: #FFFFFF (white)
• text_muted: #B0B0B0 (light gray)
• border: #3E3E44 (subtle border)

Signature Design Concept

The homepage of terra-a will feature an interactive 3D galaxy map where each star represents a feature or section of the website. Users can click on a star to open a task card, drag to rotate the cluster, and hover to highlight connections. This concept will be built using @react-three/fiber and @react-three/drei for 3D interactions. The galaxy map will provide an immersive experience, allowing users to explore the platform's features in a visually captivating manner.

Landing Hero Motion Brief

The landing hero will depict a dynamic transformation of a user's daily routine into a vibrant, animated scene. Using motion/react and GSAP, the animation will show inputs like "Morning Routine" and "Brain Snacks" gathering around a central artifact, which then transforms into a completed, colorful Dopamine Menu. The scene will loop every 10 seconds, with interactive elements allowing users to explore different sections of their routine. The animation will maintain clarity and readability, even in a reduced-motion state.

Interaction Model & Motion Direction

• Intended Interaction Model: Parallax
  • The landing page will feature layered depth via scroll, with decorative layers translating at different speeds to create a visually rich first impression.
  • Interactive elements will have moderate scroll-triggered reveals, hover transitions, and spring physics for a polished user experience.

Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• The UI should be responsive and accessible on all major devices and browsers.
• The system must handle up to 10,000 concurrent users without performance degradation.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• 3D and Animation Libraries: @react-three/fiber, @react-three/drei, GSAP, motion/react

Assumptions and Constraints

• The Figma design file is assumed to be the authoritative source for UI flows and design elements.
• The website will be hosted on a cloud platform with scalable resources to accommodate user growth.

Glossary

• Dopamine Menu: A personalized set of activities designed to enhance user productivity and well-being.
• Brain Snacks: Short, engaging activities aimed at stimulating the user's mind.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.

This document serves as a comprehensive guide for the development and design of the terra-a project, ensuring all user requirements and design specifications are met.