System Requirements Document for azure-buld

1. Introduction

azure-buld is the public 3D website of a real-estate company (شركة عقارات). Its product intent is stated directly by the requester: a site where buildings are constructed as the visitor scrolls — every scroll gesture makes the buildings grow in size and in number of floors, as though they are being built — combined with cinematic movements and transitions from one building to another, and a presentation of buildings and a city.

The audience is the Arabic-first (RTL) property shopper who must feel scale, ambition and construction progress rather than read a specification sheet. The site is a monument to the developer's portfolio: a dark void in which a skyline rises storey by storey under the visitor's own scroll, then travels cinematically from tower to tower, ending in a whole city.

The document below fixes the current delivery boundary, the accepted personas, the single accepted page, the functional requirements with their provenance, the complete user flows, the authoritative visual and motion direction, and the technology and constraint envelope.

2. System Overview

azure-buld is delivered as a custom first-party web experience with a single public page, Landing, which is the site's public entry surface and its main coherent experience. There is no protected area, no account, and no authenticated work in the current horizon: the Landing surface is publicly reachable and its access requirement is none.

The experience is built around one continuous, scroll-scrubbed 3D timeline. A fixed full-viewport WebGL scene sits behind all DOM content. Scroll progress drives a single timeline in which a bare foundation grid of teal contour lines becomes extruded floor plates rising upward, a tower's data panel counts floors and square metres upward in brass numerals, and the camera then pulls back so the single tower becomes a district of seven towers and finally a full city block with a slow orbital drift. Between buildings the camera dollies through the street gap at street level and tilts up the facade of the next tower — a real, scroll-linked transition rather than a cross-fade.

Actors:

• زائر الموقع (متسوق عقاري) — the public visitor who scrolls, watches the city build itself, travels between buildings, and reads the project facts.
• مسؤول محتوى الشركة العقارية — the real-estate company's content owner, who supplies the project, building and city content that the 3D experience renders.

The 3D scene is generated from the company's own project data (tower footprints, floor counts, unit inventories, delivery years, districts). No stock photography is used anywhere; imagery is the generative scene itself plus diagrammatic supporting imagery.

Narrow exclusions for the current horizon: no property listing search, no filtering, no booking or reservation, no payment, no contact-form submission pipeline, no user accounts, no dashboards, and no administrative editing interface are part of this delivery. The content owner's role is expressed through the content that the Landing experience presents, not through a separate management surface.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. azure-buld is a first-party custom website. The public entry and the entire scroll-driven 3D experience are owned by the application itself on a single page, Landing. The page is publicly reachable with no identity requirement, and no protected destination exists in the current horizon. Because no accepted journey requires a visitor to privately own or resume durable state, and because no commitment, entitlement, value transfer or decision must remain bound to a specific participant, no application-owned identity is introduced.

What the visitor does. The visitor arrives at the public Landing page, scrolls, and the city builds itself: floors extrude upward, the tower gains height and mass, its real numbers count upward, and the camera travels from one building to the next until a whole city stands. The visitor can also jump directly to any build stage by clicking a tick on the scroll thread, and can hover a building to raise its floors slightly and reveal its label.

What the content owner provides. The real-estate company's content owner supplies the project data that the generative scene is derived from — tower footprints from plot coordinates, floor counts from unit inventories, colour intensity from delivery year, particle density from unit count — together with the Arabic project copy, district labels, unit counts, square metres and delivery years that appear as brass data numerals and captions.

Current vs. future. Everything described in this document is current. No future-horizon capability is accepted; nothing in this document may be read as authorising adjacent conventional real-estate features such as listings, search, enquiry forms, accounts or administration.

2c. Page Content and Component Coverage

Landing

Information and state presented

• The company's identity as a real-estate developer (شركة عقارات), expressed through the hero wordmark and the Arabic display headline «نبني المدينة طابقًا بطابق».
• The current build stage of the scroll timeline, shown as a stage indicator reading «المرحلة 01 / 08» in IBM Plex Mono micro-labels alongside the AR–RTL locale marker.
• The live construction state of the tower under construction: foundation contour grid, extruding floor plates, and the growing height and mass of the structure.
• The tower's human facts as brass tabular numerals that count upward as the building completes: floor count, unit count, square metres, delivery year — each always paired with an Arabic label.
• The project's identity and district context: project name, district label, and the project's generative thumbnail derived from that project's own plot and unit data.
• The city state: the single tower becoming a district of seven towers, then a full city block.
• The scroll thread as both progress and navigation: a 6px vertical teal line with tick marks labelled 01–08 in Plex Mono, with the active tick carrying a brass marker that tracks scroll position exactly.
• The reduced-motion state: the final completed city rendered as a static framed image, the scroll thread presented as a plain numbered list of stages, and all copy in normal document flow.

Primary actions

• Scroll the page to advance the single continuous build timeline (the primary and required driver of the 3D scene).
• Click a tick on the scroll thread to fly the camera to that build stage.
• Hover a building to raise its floors by 1.5% and reveal its label.
• Activate the brass-outlined rectangle «ابدأ الجولة» pinned to the baseline of the hero headline stack to begin the guided journey.

Supporting actions

• Read the Arabic project copy and the brass data numerals for the current building.
• Read district labels and inactive stage labels in muted colour.
• Continue scrolling past a completed building into the camera travel that leads to the next tower.

Domain entities

• Project / برج (tower) — name, plot coordinates, footprint, floor count, unit inventory, square metres, delivery year, district, generative thumbnail.
• Floor plate / طابق — an extruded slab belonging to a tower, added one stage at a time.
• District / حي — a grouping of seven towers.
• City / مدينة — the full city block assembled from districts.
• Build stage / مرحلة — one of eight ordered stages 01–08 on the scroll timeline.
• Scroll thread / خيط التمرير — the progress-and-navigation control on the viewport edge.

Component responsibilities

• Fixed WebGL scene layer — one fixed 100dvh real-time scene behind all DOM content; renders the void, the contour foundation grid, the extruded floor plates, the light sweep across each new slab, the particle flow, the district and the city, and owns the camera path.
• Scroll timeline controller — maps scroll progress to the single continuous timeline; drives floor extrusion with a 90ms stagger, the brass numeral count-up, the camera dolly and tilt between buildings, and the final 20-second orbital drift.
• Scroll thread — 6px teal progress line with Plex Mono tick labels 01–08; doubles as a jump menu; active tick carries a brass marker tracking scroll position exactly.
• Hero type stack — Arabic display headline flush-right on the void, no card, no panel, no gradient blob, with the brass-outlined «ابدأ الجولة» control pinned to its baseline.
• Hairline contour line — a 1px teal line running the full viewport width behind the type at the tower's current floor height, moving upward as the visitor scrolls.
• Building data panel — brass IBM Plex Mono 500 tabular numerals for floors, units, m² and delivery year, each paired with an Arabic label, counting upward as its building completes.
• Project card — 2px-radius rectangle, 1px rgba(244,247,250,0.12) border, no shadow, carrying the project's own generative thumbnail and its brass data numerals.
• Micro-label row — Plex Mono micro-labels for stage indicator and locale marker.
• Reduced-motion presentation — static framed final city, numbered stage list, normal document flow copy.

States

• Loading — the topographic contour-line motif is used as the loading state while the scene and project data initialise.
• Empty — if no project data is available for a stage, the stage renders its contour foundation grid and Arabic stage label without fabricated numbers; no dummy project facts are shown.
• Success — the tower completes its floors, its brass numerals finish counting upward, and the camera performs the scroll-linked 1.2s dolly-and-tilt into the next tower.
• Error — if the real-time scene cannot initialise or the device cannot sustain it, the page falls back to the static framed completed-city presentation with the numbered stage list and fully readable copy in normal document flow.
• Recovery — the visitor can re-scroll to any earlier stage, or click any tick on the scroll thread to fly the camera back to that build stage and continue from there.

3. Functional Requirements

FR-01 — Public 3D real-estate website (provenance: explicit) As a زائر الموقع (متسوق عقاري), I should arrive at a public 3D website for a real-estate company (شركة عقارات) so that I experience the developer's portfolio as a three-dimensional city rather than a flat page.

• Trigger/input: the visitor opens the site's public URL.
• Observable result: the Landing page renders a full-bleed real-time 3D scene of buildings and a city, with the company's Arabic display headline over the void.
• Access state: public, no identity required.
• Failure/recovery: if the real-time scene cannot initialise, the static framed completed-city presentation renders with all copy readable in normal document flow.
• Continuation: the visitor scrolls to begin the build timeline.

FR-02 — Scroll-driven construction: buildings grow in size and floors (provenance: explicit) As a زائر الموقع (متسوق عقاري), I should scroll the page and watch the buildings increase in size and in number of floors as though they are being built, so that I feel construction progress directly under my own gesture.

• Trigger/input: each scroll gesture advances scroll progress along the single continuous timeline.
• Observable result: floor plates extrude upward from the foundation grid with a 90ms stagger and a light sweep across each new slab; the tower visibly gains height and mass rather than cross-fading between images.
• Access state: public, no identity required.
• Failure/recovery: if scroll progress is reversed, the timeline scrubs backward and floors retract in the same order; if the scene cannot render, the static completed city is shown instead.
• Continuation: continued scrolling carries the tower through its remaining stages to completion.

FR-03 — Cinematic movements and transitions from one building to another (provenance: explicit) As a زائر الموقع (متسوق عقاري), I should be moved cinematically from one building to the next so that the site reads as one continuous city walk rather than a carousel of cards.

• Trigger/input: reaching the end of a building's build stage during scroll.
• Observable result: the camera dollies through the street gap at street level and tilts up the facade of the next tower in a scroll-linked ~1.2s move eased with cubic-bezier(.16,.84,.24,1); the scene never dissolves, it travels.
• Access state: public, no identity required.
• Failure/recovery: if the visitor scrolls back during the transition, the camera move reverses along the same path; under prefers-reduced-motion the transition is replaced by the static framed presentation and the numbered stage list.
• Continuation: the next tower's build stage begins and its floors extrude.

FR-04 — Buildings and a city presented in 3D (provenance: explicit) As a زائر الموقع (متسوق عقاري), I should see buildings and a whole city in three dimensions so that I understand the scale and ambition of the developer's portfolio.

• Trigger/input: scroll progress reaching the final stages of the timeline.
• Observable result: the camera pulls back and the single tower becomes a district of seven towers, then a full city block with a slow 20-second orbital drift.
• Access state: public, no identity required.
• Failure/recovery: if the device cannot sustain the real-time scene, the final completed city renders as a static framed image.
• Continuation: the visitor can click any tick on the scroll thread to fly back to an earlier build stage.

FR-05 — Eight-stage scroll thread as progress and navigation (provenance: required_inference) As a زائر الموقع (متسوق عقاري), I should see where I am in the build and be able to jump to any stage, so that I can revisit a building or a district without scrolling the whole timeline again.

• Trigger/input: scrolling, or clicking a tick labelled 01–08 on the 6px vertical teal scroll thread.
• Observable result: the active tick's brass marker tracks scroll position exactly; clicking a tick flies the camera to that build stage.
• Access state: public, no identity required.
• Failure/recovery: under prefers-reduced-motion the scroll thread becomes a plain numbered list of stages that still navigates to each stage.
• Continuation: the visitor continues scrolling or jumps to another stage.

FR-06 — Brass data numerals for real building facts (provenance: required_inference) As a زائر الموقع (متسوق عقاري), I should read the real numbers of each building — floors, units, square metres, delivery year — so that the awe of the scene is anchored in verifiable facts about real buildings.

• Trigger/input: a building completing its build stage.
• Observable result: the building's data panel counts floors, units, m² and delivery year upward in brass IBM Plex Mono 500 tabular numerals, each paired with an Arabic label.
• Access state: public, no identity required.
• Failure/recovery: if a project's data is unavailable, the stage shows its contour foundation grid and Arabic stage label without fabricated numbers.
• Continuation: the camera travels to the next building and its numerals begin counting.

FR-07 — Hover reveals a building's identity (provenance: required_inference) As a زائر الموقع (متسوق عقاري), I should hover a building and see it respond and identify itself, so that I can connect the structure in front of me to a named project.

• Trigger/input: pointer hover over a building in the scene.
• Observable result: the building's floors raise by 1.5% and its label is revealed; nothing bounces and nothing spins for its own sake.
• Access state: public, no identity required.
• Failure/recovery: on touch devices without hover, the label is revealed by the building's own build stage and its data panel.
• Continuation: the visitor continues scrolling or moves the pointer to another building.

FR-08 — Generative per-project imagery from the company's own data (provenance: required_inference) As a مسؤول محتوى الشركة العقارية, I should have the site's imagery generated from the company's own project data so that every project is represented truthfully and no two projects share an image.

• Trigger/input: the company's project data — tower footprints from plot coordinates, floor counts from unit inventories, colour intensity from delivery year, particle density from unit count.
• Observable result: each project card carries a small monochrome generative thumbnail in the same contour-and-slab visual language, and the portfolio reads as a data archive rather than a photo gallery.
• Access state: public presentation of company-supplied content; no editing surface in the current horizon.
• Failure/recovery: if a project's data is incomplete, its thumbnail renders from the available plot and unit data without inventing facts.
• Continuation: the visitor scrolls on to the next project.

FR-09 — Arabic-first RTL presentation (provenance: explicit — the request is written in Arabic for an Arabic real-estate company) As a زائر الموقع (متسوق عقاري), I should read the site in Arabic, right-to-left, so that the experience matches the language and reading direction of the market it addresses.

• Trigger/input: opening the Landing page.
• Observable result: headlines sit flush-right in short 2–3 word stacks, the 12-column grid is RTL, the scroll thread runs down the mirrored edge, and the AR–RTL micro-label is shown in the corner.
• Access state: public, no identity required.
• Failure/recovery: Latin/numeric data remains in IBM Plex Mono with tabular figures and is always paired with an Arabic label so no fact is left unlabelled.
• Continuation: the visitor continues through the timeline.

FR-10 — Reduced-motion and low-capability fallback (provenance: required_inference — the direction mandates it and it is indispensable for usable access to the accepted content) As a زائر الموقع (متسوق عقاري), I should still receive the full content when motion is reduced or the device cannot sustain the real-time scene, so that the developer's portfolio remains readable and navigable.

• Trigger/input: prefers-reduced-motion or a device that cannot sustain the real-time scene.
• Observable result: the canvas renders the final completed city as a static framed image, the scroll thread becomes a plain numbered list of stages, and all copy stays fully readable in normal document flow.
• Access state: public, no identity required.
• Failure/recovery: this state is the recovery path for FR-01 through FR-07.
• Continuation: the visitor reads the project facts and navigates stages through the numbered list.

4. User Personas

زائر الموقع (متسوق عقاري) — the property shopper visiting the site

Product context. This persona arrives at the public Landing page of a real-estate developer's website, in Arabic, on a device that may be a phone at 375px or a desktop at 1280px. They are evaluating a developer's portfolio and want to feel the scale and ambition of what is being built before they read anything.

Primary goal. To experience the developer's buildings and city as something that is being constructed in front of them, and to come away with a felt understanding of the portfolio's scale.

Distinct accepted responsibilities. This persona is the sole driver of the scroll timeline. They scroll to make buildings grow in size and floors; they continue scrolling to trigger the cinematic travel from one building to the next; they reach the final stages where the single tower becomes a district of seven towers and then a full city block. They also navigate directly by clicking ticks on the scroll thread, and they hover buildings to raise their floors and reveal their labels.

Relevant inputs and decisions. Their input is scroll position and pointer position. Their decisions are: how fast to scroll, whether to continue past a completed building into the camera travel, whether to jump to a specific stage via a tick, and whether to hover a building to identify it.

Interactions with other accepted participants. This persona consumes the content supplied by the company's content owner: the project names, district labels, floor counts, unit counts, square metres and delivery years that appear as brass numerals, and the generative thumbnails derived from each project's own data. They never interact with the content owner directly; the content owner's work reaches them as the scene itself.

Observable success. The visitor has scrolled through the build stages, watched floors extrude upward with a light sweep across each new slab, seen the brass numerals count upward to real values, travelled cinematically between towers, and arrived at a completed city — or, under reduced motion, has read the same facts in the static framed presentation with the numbered stage list.

What makes this role's work different. This persona's entire interaction is a continuous gesture over a real-time scene. They do not search, filter, compare, enquire or transact; they witness construction and travel through a city. Their success is measured in felt scale and in the readability of the brass facts, not in a completed form.

مسؤول محتوى الشركة العقارية — the real-estate company's content owner

Product context. This persona represents the real-estate company that owns the site. They are the source of the project, building and city content that the 3D experience renders, and they are accountable for the truth of every number the visitor reads.

Primary goal. To have the company's projects, buildings and city presented truthfully and compellingly in the scroll-driven 3D experience, so that the scenes the visitor builds by scrolling reflect what the company actually offers.

Distinct accepted responsibilities. This persona supplies the project data from which the generative scene is derived: tower footprints from real plot coordinates, floor counts from real unit inventories, colour intensity from delivery year, particle density from unit count. They supply the Arabic project copy, district labels, unit counts, square metres and delivery years that appear as brass data numerals and captions. They supply the material identity of each project — concrete, glass or brass — rendered as the full-bleed 40%-opacity plane behind the text panel.

Relevant inputs and decisions. Their inputs are the company's real project records: plots, inventories, delivery schedules, districts. Their decisions are which projects appear, how they are grouped into districts, and what each project's real numbers are.

Interactions with other accepted participants. This persona's content is what the visitor scrolls through. Every brass numeral the visitor reads, every district label, and every generative thumbnail originates with this persona. There is no direct interaction between the two personas in the current horizon.

Observable success. The visitor scrolls through a city whose every building carries the company's real plot, floor, unit and delivery facts, and whose imagery is generated from those facts rather than from stock photography.

What makes this role's work different. This persona does not scroll the timeline as a visitor; their responsibility is the truth and completeness of the data that the timeline renders. Their success is measured in whether the built city is a faithful, data-derived monument to the company's actual portfolio.

5. Core User Flows

Flow 1 — The visitor arrives and the city begins to build itself

1. Starting context. The visitor opens the public URL of azure-buld on a phone or desktop. No identity is required and none is requested.
2. Owner: Landing. The page renders a dark void (#07090D) with a single unfinished tower standing in the right third of the viewport, already two floors tall, its slab edges glowing teal against the black ground.
3. Owner: Landing. The left two-thirds carries the Arabic display headline «نبني المدينة طابقًا بطابق» at clamp(44px→112px) in Tajawal 800, flush-right, sitting directly on the void with no card, no panel and no gradient blob. Beneath it, a brass-outlined rectangle reads «ابدأ الجولة», pinned to the baseline of the headline stack. A hairline teal contour line runs the full viewport width behind the type at the tower's current floor height. In the corner, Plex Mono micro-labels read «المرحلة 01 / 08» and AR–RTL.
4. Actor action. The visitor scrolls.
5. Observable result. Stage 01 shows a bare foundation grid of teal contour lines. As scroll continues through stages 02–06, floor plates extrude upward with a 90ms stagger and a light sweep across each new slab; the tower visibly gains height and mass. The hairline contour line behind the type moves upward with the tower's current floor height.
6. Observable result. At stage 07 the tower's data panel counts floors, units, m² and delivery year upward in brass IBM Plex Mono 500 tabular numerals, each paired with an Arabic label.
7. Continuation. The visitor keeps scrolling and the camera begins its travel to the next building (Flow 2).

Flow 2 — Cinematic travel from one building to the next

1. Starting context. The visitor has just completed a tower's build stage and its brass numerals have finished counting upward.
2. Actor action. The visitor continues scrolling.
3. Owner: Landing. The camera dollies through the street gap at street level and tilts up the facade of the next tower in a scroll-linked ~1.2s move eased with cubic-bezier(.16,.84,.24,1). The scene never dissolves; it travels.
4. Observable result. The next tower is now the subject of the frame, its own foundation grid and build stages ahead of the visitor.
5. Material failure/recovery. If the visitor scrolls back during the transition, the camera move reverses along the same path and the previous tower's completed state is restored.
6. Continuation. The next tower's floors begin to extrude as the visitor continues scrolling.

Flow 3 — The single tower becomes a district, then a city

1. Starting context. The visitor has travelled through the individual towers and reached the final stages of the timeline.
2. Actor action. The visitor continues scrolling to stage 08.
3. Owner: Landing. The camera pulls back and the single tower becomes a district of seven towers, then a full city block with a slow 20-second orbital drift.
4. Observable result. The visitor sees the whole city standing, with district labels in muted colour and each project's brass facts available on its building.
5. Continuation. The visitor can click any tick on the scroll thread to fly the camera back to an earlier build stage and revisit a building.

Flow 4 — The visitor jumps directly to a build stage

1. Starting context. The visitor is anywhere on the timeline and wants to revisit a specific building or district.
2. Actor action. The visitor clicks a tick labelled 01–08 on the 6px vertical teal scroll thread running down the mirrored edge.
3. Owner: Landing. The camera flies to that build stage; the active tick's brass marker tracks scroll position exactly.
4. Observable result. The chosen stage is presented, with its building at its corresponding state of construction and its brass numerals at their corresponding values.
5. Continuation. The visitor scrolls on from that stage or jumps to another.

Flow 5 — The visitor identifies a building by hovering it

1. Starting context. The visitor is looking at a building in the scene and wants to know which project it is.
2. Actor action. The visitor hovers the building.
3. Owner: Landing. The building's floors raise by 1.5% and its label is revealed. Nothing bounces and nothing spins for its own sake.
4. Observable result. The visitor can read the project's name and its brass facts.
5. Continuation. The visitor moves the pointer to another building or continues scrolling.

Flow 6 — The content owner's data becomes the city

1. Starting context. The real-estate company's content owner has supplied the company's real project records: plots, unit inventories, delivery schedules and districts.
2. Owner: Landing (presentation of company-supplied content). The scene derives tower footprints from real plot coordinates, floor counts from real unit inventories, colour intensity from delivery year, and particle density from unit count.
3. Observable result. Each project card carries a small monochrome generative thumbnail generated from that project's own data in the same contour-and-slab visual language, so no two cards share an image. Each project's material identity — concrete, glass or brass — renders as a full-bleed 40%-opacity plane behind its text panel.
4. Observable result. The visitor scrolling the timeline reads the company's real floor counts, unit counts, square metres and delivery years as brass numerals, each paired with an Arabic label.
5. Material failure/recovery. If a project's data is incomplete, its stage renders the contour foundation grid and Arabic stage label without fabricated numbers, and its thumbnail renders from the available plot and unit data.
6. Continuation. The visitor scrolls on to the next project in the city.

Flow 7 — Reduced motion or a device that cannot sustain the scene

1. Starting context. The visitor's system requests reduced motion, or their device cannot sustain the real-time scene.
2. Owner: Landing. The canvas renders the final completed city as a static framed image. The scroll thread becomes a plain numbered list of stages. All copy stays fully readable in normal document flow.
3. Observable result. The visitor can read every project's Arabic copy and brass facts, and can navigate to any stage through the numbered list.
4. Continuation. The visitor reads through the portfolio in document order.

6. Visuals, Colors and Theme

The authoritative creative direction for azure-buld is Refik Anadol — "Data made physical: a city that builds itself under the scroll." The headline idea: a Middle Eastern real-estate developer's public landing surface, Arabic-first (RTL), for property shoppers who must feel scale, ambition and construction progress rather than read a spec sheet. The emotional register is awe plus trust: a skyline rising storey by storey as the visitor scrolls, then cinematic travel from one tower to the next, ending in a whole city. It is not a dashboard and not a brochure — it is a monument to the developer's portfolio.

Colour tokens (dark mode)

No blue or indigo anywhere. The only luminous hues are teal, the particle-flow violet, and brass.

Typography

• Headings: Tajawal at 700–800, tight leading (1.02–1.08), slightly negative tracking for Arabic display. Oversized: clamp(44px, 7vw, 112px) for the hero wordmark, clamp(32px, 4.4vw, 72px) for section headlines. Headlines sit flush-right (RTL) in short 2–3 word stacks, never centred paragraphs.
• Body: IBM Plex Sans Arabic.
• Latin/numeric data: IBM Plex Mono 500 at 12–14px with +0.08em tracking and tabular figures, always paired with an Arabic label — the instrument-panel voice inside the Arabic editorial voice.
• Scale: 1.25 modular on a 4px baseline — 112 / 72 / 48 / 32 / 24 / 18 / 16 / 14 / 12. Display clamp(44px→112px), section clamp(32px→72px), card title clamp(22px→32px), body 17px/1.75, micro-label 12px uppercase Latin / 13px Arabic.

Shape language. Architectural, not soft: everything is a slab, a plane or a hairline. Cards are 2px-radius rectangles with a 1px rgba(244,247,250,0.12) border and no shadow — depth comes from the 3D scene behind them, not from drop shadows. The generative subject is built from stacked extruded floor plates with slightly irregular footprints, canted rooflines, and a topographic contour-line motif used as a repeating 1px pattern on section dividers and as the loading state. Buttons are full rectangles with a 1px brass border and brass fill on hover; no pills, no blobs, no rounded-3xl.

Layout. Full-bleed canvas as the page: one fixed 100dvh WebGL scene behind everything, with DOM content in a 12-column RTL grid (max 1440px, 24px gutters at 375px, 64px at 1280px). A 6px vertical teal scroll-thread runs down the right edge (left edge in RTL mirror) with tick marks labelled 01–08 in Plex Mono, acting as both progress and navigation. Text blocks occupy columns 7–12 (right side) so the tower under construction is never covered. At 375px all panels collapse to full-width bottom sheets with 24px padding and the canvas keeps the top 55% of the viewport. Section transitions are hard cuts in the camera path, not fades: the scene never dissolves, it travels.

Imagery. No stock photography at all. The imagery is the generative scene itself, derived from the company's project data: tower footprints from real plot coordinates, floor counts from real unit inventories, colour intensity from delivery year, particle density from unit count. Supporting imagery is diagrammatic — topographic contour bands, plot-boundary line drawings, exploded axonometric floor plans in 1px teal on the void, and one macro "material" texture per project (concrete, glass, brass) rendered as a full-bleed 40%-opacity plane behind the text panel. Every project card carries a small monochrome generative thumbnail generated from that project's own data, so no two cards share an image.

Readable text and controls. Headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the direction asks, as long as they cover no readable text or control.

7. Signature Design Concept

The first screen is a construction site that has already started without you.

The public entry is a dark void with a single unfinished tower standing in the right third of the viewport, already two floors tall, its slab edges glowing teal against a black ground. The left two-thirds is a stack of Arabic display type flush-right — «نبني المدينة طابقًا بطابق» at clamp(44px→112px) in Tajawal 800 — sitting directly on the void with no card, no panel and no gradient blob. Beneath it, a brass-outlined rectangle reading «ابدأ الجولة» is pinned to the baseline of the headline stack. A hairline teal contour line runs the full width of the viewport behind the type at the tower's current floor height, and it moves upward as the visitor scrolls. In the corner, Plex Mono micro-labels read «المرحلة 01 / 08» and AR–RTL.

The composition is asymmetric and enormous: type on the left, a growing structure on the right, black between them, and the only colour in the frame is the teal of construction and the brass of the one button. The signature move is that the hero is not a picture of a building — it is a building that is already under construction, and the visitor's first scroll adds its next floor.

8. Interaction Model & Motion Direction

Interaction Model: Parallax Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

• Focal subject. A single unfinished tower standing in the right third of the viewport, already two floors tall, its slab edges glowing teal against the black void, with the Arabic display headline stack flush-right on the left two-thirds.
• Input → transformation → outcome thesis. The visitor's scroll position is the sole input; it drives one continuous timeline in which the tower's floor plates extrude upward with a 90ms stagger and a light sweep across each new slab, the tower's brass data numerals count upward to real values, and the camera then travels to the next building — so the outcome is a city that the visitor has physically built by scrolling.
• Motion vocabulary. Scroll-scrubbed and cinematic, never autoplaying decoration. Floor extrusion with a 90ms stagger and a light sweep across each new slab. Camera dolly through the street gap and tilt up the next facade in a scroll-linked ~1.2s move eased with cubic-bezier(.16,.84,.24,1). A slow 20-second orbital drift over the completed city. Hover raises a building's floors by 1.5% and reveals its label. Nothing bounces, nothing spins for its own sake; every transition is a camera move or a mechanical state change.
• Composed first frame. Void #07090D. Tower in the right third, two floors tall, teal slab edges. Headline «نبني المدينة طابقًا بطابق» flush-right at clamp(44px→112px) Tajawal 800. Brass-outlined «ابدأ الجولة» pinned to the headline baseline. Hairline teal contour line across the full viewport width at the tower's current floor height. Plex Mono micro-labels «المرحلة 01 / 08» and AR–RTL in the corner. The 6px teal scroll thread with ticks 01–08 on the mirrored edge.
• Reduced-motion state. The canvas renders the final completed city as a static framed image, the scroll-thread becomes a plain numbered list of stages, and all copy stays fully readable in normal document flow.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

One crafted real-time scene: a single tower under construction on a dark ground plane, built from stacked extruded floor plates with a slightly irregular footprint and a canted roofline. The scene's defining state is the tower's current floor count — the number of extruded slabs standing in the frame is the building's real floor count at that scroll stage. A topographic contour-line motif is drawn on the ground plane as the foundation grid, and a particle flow in #7A5CFF drifts through the scene, its density derived from the project's unit count. The camera path is authored as one continuous route: rise with the tower, dolly through the street gap, tilt up the next facade, then pull back to reveal the district of seven towers and the full city block. The scene is scroll-scrubbed, never autoplaying, and falls back to a static framed completed city under reduced motion.

9. Non-Functional Requirements

NFR-01 — Scroll is the primary engine of the 3D scene (provenance: explicit — hard constraint) The experience is built on scroll as the fundamental driver of the 3D scene. No decorative motion may autoplay independently of scroll position. Every transition is a camera move or a mechanical state change tied to scroll progress.

NFR-02 — Real-time WebGL performance (provenance: required_inference — the direction mandates a real-time WebGL/R3F hero and the accepted behaviour requires it to remain usable) The fixed 100dvh scene must sustain a continuous, scroll-scrubbed timeline with staggered floor extrusion, a light sweep per slab, brass numeral count-up, and a 20-second orbital drift without dropping the visitor's scroll input. Where a device cannot sustain it, the static framed completed-city fallback (FR-10) is used rather than degrading the copy.

NFR-03 — Arabic-first RTL layout (provenance: explicit — the request is written in Arabic for an Arabic real-estate company) The document direction is RTL. Headlines sit flush-right in short 2–3 word stacks. The 12-column grid is RTL. The scroll thread runs down the mirrored edge. Latin/numeric data is always paired with an Arabic label.

NFR-04 — Readable text and controls at every viewport (provenance: explicit — the direction's readable-text rule) Headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, and no other element covers any part of them. At 375px panels collapse to full-width bottom sheets with 24px padding and the canvas keeps the top 55% of the viewport.

NFR-05 — Reduced-motion support (provenance: required_inference — indispensable for usable access to the accepted content) Under prefers-reduced-motion, the canvas renders the final completed city as a static framed image, the scroll thread becomes a plain numbered list of stages, and all copy stays fully readable in normal document flow.

NFR-06 — No stock photography (provenance: explicit — direction constraint) No stock architectural photography or generic skyline renders appear anywhere. All imagery is the generative scene itself or diagrammatic supporting imagery derived from the company's project data.

NFR-07 — Data truthfulness (provenance: required_inference — the brass numerals are presented as real facts about real buildings) Every brass numeral shown to the visitor — floor count, unit count, square metres, delivery year — must correspond to the company's real project data. Where data is unavailable, the stage renders without fabricated numbers.

NFR-08 — Public access, no identity (provenance: explicit — the page contract sets the Landing access requirement to none) The Landing page is publicly reachable with no account, no sign-in and no protected state. No account-management capability is part of this delivery.

10. Tech Stack

• Frontend framework: React, with a real-time WebGL scene layer (React Three Fiber / Three.js) rendering the fixed 100dvh canvas behind the DOM content.
• Styling and layout: CSS with a 12-column RTL grid, clamp() type scaling, and the token set defined in Section 6.
• Fonts: Tajawal (headings, 700–800), IBM Plex Sans Arabic (body), IBM Plex Mono 500 (Latin/numeric data, tabular figures).
• Backend: Python / FastAPI, serving the project data that the generative scene is derived from (tower footprints, floor counts, unit inventories, delivery years, districts) and the Arabic project copy.
• Storage: a database holding the company's project, building, district and unit records.
• Containerisation: Docker / docker-compose for local and single-host deployment.
• Orchestration: Kubernetes only if the deployment requires it; not required by any accepted current requirement.

11. Assumptions and Constraints

Constraints (source-backed, binding)

• The site is for a real-estate company (شركة عقارات) — a real-estate commercial context. (explicit)
• The experience is built on scroll as the fundamental engine of the 3D scene. (explicit)
• The site is a 3D website: buildings and a city are presented in three dimensions. (explicit)
• Buildings grow in size and in number of floors as the visitor scrolls, as though they are being built. (explicit)
• There are cinematic movements and transitions from one building to another. (explicit)
• The Landing page is the single accepted page and its access requirement is none — public, no identity. (page contract)
• The creative direction is authoritative for Section 6 and Section 8: dark void, teal construction light, brass human facts, Tajawal / IBM Plex Sans Arabic / IBM Plex Mono, architectural slab-and-hairline shape language, cinematic scroll-scrubbed motion, WebGL hero. (direction)
• No stock photography; no blue, indigo or violet on white; no gradient-blob heroes, frosted glass cards or hover-lift card grids; no Inter, Roboto, Arial, Helvetica, Poppins or system-ui for headings or body; no autoplaying decorative motion; no bouncy or springy easing; no pill buttons, blob shapes or soft rounded cards; no centred headline + subtext + button SaaS hero composition. (direction)
• The generic indigo/blue-on-white SaaS template is forbidden for this project. (direction)

Assumptions (narrow, labelled)

• [Assumption — not specified by user] The company's project data (plots, unit inventories, delivery years, districts) is available to the site as structured records; the generative scene and the brass numerals are derived from it.
• [Assumption — not specified by user] The eight-stage timeline (01–08) and the district of seven towers are the concrete realisation of the accepted "buildings grow with scroll" and "buildings and a city" requirements, taken from the authoritative creative direction.
• [Assumption — not specified by user] The content owner's role is expressed through the content the Landing experience presents; no separate editing surface is part of the current horizon.
• [Default — not specified by user] Docker / docker-compose is used for deployment; Kubernetes is included only if deployment requires it.

12. Glossary

• azure-buld — the project name of this 3D real-estate website.
• شركة عقارات — real-estate company; the commercial context the site serves.
• Landing — the single accepted page of the site: the public entry surface and the main coherent scroll-driven 3D experience.
• زائر الموقع (متسوق عقاري) — the property shopper visiting the public site; the persona who scrolls, travels between buildings and reads the facts.
• مسؤول محتوى الشركة العقارية — the real-estate company's content owner; the persona who supplies the project, building and city data the scene renders.
• Build stage / مرحلة — one of the eight ordered stages 01–08 on the scroll timeline.
• Scroll thread / خيط التمرير — the 6px vertical teal progress line with Plex Mono tick labels 01–08 that doubles as a jump menu.
• Floor plate / طابق — an extruded slab belonging to a tower, added one stage at a time with a 90ms stagger and a light sweep across its new edge.
• Tower / برج — a project building in the scene, with a footprint from real plot coordinates, a floor count from real unit inventories, and a delivery year.
• District / حي — a grouping of seven towers.
• City / مدينة — the full city block assembled from districts at the end of the timeline.
• Brass numerals — the IBM Plex Mono 500 tabular figures in #E8B44A used exclusively for human facts: floors, units, m², delivery years.
• Generative thumbnail — a small monochrome image generated from a project's own plot and unit data in the contour-and-slab visual language, unique to that project.
• Contour-line motif — the topographic 1px pattern used on section dividers, as the foundation grid, and as the loading state.
• Reduced-motion state — the fallback presentation: static framed completed city, numbered stage list, copy in normal document flow.