archdesignstudio

Tamshina

Build a premium luxury architecture studio website for: ARCH DESIGN STUDIO MAROOF Studio services: Architecture | Interior | 3D Models | Vastu Founded by: Maroof Ansari Email: designarchstudio60@gmail.com Instagram: @archdesignstudio.maroof DESIGN DIRECTION: Create an extremely premium, cinematic architecture portfolio website inspired by high-end international architecture studios. The website must NOT look like a normal business website. It should feel like an Awwwards-level luxury architecture experience. Visual style: - Dark charcoal / near-black background - Warm ivory sections - Minimal muted typography - Editorial luxury aesthetic - Large architectural photography - Massive elegant serif headlines - Small uppercase modern sans-serif labels - Lots of whitespace - Sophisticated transitions - No bright colors - No excessive rounded cards - No generic SaaS design - No gradients that look cheap - No stock-template appearance HERO: Create a full-screen cinematic hero. Headline: SPACES WITH PURPOSE. Subtitle: Architecture · Interior · 3D Models · Vastu Use a large photorealistic luxury contemporary villa as the hero visual. The hero should feel architectural, calm, expensive and cinematic. Add subtle mouse movement/parallax. 3D SCROLL EXPERIENCE: This is the most important feature. Create an interactive 3D architectural house in the hero using Three.js. As the user scrolls: - The camera should slowly move around the house - The house should rotate subtly - The camera should move closer and farther - Architectural elements should reveal progressively - Lighting should change subtly - The 3D object should feel integrated into the webpage - The animation must be controlled by scroll - Use GSAP ScrollTrigger for smooth scroll-linked animation Do NOT simply use a video pretending to be 3D. Use a real Three.js scene. If a real 3D model is not available, create a stylized modern luxury villa using Three.js primitive geometry. NAVIGATION: Minimal fixed navigation. Left: ARCH DESIGN STUDIO MAROOF Center/right: WORK STUDIO SERVICES CONTACT Right: START A PROJECT ↗ Navigation should be transparent over the hero and become darker/light depending on the section. SECTION 01 — STUDIO: Title: WE DESIGN CALM, DISTINCTIVE SPACES. Write a sophisticated short studio description about architecture, interiors, 3D visualization and Vastu. Keep the copy minimal and premium. SECTION 02 — SELECTED WORK: Create an editorial architecture portfolio. Use large images instead of small cards. Create these concept projects: 01 — CASA AURELIA Private Residence Hyderabad 02 — COURTYARD HOUSE Contemporary Villa 03 — MONUMENT INTERIOR Luxury Interior 04 — LINE HOUSE Vastu Residence IMPORTANT: These are concept/placeholder projects for the first website version. Do not claim that they are real completed projects. PROJECT PRESENTATION: Use huge full-width architectural images. Each project should contain: Project number Project name Project type Short description Add subtle image zoom/parallax while scrolling. When hovering over a project: - image slightly zooms - typography moves subtly - cursor interaction appears SECTION — APPROACH: Large editorial statement: “Architecture should feel inevitable.” Then explain that the studio considers site, people, light, proportion, material and Vastu principles. SECTION — SERVICES: Architecture Interior 3D Models Vastu Display them as large horizontal typography rows. Minimal borders. Elegant hover animation. SECTION — MATERIAL / LIGHT / FORM: Create an immersive image gallery with: - luxury villa exterior - modern living room - architectural detail - courtyard - night architecture Use large images with cinematic crop. SECTION — FOUNDER: Founded by Maroof Ansari Keep this section minimal and elegant. CONTACT: Large headline: HAVE A SPACE WORTH IMAGINING? Email: designarchstudio60@gmail.com Instagram: @archdesignstudio.maroof Add a simple Start a Project button. TECHNICAL REQUIREMENTS: Use: - React - Three.js - GSAP - GSAP ScrollTrigger - modern CSS - responsive design The website must work on: - desktop - tablet - mobile Use smooth scrolling. Optimize images and animations for performance. Use semantic HTML and good accessibility. Keep the code clean and componentized. Do not create a generic template. The final result should feel like a luxury architecture studio website, not a technology website.

Comments (0)

No comments yet. Be the first!

Page 1 of 2

System Requirements Document for archdesignstudio

Introduction

Arch Design Studio Maroof is a luxury architecture studio offering Architecture | Interior | 3D Models | Vastu, founded by Maroof Ansari. This project delivers the studio's first website: an extremely premium, cinematic architecture portfolio that must not read as a normal business website or a technology product. It is built to feel like an Awwwards-level luxury architecture experience — dark charcoal and warm ivory surfaces, massive elegant serif headlines, small uppercase modern sans-serif labels, large architectural photography, generous whitespace and sophisticated transitions.

The product intent, derived from the authoritative requirement thread, is:

Present the studio's identity, four services and founder with editorial restraint and premium copy.
Open with a full-screen cinematic hero carrying the headline SPACES WITH PURPOSE. and the subtitle Architecture · Interior · 3D Models · Vastu over a large photorealistic luxury contemporary villa visual.
Deliver the studio's stated most-important feature: a real Three.js architectural house in the hero, driven entirely by scroll through GSAP ScrollTrigger — camera orbit, subtle house rotation, dolly closer and farther, progressive architectural reveal, subtle lighting change, integrated into the page. A video that pretends to be 3D is explicitly forbidden.
Present an editorial Selected Work portfolio of four clearly labelled concept/placeholder projects that must never be claimed as real completed projects.
Carry the studio's approach statement, services rows, material/light/form gallery, founder section and contact channels.
Complete project inquiries through the studio's external email and Instagram channels.

Audience: prospective clients evaluating the studio for an architecture, interior, 3D visualization or Vastu project; and the studio founder/principal whose identity and contact channels the site carries.

Page 2 of 2

System Overview

Arch Design Studio Maroof's site is a single, publicly reachable, scroll-based editorial experience composed of eight ordered destinations: Landing, STUDIO, WORK, Approach, SERVICES, Material Light Form, Founder, CONTACT. Every destination is application-owned, custom UI, and reachable by an anonymous visitor with no identity establishment of any kind.

Actors

Prospective Client (human, application-user): the visitor who evaluates the studio, experiences the scroll-driven 3D house, reviews the concept projects and services, and starts a project through the studio's external channels.
Studio Founder / Principal (human, application-user): Maroof Ansari, named and presented in the Founder destination, whose studio identity, services and portfolio the site represents, and who receives project inquiries through the email and Instagram channels the site publishes.
Client-side rendering runtime (system, non-persona): the browser executing the real Three.js scene and the GSAP ScrollTrigger scroll-linked animation.
Email channel (designarchstudio60@gmail.com) and Instagram channel (@archdesignstudio.maroof) (external destinations, non-persona): the studio-owned surfaces where an inquiry is actually composed, sent, received and answered.

Accepted behavior

Area	Accepted behavior
Landing	Full-screen cinematic hero: headline "SPACES WITH PURPOSE.", subtitle "Architecture · Interior · 3D Models · Vastu", large photorealistic luxury contemporary villa visual, subtle mouse movement/parallax, real Three.js house controlled by scroll via GSAP ScrollTrigger.
Navigation	Minimal fixed navigation: left wordmark "ARCH DESIGN / STUDIO MAROOF"; links WORK, STUDIO, SERVICES, CONTACT; right "START A PROJECT ↗"; transparent over the hero and darker/light depending on the section beneath it.
STUDIO	Title "WE DESIGN CALM, DISTINCTIVE SPACES." plus a short, minimal, premium studio description covering architecture, interiors, 3D visualization and Vastu.
WORK	Editorial portfolio of large images instead of small cards; four concept projects with number, name, type, location and short description; scroll zoom/parallax; hover zoom, typography shift and cursor interaction; explicit placeholder disclosure.
Approach	Editorial statement "Architecture should feel inevitable." plus the explanation that the studio considers site, people, light, proportion, material and Vastu principles.
SERVICES	Architecture, Interior, 3D Models, Vastu as large horizontal typography rows with minimal borders and elegant hover animation.
Material Light Form	Immersive cinem

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.