System Requirements Document for brave-luxury

1. Introduction

brave-luxury is the public website for Beck Watch Co., an independent watchmaking atelier led by founder and watchmaker Carlos Arroyo in Texas, USA. The product intent is a complete, premium, cinematic, fully functional website — not a static design or generic template — that presents Beck Watch Co. through a genuine interactive 3D mechanical wristwatch, cinematic scroll-driven storytelling, a verified watch collection gallery, a craftsmanship narrative, an editorial brand story, and a contact call to action that routes visitors to the verified official contact page.

The audience is watch collectors and connoisseurs who value visible authorship, craftsmanship, material, and intentional, non-mass-produced timepieces. The site must read as an ultra-premium luxury instrument: deep black studio void, charcoal surfaces, silver metal, and a single champagne-gold accent, with dramatic studio lighting, realistic metallic reflections, glass highlights, and soft shadows.

The site is anonymous and public. It has no accounts, no cart, no checkout, and no invented prices, stock availability, email addresses, or phone numbers. All product facts come from the verified official brand reference at https://beckwatchco.com/.

2. System Overview

brave-luxury is delivered as a responsive single-page-style React + TypeScript web application with a real-time Three.js / React Three Fiber 3D scene, GSAP-driven scroll animation, and a premium loading experience. The experience is composed of six first-party destinations — Landing, Watch Experience, Collection, Timepiece Details, Craftsmanship, and Brand Story — all publicly reachable without identity.

Actors:

• Luxury watch visitor — explores the cinematic hero, interacts with the 3D watch (drag, touch, zoom, camera views, hotspots, lighting), reads craftsmanship and brand story content, and decides whether to explore the collection or contact the team.
• Prospective buyer — browses the collection gallery, opens individual timepieces to review verified model names and specifications, distinguishes concept models from actual products, and uses the contact CTA to learn about availability.

Non-persona actors:

• Official Beck Watch Co. contact page (external destination) — receives the CONTACT US handoff.
• WebGL-capable browser / device — renders the 3D scene; devices without WebGL receive a graceful fallback.
• Shared backend (FastAPI) — serves application APIs and domain modules; the current product surface is primarily client-rendered, and the backend supports any server-side content delivery the site requires.
• Database (MariaDB) — application-owned persistent storage available to the backend.

Current delivery is anonymous and public. There is no authentication, no account management, no cart, no checkout, and no currency selector in the current scope. The site does not invent prices, stock availability, email addresses, or phone numbers, and it does not make unsupported claims about the brand's actual manufacturing processes.

Removed from scope

• Shopping cart and checkout (also: "Item added to your cart", "View cart", "Check out", "Continue shopping")
• Currency selector
• Invented prices and stock availability
• Invented email addresses and phone numbers
• Unsupported claims about the brand's actual manufacturing processes

2a. Product Interpretation and Delivery Boundary

The delivered product is a first-party, publicly accessible brand experience. Every destination is reachable anonymously; no visitor identity is established, stored, or required. The 3D watch, camera controls, lighting controls, hotspots, and scroll choreography are owned by the first-party application. The CONTACT US call to action hands the visitor off to the verified official Beck Watch Co. contact page, which is owned externally; the site does not host a contact form, does not display email addresses or phone numbers, and does not process messages.

The shared FastAPI backend and MariaDB database are provisioned infrastructure. They support the site's server-side needs (for example, serving verified collection content and static assets) but do not introduce accounts, carts, orders, or any adjacent commerce capability. The current scope is the cinematic brand experience and the verified collection presentation; future commerce, accounts, or transactional features are explicitly out of scope for this document.

2b. Source Content Inventory

The following verified facts from the official brand reference (https://beckwatchco.com/) are preserved as authoritative content for the site.

Brand identity

• Brand: Beck Watch Co.
• Positioning: Independent Watchmaking
• Location: Texas, USA
• Founder: Carlos Arroyo — Founder & Watchmaker; designs, engraves, finishes, and assembles each watch personally.

Verified navigational links on the official site

• Home
• Current Work
• Founder\x20\xe2\x80\x91 Carlos Arroyo
• About Us
• Contact
• Foundation work
• Warranty

Verified brand narrative sections

• Why Beck — "Beck Watch Co. creates watches defined by visible authorship. Each dial begins as a solid piece of metal and is engraved, finished, and revealed by hand until form emerges from the material itself. The result is a watch that changes with light, carries the evidence of its creation, and connects its owner directly to the process behind it."
• Available Pieces — "Independent watchmaking by Carlos Arroyo"
• What Makes a Beck Watch — The Dial — "Each Beck Watch dial begins as raw brass and is engraved, painted, and finished by hand. This process cannot be automated or repeated exactly. Each dial carries its own character."
• What Makes a Beck Watch — Restraint — "Proven Swiss mechanical movements are chosen for reliability and long‑term serviceability. The case exists to frame the dial — not compete with it."
• What Makes a Beck Watch — Pace — "Watches are not released according to a schedule. They are released when they are ready. Each piece is created slowly and released only when it feels resolved. The studio is continuously evolving. Beck watches are made and offered individually. When no piece is shown, work is ongoing."

Verified studio contact block

• Beck Watch Co.
• Independent Watchmaking
• Texas, USA

Verified warranty facts

• Duration: Five-year warranty against manufacturing defects, beginning on date of delivery.
• Coverage: mechanical movement; dial, hands, or internal assembly; issues from improper workmanship or material failure.
• Exclusions: normal wear and aging (scratches or cosmetic wear to case, bracelet, or crystal); damage from accidents, misuse, impacts, unauthorized modification; water damage from improper use; wear to straps, bracelets, clasps, or spring bars; loss or theft.
• Support: service communication handled directly through the studio; return shipping after warranty service covered by the studio.

Verified visual elements referenced on the official site

• Close-ups of dials
• Swiss mechanical movement
• Ordine 002 Raw Steel dial
• Bearing Cobalt wrist detail

Verified model names observed

• Ordine 002 Raw Steel (dial)
• Bearing Cobalt (wrist detail)

Verified contact page

• The official site's Contact link exists; the verified official contact page is the destination for the CONTACT US button. No email addresses or phone numbers are published in the verified observations and none may be invented.

Unverified / unavailable facts (must not be invented)

• Prices
• Stock availability
• Email addresses
• Phone numbers
• Additional model names and specifications beyond those verified above

2c. Page Content and Component Coverage

Landing

• Information/state: Full-screen cinematic hero with the large mechanical luxury wristwatch centered; headline "PRECISION, SCULPTED IN TIME."; subtitle "Independent watchmaking. Distinctive design. Crafted to be experienced."; buttons "EXPLORE THE WATCH" and "DISCOVER THE CRAFT"; subtle animated scroll indicator; cinematic lighting; smooth entrance animation. Below the hero: a sticky 3D stage where the watch stays pinned while text panels scroll past (macro dial → case → bracelet), a craftsmanship section with headline "EVERY SURFACE HAS A STORY." and three storytelling panels (Sculpted Dial Architecture, Refined Metal Finishing, Independent Watchmaking), a collection preview gallery, a brand story editorial section, and a contact section with headline "DISCOVER YOUR NEXT TIMEPIECE.", subtitle "Explore the collection or contact the team to learn more about availability.", and a "CONTACT US" button.
• Primary actions: Click "EXPLORE THE WATCH" (routes to Watch Experience); click "DISCOVER THE CRAFT" (routes to Craftsmanship); scroll to drive the cinematic sequence; click "DISCOVER TIMEPIECE" on a collection card (routes to Timepiece Details); click "CONTACT US" (opens the verified official contact page).
• Supporting actions: Top navigation links to Landing, Watch Experience, Collection, Craftsmanship, Brand Story, and Contact section; scroll indicator.
• Domain entities: Brand narrative content, craftsmanship panels, collection card summaries, contact CTA.
• Component responsibilities: Hero stage (3D watch canvas + headline + CTAs + scroll indicator), sticky scroll stage, craftsmanship panel group, collection preview row, brand story editorial split, contact block, top navigation bar.
• States:

• Loading: premium loading screen with progress indicator while the 3D experience loads.
• Empty: not applicable (content is authored).
• Success: hero renders with the 3D watch, entrance animation completes, scroll sequence runs smoothly.
• Error: WebGL unavailable → graceful fallback replaces the 3D canvas with a static presentation while all text, navigation, and CTAs remain functional.
• Recovery: reduced-motion preference → no auto-rotation, no scroll scrub, static lit watch, instant reveals.

Watch Experience

• Information/state: Focused interactive 3D wristwatch with round metallic case and bezel, sculpted mechanical-style dial, realistic hour markers and watch hands, reflective glass, detailed crown and side buttons, metallic bracelet with individual links, physically based metallic materials, and studio lighting. Right-edge vertical instrument rail with FRONT / SIDE / BACK camera presets, circular zoom rocker, and a two-position COOL SILVER ↔ WARM GOLD lighting switch. Hotspot markers on the dial, bezel, case, and bracelet.
• Primary actions: Drag to rotate the watch; touch rotation on mobile; zoom in and out; select Front, Side, or Back viewing angle; toggle cool silver / warm gold lighting; hover or activate a hotspot to reveal its spec row and ease the camera to that part.
• Supporting actions: Idle auto-rotation resumes after interaction; smooth camera movement between states.
• Domain entities: 3D watch model (constructed from individual Three.js geometries when no external model is available), camera presets, lighting presets, hotspot definitions (dial, bezel, case, bracelet).
• Component responsibilities: 3D canvas, orbit/drag controller, camera rig, lighting rig, hotspot layer, instrument control rail, zoom rocker, lighting switch.
• States:
  • Loading: progress indicator while the 3D scene initializes.
  • Empty: not applicable.
  • Success: watch renders, drag/touch rotation works, zoom works, camera presets transition smoothly, lighting toggle visibly recolors the key light, hotspots open spec rows.
  • Error: WebGL unavailable → graceful fallback with a static presentation and a clear message; controls that depend on 3D are disabled or hidden.
  • Recovery: reduced-motion → no auto-rotation and no scroll scrub; manual drag, zoom, camera presets, lighting, and hotspots remain available.

Collection

• Information/state: Premium product gallery of elegant cards. Each card contains a watch image or interactive 3D preview, verified model name and available specifications, and a "DISCOVER TIMEPIECE" button, with smooth transitions and metallic highlights. Concept models carry a visible "CONCEPT" chip in titanium grey. No prices or stock availability are shown.
• Primary actions: Hover a card to trigger hover animation and metallic highlights; click "DISCOVER TIMEPIECE" to open Timepiece Details.
• Supporting actions: Navigate back to Landing or to other sections via top navigation.
• Domain entities: Timepiece card (verified model name, available specifications, concept flag, image or 3D preview).
• Component responsibilities: Gallery grid, timepiece card, concept chip, hover animation layer, 3D preview canvas (where used).
• States:
  • Loading: skeleton or progress indicator while card media loads.
  • Empty: if no verified pieces are available, show the verified statement that when no piece is shown, work is ongoing.
  • Success: cards render with verified names and specifications; hover animations and metallic highlights run; concept models are labeled.
  • Error: a card's media fails → show a graceful placeholder while keeping the verified name, specifications, and button usable.
  • Recovery: reduced-motion → hover animations become instant; cards remain fully readable.

Timepiece Details

• Information/state: Focused view of a selected timepiece with its verified model name and available specifications. Concept models are clearly labeled as concepts rather than actual products. No prices or stock availability are shown.
• Primary actions: Review verified specifications; return to Collection; use the contact CTA to learn about availability.
• Supporting actions: Navigate to other sections via top navigation.
• Domain entities: Timepiece (verified model name, available specifications, concept flag).
• Component responsibilities: Detail header, specification rows, concept label, contact CTA, back-to-collection control.
• States:
  • Loading: progress indicator while detail content loads.
  • Empty: unknown or unavailable timepiece → show a clear not-found state with a route back to Collection.
  • Success: verified name and specifications render; concept label appears when applicable.
  • Error: content fails to load → show a recoverable error with a retry or back-to-collection action.
  • Recovery: reduced-motion → transitions become instant.

Craftsmanship

• Information/state: Headline "EVERY SURFACE HAS A STORY." with three visual storytelling panels: Sculpted Dial Architecture, Refined Metal Finishing, Independent Watchmaking. Close-up visuals, elegant text reveals, and subtle parallax effects. Copy avoids unsupported claims about the brand's actual manufacturing processes.
• Primary actions: Scroll through the three panels; read the storytelling copy.
• Supporting actions: Navigate to Collection or Contact via top navigation or CTA.
• Domain entities: Craftsmanship panel (title, close-up visual, narrative copy).
• Component responsibilities: Panel group, parallax visual layer, text reveal layer.
• States:
  • Loading: progress indicator while close-up visuals load.
  • Empty: not applicable (content is authored).
  • Success: three panels render with close-up visuals, text reveals, and subtle parallax.
  • Error: a visual fails → show a graceful placeholder while keeping the panel copy readable.
  • Recovery: reduced-motion → parallax and reveals become static and instant.

Brand Story

• Information/state: Cinematic editorial section about independent design, attention to detail, and the relationship between engineering and artistry. Large typography, alternating image and text layouts, dark backgrounds, and refined scroll transitions. Uses verified brand narrative content (Why Beck, The Dial, Restraint, Pace, founder Carlos Arroyo, Texas, USA).
• Primary actions: Scroll through the editorial sections; read the brand narrative.
• Supporting actions: Navigate to Collection or Contact via top navigation or CTA.
• Domain entities: Editorial block (heading, body copy, image).
• Component responsibilities: Alternating editorial layout, large typography, scroll transition layer.
• States:
  • Loading: progress indicator while editorial imagery loads.
  • Empty: not applicable (content is authored).
  • Success: editorial sections render with alternating layouts and refined scroll transitions.
  • Error: an image fails → show a graceful placeholder while keeping the copy readable.
  • Recovery: reduced-motion → scroll transitions become instant.

3. Functional Requirements

FR-1 — Fully functional premium site (explicit). As a Luxury watch visitor, I should experience a complete, fully functional, responsive luxury watch website for Beck Watch Co. with real interactive 3D elements, cinematic animations, premium visuals, and working buttons — not a static design or generic template — so that the brand reads as an ultra-premium independent atelier. Lifecycle: visitor opens the site → premium loading screen with progress indicator → hero and sections render → all navigation and CTA buttons work. Failure/recovery: if a section fails to load, the rest of the site remains usable and the failed section shows a graceful state. Continuation: visitor navigates to any destination.

FR-2 — Ultra-premium visual identity (explicit). As a Luxury watch visitor, I should see an ultra-premium luxury aesthetic with a deep black background, charcoal surfaces, silver metal, subtle champagne-gold accents, elegant editorial typography, spacious layouts, dramatic studio lighting, realistic metallic reflections, glass highlights, soft shadows, and minimal clean design, so that the site feels expensive and intentional. Observable result: the rendered page uses the specified palette, typography, spacing, and lighting treatment.

FR-3 — Full-screen cinematic hero (explicit). As a Luxury watch visitor, I should see a full-screen cinematic hero with a large mechanical luxury wristwatch in the center, the headline "PRECISION, SCULPTED IN TIME.", the subtitle "Independent watchmaking. Distinctive design. Crafted to be experienced.", the buttons "EXPLORE THE WATCH" and "DISCOVER THE CRAFT", a subtle animated scroll indicator, cinematic lighting, and a smooth entrance animation. Observable result: the hero fills the viewport, the watch is centered, the exact headline and subtitle render, both buttons are present and functional, the scroll indicator animates, and the entrance animation plays. Failure/recovery: reduced-motion → entrance animation becomes instant and the scroll indicator is static. Continuation: visitor clicks a hero button or scrolls.

FR-4 — Genuine 3D hero watch (explicit). As a Luxury watch visitor, I should see the hero watch as a genuine 3D object rather than a flat image whenever possible. Observable result: the hero renders a live 3D scene. Failure/recovery: devices without WebGL receive a graceful fallback that does not claim the object is fully interactive.

FR-5 — Detailed 3D wristwatch construction (explicit). As a Luxury watch visitor, I should see a detailed 3D wristwatch built with React Three Fiber, Three.js, and Drei (if compatible) featuring a round metallic case and bezel, a sculpted mechanical-style dial, realistic hour markers and watch hands, reflective glass, a detailed crown and side buttons, a metallic bracelet with individual links, physically based metallic materials, and studio lighting. Observable result: the 3D scene shows each listed component with PBR metallic materials and studio lighting. Failure/recovery: if no external 3D model is available, the watch is constructed from individual Three.js geometries; a static image is never substituted while claiming the object is fully interactive.

FR-6 — 3D watch interactions (explicit). As a Luxury watch visitor, I should drag to rotate the watch, use touch rotation on mobile, see smooth automatic rotation when idle, zoom in and out, switch between front, side, and back viewing angles, experience smooth camera movement, activate interactive hotspots for the dial, bezel, case, and bracelet, and use functional lighting controls for cool silver and warm gold lighting. Observable result: each interaction produces its stated visual change. Failure/recovery: WebGL unavailable → graceful fallback; reduced-motion → auto-rotation and scroll scrub are disabled while manual interactions remain available. Continuation: visitor continues exploring or navigates to another destination.

FR-7 — Cinematic scroll animation (explicit). As a Luxury watch visitor, I should experience a premium scrolling experience using GSAP ScrollTrigger or an equivalent compatible animation library in which the watch slowly rotates, the camera moves closer to the dial, macro details of the case and bracelet appear, text reveals smoothly, background lighting transitions subtly, and the watch moves between carefully designed sections, while scrolling stays smooth and avoids excessive animations that reduce performance. Observable result: scroll position drives the stated transformations without jank. Failure/recovery: reduced-motion → no scroll scrub; the page remains fully readable. Continuation: visitor reaches the next section.

FR-8 — Craftsmanship section (explicit). As a Luxury watch visitor, I should see a craftsmanship section with the headline "EVERY SURFACE HAS A STORY." and three visual storytelling panels — Sculpted Dial Architecture, Refined Metal Finishing, Independent Watchmaking — using close-up visuals, elegant text reveals, and subtle parallax effects, with copy that avoids unsupported claims about the brand's actual manufacturing processes. Observable result: the three panels render with their exact titles, close-up visuals, text reveals, and subtle parallax. Failure/recovery: reduced-motion → parallax and reveals become static and instant.

FR-9 — Watch collection gallery (explicit). As a Prospective buyer, I should browse a premium product gallery with elegant cards and hover animations, where each card contains a watch image or interactive 3D preview, a verified model name and available specifications, and a "DISCOVER TIMEPIECE" button, with smooth transitions and metallic highlights. Observable result: cards render with verified content and the button is functional. Failure/recovery: a card's media fails → graceful placeholder while the verified name, specifications, and button remain usable. Continuation: visitor clicks "DISCOVER TIMEPIECE".

FR-10 — Verified product information and concept labeling (explicit). As a Prospective buyer, I should see verified product information from the official website, and fictional concept models must be clearly labeled as concepts rather than actual products. Observable result: verified model names and available specifications match the official reference; concept models carry a visible concept label. Constraint: no prices or stock availability are invented.

FR-11 — Brand story section (explicit). As a Luxury watch visitor, I should read a cinematic editorial brand story about independent design, attention to detail, and the relationship between engineering and artistry, using large typography, alternating image and text layouts, dark backgrounds, and refined scroll transitions. Observable result: the editorial sections render with alternating layouts and refined scroll transitions. Failure/recovery: reduced-motion → transitions become instant.

FR-12 — Contact section and verified contact handoff (explicit). As a Luxury watch visitor, I should see a contact section with the headline "DISCOVER YOUR NEXT TIMEPIECE.", the subtitle "Explore the collection or contact the team to learn more about availability.", and a "CONTACT US" button linked to the verified official contact page. Observable result: the exact headline, subtitle, and button render; clicking the button opens the verified official contact page. Constraint: no email addresses or phone numbers are invented.

FR-13 — Technical stack (explicit). As a Luxury watch visitor, I should experience a site built with React and TypeScript, Tailwind CSS for styling if supported, Three.js and React Three Fiber for the 3D scene, and GSAP or Framer Motion for animations. Observable result: the delivered application uses these technologies.

FR-14 — Responsive layouts and functional navigation (explicit). As a Luxury watch visitor, I should use the site on desktop, tablet, and mobile with functional navigation and CTA buttons. Observable result: layouts adapt across breakpoints and every navigation link and CTA works. Failure/recovery: at narrow viewports, readable text and controls remain whole and inside the viewport.

FR-15 — Optimized rendering and premium loading screen (explicit). As a Luxury watch visitor, I should see optimized 3D rendering, textures, and loading, with a loading screen featuring a premium progress indicator. Observable result: the loading screen shows a premium progress indicator while the 3D experience loads, and the 3D scene renders efficiently. Failure/recovery: slow load → the progress indicator continues to communicate status.

FR-16 — Mobile touch controls (explicit). As a Luxury watch visitor on mobile, I should rotate the watch by touch and use the interactive controls on a touch device. Observable result: touch rotation and touch-operable controls work.

FR-17 — Accessible controls and reduced-motion support (explicit). As a Luxury watch visitor, I should use accessible controls and receive a reduced-motion experience when my device prefers reduced motion. Observable result: controls are keyboard-operable and labeled; with reduced motion, auto-rotation, scroll scrub, parallax, and reveals become static or instant while all content remains readable and usable.

FR-18 — Graceful WebGL fallback (explicit). As a Luxury watch visitor on a device without WebGL support, I should receive a graceful fallback rather than a broken scene. Observable result: the 3D canvas is replaced by a static presentation with a clear message; all text, navigation, and CTAs remain functional.

FR-19 — Clean, reusable components and maintainable code (explicit). As a Luxury watch visitor, I should experience a site built from clean, reusable components and maintainable code. Observable result: the delivered codebase is componentized and maintainable.

FR-20 — Final quality verification (explicit). As a Luxury watch visitor, I should experience a site that has been run and verified: compilation errors fixed; drag rotation tested; zoom, camera views, lighting controls, and hotspots tested; every navigation link and button verified; mobile layout and touch interactions checked; broken assets and runtime errors fixed; and the design confirmed to look premium rather than generic. Observable result: the delivered site passes these checks.

4. User Personas

Luxury watch visitor

• Product context: A collector or connoisseur who arrives at the Beck Watch Co. site to experience the brand. They value visible authorship, craftsmanship, material, and restraint, and they read the site as a darkened showroom with one lit watch on a turntable.
• Primary goal: Experience the cinematic 3D watch, understand the brand's craftsmanship and story, and decide whether to explore the collection or contact the team.
• Distinct accepted responsibilities: Interacting with the 3D watch (drag, touch, zoom, camera views, hotspots, lighting); scrolling through the cinematic sequence; reading the craftsmanship panels and brand story; using the hero CTAs and navigation.
• Relevant inputs or decisions: Whether to drag, zoom, switch camera views, toggle lighting, or activate a hotspot; whether to click "EXPLORE THE WATCH" or "DISCOVER THE CRAFT"; whether to continue to the collection or contact the team.
• Interactions with other accepted participants: Hands off to the Prospective buyer journey when they choose to explore the collection; hands off to the external official contact page when they choose CONTACT US.
• Observable success: The 3D watch responds to every interaction, the scroll sequence runs smoothly, the craftsmanship and brand story content is readable, and the CTAs work.

Prospective buyer

• Product context: A collector or connoisseur evaluating whether a Beck Watch Co. timepiece is right for them. They read verified model names and specifications carefully and distinguish concept models from actual products.
• Primary goal: Browse the collection, review verified timepiece details, and use the contact CTA to learn about availability.
• Distinct accepted responsibilities: Browsing the collection gallery; opening individual timepieces; reviewing verified model names and available specifications; recognizing concept labels; using the contact CTA.
• Relevant inputs or decisions: Which timepiece to open; whether a model is a concept or an actual product; whether to contact the team about availability.
• Interactions with other accepted participants: Depends on the Luxury watch visitor's exploration to reach the collection; hands off to the external official contact page when contacting the team.
• Observable success: Cards show verified names and specifications, concept models are clearly labeled, "DISCOVER TIMEPIECE" opens the correct details, and CONTACT US reaches the verified official contact page.

5. Core User Flows

Flow 1 — Luxury watch visitor: first arrival and cinematic hero

1. The visitor opens the site on the Landing page.
2. A premium loading screen with a progress indicator appears while the 3D experience loads.
3. The hero renders full-screen with the large mechanical luxury wristwatch centered, the headline "PRECISION, SCULPTED IN TIME.", the subtitle "Independent watchmaking. Distinctive design. Crafted to be experienced.", the buttons "EXPLORE THE WATCH" and "DISCOVER THE CRAFT", a subtle animated scroll indicator, cinematic lighting, and a smooth entrance animation.
4. The visitor observes the genuine 3D watch (not a flat image).
5. Failure/recovery: if the device lacks WebGL, a graceful fallback replaces the 3D canvas while all text, navigation, and CTAs remain functional. If the visitor prefers reduced motion, the entrance animation is instant and the scroll indicator is static.
6. Continuation: the visitor clicks "EXPLORE THE WATCH" (Flow 2), clicks "DISCOVER THE CRAFT" (Flow 4), or scrolls (Flow 3).

Flow 2 — Luxury watch visitor: interactive 3D watch

1. The visitor clicks "EXPLORE THE WATCH" on the Landing hero and arrives at the Watch Experience page.
2. The 3D wristwatch renders with a round metallic case and bezel, sculpted mechanical-style dial, realistic hour markers and watch hands, reflective glass, detailed crown and side buttons, metallic bracelet with individual links, physically based metallic materials, and studio lighting.
3. The visitor drags to rotate the watch (or uses touch rotation on mobile). The watch rotates smoothly.
4. When the visitor stops interacting, smooth automatic rotation resumes when idle.
5. The visitor zooms in and out using the zoom control.
6. The visitor selects Front, Side, or Back from the right-edge instrument rail; the camera moves smoothly to the selected viewing angle.
7. The visitor toggles the lighting control between cool silver and warm gold; the key light and ambient glow visibly change.
8. The visitor hovers or activates a hotspot on the dial, bezel, case, or bracelet; a spec row opens and the camera eases to that part.
9. Failure/recovery: if WebGL is unavailable, a graceful fallback appears and 3D-dependent controls are disabled or hidden. With reduced motion, auto-rotation and scroll scrub are disabled while manual drag, zoom, camera presets, lighting, and hotspots remain available.
10. Continuation: the visitor navigates to the Collection, Craftsmanship, Brand Story, or Contact section.

Flow 3 — Luxury watch visitor: cinematic scroll sequence

1. From the Landing hero, the visitor scrolls.
2. The watch slowly rotates, the camera moves closer to the dial, macro details of the case and bracelet appear, text reveals smoothly, background lighting transitions subtly, and the watch moves between carefully designed sections.
3. Scrolling remains smooth and avoids excessive animations that reduce performance.
4. Failure/recovery: with reduced motion, no scroll scrub occurs and the page remains fully readable.
5. Continuation: the visitor reaches the craftsmanship section (Flow 4), the collection (Flow 5), the brand story (Flow 6), or the contact section (Flow 7).

Flow 4 — Luxury watch visitor: craftsmanship storytelling

1. The visitor clicks "DISCOVER THE CRAFT" on the Landing hero or scrolls to the Craftsmanship page.
2. The headline "EVERY SURFACE HAS A STORY." renders with three visual storytelling panels: Sculpted Dial Architecture, Refined Metal Finishing, Independent Watchmaking.
3. Each panel shows close-up visuals, elegant text reveals, and subtle parallax effects; copy avoids unsupported claims about the brand's actual manufacturing processes.
4. Failure/recovery: with reduced motion, parallax and reveals become static and instant. If a visual fails to load, a graceful placeholder appears while the panel copy remains readable.
5. Continuation: the visitor navigates to the Collection, Brand Story, or Contact section.

Flow 5 — Prospective buyer: collection browsing and timepiece details

1. The visitor navigates to the Collection page from the top navigation or a collection preview on the Landing page.
2. The premium gallery renders elegant cards with hover animations; each card contains a watch image or interactive 3D preview, a verified model name and available specifications, and a "DISCOVER TIMEPIECE" button, with smooth transitions and metallic highlights.
3. Concept models carry a visible "CONCEPT" chip in titanium grey; no prices or stock availability are shown.
4. The visitor hovers a card to trigger the hover animation and metallic highlights.
5. The visitor clicks "DISCOVER TIMEPIECE" on a card and arrives at the Timepiece Details page.
6. The Timepiece Details page shows the verified model name and available specifications; concept models are clearly labeled as concepts rather than actual products.
7. Failure/recovery: if a card's media fails, a graceful placeholder appears while the verified name, specifications, and button remain usable. If the timepiece is unknown or unavailable, a clear not-found state offers a route back to Collection.
8. Continuation: the visitor returns to Collection or uses the contact CTA (Flow 7).

Flow 6 — Luxury watch visitor: brand story

1. The visitor navigates to the Brand Story page from the top navigation or by scrolling.
2. The cinematic editorial section renders with large typography, alternating image and text layouts, dark backgrounds, and refined scroll transitions, covering independent design, attention to detail, and the relationship between engineering and artistry, using verified brand narrative content.
3. Failure/recovery: with reduced motion, scroll transitions become instant. If an image fails, a graceful placeholder appears while the copy remains readable.
4. Continuation: the visitor navigates to the Collection or Contact section.

Flow 7 — Luxury watch visitor / Prospective buyer: contact handoff

1. The visitor reaches the contact section on the Landing page (or another page's contact CTA).
2. The section shows the headline "DISCOVER YOUR NEXT TIMEPIECE.", the subtitle "Explore the collection or contact the team to learn more about availability.", and the "CONTACT US" button.
3. The visitor clicks "CONTACT US".
4. The verified official Beck Watch Co. contact page opens in the browser.
5. Failure/recovery: no email addresses or phone numbers are displayed or invented; the handoff relies solely on the verified official contact page.
6. Continuation: the visitor completes their inquiry on the official contact page.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section.

• Muse and headline: MARQ by Garmin — precision luxury instrument. Headline concept: "Precision luxury instrument — titanium dark, macro dial detail, one champagne-gold signal."
• Mode: Dark mode only.
• Colour tokens (exact hex by role):
  • Background (studio void): #0B0B0C — carries ~70% of the page.
  • Surface (charcoal card/panel): #17181A — the only card/panel surface.
  • Hairline / border: #2A2B2E — 1px separators.
  • Text (warm off-white): #EDEAE4 — all body and headline text (contrast > 14:1 on black).
  • Primary / accent (champagne gold): #C8A96B — the single hot accent: one CTA fill, the active hotspot ring, the live numeral, the dial's seconds hand; never more than one gold element per viewport band.
  • Muted (titanium grey): #8B8D90 — secondary metal for labels, ruled rows, and inactive states.
  • Silver metal exists only inside the 3D scene (PBR roughness 0.15–0.3), never as a flat UI colour.
  • Background light transition target during scroll: #12100C (faintly warm).
• Typography:
  • Headings: Barlow Condensed — condensed technical display, uppercase, weight 500–600, tracking +0.02em at display sizes and +0.22em for micro-labels; headlines set enormous and tight-leading (0.92) so "PRECISION, SCULPTED IN TIME." stacks into three ruled lines like an instrument face.
  • Body: Saira; numerals always tabular via Saira's tabular feature.

• Type scale (1.333 modular, mobile → desktop): display clamp(3rem, 9vw, 8.25rem) (48 → 132px); h2 34 → 72px; h3 22 → 32px; body 16 → 18px; micro-label 11px uppercase tracked; data 13px tabular.
• Line lengths capped at 62ch for body, 18ch for display.
• Shape language: Instrument geometry — perfect circles for the watch, dial rings, hotspot markers, and zoom controls; ruled horizontal data rows with 1px hairlines; sharp-cornered panels (radius 0–2px) so the only soft form on the page is the watch itself. Bezel-inspired concentric rings frame section headings; gauges (arc dials) carry the craftsmanship stats.
• Layout: Dark gallery sequence with generous negative space. Hero is full-viewport: 3D watch centred on the black void with the headline stacked flush-left in the lower-left quadrant and the two CTAs pinned beneath it as a hairline-ruled button pair; a right-hand vertical rail holds view controls (Front / Side / Back), zoom +/−, and the cool-silver / warm-gold light toggle. Below: a sticky 3D stage that the watch stays inside while text panels scroll past it (macro dial → case → bracelet), then craftsmanship as three full-bleed macro panels with offset caption blocks, collection as a 3-up card row (single column at 375px) where each card is a dark instrument plate with a live miniature 3D preview, brand story as alternating 7/5 editorial splits, contact as a centred ruled block. Navigation is a thin top bar with the BECK wordmark in condensed caps, section links, and a gold-outlined CONTACT pill.
• Imagery style: Macro studio photography of metal only — brushed bezel flutes, engraved dial relief, bracelet link edges, crown knurling — lit with a single hard key and a champagne rim, cropped hard and bled off panel edges. No stock people, no lifestyle wrists, no clip art. The 3D watch itself is the primary image: PBR metals (case roughness 0.22 / metalness 1.0, polished bezel roughness 0.08, sapphire glass with transmission and a faint gold edge tint), engraved dial relief built from extruded geometry, individual bracelet links with alternating brushed/polished normals.

• Avoid: any blue, indigo, or violet accent; centred headline + subtext + blue button + gradient blob hero; glassmorphism, frosted panels, soft pastel gradients; grid of identical hover-lift cards with rounded corners and drop shadows; stock photography of people, wrists, or lifestyle scenes; Inter, Roboto, Poppins, system-ui, or any neutral geometric sans; invented prices, stock availability, emails, or phone numbers; bouncy spring easing, particles, or playful micro-interactions.

7. Signature Design Concept

The public entry is a full-bleed black studio void with no gradient blob. A single large 3D wristwatch occupies the centre-right 55% of the viewport at ~70vh, lit by one cool key from upper-left and one champagne rim from lower-right, casting a soft contact shadow onto an implied floor. The headline "PRECISION, SCULPTED IN TIME." is set in Barlow Condensed uppercase at clamp(3rem, 9vw, 8.25rem), stacked in three flush-left lines in the lower-left quadrant, each line masked and rising on entrance; the subtitle sits beneath at 18px in titanium grey with a 1px gold rule above it; the two buttons form a hairline-bordered pair — "EXPLORE THE WATCH" filled champagne-gold with black text, "DISCOVER THE CRAFT" ghost with a silver hairline — pinned under the subtitle. A vertical control rail on the right edge, a 12px animated scroll indicator with a sweeping gold needle at bottom-centre, and a faint concentric bezel ring drawn behind the watch as the only decoration. The watch is the dominant element; type and controls never overlap it at 1280px, and at 375px the watch sits above a bottom-anchored text block.

Signature moves:

• A right-edge vertical instrument rail: FRONT / SIDE / BACK camera presets, a circular zoom rocker, and a two-position COOL SILVER ↔ WARM GOLD lighting switch that visibly recolours the 3D key light and the page's ambient glow.
• Hotspot markers as gold needle-rings that sit on the live 3D dial, bezel, case, and bracelet; hovering one sweeps a thin arc and opens a ruled spec row (e.g. "DIAL — engraved brass, hand-finished") while the camera eases to that part.
• The watch stays pinned in a sticky 3D stage across three scroll sections while the camera dollies from full watch to dial macro to bracelet-link macro, with the background light warming from #0B0B0C to #12100C as it goes.
• Oversized condensed headline stacked in three flush-left lines, each line revealed by a mask wipe with needle-sweep easing, sitting against the black void rather than centred above the product.
• Collection cards as dark instrument plates: tabular spec rows separated by hairlines, a live miniature rotating 3D watch on hover, and a champagne-gold "DISCOVER TIMEPIECE" rule-button that fills on hover; concept models carry a visible "CONCEPT" chip in titanium grey.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the single large 3D mechanical wristwatch centred on the black studio void, lit by one cool key from upper-left and one champagne rim from lower-right, with a soft contact shadow on an implied floor.
• Input → transformation → outcome thesis: on load, the key light ramps up from black over 1.2s and the watch fades into the lit void; the headline lines rise line-by-line from behind masks with needle-sweep easing; on scroll, the watch slowly rotates, the camera dollies toward the dial, macro details of the case and bracelet appear, text reveals smoothly, and the background light warms from #0B0B0C to #12100C; on drag or touch, the watch rotates and idle auto-rotation decays to zero, resuming after 2.5s; the lighting toggle recolours the key light and ambient glow; the outcome is a cinematic, disciplined luxury instrument experience.
• Motion vocabulary: 1.2s black-to-lit fade; line-by-line mask reveals with custom cubic-bezier(0.16, 1, 0.3, 1) needle-sweep easing; idle auto-rotation at 0.15 rad/s decaying to zero on drag and resuming after 2.5s; scroll-linked ScrollTrigger driving watch rotation, camera dolly, and background-light colour shift; counting tabular numerals for specs.
• Composed first frame: black void; the watch centred-right at ~70vh, key light at low intensity; the headline stacked flush-left in the lower-left quadrant, masked; the subtitle and hairline-ruled button pair beneath; the right-edge instrument rail; the 12px scroll indicator with a gold needle at bottom-centre; a faint concentric bezel ring behind the watch.
• Reduced-motion state: no auto-rotation, no scroll scrub, static lit watch, all reveals instant, marquee-free; manual drag, zoom, camera presets, lighting, and hotspots remain available.

9. Non-Functional Requirements

• NFR-1 — Performance (explicit): 3D rendering, textures, and loading must be optimized; scrolling must stay smooth and avoid excessive animations that reduce performance. Rationale: the brief explicitly requires optimized rendering and smooth scrolling.
• NFR-2 — Responsive design (explicit): layouts must work on desktop, tablet, and mobile. Rationale: the brief explicitly requires responsive layouts.
• NFR-3 — Accessibility (explicit): controls must be accessible and reduced-motion support must be provided. Rationale: the brief explicitly requires accessible controls and reduced-motion support.
• NFR-4 — Graceful degradation (explicit): devices without WebGL support must receive a graceful fallback. Rationale: the brief explicitly requires a graceful fallback.
• NFR-5 — Maintainability (explicit): the codebase must use clean, reusable components and maintainable code. Rationale: the brief explicitly requires maintainable code.
• NFR-6 — Content integrity (explicit): verified product information must come from the official website; fictional concept models must be clearly labeled; prices, stock availability, email addresses, and phone numbers must not be invented; unsupported claims about the brand's actual manufacturing processes must be avoided. Rationale: the brief explicitly requires these constraints.
• NFR-7 — Readable text and controls (explicit): headlines, wordmarks, labels, numbers, cards' text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. With reduced motion, a usable static arrangement must be provided. Rationale: the user design constraints explicitly require readable text and controls to stay whole at every viewport.

10. Tech Stack

• Frontend: React with TypeScript.
• Styling: Tailwind CSS (if supported).
• 3D: Three.js and React Three Fiber, with Drei if compatible.
• Animation: GSAP (ScrollTrigger) or Framer Motion.
• Backend: shared FastAPI process for application APIs and domain modules.
• Database: MariaDB for application-owned persistent data.
• Infrastructure: Docker / docker-compose for the provisioned services (backend, database, frontend).

11. Assumptions and Constraints

Assumptions

• The verified official contact page is reachable at the official Beck Watch Co. site and is the correct destination for the CONTACT US button.
• The verified model names and specifications available from the official reference are limited to those observed (e.g., Ordine 002 Raw Steel, Bearing Cobalt); additional models may be presented only as clearly labeled concepts.
• The 3D watch is constructed from individual Three.js geometries when no external 3D model is available.
• The site is anonymous and public; no accounts, cart, checkout, or currency selector are in scope.

Constraints

• Do not create just a static design or a generic template; the site must be fully functional with real interactive 3D elements and working buttons.
• Do not substitute a static image for the 3D watch while claiming the object is fully interactive.
• Avoid unsupported claims about the brand's actual manufacturing processes.
• Use verified product information from the official website; clearly label fictional concept models as concepts rather than actual products.
• Do not invent prices or stock availability.
• Do not invent email addresses or phone numbers; link the contact button to the verified official contact page.
• Keep scrolling smooth and avoid excessive animations that reduce performance.
• The design must look premium rather than like a generic AI-generated website.

12. Glossary

• Beck Watch Co. — The independent watchmaking atelier led by founder and watchmaker Carlos Arroyo in Texas, USA.
• Carlos Arroyo — Founder & Watchmaker; designs, engraves, finishes, and assembles each watch personally.
• Ordine 002 Raw Steel — A verified model name observed on the official site (dial).
• Bearing Cobalt — A verified model name observed on the official site (wrist detail).
• Concept model — A fictional model presented in the collection that must be clearly labeled as a concept rather than an actual product.
• Hotspot — An interactive marker on the 3D watch (dial, bezel, case, bracelet) that reveals a spec row and eases the camera to that part.
• Instrument rail — The right-edge vertical control rail with FRONT / SIDE / BACK camera presets, zoom rocker, and COOL SILVER ↔ WARM GOLD lighting switch.
• Sticky 3D stage — The pinned 3D watch stage that stays in place while text panels scroll past it.
• Needle-sweep easing — The custom cubic-bezier(0.16, 1, 0.3, 1) easing used for reveals.
• PBR — Physically based rendering; metallic materials with realistic roughness and metalness.
• WebGL fallback — The graceful static presentation shown on devices without WebGL support.