System Requirements Document for forex-fund-management

1. Introduction

This document specifies the system requirements for forex-fund-management, a public website for a forex fund management and investment offering. The site's purpose is to present the fund management and investment proposition to prospective investors through a visually distinctive, motion-led experience, and to give those visitors a clear path to engage with the fund.

The defining product intent, taken directly from the authoritative requirement thread, is threefold:

1. A forex fund management and investment website — a public-facing site that communicates the fund's management and investment offering.
2. 3D animated text — the site must feature three-dimensional animated text as a first-class, real-time visual element, not a decorative afterthought.
3. Additional visual and functional elements beyond the 3D animated text — the site must carry further presentation and functional content, and it must be structured so that future features and functionality can be added.

The primary audience is the Site Visitor / Prospective Investor — a person exploring the offering to understand it and decide whether to engage. The secondary accepted role is the Fund Manager / Investment Operator, the party responsible for the fund and investment activity the website presents and for keeping the site's offering information current.

2. System Overview

The current delivery is a public, anonymous-access website composed of two pages: Landing and Contact. There is no account creation, login, or protected area in the current scope. The Landing page is the anonymous entry surface that explains the forex fund management and investment offering, carries the required 3D animated text, and presents the additional visual and functional sections. The Contact page is the destination for the site's primary engagement action for prospective investors.

The accepted active human actors are:

• Site Visitor / Prospective Investor — browses the presentation content, including the 3D animated text and other visual sections, and reaches the point where they can take the site's primary action.
• Fund Manager / Investment Operator — maintains the fund and investment information the site communicates and keeps the offering current.

The system is deliberately built as an extensible foundation: the current pages and content model are the first increment of a site explicitly required to accommodate future features and functionality.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The website is first-party application-owned. Both current pages — Landing and Contact — are custom application pages reachable anonymously, with no access requirement. The 3D animated text and the live FX ticker are rendered in the browser as part of the application's own front end; no third-party product surface owns any accepted visitor-facing behavior.

Service topology. The current delivery runs as three docker-compose services: a shared backend (FastAPI) that owns the application APIs and domain modules — the Contact inquiry submission endpoint, the live FX pair data the ticker and data panel consume, and the offering content the operator maintains; a database (MariaDB) holding application-owned persistent data, including submitted engagement inquiries and the offering content; and a frontend (React) serving the Landing and Contact pages and rendering the WebGL hero. New feature APIs are added as routes and modules inside the existing shared backend rather than as new services, so the extensibility obligation in FR-10 is met without multiplying processes, ports, or ingress routes.

Access boundary. The current scope is entirely public and anonymous. No accepted journey requires a visitor to establish an identity, sign in, or resume durable personal state, and no accepted capability creates a commitment, entitlement, or value transfer that must remain bound to a specific visitor. Accordingly, no application-owned identity, account, or authentication capability is introduced. The Contact page collects an engagement inquiry as a one-time submission; it does not create a visitor account.

Current vs. future boundary. The current delivery is the Landing and Contact experience with the required 3D animated text and supporting visual/functional sections. The explicit requirement that the site be structured so that future features and functionality can be added is a current architectural obligation (extensible content model, modular sections, additive routing) — it is not itself a set of current features. Concrete future capabilities are not specified by the user and are therefore not built now; they are recorded as a future horizon in Section 11 and kept out of current pages and acceptance criteria.

Narrow exclusions. This document does not introduce investor onboarding, KYC, portfolio dashboards, trading terminals, payment or subscription flows, or account management. None of these are accepted by the authoritative source. The site presents the offering and provides an engagement path; it does not transact.

2c. Page Content and Component Coverage

Landing

• Information / state presented: The fund management and investment proposition; the required 3D animated text headline; supporting visual and functional sections; live FX pair data; fund performance figures; the primary engagement call to action.
• Primary actions: Read the offering; take the site's primary engagement action (navigate to Contact); follow the live FX ticker.
• Supporting actions: Scroll through sections; read performance figures; read the fund's descriptive content.
• Domain entities: Fund offering description; FX currency pairs (e.g., EUR/USD, GBP/JPY) with live values and direction; fund performance figures; engagement call to action.
• Component responsibilities:
  • Top navigation bar — slim top bar providing navigation to Landing and Contact.
  • Live FX ticker strip — directly beneath the nav; scrolls live pair data in IBM Plex Mono with teal up-ticks and magenta down-ticks; wraps into readable rows under prefers-reduced-motion.
  • 3D animated text hero — full-viewport WebGL canvas where the words "FOREX FUND MANAGEMENT" exist as extruded 3D letterforms floating in a slow-moving particle field, lit from within with teal volumetric glow and dissolving into particles at their edges; a single magenta pulse travels through the field on a 12-second loop. Left-anchored type stack, right-anchored live data panel.
  • Live data panel — right-anchored glass panel showing animated FX pairs.
  • Data sculpture performance section — fund returns rendered as a flowing generative particle field that morphs on scroll, with raw numbers overlaid in a glass panel.
  • Performance grid — 3-column performance grid of fund figures.

• Glass data panels — 1px luminous teal borders, 20px radii, floating over the dark canvas; each panel has a distinct data role.
• Section labels and headlines — oversized uppercase Space Grotesk micro-labels (14px, 0.18em tracking) above 64px display headlines.
• Primary engagement call to action — routes the visitor to Contact.
• States:
  • Loading: WebGL scene and particle field initialize; a dark ground (#05060A) is shown while the scene compiles; ticker and data panels render their structure before values arrive.
  • Empty: If live FX values are unavailable, the ticker and data panel show their labeled structure with values withheld rather than fabricated numbers.
  • Success: 3D animated text renders and animates; ticker scrolls live pair data; performance figures display; the engagement call to action is reachable.
  • Error: If the WebGL scene cannot initialize, the page falls back to a static, readable presentation of the headline and content so that no readable text or control is lost.
  • Recovery: The visitor can continue scrolling and reach the engagement call to action regardless of hero scene state; the static fallback preserves all content and navigation.
  • Reduced motion: The canvas freezes into a static data map and ticker items wrap into readable rows.

Contact

• Information / state presented: The engagement context for prospective investors interested in the fund management and investment offering; the fields required to submit an inquiry; confirmation that the inquiry was received.
• Primary actions: Submit an engagement inquiry to the fund.
• Supporting actions: Read the engagement context; correct and resubmit after a validation or submission failure.
• Domain entities: Engagement inquiry (visitor-provided contact details and message); submission outcome.
• Component responsibilities:
  • Engagement context block — states what the visitor is engaging with.
  • Inquiry form — collects the visitor's contact details and message; validates required input before submission.
  • Submit control — commits the inquiry.
  • Submission confirmation — observable acknowledgement that the inquiry was received.
  • Error and recovery messaging — identifies missing or invalid input and submission failure, and allows correction and resubmission.
• States:
  • Loading: Submission in progress; the submit control reflects the pending state and prevents duplicate submission.
  • Empty: The form is presented with empty fields and clear labels.
  • Success: A confirmation is shown that the inquiry was received.
  • Error: Missing or invalid required input is identified against the specific field; a submission failure is reported without discarding the visitor's entered content.
  • Recovery: The visitor corrects the identified input or retries submission; entered content is preserved.

3. Functional Requirements

FR-1 — Public offering presentation As a Site Visitor / Prospective Investor, I should be able to read a clear presentation of the forex fund management and investment offering on the Landing page, so that I understand what the fund does and what it offers.

• Provenance: explicit (build a forex fund management and investment website).
• Lifecycle: initiated by the visitor arriving at Landing; observable result is the rendered offering content; continuation is scrolling into the supporting sections and the engagement call to action.
• Access: anonymous, no access requirement.
• Failure/recovery: if content fails to load, the page presents its structure and navigation so the visitor can still reach Contact.
• Acceptance: Landing presents the fund management and investment offering as readable content.

FR-2 — 3D animated text As a Site Visitor / Prospective Investor, I should see the site's headline rendered as real-time 3D animated text, so that the offering is presented with the scale and intelligence the fund claims.

• Provenance: explicit (the website must feature 3D animated text; hard constraint).
• Lifecycle: initiated by the visitor loading Landing; observable result is extruded 3D letterforms floating in a slow-moving particle field, lit with teal volumetric glow and dissolving into particles at their edges, with a magenta pulse on a 12-second loop; continuation is scrolling into the sections below.
• Access: anonymous, no access requirement.
• Failure/recovery: if the WebGL scene cannot initialize, a static readable presentation of the headline and content is shown; no readable text or control is lost.
• Acceptance: the headline exists as a real-time 3D subject in the hero, not as flat 2D text with a shadow or a gradient.

FR-3 — Additional visual and functional sections As a Site Visitor / Prospective Investor, I should encounter additional visual and functional sections beyond the 3D animated text, so that the offering is substantiated rather than merely announced.

• Provenance: explicit (the website should include additional visual and functional elements beyond the 3D animated text).
• Lifecycle: initiated by scrolling Landing; observable result is the data sculpture performance section, the 3-column performance grid, and the glass data panels; continuation is the engagement call to action.
• Access: anonymous, no access requirement.
• Failure/recovery: sections render their structure and labels even when live values are unavailable.
• Acceptance: Landing contains visual and functional sections in addition to the 3D animated text hero.

FR-4 — Live FX ticker As a Site Visitor / Prospective Investor, I should see a live FX ticker strip beneath the navigation, so that I can feel the market the fund operates in.

• Provenance: explicit (additional visual and functional elements; creative direction signature move).
• Lifecycle: initiated by loading Landing; observable result is a scrolling strip of live pair data in IBM Plex Mono with teal up-ticks and magenta down-ticks; continuation is reading the sections below.
• Access: anonymous, no access requirement.
• Failure/recovery: if live values are unavailable, the ticker shows its labeled structure with values withheld rather than fabricated numbers; under prefers-reduced-motion, items wrap into readable rows.
• Acceptance: the ticker scrolls live pair data and every item becomes fully readable as it passes.

FR-5 — Fund performance presentation As a Site Visitor / Prospective Investor, I should see the fund's performance figures presented as a data sculpture with the raw numbers overlaid, so that I can assess the fund's results.

• Provenance: explicit (additional visual and functional elements; creative direction signature move).
• Lifecycle: initiated by scrolling to the performance section; observable result is a generative particle field that morphs on scroll with raw numbers overlaid in a glass panel; continuation is the engagement call to action.
• Access: anonymous, no access requirement.
• Failure/recovery: the raw numbers remain readable in the glass panel even if the generative field does not animate.
• Acceptance: performance figures are displayed as readable numbers alongside the generative field.

FR-6 — Primary engagement action As a Site Visitor / Prospective Investor, I should be able to take the site's primary engagement action from the Landing page, so that I can move forward with the offering.

• Provenance: required_inference (the Contact page exists as the destination for the site's primary engagement action).
• Lifecycle: initiated by the visitor on Landing; the visitor's action navigates to Contact; observable result is the Contact page presented with its engagement context and inquiry form; continuation is submitting an inquiry.
• Access: anonymous, no access requirement.
• Failure/recovery: if navigation fails, the visitor can retry from the navigation bar.
• Acceptance: the primary engagement action on Landing leads to Contact.

FR-7 — Engagement inquiry submission As a Site Visitor / Prospective Investor, I should be able to submit an engagement inquiry with my contact details and message on the Contact page, so that the fund can respond to my interest.

• Provenance: required_inference (Contact is the destination for the site's primary engagement action).
• Lifecycle: initiated by the visitor completing the inquiry form; the visitor commits the submission; observable result is a confirmation that the inquiry was received; continuation is the visitor's return to the site content.
• Access: anonymous, no access requirement.
• Failure/recovery: missing or invalid required input is identified against the specific field; a submission failure is reported without discarding entered content; the visitor corrects or retries.
• Acceptance: a valid submission produces an observable confirmation; an invalid submission identifies the specific problem and preserves entered content.

FR-8 — Inquiry receipt by the fund As a Fund Manager / Investment Operator, I should receive the engagement inquiries submitted through the Contact page, so that I can respond to prospective investors.

• Provenance: required_inference (the Contact page's engagement action must reach the fund for the lifecycle to be usable).
• Lifecycle: initiated by the visitor's submission; the inquiry is delivered to the fund; observable result is the inquiry available to the Fund Manager / Investment Operator; continuation is the operator's response to the prospective investor.
• Access: the operator's receipt of inquiries is not a visitor-facing page; it is the delivery side of the accepted Contact lifecycle.
• Failure/recovery: if delivery fails, the visitor sees a submission failure and can retry; entered content is preserved.
• Acceptance: submitted inquiries reach the fund rather than terminating in the browser.

FR-9 — Fund and offering information currency As a Fund Manager / Investment Operator, I should be able to keep the fund and investment information the site communicates current, so that the website accurately represents the fund management and investment service.

• Provenance: required_inference (the operator's accepted recurring work is maintaining the fund and investment information the site communicates).
• Lifecycle: initiated by the operator updating the offering content; observable result is updated content on Landing; continuation is the site continuing to represent the offering accurately.
• Access: this is the operator's own maintenance responsibility over the site's content; it does not create a visitor-facing page or a visitor account.
• Failure/recovery: if an update is not applied, the previously published content remains intact rather than rendering broken.
• Acceptance: the offering content presented on Landing reflects the fund's current information.

FR-10 — Extensible structure for future features As a Fund Manager / Investment Operator, I should have the site structured so that future features and functionality can be added, so that the website can grow without being rebuilt.

• Provenance: explicit (the website must be built to accommodate future features and functionality additions; hard constraint).
• Lifecycle: this is a structural obligation on the current build; observable result is that new sections, pages, and content types can be added additively; continuation is future increments.
• Access: not applicable to visitors.
• Failure/recovery: not applicable; this is an architectural constraint rather than a runtime behavior.
• Acceptance: the current pages and content model are modular and additive, and no current page hard-codes the assumption that it is the only page.

4. User Personas

Site Visitor / Prospective Investor

Product context. This person arrives at the website without prior relationship to the fund, typically from a referral, a search, or a shared link. They are evaluating a forex fund management and investment offering and are skeptical of marketing language; they want to feel the scale and intelligence of the operation before they commit attention to it.

Primary goal. Understand the fund management and investment proposition and move forward with it.

Distinct accepted responsibilities. Browsing the site's presentation content — including the 3D animated text and the other visual sections — and reaching the point where they can take the site's primary action. This is a read-and-decide role: the visitor consumes the offering presentation, reads the live market and performance content, and then either engages or leaves.

Relevant inputs or decisions. The visitor decides whether the offering is credible enough to warrant an inquiry. Their inputs are the offering description, the live FX ticker, the performance figures, and the overall quality of the presentation.

Interactions with other accepted participants. The visitor's engagement inquiry is received by the Fund Manager / Investment Operator, who responds to it. The visitor never interacts with the operator inside the site; the handoff is the inquiry submission.

Observable success. The visitor understands the fund management and investment proposition and moves forward with it by submitting an engagement inquiry and receiving confirmation that it was received.

Constraints. The visitor is anonymous; no account, sign-in, or personal state is required to browse the site or to submit an inquiry.

Fund Manager / Investment Operator

Product context. This is the party responsible for the fund management and investment activity the website presents. They are not a visitor to the marketing site in the same sense — they are the source of the offering's truth and the recipient of the interest it generates.

Primary goal. A website that accurately represents the fund management and investment service to prospective investors.

Distinct accepted responsibilities. Maintaining the fund and investment information the site communicates and keeping the site's offering current; receiving the engagement inquiries that prospective investors submit through the Contact page and responding to them.

Relevant inputs or decisions. The operator decides what the site says about the fund and when it changes; they decide how to respond to each prospective investor's inquiry.

Interactions with other accepted participants. The operator receives inquiries from Site Visitors / Prospective Investors and responds to them outside the site's visitor-facing surface.

Observable success. The offering content on the site reflects the fund's current information, and submitted inquiries reach the operator so they can be answered.

Constraints. The operator's maintenance responsibility is over the site's own content; it does not imply a visitor-facing administrative page or a visitor account in the current scope.

5. Core User Flows

Flow 1 — A prospective investor evaluates the offering and engages

1. Starting context: The Site Visitor / Prospective Investor opens the website's Landing page anonymously. No account or sign-in is involved.
2. Entry: The Landing page loads. The 3D animated text hero initializes: the words "FOREX FUND MANAGEMENT" appear as extruded 3D letterforms floating in a slow-moving particle field, lit from within with teal volumetric glow and dissolving into particles at their edges, with a single magenta pulse travelling through the field on a 12-second loop. The headline is left-anchored; a live data panel showing animated FX pairs is right-anchored.
3. Market context: Directly beneath the navigation, the live FX ticker strip scrolls live pair data in IBM Plex Mono with teal up-ticks and magenta down-ticks. The visitor reads the market the fund operates in.
4. Reading the offering: The visitor scrolls into the supporting sections and reads the fund management and investment proposition.
5. Performance assessment: The visitor reaches the data sculpture performance section, where fund returns are rendered as a flowing generative particle field that morphs on scroll, with the raw numbers overlaid in a glass panel. The visitor reads the figures.
6. Decision: The visitor decides the offering warrants an inquiry and takes the site's primary engagement action.
7. Handoff: The Contact page opens with its engagement context and inquiry form. The visitor enters their contact details and message.
8. Commitment: The visitor submits the inquiry. The submit control reflects the pending state and prevents duplicate submission.
9. Observable result: The Contact page shows a confirmation that the inquiry was received.
10. Continuation: The visitor may return to the Landing page to review the offering again, or leave the site.

Failure and recovery:

• If the WebGL scene cannot initialize, the Landing page falls back to a static, readable presentation of the headline and content; the visitor can still read the offering and reach the engagement action.
• If live FX values are unavailable, the ticker and data panel show their labeled structure with values withheld rather than fabricated numbers.
• If the visitor submits with missing or invalid required input, the specific field is identified and the entered content is preserved for correction.
• If submission fails, the failure is reported without discarding the visitor's content, and the visitor can retry.

Reduced motion: With prefers-reduced-motion, the canvas freezes into a static data map and the ticker items wrap into readable rows; every item remains fully readable and the engagement action remains reachable.

Flow 2 — The fund receives and answers a prospective investor's inquiry

1. Starting context: The Fund Manager / Investment Operator is responsible for the fund and investment activity the website presents.
2. Trigger: A Site Visitor / Prospective Investor submits an engagement inquiry through the Contact page.
3. Delivery: The inquiry reaches the fund rather than terminating in the browser.
4. Observable result: The inquiry is available to the Fund Manager / Investment Operator, who can see the prospective investor's contact details and message.
5. Response: The operator responds to the prospective investor.
6. Continuation: The operator continues to receive and answer inquiries generated by the site.

Failure and recovery: If delivery fails, the visitor sees a submission failure and can retry with their content preserved; the operator does not silently lose the inquiry.

Flow 3 — The fund keeps the site's offering current

1. Starting context: The Fund Manager / Investment Operator maintains the fund and investment information the site communicates.
2. Trigger: The fund's offering information changes, or the operator identifies content that no longer represents the service accurately.
3. Action: The operator updates the offering content the site presents.
4. Observable result: The Landing page presents the updated offering content.
5. Continuation: The site continues to represent the fund management and investment service accurately to prospective investors.

Failure and recovery: If an update is not applied, the previously published content remains intact rather than rendering broken.

Flow 4 — The site grows with future features

1. Starting context: The website has been built to accommodate future features and functionality additions.
2. Trigger: A future feature or functionality is accepted for the site.
3. Action: The new section, page, or content type is added additively to the existing structure.
4. Observable result: The new capability appears alongside the current Landing and Contact experience without requiring the existing pages to be rebuilt.
5. Continuation: The site continues to serve the accepted visitor journeys while carrying the new increment.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Data made physical — a living FX particle field, not a fintech template. The muse is Refik Anadol; the headline idea is that the fund's own live currency data becomes a full-bleed, slow-flowing generative particle field. Motion is the hero, not a decoration.

Colour tokens (dark mode):

Typography:

• Headings: Space Grotesk — wide geometric grotesk, uppercase micro-labels with 0.18em tracking, display weights 500–700, tight leading at 0.95.
• Body: IBM Plex Sans.
• Numeric data: IBM Plex Mono for tabular alignment.
• Scale: 1.5 modular — 48/32/22/16/14 mobile scaling to 128/64/36/22/16 desktop via clamp(); mono numerals at 14/16/24/40.
• Headline scale: clamp(48px, 9vw, 128px), stacked in two lines, never centered.

Shape language: Full-bleed generative canvas with floating glass panels. Thin luminous strokes (1px, teal at 40% opacity), soft radial glows, no hard card corners — panels use 20px radii and 1px light borders. Data rows are hairline-ruled. The 3D animated text is built from extruded glyph meshes that dissolve into particles at the edges.

Layout: Asymmetric editorial grid — 12 columns, 80px gutters desktop, 24px mobile. The hero is a full-viewport WebGL canvas with a left-anchored type stack and a right-anchored live data panel. Sections alternate full-bleed canvas breaks with dense data tables and a 3-column performance grid. Navigation is a slim top bar with a live market ticker strip beneath it.

Imagery: Generative particle/fluid renders derived from live FX pair data (EUR/USD, GBP/JPY, etc.). No stock photography. Macro textures of currency flows rendered as luminous fields. The 3D animated text itself is the primary imagery, built with React Three Fiber and troika-three-text or extruded geometry.

Forbidden: Blue-indigo (#2563EB, #4F46E5, #7C3AED) on white; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; centered headline + subtext + blue button + gradient blob hero; a grid of identical hover-lift cards; stock photography of handshakes, skyscrapers, or trading floors; flat 2D text with a drop shadow pretending to be 3D; bouncy, playful, or springy micro-interactions; white or near-white ground as the dominant surface.

Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, and card text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control. Moving and scrollable content (the ticker) may cross the viewport edge by design and is judged by whether it actually moves and whether every item becomes fully readable as it passes.

7. Signature Design Concept

The headline is the scene. On the public entry (Landing), the words "FOREX FUND MANAGEMENT" do not sit on top of a background — they are the background. The glyphs exist as extruded 3D letterforms floating in a slow-moving particle field on a #05060A ground, lit from within with #00E5C4 volumetric glow and dissolving into particles at their edges. The particles drift toward a right-anchored live data panel showing animated FX pairs, so the type itself appears to feed the market data. A single #FF3D6E pulse travels through the field on a 12-second loop — the one hot accent in an otherwise teal-and-black composition.

The type stack is left-anchored and stacked in two lines, never centered, at clamp(48px, 9vw, 128px). Directly beneath the navigation, a hairline-ruled ticker strip scrolls live pair data in IBM Plex Mono with teal up-ticks and magenta down-ticks. Below the 3D scene, the page breaks into full-bleed canvas sections alternating with dense data tables and a 3-column performance grid, each panel a glass surface with a 1px luminous teal border and 20px radius, floating over the dark canvas — no identical hover-lift card grid, and each panel carrying a distinct data role.

This concept recomposes only accepted content, states, and controls: the offering headline, the live FX data, the performance figures, and the engagement call to action. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject. Extruded 3D letterforms spelling "FOREX FUND MANAGEMENT", floating in a slow-moving particle field derived from live FX pair data, with a right-anchored live data panel showing animated FX pairs.

Input → transformation → outcome thesis. The visitor's arrival and scroll position are the input; the particle field continuously flows and morphs, the glyph edges dissolve into particles that drift toward the live data panel, and a magenta pulse travels through the field on a 12-second loop; the outcome is that the fund's own market data reads as a physical, intelligent system rather than a marketing claim — and the visitor is carried from the headline into the performance and engagement sections.

Motion vocabulary. Continuous slow generative particle flow; scroll-linked morphing of the data field as sections pass; staggered word reveals on headlines; a live ticker marquee. No bouncy, playful, or springy micro-interactions — this is a serious financial instrument.

Composed first frame. A full-viewport #05060A canvas. The extruded headline occupies the left two-thirds, stacked in two lines, glowing teal from within with particles shedding from its edges. The right third holds a glass data panel with 1px luminous teal border and 20px radius, showing animated FX pairs. Beneath the navigation, the hairline-ruled ticker strip is already scrolling. No blue button, no gradient blob, no centered subtext stack.

Reduced-motion state. With prefers-reduced-motion, the canvas freezes into a static data map — the headline and data field rendered as a still, readable composition — and the ticker items wrap into readable rows so every item can be read in full. All content and the engagement call to action remain reachable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

The direction's hero dimensionality is webgl, so a real-time 3D hero is expected. The scene is one crafted real-time subject: extruded glyph meshes for "FOREX FUND MANAGEMENT" suspended in a GPU particle field, with the glyph edges emitting particles that drift toward the right-anchored live data panel. The defining state shown is the fund's own market data made physical — the headline and the FX flow are the same object. Lighting is internal teal volumetric glow (#00E5C4) against the #05060A ground, with a single magenta (#FF3D6E) pulse on a 12-second loop. The scene is built with React Three Fiber and troika-three-text or extruded geometry, and it degrades to a static readable composition when WebGL is unavailable or reduced motion is requested.

9. Non-Functional Requirements

NFR-1 — 3D animated text is a hard requirement. The website must include 3D animated text. Provenance: explicit. Rationale: stated as a hard constraint in the authoritative source. The headline must be a real-time 3D subject, not flat 2D text with a drop shadow or gradient.

NFR-2 — Extensible structure is a hard requirement. The website must be built to accommodate future features and functionality additions. Provenance: explicit. Rationale: stated as a hard constraint in the authoritative source. Current pages and the content model must be modular and additive.

NFR-3 — Readable text and controls stay whole. At 375px, 768px, and 1280px, headlines, wordmarks, labels, numbers, and card text and controls must stay entirely inside the viewport and their container, wrapping or scaling to fit, with no other element covering them. Provenance: explicit (creative direction readability rule). Rationale: the direction's full-bleed motion must never cost legibility.

NFR-4 — Reduced-motion support. All motion must respect prefers-reduced-motion by freezing the canvas into a static data map and wrapping ticker items into readable rows. Provenance: explicit (creative direction). Rationale: the direction's cinematic motion ceiling requires a usable static arrangement.

NFR-5 — Contrast. Body text at #F2F4F8 on the #05060A / #10131C grounds must meet AA contrast at body size. Provenance: explicit (creative direction). Rationale: the dark palette must remain readable.

NFR-6 — No fabricated market data. When live FX values are unavailable, the ticker and data panel must show their labeled structure with values withheld rather than fabricated numbers. Provenance: required_inference. Rationale: a fund presentation that invents market values would misrepresent the offering the operator is responsible for keeping accurate.

NFR-7 — Anonymous access. The current pages are reachable without an account, sign-in, or personal state. Provenance: explicit (planning scope access contract: both pages have access requirement none). Rationale: no accepted journey requires identity continuity.

NFR-8 — Inquiry content preservation. A failed or invalid inquiry submission must not discard the visitor's entered content. Provenance: required_inference. Rationale: the engagement lifecycle must remain recoverable.

10. Tech Stack

• Frontend: React, with React Three Fiber for the real-time WebGL hero and troika-three-text or extruded geometry for the 3D animated text. Provenance: explicit (creative direction specifies React Three Fiber and troika-three-text or extruded geometry).
• Typography: Space Grotesk (headings), IBM Plex Sans (body), IBM Plex Mono (numeric data). Provenance: explicit (creative direction).
• Backend: Python / FastAPI, serving the Contact page's inquiry submission endpoint and the live FX pair data the ticker and data panel consume. Provenance: required_inference — the accepted Contact lifecycle requires the inquiry to reach the fund rather than terminate in the browser, and the ticker and data panel require a server-side source for live pair data.
• Storage: MariaDB, holding application-owned persistent data: submitted engagement inquiries (so that inquiries are not lost between submission and the operator's response) and the offering content the Fund Manager / Investment Operator maintains. Provenance: required_inference for the inquiry store; basic_default for the specific engine.
• Containerization: Docker / docker-compose for the frontend and backend services. Provenance: basic_default — not specified by the user; included as the practical packaging for the two services.
• Kubernetes: Not included. Provenance: basic_default — deployment does not require it at the current scope.

11. Assumptions and Constraints

Assumptions

• A-1. The site is a public, anonymous-access website. Both current pages have no access requirement, and no accepted journey requires identity continuity. [Default — not specified by user]
• A-2. The live FX pair data shown in the ticker and data panel is sourced server-side and is presented as market context for the fund's offering. [required_inference]
• A-3. Engagement inquiries submitted through Contact are delivered to the Fund Manager / Investment Operator, who responds outside the visitor-facing surface. [required_inference]
• A-4. The Fund Manager / Investment Operator maintains the offering content through the site's own content structure; this does not create a visitor-facing administrative page in the current scope. [required_inference]
• A-5. Docker / docker-compose is the packaging for the frontend, backend, and database services. [Default — not specified by user]

Constraints

• C-1. The website must include 3D animated text. [explicit]
• C-2. The website must be built to accommodate future features and functionality additions. [explicit]
• C-3. The generic indigo/blue-on-white SaaS template is forbidden for this project. [explicit]
• C-4. The forbidden typography list (Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, system-ui) must not be used for headings or body. [explicit]
• C-5. No stock photography of handshakes, skyscrapers, or trading floors. [explicit]
• C-6. No bouncy, playful, or springy micro-interactions. [explicit]
• C-7. White or near-white ground must not be the dominant surface. [explicit]

Future horizon (not current scope). The user explicitly required that the site be structured so that future features and functionality can be added. Concrete future capabilities are not specified by the user and are therefore not built now. Any future increment must be accepted before it enters current pages or acceptance criteria. The current architectural obligation is that such increments can be added additively without rebuilding the existing Landing and Contact experience.

12. Glossary

• 3D animated text — The site's headline rendered as real-time extruded 3D letterform meshes floating in a particle field, lit with volumetric glow and dissolving into particles at their edges; not flat 2D text with a shadow or gradient.
• Data sculpture — The performance section where fund returns are rendered as a flowing generative particle field that morphs on scroll, with the raw numbers overlaid in a glass panel.
• Engagement inquiry — The contact details and message a Site Visitor / Prospective Investor submits through the Contact page to move forward with the offering.
• FX pair — A currency pair (e.g., EUR/USD, GBP/JPY) whose live value and direction are shown in the ticker and data panel.
• Glass panel — A low-opacity surface (#10131C) with a 1px luminous teal border and 20px radius, floating over the dark canvas; each panel carries a distinct data role.
• Landing — The anonymous public entry page presenting the forex fund management and investment offering, the 3D animated text, and the additional visual and functional sections.
• Contact — The anonymous page that is the destination for the site's primary engagement action, carrying the engagement context and the inquiry form.
• Micro-label — An oversized uppercase Space Grotesk label set at 14px with 0.18em tracking, placed above a 64px display headline as a deliberate 4.5x scale jump.
• Ticker strip — The hairline-ruled strip directly beneath the navigation that scrolls live FX pair data in IBM Plex Mono with teal up-ticks and magenta down-ticks.
• prefers-reduced-motion — The user's operating-system motion preference; when set, the canvas freezes into a static data map and ticker items wrap into readable rows.