System Requirements Document for steel-luxury

1. Introduction

steel-luxury is the official premium web experience for Beck Watch Co., an independent Texas atelier founded in 2025 by watchmaker Carlos Arroyo. The product is a fully functional, responsive, cinematic website whose centerpiece is a genuine, real-time interactive 3D mechanical wristwatch — not a static image or a generic template. Visitors experience the watch through drag/touch rotation, zoom, front/side/back camera views, interactive hotspots, and a cool-silver / warm-gold lighting toggle, then move through a scroll-driven cinematic narrative into craftsmanship storytelling, a verified timepiece collection, an editorial brand story, and a contact call to action that leads to the verified official Beck Watch Co. contact page.

The audience is collectors and individuals who value thoughtful, process-driven, independent watchmaking rather than trends or scale — people who buy process, not marketing. The emotional register is reverent, tactile, and quietly expensive: drama comes from studio light and macro metal, never from hype.

The site is anonymous and public. It presents verified brand and product facts from the official Beck Watch Co. website, clearly labels any fictional concept models as concepts, and never invents prices, stock availability, email addresses, or phone numbers.

2. System Overview

steel-luxury is delivered as a three-service application:

• frontend — a React + TypeScript single-page application (Vite build) that renders every page, the React Three Fiber 3D scene, GSAP ScrollTrigger cinematic sequences, and all interactive controls.
• backend — a shared FastAPI process that serves the application's read-only content APIs (verified collection data, craftsmanship panel copy, brand story copy, site navigation metadata) and hosts any domain modules the frontend needs. It is the single backend for all feature APIs.
• database — MariaDB holding the application-owned content records the backend serves (timepiece records with verified names and specifications, concept-model flags, craftsmanship panel records, brand story records, navigation entries).

All three services are provisioned and runnable via docker-compose. The frontend is the only user-facing surface; the backend and database are supporting infrastructure and add no product behavior of their own.

Actors. Two accepted human personas — Luxury watch visitor and Prospective timepiece buyer — both anonymous, with no account, login, or identity continuity. The verified official Beck Watch Co. contact page is an external destination owned by the brand, not by this application.

Accepted behavior. A cinematic full-screen hero with the genuine 3D watch; the complete interactive 3D watch control set; a scroll-driven cinematic sequence; a craftsmanship section with three storytelling panels; a verified collection gallery with DISCOVER TIMEPIECE actions; an editorial brand story; and a contact section whose CONTACT US button links to the verified official contact page. A premium loading screen with a progress indicator gates the 3D experience, a graceful fallback covers devices without WebGL, and reduced-motion support provides a static, fully usable arrangement.

Narrow exclusions. No e-commerce, cart, checkout, pricing, or stock display. No invented contact details. No unsupported claims about Beck's actual manufacturing processes. No user accounts or authentication.

Removed from scope

• E-commerce purchase flow (cart, checkout, payment)
• Price display and stock-availability display
• Invented email addresses and phone numbers
• User accounts, login, and authentication
• Unsupported claims about the brand's actual manufacturing processes

2a. Product Interpretation and Delivery Boundary

steel-luxury is a public, anonymous brand experience. Every page is reachable without an account, and the application establishes no identity, session, or personal state. The interactive 3D watch, camera controls, lighting toggle, hotspots, and scroll sequences all run client-side in the visitor's browser; the backend supplies only the verified content the pages display, and the database stores that content.

The one outbound commitment in the product — learning more about availability — is deliberately owned by the brand: the CONTACT US button navigates to the verified official Beck Watch Co. contact page. steel-luxury does not host a contact form, collect visitor details, or display any contact address of its own.

Everything described in this document is current scope. No future-horizon features are accepted.

2b. Source Content Inventory

Verified facts from the official Beck Watch Co. reference (https://beckwatchco.com/), preserved item by item.

Brand identity

• Name: Beck Watch Co.
• Ownership: independent atelier; founder Carlos Arroyo.
• Founded: 2025.
• Location: Texas, USA.
• Positioning: independent watchmaking with small-number production, not driven by trends or marketing cycles.

Navigation (official site menu items)

• Home
• Current Work
• Founder‑Carlos Arroyo
• About Us
• Contact
• Foundation work
• Warranty

Section copy

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 line: "Independent watchmaking by Carlos Arroyo."

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."

Restraint — "Proven Swiss mechanical movements are chosen for reliability and long‑term serviceability. The case exists to frame the dial — not compete with it."

Pace — "One watch at a time. 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."

Warranty — "Every piece is covered by a five‑year warranty against manufacturing defects, beginning on the date of delivery. Should an issue arise due to a defect in materials or workmanship, the watch will be repaired or corrected at no cost. This covers movement, dial, hands, or internal assembly. Not covered: normal wear, damage from misuse, water damage, straps/bracelets/clasps, or loss/theft. Service communication is handled directly through the studio; return shipping after warranty service is covered by the studio."

About Us — "Beck Watch Co. was started by Carlos Arroyo, a self‑taught craftsman with background spanning mechanical work, finishing techniques, design engineering, and precision tooling. The brand emphasizes craftsmanship, process, the quiet pursuit of improvement, and independent watchmaking with small‑number production, not driven by trends or marketing cycles."

Founder — Carlos Arroyo; role "Founder & Watchmaker – Beck Watch Co."; location Texas, USA; founded 2025; philosophy: self‑taught, designs, engraves, finishes, and assembles in extremely limited numbers; focus on order, process, no compromises; operates from a private workshop; watches reflect patience, discipline, resilience, respect for craft.

Trademark — Status: "Response after non‑final action – entered (as of September 10, 2026)"; owner: Lions Legacy Holdings LLC, Fort Worth, TX; class: USPTO Class 014 – jewelry products; watches; first use anywhere: September 11, 2025; first use in commerce: October 17, 2025.

Contact information

• Location: Texas, USA.
• Method: "Contact us" (link/menu item) leading to the official contact page.

Domain terminology

• visible authorship
• engraved and finished by hand
• independent watchmaking
• order • process • no compromises
• small numbers
• studio
• five‑year warranty
• mechanical movement
• dial architecture

Audience and principles

• Audience: collectors and individuals who value thoughtful, process‑driven, independent watchmaking rather than trends or scale.
• Principles: intentional restraint; quality over volume; honesty through making; no scheduled releases — only watches ready to ship.

Verified model names and specifications. The official reference crawl exposes no individual model names or per-model specifications. The Collection therefore presents only what is verified (the brand-level facts above, including the Swiss mechanical movement statement and the hand-engraved brass dial process) and any additional timepiece shown must be explicitly labeled a concept, never presented as an actual product.

2c. Page Content and Component Coverage

Landing

Purpose and information. The anonymous public entry surface. Full-viewport cinematic hero on a deep black stage (#0A0A0B) with the genuine 3D watch as the dominant object and the headline set in the outer margin.

Information and state

• Headline: "PRECISION, SCULPTED IN TIME." — flush-left, Bodoni Moda uppercase, stacked on three lines with "TIME." alone on the last line in champagne #C8A96A.
• Subtitle: "Independent watchmaking. Distinctive design. Crafted to be experienced." — Saira 17px, muted #8A8D93, beneath a 1px silver rule.
• Buttons: EXPLORE THE WATCH (solid #EDEAE4 with black text) and DISCOVER THE CRAFT (1px silver outline).
• Animated scroll indicator: vertical line with traveling dot and rotated "SCROLL" label at bottom-left.
• Fixed top bar: wordmark left, wayfinding center, CONTACT US right.
• 3D watch state: current rotation, camera view (front/side/back), zoom level, active hotspot, lighting mode (cool silver / warm gold).
• Hotspot spec panel: ruled specification rows for the selected hotspot (DIAL / BEZEL / CASE / BRACELET).
• Loading state: premium progress indicator before the 3D experience is usable.
• Fallback state: graceful non-WebGL presentation when WebGL is unavailable.

Primary actions

• Drag the watch to rotate (mouse and touch).
• Zoom in and out.
• Select front, side, or back viewing angle.
• Select a hotspot (DIAL / BEZEL / CASE / BRACELET) to dolly the camera and swap the spec panel.
• Toggle cool-silver / warm-gold lighting.
• EXPLORE THE WATCH → Collection.
• DISCOVER THE CRAFT → Craftsmanship.
• CONTACT US → verified official contact page.

Supporting actions

• Scroll through the cinematic sequence (watch rotates, camera dollies toward the dial, macro details appear, text reveals, background lighting shifts, watch moves between sections).
• Idle auto-rotation resumes 3s after the last drag.

Domain entities. Watch (3D scene object), Hotspot (dial, bezel, case, bracelet), CameraView, LightingMode, SpecRow.

Component responsibilities

• HeroStage — full-viewport composition, entrance animation, scroll indicator.
• WatchScene — R3F canvas, PBR metallic materials, studio lighting rig, reflective glass, crown and side buttons, individual bracelet links.
• WatchControls — drag/touch rotation, zoom, camera view selector, lighting toggle.
• HotspotHUD — four chips with 1px leader lines, breathing 2.4s pulse rings, spec panel.
• ScrollSequence — GSAP ScrollTrigger timeline binding scroll progress to watch rotation, camera dolly, macro reveals, text reveals, background temperature shift.
• LoadingScreen — premium progress indicator.
• WebGLFallback — static framed presentation with all content in normal flow.

States

• Loading: progress indicator visible; 3D controls disabled until ready.
• Empty: not applicable (no collection data on this page).
• Success: watch interactive; every control responds; hotspot selection updates spec panel.
• Error: WebGL unavailable → fallback; asset or runtime failure → fallback presentation with all text and CTAs intact.
• Recovery: reduced-motion preference → no scroll-scrubbed camera, no idle rotation; static framed views with all content in normal flow.

Craftsmanship

Purpose and information. Owns the "EVERY SURFACE HAS A STORY." storytelling section, reached via DISCOVER THE CRAFT.

Information and state

• Headline: "EVERY SURFACE HAS A STORY."
• Three stacked full-width panels, each a 60/40 image-and-text split alternating side:
  • Sculpted Dial Architecture — grounded in the verified The Dial copy (raw brass, engraved, painted, and finished by hand; cannot be automated or repeated exactly; each dial carries its own character).
  • Refined Metal Finishing — grounded in verified Why Beck copy (solid metal engraved, finished, and revealed by hand; changes with light; carries the evidence of its creation).
  • Independent Watchmaking — grounded in verified About Us / Founder copy (self-taught craftsman; order, process, no compromises; small-number production).
• Section index numerals 01 / 02 / 03 in Bodoni Moda.
• Macro close-up visuals of metal and hands on black; 1px silver line-art diagrams on charcoal where used.

Primary actions

• Scroll to reveal each panel: 1px silver rule draws across the viewport, macro crop slides in from the opposite edge with parallax, index numeral counts in.
• Read panel copy.

Supporting actions

• Navigate onward to Collection or Contact via the fixed top bar.

Domain entities. CraftsmanshipPanel (title, body copy, macro visual, index).

Component responsibilities

• CraftPanel — alternating 60/40 split, rule-draw reveal, parallax macro crop.
• SectionIndex — Bodoni Moda numeral counter.

States

• Loading: panel copy fetched from backend; skeleton rule placeholders.
• Empty: not applicable.
• Success: all three panels revealed with copy and visuals.
• Error: content fetch failure → panels render with verified fallback copy bundled in the frontend.
• Recovery: reduced motion → panels in normal flow, no parallax, no rule-draw scrub.

Collection

Purpose and information. Owns the premium timepiece gallery, reached via EXPLORE THE WATCH.

Information and state

• Gallery grid: 3-up at 1280px, 2-up at 768px, 1-up at 375px.
• Each card is a charcoal #16171A panel with a circular watch visual bleeding 40px above its top edge, containing:
  • Watch image or interactive 3D preview.
  • Verified model name and available specifications (Saira 14px, tabular numerals, ruled rows).
  • A "DISCOVER TIMEPIECE" button rendered as a full-width rule.
  • A visible "CONCEPT" label on any fictional concept model.
• No price and no stock availability is shown anywhere.

Primary actions

• Hover a card: metallic specular highlight raises; DISCOVER TIMEPIECE rule fills champagne left-to-right.
• Activate DISCOVER TIMEPIECE: opens the timepiece's detail presentation (image or 3D preview plus its verified specification rows).
• Navigate to Contact via the fixed top bar.

Supporting actions

• Return to Landing or Craftsmanship via the fixed top bar.

Domain entities. Timepiece (name, specifications, media, isConcept flag), SpecificationRow.

Component responsibilities

• TimepieceCard — charcoal panel, bleeding circular visual, spec rows, concept label, DISCOVER TIMEPIECE rule.
• TimepieceDetail — expanded presentation of the selected timepiece.
• CollectionGrid — responsive 3/2/1-up layout.

States

• Loading: card skeletons with charcoal panels.
• Empty: when no verified timepiece is available, the gallery shows the verified Pace statement — "When no piece is shown, work is ongoing." — with no invented products.
• Success: cards render with verified names and specifications; concept models carry the CONCEPT label.
• Error: content fetch failure → verified fallback content bundled in the frontend.
• Recovery: reduced motion → hover highlight and rule fill resolve instantly; no sweep.

Brand Story

Purpose and information. Owns the cinematic editorial story about independent design, attention to detail, and the relationship between engineering and artistry.

Information and state

• Large Bodoni Moda typography on dark backgrounds.
• Alternating image-and-text layouts.
• Verified editorial content drawn from Why Beck, Restraint, Pace, About Us, and Founder: visible authorship; the case exists to frame the dial — not compete with it; proven Swiss mechanical movements chosen for reliability and long-term serviceability; one watch at a time; order • process • no compromises; founded 2025 in Texas, USA by Carlos Arroyo.
• Refined scroll transitions between blocks.

Primary actions

• Scroll to reveal each editorial block with refined transitions.
• Read the story.

Supporting actions

• Navigate onward to Collection or Contact.

Domain entities. StoryBlock (heading, body copy, media, layout side).

Component responsibilities

• StoryBlock — alternating image/text layout with scroll reveal.
• EditorialType — large display typography treatment.

States

• Loading: text blocks with reserved layout space.
• Empty: not applicable.
• Success: all blocks revealed.
• Error: content fetch failure → verified fallback copy bundled in the frontend.
• Recovery: reduced motion → blocks in normal flow, no scroll-scrubbed transitions.

Contact section (closing block). The site closes with the contact section: headline "DISCOVER YOUR NEXT TIMEPIECE.", subtitle "Explore the collection or contact the team to learn more about availability.", and a CONTACT US button linked to the verified official Beck Watch Co. contact page. No email address or phone number is displayed.

3. Functional Requirements

FR-1 — Cinematic hero presentation (explicit) As a Luxury watch visitor I should see a full-screen cinematic hero with a 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.

• Trigger: page load completes past the loading screen.
• Observable result: hero fills the viewport; headline masks up line by line with a 30ms stagger; watch scales from 0.92 to 1 with a slow opacity fade over 1.6s; scroll indicator animates.
• Access: anonymous, no account.
• Failure/recovery: reduced-motion preference → entrance resolves instantly, indicator static.
• Continuation: visitor interacts with the watch or activates a hero button.

FR-2 — Genuine interactive 3D watch object (explicit) As a Luxury watch visitor I should see the hero watch rendered as a genuine 3D object, never a flat image presented as interactive.

• Trigger: hero renders.
• Observable result: a real-time R3F scene with a detailed wristwatch: 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. If no external 3D model is available, the watch is constructed from individual Three.js geometries.
• Access: anonymous.
• Failure/recovery: WebGL unavailable → graceful fallback (FR-15); the site never claims a static image is fully interactive.
• Continuation: visitor rotates, zooms, or selects a view.

FR-3 — Drag and touch rotation (explicit) As a Luxury watch visitor I should drag the watch to rotate it, with touch rotation on mobile.

• Trigger: pointer-down and drag on the watch (mouse or touch).
• Observable result: the watch rotates following the drag with no bouncy or springy easing.
• Access: anonymous.
• Failure/recovery: pointer cancel → rotation settles at last position.
• Continuation: release ends the drag; idle auto-rotation resumes after 3s.

FR-4 — Idle auto-rotation (explicit) As a Luxury watch visitor I should see smooth automatic rotation when idle.

• Trigger: 3 seconds elapse after the last drag.
• Observable result: the watch rotates at 0.12 rad/s.
• Access: anonymous.
• Failure/recovery: reduced-motion preference → no idle rotation.
• Continuation: any drag interrupts auto-rotation.

FR-5 — Zoom (explicit) As a Luxury watch visitor I should zoom the watch in and out.

• Trigger: zoom control activation (and pinch on touch where supported).
• Observable result: camera distance changes smoothly; the watch grows or shrinks in frame.
• Access: anonymous.
• Failure/recovery: zoom limits clamp at minimum and maximum distance.
• Continuation: visitor selects a camera view or continues scrolling.

FR-6 — Front, side, and back viewing angles (explicit) As a Luxury watch visitor I should switch between front, side, and back viewing angles with smooth camera movement.

• Trigger: activation of a view selector.
• Observable result: the camera animates smoothly to the selected angle; the active view is indicated.
• Access: anonymous.
• Failure/recovery: reduced motion → camera cuts directly to the selected angle.
• Continuation: visitor selects another view or a hotspot.

FR-7 — Interactive hotspots (explicit) As a Luxury watch visitor I should use interactive hotspots for the dial, bezel, case, and bracelet.

• Trigger: activation of a hotspot chip (DIAL / BEZEL / CASE / BRACELET).
• Observable result: the camera dollies to that part of the watch and a ruled spec panel swaps in the corner; the active chip carries the single champagne accent; inactive chips pulse with 2.4s breathing rings.
• Access: anonymous.
• Failure/recovery: selecting the active hotspot again returns to the previous view.
• Continuation: visitor selects another hotspot or resumes free rotation.

FR-8 — Lighting controls (explicit) As a Luxury watch visitor I should switch between cool silver and warm gold lighting.

• Trigger: activation of the two-stop lighting slider with champagne knob.
• Observable result: the R3F rim and fill lights retint between #DCE3EC (cool silver) and #F2D9A0 (warm gold), and the page section background shifts between #0A0A0B and #12100D; UI hexes do not change.
• Access: anonymous.
• Failure/recovery: reduced motion → lighting change applies instantly without transition.
• Continuation: visitor continues exploring.

FR-9 — Cinematic scroll sequence (explicit) As a Luxury watch visitor I should experience a premium scroll sequence 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.

• Trigger: vertical scroll on the Landing page.
• Observable result: a GSAP ScrollTrigger timeline (or equivalent compatible library) scrubs watch rotation, camera dolly, macro reveals, text reveals, and background light temperature; scrolling stays smooth with no excessive animation that reduces performance.
• Access: anonymous.
• Failure/recovery: reduced-motion preference → no scroll-scrubbed camera; static framed views with all content in normal flow.
• Continuation: visitor reaches the hero CTAs or continues into the next section.

FR-10 — Craftsmanship storytelling (explicit) As a Luxury watch visitor I should reach a craftsmanship section headlined "EVERY SURFACE HAS A STORY." with three visual storytelling panels — Sculpted Dial Architecture, Refined Metal Finishing, Independent Watchmaking — using close-up visuals, elegant text reveals, and subtle parallax effects, without unsupported claims about the brand's actual manufacturing processes.

• Trigger: activation of DISCOVER THE CRAFT, or scroll into the section.
• Observable result: each panel reveals as a 1px silver rule draws across the viewport, the macro crop slides in from the opposite edge with parallax, and the section index counts in Bodoni Moda numerals; copy stays within verified source statements.
• Access: anonymous.
• Failure/recovery: reduced motion → panels in normal flow without parallax or rule-draw scrub.
• Continuation: visitor navigates to Collection or Contact.

FR-11 — Premium collection gallery (explicit) As a Prospective timepiece buyer I should browse a premium product gallery with elegant cards and hover animations, each card containing a watch image or interactive 3D preview, verified model name and available specifications, and a "DISCOVER TIMEPIECE" button, with smooth transitions and metallic highlights.

• Trigger: activation of EXPLORE THE WATCH, or navigation to Collection.
• Observable result: cards render in a 3-up / 2-up / 1-up responsive grid; hovering raises the metallic specular highlight and wipes the DISCOVER TIMEPIECE rule champagne left-to-right.
• Access: anonymous.
• Failure/recovery: no verified timepiece available → the gallery shows the verified Pace statement "When no piece is shown, work is ongoing." and invents nothing.
• Continuation: buyer activates DISCOVER TIMEPIECE or navigates to Contact.

FR-12 — Verified product information and concept labeling (explicit) As a Prospective timepiece buyer I should see only verified product information from the official Beck Watch Co. website, with any fictional concept model clearly labeled as a concept rather than an actual product, and no invented prices or stock availability.

• Trigger: collection content renders.
• Observable result: each card shows a verified model name and available specifications, or carries a visible CONCEPT label; no price and no stock availability appears anywhere.
• Access: anonymous.
• Failure/recovery: unverified data is never substituted; the card is omitted or labeled as a concept.
• Continuation: buyer proceeds to the timepiece detail or Contact.

FR-13 — DISCOVER TIMEPIECE detail (explicit) As a Prospective timepiece buyer I should open a timepiece via its DISCOVER TIMEPIECE button and see its image or interactive 3D preview together with its verified specifications.

• Trigger: activation of DISCOVER TIMEPIECE on a card.
• Observable result: the selected timepiece's detail presentation opens with its verified specification rows; concept models retain their CONCEPT label.
• Access: anonymous.
• Failure/recovery: detail content unavailable → the card's verified summary remains visible.
• Continuation: buyer returns to the gallery or navigates to Contact.

FR-14 — Editorial brand story (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.

• Trigger: scroll into the Brand Story section.
• Observable result: alternating editorial blocks reveal with refined scroll transitions; copy stays within verified source statements.
• Access: anonymous.
• Failure/recovery: reduced motion → blocks in normal flow without scroll-scrubbed transitions.
• Continuation: visitor reaches the contact section.

FR-15 — Contact section and verified contact link (explicit) As a Luxury watch visitor I should see the contact section headlined "DISCOVER YOUR NEXT TIMEPIECE." with 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, with no invented email addresses or phone numbers.

• Trigger: scroll to the closing section, or activation of CONTACT US in the top bar.
• Observable result: the section renders with a single champagne rule; CONTACT US navigates to the verified official Beck Watch Co. contact page.
• Access: anonymous; the destination is an external page owned by the brand.
• Failure/recovery: the link target is the verified official contact page only; no fallback address is invented.
• Continuation: the visitor continues on the brand's official contact page.

FR-16 — Premium loading screen (required_inference) As a Luxury watch visitor I should see a premium loading screen with a progress indicator before the 3D experience is usable.

• Trigger: initial page load.
• Observable result: a progress indicator reflects 3D asset and scene preparation; the hero and controls become usable when loading completes.
• Access: anonymous.
• Failure/recovery: a stalled or failed load surfaces the fallback presentation rather than an indefinite block.
• Continuation: the hero entrance animation begins.

FR-17 — Graceful WebGL fallback (required_inference) As a Luxury watch visitor on a device without WebGL support I should still get a graceful, fully usable presentation.

• Trigger: WebGL context creation fails or is unavailable.
• Observable result: a static framed presentation replaces the 3D scene; all headlines, copy, navigation, and CTA buttons remain present and functional; the site does not claim the static presentation is interactive 3D.
• Access: anonymous.
• Failure/recovery: this is the recovery path for FR-2.
• Continuation: the visitor navigates to Craftsmanship, Collection, or Contact normally.

FR-18 — Reduced-motion support (required_inference) As a Luxury watch visitor with a reduced-motion preference I should get a usable static arrangement.

• Trigger: prefers-reduced-motion: reduce.
• Observable result: no scroll-scrubbed camera, no idle rotation, no marquee; static framed views with all content in normal flow; hover and lighting changes resolve instantly.
• Access: anonymous.
• Failure/recovery: this is the recovery path for FR-1, FR-4, FR-6, FR-8, FR-9, FR-10, and FR-14.
• Continuation: the visitor uses every control and reads every section normally.

FR-19 — Responsive layouts and functional navigation (explicit) As a Luxury watch visitor I should get responsive desktop, tablet, and mobile layouts with functional navigation and CTA buttons and mobile touch controls.

• Trigger: viewport at 1280px, 768px, or 375px.
• Observable result: the collection grid reflows 3-up / 2-up / 1-up; the hero type scales with clamp(); every navigation link and button works; touch rotation and pinch zoom work on mobile; headlines, labels, numbers, and controls stay entirely inside the viewport and their containers.
• Access: anonymous.
• Failure/recovery: overflow is handled by wrapping or scaling, never by cropping readable text or controls.
• Continuation: the visitor completes any journey on any device.

FR-20 — Optimized 3D rendering and loading (explicit) As a Luxury watch visitor I should get optimized 3D rendering, textures, and loading so the experience stays smooth.

• Trigger: scene render and scroll.
• Observable result: efficient geometry, texture, and material usage; smooth scrolling without excessive animation that reduces performance.
• Access: anonymous.
• Failure/recovery: performance degradation → reduced scene complexity rather than broken interaction.
• Continuation: the visitor continues exploring.

FR-21 — Clean, reusable, maintainable implementation (explicit) As the site's maintainer I should get clean, reusable components and maintainable code.

• Trigger: code review and build.
• Observable result: reusable React + TypeScript components; the site compiles and runs without compilation errors, broken assets, or runtime errors.
• Access: not applicable (engineering requirement).
• Failure/recovery: compilation or runtime errors are fixed before completion.
• Continuation: the verified quality check passes.

FR-22 — Final quality verification (explicit) As the site's maintainer I should verify before finishing that the site runs, the watch rotates when dragged, zoom, camera views, lighting controls, and hotspots work, every navigation link and button works, the mobile layout and touch interactions work, broken assets and runtime errors are fixed, and the design looks premium rather than generic.

• Trigger: completion of implementation.
• Observable result: each check passes and is recorded.
• Access: not applicable (engineering requirement).
• Failure/recovery: any failing check is fixed and re-verified.
• Continuation: the site is delivered.

4. User Personas

Luxury watch visitor

Product context. A collector or design-conscious individual who values thoughtful, process-driven, independent watchmaking rather than trends or scale. They arrive anonymously, often on a phone, expecting the site itself to feel like a luxury object.

Primary goal. Experience the Beck Watch Co. watch as a real, tactile 3D object and understand the craft and philosophy behind it before deciding whether to explore the collection or reach out.

Distinct accepted responsibilities.

• Rotate the watch by drag or touch, zoom, and switch between front, side, and back views.
• Select hotspots for the dial, bezel, case, and bracelet and read the corresponding spec panel.
• Switch between cool-silver and warm-gold lighting.
• Scroll through the cinematic sequence and read the craftsmanship panels and brand story.
• Use the hero CTAs to move into Craftsmanship or Collection.

Relevant inputs and decisions. Which part of the watch to inspect; which lighting mood to view it in; whether the craftsmanship story earns further exploration.

Interactions with other accepted participants. Shares the same anonymous site with the Prospective timepiece buyer; the brand's official contact page is the external destination when they choose to reach out.

Observable success. The watch responds to every drag, zoom, view, hotspot, and lighting control; the scroll sequence reveals the story smoothly; the craftsmanship and brand story read as credible and premium; the visitor reaches Collection or Contact.

What makes this role different. This persona's work is experiential and evaluative — inspecting the object and reading the craft narrative — rather than comparing specific timepieces.

Prospective timepiece buyer

Product context. A collector who has moved past first impression and wants to know what Beck actually offers, with verified facts only and no marketing invention.

Primary goal. Browse the collection, compare verified model names and available specifications, open a timepiece via DISCOVER TIMEPIECE, and reach the official contact page to learn more about availability.

Distinct accepted responsibilities.

• Browse the premium gallery and hover cards to read metallic highlights and spec rows.
• Distinguish verified timepieces from clearly labeled concept models.
• Open a timepiece via DISCOVER TIMEPIECE and review its verified specifications.
• Activate CONTACT US to reach the verified official contact page.

Relevant inputs and decisions. Which timepiece to inspect; whether a card is a verified product or a concept; whether to contact the team about availability.

Interactions with other accepted participants. Shares the anonymous site with the Luxury watch visitor; the brand's official contact page is the external destination that owns the availability conversation.

Observable success. Every card shows a verified name and specifications or a CONCEPT label; no price or stock is shown; DISCOVER TIMEPIECE opens the correct timepiece; CONTACT US reaches the verified official contact page.

What makes this role different. This persona's work is comparative and transactional-adjacent — evaluating specific timepieces and taking the one outbound step toward availability — rather than experiencing the 3D object.

5. Core User Flows

Flow A — First visit and cinematic hero (Luxury watch visitor)

1. The visitor opens steel-luxury on desktop or mobile. The Landing page shows the premium loading screen with a progress indicator while the 3D scene prepares.
2. Loading completes; the hero entrance plays — the watch scales from 0.92 to 1 with a slow opacity fade over 1.6s while the headline "PRECISION, SCULPTED IN TIME." masks up line by line with a 30ms stagger, "TIME." in champagne.
3. The visitor sees the subtitle, the EXPLORE THE WATCH and DISCOVER THE CRAFT buttons, and the animated scroll indicator.
4. The visitor drags the watch; it rotates with the pointer. On release, idle auto-rotation resumes after 3s at 0.12 rad/s.
5. Failure/recovery: if WebGL is unavailable, the fallback presentation appears with all headlines, copy, navigation, and CTAs intact, and the visitor continues to step 8. If reduced motion is preferred, the entrance resolves instantly and no idle rotation occurs.
6. Continuation: the visitor selects EXPLORE THE WATCH → Collection (Flow C) or DISCOVER THE CRAFT → Craftsmanship (Flow B).

Flow B — Inspecting the watch and reading the craft (Luxury watch visitor)

1. On Landing, the visitor zooms in and out with the zoom control (or pinch on touch) and selects the front, side, and back viewing angles; the camera moves smoothly between them.
2. The visitor activates the DIAL hotspot chip. The camera dollies to the dial and the ruled spec panel swaps in the corner; the active chip carries the champagne accent while the others breathe with 2.4s pulse rings.
3. The visitor repeats for BEZEL, CASE, and BRACELET, reading each spec panel.
4. The visitor moves the two-stop lighting slider from cool silver to warm gold; the rim and fill lights retint and the section background shifts from #0A0A0B to #12100D.
5. The visitor scrolls; 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 sections.
6. The visitor activates DISCOVER THE CRAFT and arrives at Craftsmanship. Each panel reveals as a 1px silver rule draws across the viewport, the macro crop slides in from the opposite edge with parallax, and the index counts 01 / 02 / 03. The visitor reads Sculpted Dial Architecture, Refined Metal Finishing, and Independent Watchmaking — all grounded in verified source statements.
7. Failure/recovery: with reduced motion, the camera cuts directly to selected views, lighting applies instantly, and the scroll sequence and panels appear in normal flow without scrubbing or parallax.
8. Continuation: the visitor navigates to Collection or Brand Story, or activates CONTACT US.

Flow C — Browsing the collection (Prospective timepiece buyer)

1. The visitor activates EXPLORE THE WATCH on Landing and arrives at Collection.
2. The gallery renders in a 3-up grid at 1280px, 2-up at 768px, and 1-up at 375px. Each card is a charcoal panel with a circular watch visual bleeding 40px above its top edge.
3. The visitor hovers a card; the metallic specular highlight raises and the DISCOVER TIMEPIECE rule fills champagne left-to-right.
4. The visitor reads the card's verified model name and available specifications. Any fictional concept model carries a visible CONCEPT label. No price and no stock availability appears.
5. Empty state: if no verified timepiece is available, the gallery shows the verified Pace statement — "When no piece is shown, work is ongoing." — and invents nothing.
6. Continuation: the visitor activates DISCOVER TIMEPIECE (Flow D) or navigates to Contact (Flow E).

Flow D — Opening a timepiece (Prospective timepiece buyer)

1. On Collection, the visitor activates DISCOVER TIMEPIECE on a card.
2. The selected timepiece's detail presentation opens with its image or interactive 3D preview and its verified specification rows; a concept model retains its CONCEPT label.
3. The visitor reviews the specifications.
4. Failure/recovery: if detail content is unavailable, the card's verified summary remains visible and the visitor is not shown invented data.
5. Continuation: the visitor returns to the gallery or navigates to Contact (Flow E).

Flow E — Reaching the brand about availability (Prospective timepiece buyer)

1. The visitor scrolls to the closing contact section on any page, or activates CONTACT US in the fixed top bar.
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 above a single champagne rule.
3. The visitor activates CONTACT US.
4. The browser navigates to the verified official Beck Watch Co. contact page, where the brand owns the availability conversation. No email address or phone number is displayed by steel-luxury.
5. Continuation: the visitor continues on the brand's official contact page.

Flow F — Reading the brand story (Luxury watch visitor)

1. The visitor scrolls into Brand Story.
2. Alternating editorial blocks reveal with refined scroll transitions: large Bodoni Moda typography, dark backgrounds, image-and-text layouts alternating side, grounded in verified Why Beck, Restraint, Pace, About Us, and Founder copy.
3. The visitor reads about visible authorship, the case framing the dial, proven Swiss mechanical movements, one watch at a time, and the founder's order • process • no compromises philosophy.
4. Failure/recovery: with reduced motion, blocks appear in normal flow without scroll-scrubbed transitions.
5. Continuation: the visitor reaches the contact section (Flow E) or returns to Collection.

6. Visuals Colors and Theme

The creative direction is authoritative: Precision luxury instrument — titanium, sapphire, and one champagne signal, with MARQ by Garmin as muse. The user's explicit palette and 3D instructions take precedence where they differ.

Mode. Dark only.

Colour tokens by role

Typography

• Headings: Bodoni Moda, editorial high-contrast didone, 300–400 weight, uppercase for hero and section headlines, tracking −0.01em at display sizes and +0.14em for small all-caps eyebrow labels. Numerals in Bodoni Moda for section indices (01 / 02 / 03).
• Body and data: Saira, with tabular lining figures for all specification rows.
• Scale: modular 1.25 with a display jump — hero clamp(40px, 8.4vw, 132px); section headlines clamp(30px, 5.2vw, 76px); panel titles 24/28px; body 17/19px at 1.65 line-height; micro-labels 12px uppercase +0.18em tracking; specification rows 14px Saira with tabular numerals.

Shape language. Instrument geometry: perfect circles (the watch, the bezel, gauge-like spec rings), ruled data rows with 1px hairlines, sharp 0px corners on panels and buttons, and 2px-radius micro-chips for hotspot tags. Buttons are full-width rectangles with a 1px silver border that fills solid champagne on hover with a left-to-right wipe. No soft shadow blobs — depth comes from a single long low-opacity black shadow under the 3D subject and from layered charcoal panels offset by 1px rules.

Spacing rhythm. Spacious editorial rhythm on a 12-column grid; asymmetric 5/7 splits; generous vertical section padding; wide data strips of ruled specification rows.

Imagery style. Macro product photography language rendered in real time: brushed titanium bezel, sapphire-crystal edge highlight, engraved brass dial texture, bracelet links with alternating polished and brushed faces, all on a pure black void with a single soft top-left key and a champagne rim from the right. Supporting 2D imagery is extreme close-up macro crops of metal and hands on black — no stock people, no lifestyle wrist shots, no gradient blobs. Diagrams (caseback engraving, bracelet link construction) are drawn as 1px silver line art on charcoal.

Accessibility. Text and controls stay whole at 375px, 768px, and 1280px; muted #8A8D93 is reserved for 12px+ uppercase micro-labels; the champagne accent is never the sole carrier of meaning.

7. Signature Design Concept

The public entry is a full-viewport #0A0A0B stage where type and object are in dialogue, never stacked. The genuine R3F watch sits right-of-center at roughly 46vw diameter (60vw on desktop, 78vw on mobile), lit by a cool silver key and a champagne rim, casting one long soft shadow. The headline "PRECISION, SCULPTED IN TIME." is set flush-left in Bodoni Moda uppercase across the left 42% at clamp(40px, 8.4vw, 132px), stacked on three lines with "TIME." alone on the last line in champagne #C8A96A — the only accent on screen. Beneath it, a 1px silver rule, the subtitle in Saira 17px #8A8D93, then two stacked rectangular buttons: EXPLORE THE WATCH (solid #EDEAE4 with black text) and DISCOVER THE CRAFT (1px silver outline). A vertical animated scroll line with a traveling dot and the rotated label "SCROLL" sits at the bottom-left. No centered headline, no gradient background — the void is the background.

The signature moves that carry through the site:

• Floating instrument HUD pinned to the watch: four hotspot tags (DIAL / BEZEL / CASE / BRACELET) as 2px-radius chips with 1px silver borders connected by 1px leader lines to points on the 3D object; selecting one dollies the camera and swaps a ruled spec panel in the corner.
• Cool-silver / warm-gold lighting toggle rendered as a two-stop slider with a champagne knob, retinting the R3F rim and fill lights and shifting the page's section background from #0A0A0B to #12100D — the whole page temperature changes with the product.
• Collection cards whose circular watch visual bleeds 40px above the charcoal panel's top edge, with DISCOVER TIMEPIECE as a full-width rule that fills champagne left-to-right on hover while the watch's specular highlight sweeps.
• Craftsmanship panels that reveal as a 1px silver rule draws across the full viewport width, then the macro crop slides in from the opposite edge with parallax, while the section index counts in Bodoni Moda numerals.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The genuine R3F mechanical wristwatch — round metallic case and bezel, sculpted dial, reflective glass, crown and side buttons, individual bracelet links — on a pure black void with a cool silver key from the top-left and a champagne rim from the right.
• Input → transformation → outcome thesis. On load, the watch scales from 0.92 to 1 with a slow opacity fade over 1.6s while the headline masks up line by line with a 30ms stagger; as the visitor drags, the watch rotates with the pointer and idle auto-rotation resumes 3s after release at 0.12 rad/s; as the visitor scrolls, GSAP ScrollTrigger scrubs watch rotation, camera dolly toward the dial, macro reveals, text reveals, and a background light temperature shift from cool silver to champagne across the craftsmanship section.
• Motion vocabulary. Cinematic but disciplined: slow opacity fades, line-by-line headline masks, scroll-linked camera dolly and watch rotation, 2.4s breathing hotspot rings (never bouncing), hover specular sweeps and left-to-right champagne rule fills, and a traveling-dot scroll indicator. No bouncy or springy easing on the 3D watch.
• Composed first frame. Deep black stage; the watch right-of-center at 46vw with its long soft shadow; the three-line Bodoni Moda headline flush-left with "TIME." in champagne; the 1px silver rule, Saira subtitle, and two stacked buttons beneath; the vertical scroll line with traveling dot at bottom-left; the fixed top bar with wordmark, wayfinding, and CONTACT US.
• Reduced-motion state. No scroll-scrubbed camera, no idle rotation, no marquee; static framed views with all content in normal flow; entrance, lighting, and hover changes resolve instantly.

9. Non-Functional Requirements

• NFR-1 — Performance of scrolling and animation (explicit). Scrolling stays smooth and excessive animation that reduces performance is avoided; 3D rendering, textures, and loading are optimized. Rationale: the user requires a premium experience that does not stutter.
• NFR-2 — Responsive integrity (explicit). Desktop, tablet, and mobile layouts at 1280px, 768px, and 375px; headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their containers, wrapping or scaling with clamp() as needed; no element covers readable text or controls. Imagery and decoration may crop, bleed, rotate, or overlap freely.
• NFR-3 — Accessibility (explicit). Accessible controls and reduced-motion support; every control is keyboard-reachable and labeled; prefers-reduced-motion: reduce yields a usable static arrangement with all content in normal flow.
• NFR-4 — WebGL resilience (explicit). A graceful fallback for devices without WebGL support; the site never presents a static image as a fully interactive 3D object.
• NFR-5 — Content integrity (explicit). Only verified product information from the official Beck Watch Co. website; fictional concept models clearly labeled as concepts; no invented prices, stock availability, email addresses, or phone numbers; no unsupported claims about the brand's actual manufacturing processes.
• NFR-6 — Maintainability (explicit). Clean, reusable components and maintainable code; the site compiles and runs without compilation errors, broken assets, or runtime errors.
• NFR-7 — Premium visual quality (explicit). The design must look premium rather than like a generic AI-generated website; the palette, typography, and motion direction in Sections 6–8 are binding.
• NFR-8 — Anonymous public access (required_inference). Every page is reachable without an account; the application establishes no identity, session, or personal state, and stores no visitor data.

10. Tech Stack

• Frontend: React with TypeScript; Tailwind CSS for styling; Vite build.
• 3D: Three.js and React Three Fiber, with Drei where compatible; the watch constructed from individual Three.js geometries when no external model is available; physically based metallic materials and studio lighting.
• Animation: GSAP with ScrollTrigger (or an equivalent compatible animation library) for the cinematic scroll sequence; Framer Motion permitted for UI transitions.
• Backend: Python with FastAPI, serving the read-only content APIs (timepieces, craftsmanship panels, brand story blocks, navigation metadata) from the shared backend process.
• Database: MariaDB storing the application-owned content records.
• Deployment: Docker and docker-compose running the three provisioned services — frontend, backend, database. No Kubernetes requirement is established.

11. Assumptions and Constraints

Assumptions

• The official Beck Watch Co. website (https://beckwatchco.com/) is the authoritative source for brand and product facts, and its contact page is the verified destination for CONTACT US.
• The reference crawl exposes no individual model names or per-model specifications; the Collection therefore presents verified brand-level facts and labels any additional timepiece as a concept.
• Visitors have modern browsers with WebGL on most devices; devices without WebGL receive the fallback.
• The backend and database serve content only; no visitor data is collected or persisted.

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 while claiming the 3D watch 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.
• No blue, indigo, or violet anywhere in the palette; no Inter, Roboto, Arial, Helvetica, Poppins, or system-ui for headings or body; no centered hero headline over a gradient blob or glow; no grid of identical rounded cards with hover-lift shadows; no bouncy or springy easing on the 3D watch.

12. Glossary

• Beck Watch Co. — Independent Texas atelier founded in 2025 by Carlos Arroyo; the brand this site presents.
• Visible authorship — Beck's defining quality: a watch that carries the evidence of its creation and connects its owner directly to the process behind it.
• Dial architecture — The sculpted structure of the watch dial; each Beck dial begins as raw brass and is engraved, painted, and finished by hand.
• Mechanical movement — The watch's internal mechanism; Beck selects proven Swiss mechanical movements for reliability and long-term serviceability.
• Five-year warranty — Beck's coverage against manufacturing defects beginning on the date of delivery, covering movement, dial, hands, or internal assembly; excluding normal wear, misuse damage, water damage, straps/bracelets/clasps, and loss/theft.
• Concept model — A fictional timepiece shown in the Collection and clearly labeled as a concept rather than an actual product.
• Hotspot — An interactive chip (DIAL / BEZEL / CASE / BRACELET) that dollies the camera to a part of the 3D watch and swaps a ruled spec panel.
• ScrollTrigger — The GSAP plugin that binds scroll progress to the cinematic watch rotation, camera dolly, and text reveals.
• WebGL fallback — The graceful static presentation shown when a device cannot render the 3D scene.
• Reduced motion — The prefers-reduced-motion: reduce state in which scroll-scrubbed camera, idle rotation, and marquee are disabled and all content appears in normal flow.