System Requirements Document (SRD)

Project Name: starry-3d

1. Introduction

The starry-3d project aims to deliver a cutting-edge, immersive, and interactive 3D construction project management website. Designed for construction firms, architects, and project managers, this platform combines modern web technologies with 3D visualization to streamline project planning, tracking, and presentation.

The website will feature advanced functionalities such as project uploads with data extraction, realistic 3D building models, animated construction phases, interactive timelines, and a professional dashboard. Leveraging technologies like React.js, Three.js, GSAP, and Tailwind CSS, starry-3d will provide a seamless and visually stunning user experience.

This document outlines the system requirements for starry-3d, ensuring clarity and alignment with FT Nexavvy's vision for the platform.

2. System Overview

The starry-3d platform will serve as a comprehensive tool for construction project management. Users will be able to upload project details, visualize construction progress through 3D animations, and monitor milestones via an interactive timeline.

Key features include:

• Project Upload: Users can upload floor plans, PDFs, or fill out forms to input project details.
• 3D Building Model: Realistic multi-floor building models generated or displayed based on uploaded data.
• Construction Animation: Step-by-step visualization of construction phases, from site preparation to project completion.
• Interactive Timeline: Clickable milestones for navigating construction phases.
• Project Dashboard: A detailed overview of project stats, including floors, area, timeline, and completion percentage.

The platform will adopt a clean, dark-themed professional UI with bright accent colors to highlight construction phases, ensuring both functionality and aesthetic appeal.

3. Functional Requirements

User Stories:

• As a User, I should be able to upload a construction project (floor plan image, PDF, or project details form).
• As a User, I should be able to view a realistic 3D model of the building based on the uploaded project details.
• As a User, I should be able to see animated construction phases (site preparation → foundation → structure → finishing → complete).
• As a User, I should be able to interact with a timeline slider to scrub through construction phases.
• As a User, I should be able to click on milestones in the timeline to jump to specific construction phases.
• As a User, I should be able to rotate the completed 3D building model using a 360° orbit camera.
• As a User, I should be able to view project stats (total floors, area, estimated duration, current phase, % completion) in a dashboard.

4. User Personas

1. Construction Firm Representative

• Role: Project manager or executive overseeing multiple construction projects.
• Needs: Upload project details, monitor progress, and present updates to stakeholders.

2. Architect

• Role: Designer or planner responsible for visualizing and refining building designs.
• Needs: View realistic 3D models, ensure design accuracy, and track construction phases.

3. General User

• Role: Individual interested in construction progress (e.g., investors, clients).
• Needs: Explore project details, view animations, and interact with timelines.

5. Visuals Colors and Theme

Color Palette:

• Background: #0F172A (Dark Navy Blue)
• Surface: #1E293B (Slate Gray)
• Text: #F8FAFC (Light Gray)
• Accent: #F59E0B (Amber Yellow for construction phases)
• Muted Tones: #64748B (Muted Blue for secondary elements)

This palette ensures a professional, modern aesthetic while emphasizing construction progress with bright accents.

6. Signature Design Concept

Interactive 3D Construction Journey

The homepage will feature a 3D interactive construction site as its centerpiece. Upon landing, users will see an empty plot of land with subtle environmental animations (e.g., moving clouds, cranes in the background).

As users scroll or interact with the timeline slider, the plot transforms dynamically:

1. Site Preparation: Excavation animations with soil movement and foundation markings.
2. Foundation: Concrete pouring and rebar placement, with cranes and scaffolding appearing.
3. Structure: Floor-by-floor construction with walls, columns, and slabs rising.
4. Finishing: Windows, cladding, and landscaping added layer by layer.
5. Completion: The fully built 3D model appears, complete with orbit camera functionality and celebratory particle effects.

Micro-interactions include:

• Hover Effects: Milestones glow when hovered over.
• Camera Transitions: Smooth zoom-ins and orbit rotations.
• Dynamic Lighting: Adjusted lighting based on construction phase (e.g., sunrise for site prep, sunset for finishing).

This bold concept ensures the website is not only functional but unforgettable.

7. Non-Functional Requirements

• Performance: Ensure smooth animations and 3D rendering with minimal latency.
• Scalability: Support multiple simultaneous users and large project uploads.
• Accessibility: Adhere to WCAG 2.1 standards for color contrast and keyboard navigation.
• Security: Implement secure file upload mechanisms and protect user data.

8. Tech Stack

Frontend:

• React.js for component-based UI development.
• Three.js for 3D rendering and visualization.
• GSAP for animation sequencing.
• Tailwind CSS for styling.

Backend:

• Node.js with Express for file upload and API handling.

Database:

• MySQL or MariaDB for structured project data storage.

AI Tools:

• GPT 5.4 for user-friendly responses.

Local Orchestration:

• Docker and docker-compose for containerized development.

9. Assumptions and Constraints

Assumptions:

• Users will primarily access the platform via desktop browsers.
• Uploaded project details will include sufficient data for generating 3D models.
• Internet connectivity is required for animations and 3D rendering.

Constraints:

• The platform must support large file uploads (up to 100 MB).
• 3D rendering performance may vary based on user hardware.

10. Glossary

• 3D Model: A digital representation of a building or structure.
• Timeline Slider: An interactive UI element for navigating construction phases.
• Orbit Camera: A camera that allows users to rotate and view a 3D object from all angles.
• GSAP: GreenSock Animation Platform, used for creating smooth animations.
• Three.js: A JavaScript library for 3D rendering in web applications.