System Requirements Document for luxury-watch

1. Introduction

This document specifies the requested complete, responsive website for Beck Watch Co. The product is a cinematic, product-led experience for visitors exploring the brand and its watches, centered on a genuinely interactive 3D watch and supported by craftsmanship, collection, and brand-story content.

The website must preserve the requested luxury aesthetic and provide working navigation and controls across desktop, tablet, and mobile. Brand and product facts must come from the verified official Beck Watch Co. website; unverified product names, specifications, prices, availability, contact details, and manufacturing claims must not be invented.

2. System Overview

The system is a public-facing React and TypeScript website. Its accepted human persona is the Watch collection visitor. The visitor can explore the landing experience, manipulate the 3D watch, read craftsmanship and brand-story content, browse verified collection information, and follow verified product or contact links.

The current website includes five destinations, in the supplied order: Landing, Watch, Craftsmanship, Collection, and Story. All are publicly accessible; no application account or sign-in is required. The contact call to action links to the verified official contact page rather than creating an unverified contact workflow.

The provisioned application infrastructure consists of a frontend React application, a shared backend FastAPI process for application APIs and domain modules, and a database MariaDB. The accepted website is primarily a public presentation and interactive 3D experience. The provisioned backend and database do not, by themselves, imply additional product behavior, persistent user data, authentication, or domain records.

2a. Product Interpretation and Delivery Boundary

The five supplied pages are the complete current page contract. The Landing page is the anonymous entry point; the other pages remain public. The 3D watch is a first-party interactive experience, not a static image presented as interactive. The official website owns verified product and contact destinations. The website must not imply that a product detail page, purchase flow, availability system, or contact form exists unless verified and explicitly included in the accepted scope.

The uploaded screenshot is contextual reference material for Beck Watch Co. and an interactive 3D product experience. It does not prescribe a page layout or supply additional product facts. The current scope excludes invented product models, specifications, prices, stock claims, contact details, and unsupported manufacturing claims.

2b. Source Content Inventory

The following verified observations are supplied from the authoritative official-site reference, https://beckwatchco.com/. Preserve their factual meaning when used in product content. Do not present the separately noted trademark information as website-derived content.

Brand and available pieces

• Brand: Beck Watch Co.
• Available pieces statement: “Independent watchmaking by Carlos Arroyo.”
• Brand description: 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.
• Studio statement: The studio is continuously evolving. Beck watches are made and offered individually. When no piece is shown, work is ongoing.

Philosophical statements

• Each 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.
• Proven Swiss mechanical movements are chosen for reliability and long-term serviceability.
• The case exists to frame the dial—not compete with it.
• Watches are not released according to a schedule. They are released when they are ready.
• Beck watches are made and offered individually; when no piece is shown, work is ongoing.

About and brand philosophy

• Founder: Carlos Arroyo.
• Beck is an independent watch atelier focused on craftsmanship, process, and the quiet pursuit of improvement.
• Origin story: Beck was founded not via a business plan but from curiosity. Years of working with materials, finishes, engraving, and mechanical design led to an interest in horology, not as objects of luxury but as objects of discipline.
• Watches represent a rare intersection of engineering, art, and restraint.
• Beck operates as an independent atelier; design, production, and development are not driven by volume, schedules, or marketing cycles.
• Beck pursues restraint over hype, limited production, and slow reputation building: “Order • Process • No Compromises.”

Founder details

• Name: Carlos Arroyo.
• Role: Founder & Watchmaker.
• Process: He personally designs, engraves, finishes, and assembles limited mechanical timepieces in Texas.
• Background: Self-taught craftsman with a background in mechanical work, finishing techniques, design engineering, and precision tooling.
• Production philosophy: Intentional restraint, no compromises, deeply personal and legacy-focused.

Warranty information

• Coverage period: Five-year warranty against manufacturing defects, beginning on the date of delivery.
• Covered issues: Mechanical movement; dial, hands, or internal assembly; issues resulting from improper workmanship or material failure.
• Exclusions: Normal wear and aging, including scratches or cosmetic wear to case, bracelet, and crystal; damage caused by accidents, impacts, misuse, or unauthorized modification; water damage from improper use; wear to straps, bracelets, clasps, or spring bars; loss or theft.
• Service notes: Service communication is handled directly through the studio; return shipping after warranty service is covered by the studio; responses come from the person who made the watch.

Contact and location

• Brand: Beck Watch Co.
• Descriptor: Independent Watchmaking.
• Location: Texas, USA.
• The official contact page must be verified on the official website before linking the “CONTACT US” call to action. No email address or phone number is supplied as verified content here.

Domain terminology and audience

• Terminology: Independent watchmaking; sculpted metal dials; Swiss mechanical movements; atelier; hand-engraved dials.
• Audience: Collectors and connoisseurs who value craftsmanship, intentional restraint, and thoughtful design rather than mass production or marketing hype.
• Operating principles: Watches are released when ready, not by schedule; production remains intentionally small; focus is on process, integrity, and refinement.

Brand-source boundaries

• Ownership: Founder & Watchmaker Carlos Arroyo; independent studio based in Texas, USA.
• Naming: Beck Watch Co.
• Identity: Independent, artisan, process-driven brand; not affiliated with other brands using “Beck.”
• A trademark filing attributed to Lions Legacy Holdings LLC, with first use in commerce October 17, 2025, was reported as separately confirmed via USPTO/TrademarkElite and unverified on the official website. It is not approved as website content and must not be presented as an official-site fact.

Product and contact verification limits

• No specific model name or model specification is verified in the supplied observations.
• The official contact-page URL is not specified in the supplied observations.
• Verify product names, specifications, product destinations, and the official contact destination against the official website before presenting or linking them. If a fact or destination cannot be verified, do not invent it.

2c. Page Content and Component Coverage

Landing

• Information and state: Full-screen public entry introducing Beck Watch Co. with the exact headline “PRECISION, SCULPTED IN TIME.” and subtitle “Independent watchmaking. Distinctive design. Crafted to be experienced.” Present the requested premium visual identity and an animated scroll indicator.
• Primary actions: “EXPLORE THE WATCH” navigates to Watch. “DISCOVER THE CRAFT” navigates to Craftsmanship.
• Supporting components: Discreet responsive navigation; cinematic entrance; central 3D watch presentation; clear negative space so copy does not cover the watch or controls.
• Entities: Beck Watch Co.; the interactive watch.
• States: Show a premium loading progress indicator while the 3D experience loads. If WebGL is unavailable, show a graceful non-WebGL fallback that does not claim to be interactive. Provide a usable static arrangement for reduced-motion preferences. Loading, fallback, and reduced-motion states must retain readable content and usable navigation.

Watch

• Information and state: A focused, public interactive 3D watch experience. Construct the watch from individual Three.js geometries if no external model is available. Include a round metallic case and bezel, sculpted mechanical-style dial, hour markers and hands, reflective glass, crown and side buttons, and metallic bracelet with individual links.
• Primary actions: Drag or touch to rotate; zoom in and out; select front, side, or back views; select cool-silver or warm-gold lighting; activate dial, bezel, case, and bracelet hotspots.
• Supporting components: Smooth camera movement; accessible view, zoom, and lighting controls; a separate readable hotspot information panel that does not obscure the watch or controls.
• Entities: Geometrically constructed watch; view preset; lighting selection; hotspot and its verified note.
• States: Idle rotation runs smoothly and pauses during interaction. Camera transitions ease between views. Hotspot selection reveals concise, verified material/process notes. Loading, WebGL fallback, and reduced-motion states remain usable. Do not invent material or process claims for hotspot copy.

Craftsmanship

• Information and state: The requested section headline “EVERY SURFACE HAS A STORY.” and three visual storytelling panels: Sculpted Dial Architecture, Refined Metal Finishing, and Independent Watchmaking.
• Primary actions: Read and navigate among the three storytelling panels.
• Supporting components: Close-up visuals, elegant text reveals, subtle parallax, large editorial numerals, and thin ruled dividers.
• Entities: The three named craftsmanship panels and only verified brand facts used to explain them.
• States: Text and imagery reveal smoothly during ordinary motion; reduced-motion mode presents a static, readable arrangement. Do not make unsupported claims about actual manufacturing processes.

Collection

• Information and state: A restrained gallery of verified official-site watch models and available specifications. Each card contains a watch image or interactive 3D preview, verified model name and available specifications, and a “DISCOVER TIMEPIECE” button.
• Primary actions: Browse the verified pieces and follow a timepiece action only to a verified product destination.
• Supporting components: Elegant cards, smooth transitions, and restrained metallic highlights.
• Entities: Verified official models and their verified specifications and destinations only.
• States: If no piece is shown on the official site, communicate only the verified studio statement that work is ongoing. Do not invent a model, price, stock status, or availability. If no product destination can be verified, do not create a misleading link or claim.

Story

• Information and state: Cinematic editorial content about independent design, attention to detail, and the relationship between engineering and artistry, grounded in the verified brand and founder facts in the Source Content Inventory.
• Primary actions: Read the brand story and navigate to other accepted destinations.
• Supporting components: Large typography, alternating image-and-text layouts, dark backgrounds, and refined scroll transitions.
• Entities: Beck Watch Co.; Carlos Arroyo; verified brand philosophy and origin facts.
• States: Text remains readable and transitions remain restrained; reduced-motion mode provides a static usable layout. Do not add unsupported claims.

3. Functional Requirements

Each requirement below is a distinct accepted capability. Provenance labels identify source-stated behavior as explicit and indispensable mechanics inferred to make an accepted journey usable as required_inference.

1. As a Watch collection visitor, I should be able to enter the public Landing page and understand the Beck Watch Co. experience.
   Provenance: explicit
   Lifecycle and acceptance: On visiting the site, the visitor sees the full-screen hero, exact headline “PRECISION, SCULPTED IN TIME.”, exact subtitle “Independent watchmaking. Distinctive design. Crafted to be experienced.”, animated scroll indicator, and the two requested calls to action. The page loads responsively and provides a premium progress indicator while the watch loads. If 3D loading fails or WebGL is unavailable, the page presents a graceful fallback without claiming the fallback is interactive. The visitor can continue to Watch or Craftsmanship through the corresponding calls to action and navigation.

2. As a Watch collection visitor, I should be able to explore and manipulate a genuine 3D watch.
   Provenance: explicit
   Lifecycle and acceptance: On Watch, the visitor can drag with a pointer or touch to rotate the geometrically constructed watch; zoom in and out; choose front, side, and back views; and use smooth camera movement. The watch includes the specified case, bezel, dial, markers, hands, glass, crown, side buttons, and individual bracelet links, with physically based metallic materials and studio lighting. Idle rotation resumes when interaction ends and pauses during interaction. If rendering is unavailable, the fallback is clearly identified and does not claim to provide 3D interaction. The visitor can continue to a hotspot, another view, or another page.

3. As a Watch collection visitor, I should be able to inspect the dial, bezel, case, and bracelet through interactive hotspots.
   Provenance: explicit
   Lifecycle and acceptance: On Watch, selecting each of the four hotspots—dial, bezel, case, and bracelet—shows a concise, readable note in a separate panel. Notes use only verified material or process facts; where no relevant fact is verified, the interface does not invent one. The panel does not cover the watch or controls. The visitor can select another hotspot or continue exploring the watch.

4. As a Watch collection visitor, I should be able to change the watch lighting between cool silver and warm gold.
   Provenance: explicit
   Lifecycle and acceptance: On Watch, selecting either lighting control visibly changes the scene lighting to the corresponding cool-silver or warm-gold treatment and identifies the selected state. Controls remain accessible and usable on mobile. The visitor can switch lighting again or continue to another view or page.

5. As a Watch collection visitor, I should be able to experience a cinematic, performance-conscious scroll journey.
   Provenance: explicit
   Lifecycle and acceptance: As the visitor scrolls through the experience, the watch slowly rotates and moves between designed sections, the camera approaches dial details, macro details and text appear, and background lighting transitions subtly. Scrolling remains smooth and animation is restrained to avoid excessive performance cost. Reduced-motion preferences produce a usable static arrangement. The visitor can continue scrolling through the accepted pages.

6. As a Watch collection visitor, I should be able to explore the three requested craftsmanship stories.
   Provenance: explicit
   Lifecycle and acceptance: On Craftsmanship, the visitor can read Sculpted Dial Architecture, Refined Metal Finishing, and Independent Watchmaking under “EVERY SURFACE HAS A STORY.” Close-up visuals, text reveals, and subtle parallax support the stories. Content does not assert unverified manufacturing processes. The visitor can continue to Collection or Story.

7. As a Watch collection visitor, I should be able to browse verified watch collection information.
   Provenance: explicit
   Lifecycle and acceptance: On Collection, each presented actual product has a verified official-site model name, available verified specifications, an image or interactive 3D preview, and a “DISCOVER TIMEPIECE” action. The action leads only to a verified product destination. No prices or stock availability are invented. If no piece is shown, the page may state that the studio is continuously evolving and work is ongoing when no piece is shown. If product facts or destinations cannot be verified, they are omitted rather than fabricated. The visitor can continue to another page or a verified product destination.

8. As a Watch collection visitor, I should be able to read the requested brand story.
   Provenance: explicit
   Lifecycle and acceptance: On Story, the visitor reads about independent design, attention to detail, and engineering and artistry through verified brand and founder information. The page uses large typography, alternating image-and-text layouts, dark backgrounds, and refined scroll transitions. Unsupported claims are excluded. The visitor can continue to Collection, Craftsmanship, or Watch.

9. As a Watch collection visitor, I should be able to follow the contact call to action to the official contact page.
   Provenance: explicit; destination verification is required_inference
   Lifecycle and acceptance: The contact section presents the exact headline “DISCOVER YOUR NEXT TIMEPIECE.”, subtitle “Explore the collection or contact the team to learn more about availability.”, and “CONTACT US” button. The button links to the verified official contact page. No email address or phone number is invented. If the official destination cannot be verified, the site must not substitute an invented destination. The visitor can return to the site using normal browser navigation.

10. As a Watch collection visitor, I should be able to use the website across desktop, tablet, and mobile.
    Provenance: explicit
    Lifecycle and acceptance: Layouts, navigation, calls to action, 3D controls, and touch interactions adapt to desktop, tablet, and mobile. At narrow widths, the watch, headline, labels, buttons, and controls remain fully visible and usable without clipping or overlap. The visitor can continue the same accepted journeys on each supported viewport.

11. As a Watch collection visitor, I should be able to use accessible controls and a reduced-motion presentation.
    Provenance: explicit
    Lifecycle and acceptance: Watch controls are accessible, and reduced-motion preferences provide a usable static arrangement rather than relying on animation to communicate information or enable navigation. If a control or rendering path fails, the visitor retains readable content and usable navigation. The visitor can continue without motion-dependent interaction.

12. As a Watch collection visitor, I should be able to navigate among the five accepted destinations using working links and calls to action.
    Provenance: explicit
    Lifecycle and acceptance: Navigation and calls to action lead to their intended accepted destinations: Landing, Watch, Craftsmanship, Collection, and Story. The hero’s “EXPLORE THE WATCH” and “DISCOVER THE CRAFT” actions lead to Watch and Craftsmanship respectively. Broken or unverified product/contact destinations are not presented as working links. The visitor can continue browsing or return to Landing.

13. As a Watch collection visitor, I should be able to see verified product and brand information without fabricated claims.
    Provenance: explicit; verification mechanics are required_inference
    Lifecycle and acceptance: Before product names, specifications, product destinations, or the official contact destination are presented, they are verified against https://beckwatchco.com/. Fictional concept models, if used, are clearly labeled as concepts and are not represented as actual products. No prices, stock availability, contact details, or unsupported manufacturing claims are invented. When verification fails, the unsupported fact or link is omitted and the visitor can continue with the remaining verified content.

14. As a Watch collection visitor, I should be able to use the watch experience when motion or WebGL is unavailable.
    Provenance: required_inference
    Lifecycle and acceptance: When reduced motion is requested, the watch and surrounding content remain in a usable static arrangement. When WebGL is unavailable or the 3D scene fails, the site presents a graceful fallback, preserves navigation and readable content, and does not claim that a static image is a fully interactive watch. The visitor can continue to the accepted pages.

15. As a Watch collection visitor, I should be able to use a site whose main interactions have been checked for basic operation.
    Provenance: explicit
    Lifecycle and acceptance: Before release, run the website, fix compilation and runtime errors, and verify watch rotation, zoom, view presets, lighting controls, hotspots, navigation links, mobile layout, and touch interactions. Broken assets are fixed. If a check reveals a failure, correct it and repeat the relevant check before release.

4. User Personas

Watch collection visitor

• Provenance: required_inference, as supplied by the closed Planning Scope persona catalog.
• Product context: A public visitor exploring Beck Watch Co., its independent watchmaking, and its watches. The verified audience includes collectors and connoisseurs who value craftsmanship, intentional restraint, and thoughtful design rather than mass production or marketing hype.
• Primary goal: Understand the watch and brand through a premium, tactile, interactive experience and find verified product or contact information.
• Accepted responsibilities: Explore the Landing page; manipulate the 3D watch and its views, lighting, and hotspots; read the three craftsmanship stories; browse verified collection information; read the brand story; and follow verified product or contact links.
• Relevant inputs and decisions: Chooses a destination, watch view, zoom level, lighting treatment, and hotspot; decides whether to follow a verified product or contact link.
• Interactions with other accepted participants: None. The accepted website journeys are visitor-facing and do not require another human participant to respond.
• Observable success: The visitor can explore the watch, understand verified brand and collection content, and reach only verified external product or contact destinations without encountering invented claims.

5. Core User Flows

1. Enter and explore the Landing page

1. The visitor opens the public site at Landing.
2. The page presents the exact hero headline and subtitle, the central watch experience, the animated scroll indicator, and the two calls to action.
3. While the 3D watch loads, the visitor sees the premium progress indicator. If WebGL is unavailable or loading fails, the visitor sees a clearly non-interactive fallback and retains usable navigation.
4. The visitor selects EXPLORE THE WATCH to open Watch, or DISCOVER THE CRAFT to open Craftsmanship.
5. The visitor can continue through the site using the responsive navigation.

2. Inspect and control the 3D watch

1. The visitor opens Watch from Landing or navigation.
2. The visitor drags with a pointer or touch to rotate the watch; idle rotation pauses during interaction.
3. The visitor uses zoom controls to move closer to or farther from the watch.
4. The visitor selects front, side, or back to change the viewing angle; the camera moves smoothly to the selected view.
5. The visitor selects cool-silver or warm-gold lighting and observes the corresponding lighting change.
6. The visitor selects dial, bezel, case, or bracelet. A separate readable panel shows only verified material or process notes and does not obscure the watch or controls.
7. The visitor can select another control, continue exploring, or navigate to another page.
8. If WebGL is unavailable, the visitor receives a graceful fallback and can continue to other pages. Under reduced motion, the visitor receives a usable static arrangement.

3. Read the craftsmanship stories

1. The visitor opens Craftsmanship from the hero’s DISCOVER THE CRAFT action or navigation.
2. The page presents “EVERY SURFACE HAS A STORY.”
3. The visitor reads Sculpted Dial Architecture, Refined Metal Finishing, and Independent Watchmaking, supported by close-up visuals, text reveals, subtle parallax, editorial numerals, and ruled dividers.
4. The visitor continues to Collection, Story, or Watch using navigation.
5. Under reduced motion, the same content remains readable in a static layout. Unsupported manufacturing claims are not presented.

4. Browse the collection

1. The visitor opens Collection from navigation or another accepted page.
2. The page presents verified official-site models and available specifications, with an image or interactive 3D preview and a “DISCOVER TIMEPIECE” action for each presented product.
3. The visitor selects a timepiece action only when its official product destination has been verified.
4. If no piece is shown, the page may state that the studio is continuously evolving and work is ongoing when no piece is shown. It does not invent a model, price, stock status, or availability.
5. If a product fact or destination cannot be verified, it is omitted; the visitor can continue browsing or navigate to another accepted page.

5. Read the brand story

1. The visitor opens Story from navigation.
2. The visitor reads the verified story of Beck Watch Co., including independent design, attention to detail, and the relationship between engineering and artistry.
3. The page uses alternating image-and-text layouts, large typography, dark backgrounds, and refined scroll transitions.
4. The visitor continues to Collection, Craftsmanship, or Watch.
5. Under reduced motion, the story remains readable without animation.

6. Follow the contact call to action

1. The visitor reaches the contact section from the site’s accepted presentation.
2. The section displays “DISCOVER YOUR NEXT TIMEPIECE.”, the specified subtitle, and “CONTACT US.”
3. The visitor selects CONTACT US.
4. The browser opens the verified official contact page. No invented email address or phone number is shown.
5. If the destination cannot be verified, the site does not substitute an invented link; the visitor can continue browsing the site.

7. Use the site on mobile or with reduced motion

1. The visitor opens the site on a mobile device or has reduced motion enabled.
2. The layout adapts so headlines, labels, buttons, watch, and controls remain fully visible and usable.
3. The visitor uses touch to rotate the watch and uses accessible controls for zoom, views, lighting, and hotspots.
4. With reduced motion enabled, the site presents a static usable arrangement and does not require animation to access content or controls.
5. If WebGL is unavailable, the visitor sees the graceful fallback and can continue using navigation and readable content.

6. Visuals Colors and Theme

The authoritative creative direction is “A precision instrument, staged like a watchmaker’s portrait.” Its muse is MARQ by Garmin, used as a luxury-instrument aesthetic reference, not as a source of Beck Watch Co. product facts or capabilities. The visual treatment should feel tactile, cinematic, and quietly assured, with the watch as the subject rather than a generic storefront.

• Palette: Near-black background #090A0B; charcoal surface #17191B; primary text #F2F0EA; silver #AEB5B8; champagne accent #C5A875; muted text #85898A. Use near-black as the dominant field, charcoal for recessed controls and panels, silver for the watch and rules, and champagne sparingly for labels, selected states, and light accents. Body text must remain high contrast; do not use low-contrast gold for small text on black.
• Typography: Cormorant Garamond for editorial headings; Barlow for body text, controls, and captions. Use a responsive scale: display headings 48–104px (48px mobile), section headings 36–64px, body 16–18px, and instrument labels 11–12px with tracked uppercase. Use clamp() and wrapping to prevent clipping.
• Shape and materials: Machined circles, narrow ruled divisions, fine bezel-like rings, restrained chamfers, metallic highlights, and shadows that describe form. Avoid soft dashboard tiles and ornament without a functional cue.
• Layout: Full-viewport, product-first hero with the watch dominant and copy in clear negative space. Follow with spacious asymmetric storytelling and macro-detail sections, then a restrained collection gallery and direct contact close. Navigation is discreet, responsive, and usable at mobile widths.
• Imagery: Dramatically lit close-up watchmaking imagery with graphite shadows, brushed-silver reflections, glass glints, and restrained warm-metal highlights. Use the real-time geometrical watch as the hero subject. Present verified brand pieces only as actual products; label any illustrative concept clearly.
• Responsive readability: At 375px, 768px, and 1280px, readable text and controls remain whole, within their containers, and unobscured. Imagery and decoration may crop or overlap only where they do not cover readable text or controls. Scrollable content must allow each item to become fully readable.

7. Signature Design Concept

Stage the Landing page as a near-black watchmaker’s portrait. A large, geometrically constructed 3D watch occupies the central visual field, lit by a cool silver key light and a narrow champagne rim. Place the oversized editorial headline in a clear negative-space zone above or beside the watch, with the subtitle and two text-led calls to action below it. Keep all copy away from the dial and controls.

A fine vertical scroll cue and compact accessible view, zoom, and lighting controls complete the instrument-like composition. The watch remains the visual subject; the design uses only accepted watch content and controls. At 375px, scale the watch and headline to fit, stack the calls to action, and keep every control visible. Provide the specified graceful non-WebGL fallback.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The geometrically constructed mechanical watch, presented as a precision instrument in a dark studio.
• Input → transformation → outcome thesis: The visitor drags or touches the watch, selects a view or lighting treatment, or scrolls; the watch rotates, the camera eases between views or approaches the dial, and the lighting shifts subtly; the visitor sees the watch from the chosen angle or lighting state and can continue exploring.
• Motion vocabulary: Slow idle turn; pause during direct interaction; purposeful camera easing; restrained scroll-linked approach; subtle cool-silver-to-champagne stage transition; precise control feedback; smooth text reveals.
• Composed first frame: Near-black studio stage, central watch with cool silver key light and narrow champagne rim, headline and subtitle in clear negative space, two distinct text-led calls to action, and a fine vertical scroll cue. Controls remain visible and do not overlap copy or watch details.
• Reduced-motion state: Present a static, usable watch and page arrangement. Keep navigation, controls, and content accessible without motion; do not rely on animation to communicate state.

9. Non-Functional Requirements

1. Responsive presentation — explicit: Support desktop, tablet, and mobile layouts. At 375px, 768px, and 1280px, readable text and controls must remain fully visible, within their containers, and unobscured.
2. 3D rendering and loading — explicit: Optimize 3D rendering, textures, and loading. Provide a premium progress indicator while the watch loads.
3. Graceful rendering fallback — explicit / required_inference: Provide a graceful fallback for devices without WebGL or when the 3D scene fails. Do not claim a static image is fully interactive.
4. Accessibility and reduced motion — explicit: Provide accessible controls and a usable reduced-motion presentation.
5. Performance-conscious motion — explicit: Keep scrolling smooth and avoid excessive animations that reduce performance. Pause idle rotation during direct interaction.
6. Maintainability — explicit: Use clean, reusable components and maintainable code.
7. Verification — explicit: Run the website, fix compilation and runtime errors, verify the main watch interactions, navigation, mobile layout, and touch interactions, and fix broken assets.
8. Content integrity — explicit: Use verified official-site product information and contact destinations. Do not invent prices, stock availability, contact details, or manufacturing claims.

10. Tech Stack

• Frontend: React and TypeScript, as explicitly requested.
• 3D: Three.js and React Three Fiber for the watch scene; use Drei if compatible with the project. Construct the watch from individual Three.js geometries if no external model is available.
• Animation: GSAP with ScrollTrigger or an equivalent compatible animation library. Use it for restrained cinematic scroll-linked motion and text reveals; honor reduced-motion preferences.
• Styling: Tailwind CSS if supported by the project; preserve the specified palette, typography, and responsive layout regardless of styling implementation.
• Provisioned backend: Shared FastAPI backend for application APIs and domain modules. Reuse this process for any future accepted API needs; the current accepted public presentation does not require adding a separate service.
• Provisioned database: MariaDB. Its presence does not establish a need for application-owned persistent product data, user accounts, or additional domain behavior.
• Deployment inventory: The provisioned services are frontend, backend, and database. Do not add a separate process or service without a workflow-based need.

11. Assumptions and Constraints

• The five supplied pages—Landing, Watch, Craftsmanship, Collection, and Story—are the complete ordered current page contract. Their access is public.
• The accepted active-human persona catalog contains only Watch collection visitor.
• The official website is authoritative for brand and product facts. Verify product names, specifications, product destinations, and the official contact destination before presenting or linking them.
• No specific product model, product specification, product destination, or contact-page URL is verified in the supplied observations. Do not invent these facts. Omit unverified product links or contact destinations rather than substituting fabricated ones.
• The supplied official-site observations include warranty facts, but the accepted page contract does not include a warranty destination or a warranty-specific user journey. Do not create a new page or capability solely to display them.
• The screenshot is contextual reference material, not an exact-copy layout instruction and not a source of additional verified product facts.
• The requested 3D watch may be constructed from Three.js geometries when no external model is available. It must not be represented as a fully interactive 3D object if it is only a static image.
• No account, authentication, purchase, inventory, or contact-form behavior is established by the accepted scope.
• The provisioned FastAPI backend and MariaDB are infrastructure facts, not independent product requirements.

12. Glossary

• Atelier: An independent watchmaking studio; Beck Watch Co. is described as an independent watch atelier.
• Hotspot: An interactive watch component selector for the dial, bezel, case, or bracelet that reveals a separate readable note.
• Reduced motion: A presentation that respects the visitor’s motion preference by providing a usable static arrangement.
• WebGL fallback: A graceful non-WebGL presentation that preserves readable content and navigation without claiming to provide interactive 3D.
• Verified product information: Product names, specifications, and destinations confirmed against the official Beck Watch Co. website.