System Requirements Document for site-matrix-3d

1. Introduction

SITE MATRIX 3D is a mobile application designed for architectural designers and structural reviewers to create, inspect, and interact with architectural structures in a floating holographic 3D viewport. The app emphasizes a high-tech, immersive experience with a wireframe aesthetic, dynamic navigation, and real-time AI assistance.

2. System Overview

SITE MATRIX 3D provides a platform for designing and inspecting architectural structures using a holographic 3D viewport. The application is built for mobile devices, offering a cinematic future-tech experience inspired by Gleb Kuznetsov. It includes features such as thumb-driven navigation, real-time AI suggestions, and the ability to auto-generate 2D CAD floor plans from 3D models. The app supports a glowing cyan/neon-blue wireframe aesthetic and includes a floating pedestal for structures.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a mobile app with application-owned identity, requiring self-service enrollment and returning verification for access to durable projects and AI guidance. The app includes custom UI elements and adheres to a dark mode palette. The primary experience is a floating holographic 3D viewport, with navigation accommodating thumb-driven and gyroscopic interactions. The app does not impose strict CAD limits, allowing for creative freedom in design.

2b. Source Content Inventory

Not applicable as no content_source directive was provided.

2c. Page Content and Component Coverage

Landing

• Information/State: Introduction to SITE MATRIX 3D, its features, and use cases.
• Primary Actions: Explore app features, learn about architectural design and review capabilities.
• Components: Interactive 3D viewport preview, feature highlights, call-to-action for sign-up/login.

Login

• Information/State: User authentication for returning access.
• Primary Actions: Enter credentials, submit login.
• Components: Username and password fields, login button, forgot password link.

Sign Up

• Information/State: User registration for first-time access.
• Primary Actions: Enter user details, submit registration.
• Components: Registration form fields (name, email, password), sign-up button.

Projects

• Information/State: Browse and manage architectural projects.
• Primary Actions: Open project, create new project, view project details.
• Components: Project list, search/filter options, project detail view.

Studio

• Information/State: Workspace for creating and modifying structures.
• Primary Actions: Draw, stack blocks, switch visualization modes.
• Components: 3D viewport, drawing tools, visualization mode toggles, HUD quick actions.

Review

• Information/State: Structural inspection and evaluation.
• Primary Actions: Inspect model, evaluate structural layers, view coordinate callouts.
• Components: 3D model viewer, structural layer controls, coordinate callout display.

Copilot

• Information/State: AI guidance for design improvements.
• Primary Actions: Receive AI suggestions, apply recommendations.
• Components: AI suggestion panel, action buttons for applying suggestions.

Plans

• Information/State: View generated 2D CAD floor plans and elevations.
• Primary Actions: View, download, and print plans.
• Components: Plan viewer, download/print options.

3. Functional Requirements

• As an Architectural Designer, I should be able to create and explore architectural structures using freehand drawing and procedural block stacking without strict CAD limits. (explicit)
• As an Architectural Designer, I should be able to navigate the 3D viewport using thumb-driven controls and gyroscopic tilt to explore structures in detail. (explicit)
• As an Architectural Designer, I should receive real-time AI suggestions for structural, architectural, and aesthetic improvements. (explicit)
• As an Architectural Designer, I should be able to auto-generate 2D CAD floor plans and elevations from the 3D model in real time. (explicit)
• As a Structural Reviewer, I should be able to inspect structural models and evaluate structural conditions using AI suggestions for load warnings and support placement. (explicit)
• As a user, I should be able to sign up and log in to access my projects and AI guidance. (required_inference)
• As a user, I should be able to browse and manage my architectural projects. (required_inference)

4. User Personas

• Architectural Designer: Responsible for creating and exploring architectural structures using the app's design tools and AI guidance. Engages with freehand drawing, procedural block stacking, and visualization modes.
• Structural Reviewer: Focuses on inspecting and evaluating structural models, utilizing AI suggestions for structural improvements and safety assessments.

5. Core User Flows

Architectural Designer Flow

1. Landing: Explore app features and sign up.
2. Sign Up: Register for access.
3. Login: Authenticate and access the app.
4. Projects: Browse and select a project to work on.
5. Studio: Create and modify structures using design tools and visualization modes.
6. Copilot: Receive and apply AI suggestions for design improvements.
7. Plans: View and manage generated 2D CAD plans.

Structural Reviewer Flow

1. Landing: Explore app features and sign up.
2. Sign Up: Register for access.
3. Login: Authenticate and access the app.
4. Projects: Browse and select a project for review.
5. Review: Inspect structural models and evaluate conditions using AI suggestions.

6. Visuals Colors and Theme

• Muse: Gleb Kuznetsov
• Palette:
  • Background: #000011
  • Surface: #0A0A1A
  • Text: #E0E0FF
  • Primary: #00FFFF
  • Accent: #FF00FF
  • Muted: #33334D
• Typography:
  • Headings: Space Grotesk
  • Body: Orbitron
  • Scale: 1.25 modular, 64/48/32/24/18
• Shape Language: Floating glass panels, thin luminous strokes, radial layouts
• Layout: Full-bleed 3D scenes with floating interactive elements and HUD-like overlays

7. Signature Design Concept

The public entry page features a full-bleed 3D scene where the architectural structure hovers over a dark grid void. Electric cyan wireframes and luminous nodes are prominently displayed, with interactive 3D elements on a deep navy background. Floating HUD panels provide real-time project data, and dynamic coordinate callouts enhance the immersive experience.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: Cinematic
• Hero Dimensionality: webgl
• Landing Hero Motion Brief: The focal subject is a 3D architectural structure hovering over a dark grid void. The input involves thumb-driven navigation and gyroscopic tilt, transforming the perspective and revealing structural details. The outcome is an immersive exploration of the structure, enhanced by continuous slow orbit and light sweeps. The first frame features the structure in its entirety, with reduced-motion options available.

9. Non-Functional Requirements

• The app must maintain a high frame rate to ensure smooth navigation and interaction. (required_inference)
• The app should be optimized for mobile devices, ensuring compatibility across major platforms. (required_inference)
• The app must provide secure authentication and authorization mechanisms to protect user data and project integrity. (required_inference)

10. Tech Stack

• Frontend: React Native
• Backend: Python/FastAPI
• Storage: Appropriate cloud storage solution for model persistence
• Deployment: Docker/docker-compose for containerization; Kubernetes for orchestration if necessary

11. Assumptions and Constraints

• The app is designed exclusively for mobile platforms.
• The primary user interface is a floating holographic 3D viewport.
• The app's visual style is constrained to a dark mode palette with glowing cyan wireframes.
• Navigation must support specified thumb-driven and gyroscopic interactions.

12. Glossary

• 3D Viewport: The interactive area where users can view and manipulate 3D models.
• AI Co-Pilot: The feature providing real-time AI suggestions for design improvements.
• Blueprint HUD: Heads-up display showing project information and quick actions.
• Floating Pedestal: The visual element on which structures hover within the app.
• Wireframe Aesthetic: The visual style using glowing cyan/neon-blue vector lines.