System Requirements Document for footwear-shoes

1. Introduction

This document specifies the system requirements for HAOB SHOES, a premium, futuristic and visually immersive fashion website for a contemporary footwear brand. The product is a complete, functional frontend experience built around a single governing idea: shoes must move throughout the website. Products rotate, float, slide, zoom and transform as visitors interact with the page and scroll.

The intent is an award-winning, Awwwards-style campaign site that combines luxury fashion aesthetics, experimental motion design, cinematic product presentations and sophisticated interactions. The finished site should feel like a futuristic luxury footwear campaign in which products are presented like digital art — never a generic ecommerce template, static product grid, or collection of ordinary transitions.

The audience is a fashion-forward, design-literate visitor who arrives to experience the brand and to browse footwear collections. The site is a public, anonymous, frontend-led experience; no account, checkout, or transactional backend is part of the current scope.

The product catalogue is a premium sneaker collection inspired by the iconic Nike Air Jordan 1 silhouette: 10 unique high-top basketball sneakers with distinct colourways, premium materials and sophisticated streetwear aesthetics, presented as a luxury sneaker design catalogue. Each sneaker has its own individual identity while maintaining consistent Jordan 1-inspired construction. All branding on the shoes is original and fictional — no Nike or Jordan trademarks appear anywhere in the product.

2. System Overview

HAOB SHOES is delivered as a React single-page frontend that renders a sequence of full-viewport cinematic scenes: a hero, a collection showcase, a featured product presentation, a brand story, a product gallery, and a minimal luxury footer. Motion is the product: a real-time 3D sneaker anchors the hero, scroll-scrubbed transitions carry shoes across the viewport, and hover/touch interactions respond to the visitor.

The catalogue itself is a luxury sneaker design catalogue of 10 high-top basketball sneakers built on one consistent Jordan 1-inspired construction, each rendered photorealistically in 3D under professional studio lighting with realistic shadows on a clean neutral background, and each documented through five views: side profile, front three-quarter view, rear view, top-down view, and close-up material and stitching details.

The current delivery comprises:

• frontend — the React application UI that renders all scenes, hosts the Three.js/React Three Fiber 3D shoe, and drives GSAP/ScrollTrigger, Framer Motion and Lenis motion.
• backend — a shared FastAPI process reserved for application APIs and domain modules. It is provisioned infrastructure only; the current product does not require backend functionality, and no unnecessary backend capability is introduced.
• database — MariaDB, provisioned for application-owned persistent data. It is not used to justify any current domain entity, authentication, or transactional workflow.

Actors are the two accepted human personas — Fashion visitor and Shoe shopper — plus non-persona system actors (the frontend runtime, the 3D rendering layer, and the motion libraries). All accepted behavior is public and anonymous.

Removed from scope

• None. No concept from the authoritative requirement thread was removed or superseded.

Catalogue scope note: The 10-colourway sneaker catalogue is additive to the accepted HAOB SHOES experience. It does not remove the five named collections (Sneakers, Lifestyle Shoes, Streetwear Collection, Premium Edition, Sports Collection), the hero, the featured product, the brand story, the gallery or the footer.

2a. Product Interpretation and Delivery Boundary

HAOB SHOES is a public, anonymous, frontend-led brand experience. Every visitor reaches the site directly with no identity verification, sign-in, or account. There is no private state, no durable per-visitor record, and no commitment or value transfer that must remain bound to a participant, so application-owned identity is not introduced.

All accepted human-facing work is owned by first-party pages of the frontend. The 3D shoe, scroll-driven movement, hover/touch responses, and reveals are rendered and controlled entirely in the browser. The provisioned FastAPI backend and MariaDB database exist as infrastructure but carry no current product behavior; they are not surfaced as destinations and do not gate any journey.

The current horizon is the complete public marketing and browsing experience described in this document. No future features are committed. The site does not include checkout, cart, payment, order management, user accounts, or content authoring.

The sneaker catalogue is presented as a design catalogue, not a store: the 10 colourways are shown with their construction details and five views, and prices remain placeholders. The catalogue is rendered with real-time 3D and photorealistic imagery in the browser; no catalogue authoring, upload, or inventory management surface is introduced, and the provisioned backend and database still carry no current product behavior.

2c. Page Content and Component Coverage

Landing

• Information and state: Full-screen hero with the headline "STEP BEYOND ORDINARY." and supporting text "Redefining movement. Designed for individuality."; the HAOB SHOES wordmark; minimal navigation; the oversized 3D sneaker as visual centerpiece — a high-top basketball sneaker with structured leather upper, overlapping panels, perforated rounded toe box, large curved side branding, padded ankle collar with a Wings-style emblem, premium flat cotton laces, layered leather overlays, cushioned midsole and circular-traction rubber outsole; the "EXPLORE COLLECTION" call to action; the footer with logo, Shop, Collections, About, Contact, Instagram and other social links, and the oversized animated HAOB SHOES wordmark.
• Primary actions: Scroll to experience the hero; move the mouse (desktop) to influence shoe rotation; select "EXPLORE COLLECTION" to move to the collection section; use footer links.
• Supporting actions: Hover the CTA for magnetic/interactive response; navigate via minimal navigation.
• Domain entities: Brand wordmark, hero shoe (3D model or transparent-image fallback), navigation items, footer link set.
• Component responsibilities: Hero scene container (full-viewport, smooth background transitions); 3D shoe canvas (slow rotation, floating depth, mouse-influenced rotation on desktop); animated headline reveal (clip-mask letter rise); magnetic CTA button; minimal nav bar; footer with animated oversized wordmark.
• States: Loading — shoe model/textures and hero imagery load with a graceful placeholder that is not a generic rectangle; empty — not applicable (static brand content); success — hero renders, shoe rotates and floats, headline reveals, CTA responds; error/recovery — if the 3D model fails to load, fall back to high-quality transparent shoe imagery with CSS transforms and GSAP so movement is preserved; reduced-motion — static frames with a usable arrangement and horizontal scrolling where needed.

Collection

• Information and state: Headline "FIND YOUR NEXT ICON."; the Sneakers, Lifestyle Shoes, Streetwear Collection, Premium Edition and Sports Collection collections; large product imagery with minimal product information; per product: product name, price placeholder, available colors, and an explore product button. The catalogue presents the 10 high-top basketball sneakers — Chicago Classic (red, white and black), Shadow Grey (black, charcoal and medium grey), University Blue (white, light blue and black), Mocha Edition (chocolate brown, white and black), Midnight Navy (deep navy, white and grey), Forest Green (dark green, cream and black), Royal Blue (royal blue, white and black), Triple Black (different black leather textures), Vintage Cream (off-white, beige and aged grey) and Burgundy Edition (deep burgundy, white and black) — each with its own identity on the shared Jordan 1-inspired construction.
• Primary actions: Scroll to bring products into view; hover a shoe for subtle rotation and scaling; select an explore product button.
• Supporting actions: Read product name, price placeholder and available colors; read each sneaker's colourway name and colour composition.
• Domain entities: Collection (five named collections), Product (name, price placeholder, available colors, explore action), Colourway (one of the 10 named colourways with its colour composition), product imagery.
• Component responsibilities: Asymmetric editorial layout (not an ordinary ecommerce grid); scroll-triggered product reveal with clipping masks, scaling, opacity and staggered timing; floating product motion; hover rotation/scaling; magnetic explore buttons; photorealistic 3D sneaker renders on a clean neutral background with professional studio lighting and realistic shadows.
• States: Loading — product imagery lazy-loads with optimized loading; empty — not applicable (curated catalog); success — products animate into view and respond to hover; error/recovery — missing imagery falls back to transparent shoe assets with CSS/GSAP motion, never placeholder rectangles or generic illustrations; reduced-motion — products wrap or scroll horizontally so each is fully viewable.

Featured Product

• Information and state: Headline "DESIGNED TO MOVE."; one featured shoe with large product imagery, slow rotation, animated product details, material and design descriptions, and interactive color variations. The featured shoe is a high-top basketball sneaker shown with accurate anatomy and realistic proportions: classic high-top silhouette extending above the ankle, structured leather upper with multiple overlapping panels, perforated rounded toe box, large curved side branding, padded ankle collar with a Wings-style emblem, premium flat cotton laces, layered leather overlays around the toe, sides and heel, cushioned midsole with retro basketball-inspired proportions, and durable rubber outsole with circular traction patterns, with carefully constructed stitching and realistic material textures.
• Primary actions: Scroll to move the shoe from one side of the screen to the other while it rotates; select a color variation; read material and design descriptions.
• Supporting actions: Hover the shoe for subtle rotation and scaling; inspect the shoe's construction details.
• Domain entities: Featured shoe, color variations, material description, design description, construction detail set (silhouette, upper panels, toe box, side branding, ankle collar and emblem, laces, overlays, midsole, outsole, stitching).
• Component responsibilities: Full-width immersive presentation; scroll-scrubbed lateral travel with rotation; animated detail reveals; interactive color swatch control that updates the shoe presentation; photorealistic 3D render with professional studio lighting, realistic shadows and a clean neutral background.
• States: Loading — featured imagery and model load progressively; empty — not applicable; success — shoe travels and rotates on scroll, color selection updates presentation, details animate in; error/recovery — fallback to transparent imagery with CSS/GSAP motion; reduced-motion — static frames with the shoe fully visible and color control usable.

Brand Story

• Information and state: Headline "MORE THAN FOOTWEAR. IT'S AN IDENTITY."; a short brand story about creativity, individuality, movement and contemporary fashion; oversized typography; cinematic fashion photography.
• Primary actions: Scroll to read the story and trigger text reveals and parallax image transitions.
• Supporting actions: None beyond reading and scrolling.
• Domain entities: Brand story copy, editorial photography.
• Component responsibilities: Oversized type treatment; text-reveal animation; parallax image transitions.
• States: Loading — photography lazy-loads; empty — not applicable; success — text reveals and images parallax smoothly; error/recovery — images degrade to a static editorial layout; reduced-motion — static frames with readable text.

Gallery

• Information and state: An immersive gallery of lifestyle shoe photography, close-up material details, streetwear-inspired fashion photography, and different shoe angles. The gallery carries the catalogue's five required views for the sneakers — side profile, front three-quarter view, rear view, top-down view, and close-up material and stitching details — rendered photorealistically with professional studio lighting, realistic shadows and a clean neutral background.
• Primary actions: Scroll horizontally through the gallery; view smooth image transitions.
• Supporting actions: Hover imagery for interactive response where applicable; inspect a sneaker's view set.
• Domain entities: Gallery images (lifestyle, material close-ups, streetwear fashion, shoe angles), view set (side profile, front three-quarter, rear, top-down, material and stitching close-up).
• Component responsibilities: Horizontal scrolling interaction; smooth image transitions; responsive image positioning; consistent view framing across all 10 colourways.
• States: Loading — images lazy-load; empty — not applicable; success — horizontal scroll reveals each image with smooth transitions; error/recovery — images fall back to a static scrollable row; reduced-motion — horizontal scrolling remains usable so each item can be brought fully into view.

3. Functional Requirements

FR-1 — Brand presentation. As a Fashion visitor, I should experience the HAOB SHOES brand as a premium, futuristic, visually immersive Awwwards-style site. (explicit)

• Trigger: opening the site. Result: the brand identity, tone and motion-first presentation render. Access: public, anonymous. Failure/recovery: if assets fail, the site degrades gracefully while preserving brand tone. Continuation: the visitor scrolls into the experience.

FR-2 — Brand palette. As a Fashion visitor, I should see the brand identity expressed in off-white, deep black, light grey, metallic silver and occasional bold accent colors. (explicit)

• Result: the palette is applied consistently across scenes. Access: public.

FR-3 — Wordmark. As a Fashion visitor, I should see a distinctive HAOB SHOES wordmark set in modern typography. (explicit)

• Result: the wordmark appears in navigation and footer. Access: public.

FR-4 — Hero content. As a Fashion visitor, I should see a full-screen hero with the headline "STEP BEYOND ORDINARY." and the supporting text "Redefining movement. Designed for individuality." (explicit)

• Result: the hero fills the viewport with the exact headline and supporting text. Access: public.

FR-5 — Hero 3D sneaker. As a Fashion visitor, I should see an oversized 3D sneaker as the visual centerpiece that slowly rotates and floats with subtle depth. (explicit)

• Result: the shoe is the dominant visual, not background decoration. Failure/recovery: if 3D assets are unavailable, high-quality transparent shoe imagery with CSS transforms and GSAP preserves the movement. Access: public.

FR-6 — Mouse-influenced rotation. As a Fashion visitor on desktop, I should be able to influence the hero shoe's rotation with mouse movement. (explicit)

• Input: pointer movement. Result: the shoe tilts/rotates in response. Access: public, desktop. Continuation: the shoe returns to its slow orbit.

FR-7 — Hero atmosphere and CTA. As a Fashion visitor, I should see smooth background transitions, an animated headline reveal, minimal navigation and a prominent "EXPLORE COLLECTION" button. (explicit)

• Result: headline reveals, background transitions smoothly, nav is minimal, CTA is prominent. Access: public.

FR-8 — 360-degree rotation. As a Fashion visitor, I should see shoes with realistic 3D rotation and be able to interact with and rotate products. (explicit)

• Input: drag/pointer or touch. Result: the product rotates 360 degrees. Access: public. Failure/recovery: fallback to transparent imagery with CSS/GSAP motion. Continuation: the visitor continues browsing.

FR-9 — Scroll-triggered movement. As a Fashion visitor, I should see shoes move horizontally and vertically across the screen as I scroll, rotating while changing position. (explicit)

• Input: scroll. Result: smooth horizontal and vertical product transitions with rotation. Access: public.

FR-10 — Floating products. As a Fashion visitor, I should see subtle continuous floating animations with natural movement rather than exaggerated bouncing. (explicit)

• Result: products float naturally. Access: public.

FR-11 — Product reveal. As a Fashion visitor, I should see shoes emerge from dark or light backgrounds using clipping masks, scaling and opacity transitions, introduced with staggered animations. (explicit)

• Result: staggered reveals on scroll. Access: public.

FR-12 — Interactive hover. As a Fashion visitor, I should trigger subtle rotation and scaling when hovering a shoe, and buttons should have smooth magnetic or interactive hover effects. (explicit)

• Input: hover (desktop). Result: shoe rotates/scales subtly; buttons respond magnetically. Access: public, desktop. Mobile: touch interactions replace complex cursor interactions.

FR-13 — Collection showcase. As a Shoe shopper, I should see the headline "FIND YOUR NEXT ICON." and the Sneakers, Lifestyle Shoes, Streetwear Collection, Premium Edition and Sports Collection collections. (explicit)

• Result: all five collections are presented. Access: public.

FR-14 — Product information. As a Shoe shopper, I should see each product's name, price placeholder, available colors and an explore product button. (explicit)

• Result: each product shows these fields. Access: public.

FR-15 — Editorial scroll reveal. As a Shoe shopper, I should see products animate into view on scroll in asymmetric editorial layouts rather than ordinary ecommerce grids. (explicit)

• Result: asymmetric layouts with scroll-triggered reveals. Access: public.

FR-16 — Featured product. As a Shoe shopper, I should see a full-width immersive section with the headline "DESIGNED TO MOVE.", one featured shoe with large imagery, slow rotation, animated product details, material and design descriptions, and interactive color variations. (explicit)

• Result: the featured presentation renders with all listed elements. Access: public.

FR-17 — Featured lateral travel. As a Shoe shopper, I should see the featured shoe move from one side of the screen to the other while rotating as I scroll. (explicit)

• Input: scroll. Result: lateral travel with rotation. Access: public.

FR-18 — Brand story. As a Fashion visitor, I should see the headline "MORE THAN FOOTWEAR. IT'S AN IDENTITY." with a short brand story about creativity, individuality, movement and contemporary fashion. (explicit)

• Result: the story renders with the exact headline. Access: public.

FR-19 — Story motion. As a Fashion visitor, I should see oversized typography, cinematic fashion photography, text-reveal animations and parallax image transitions in the brand story. (explicit)

• Result: text reveals and parallax transitions on scroll. Access: public.

FR-20 — Product gallery. As a Fashion visitor, I should see an immersive gallery of lifestyle shoe photography, close-up material details, streetwear-inspired fashion photography and different shoe angles, with smooth image transitions and horizontal scrolling interactions. (explicit)

• Input: horizontal scroll. Result: smooth transitions across gallery images. Access: public.

FR-21 — Footer. As a Fashion visitor, I should see a minimal luxury footer with the HAOB SHOES logo, Shop, Collections, About, Contact, and Instagram and other social links. (explicit)

• Result: footer renders all listed items. Access: public.

FR-22 — Animated footer wordmark. As a Fashion visitor, I should see an oversized animated HAOB SHOES wordmark in the footer. (explicit)

• Result: the wordmark animates. Access: public.

FR-23 — Complete reusable frontend. As a developer, the site should be a complete functional frontend built with reusable React components. (explicit)

• Result: components are reusable and the frontend is functional. Access: internal.

FR-24 — Motion technology stack. As a developer, the site should use React, Tailwind CSS, GSAP, GSAP ScrollTrigger, Three.js, Framer Motion and Lenis. (explicit)

• Result: the specified libraries drive the experience. Access: internal.

FR-25 — Responsive delivery. As a Fashion visitor, I should experience the site working on desktop, laptop, tablet and mobile. (explicit)

• Result: layout and motion adapt across breakpoints. Access: public.

FR-26 — Mobile touch and optimization. As a Fashion visitor on mobile, I should have touch interactions replace complex cursor interactions, with optimized 3D models and animations. (explicit)

• Result: touch-driven interaction and optimized performance. Access: public, mobile.

FR-27 — Mobile movement preservation. As a Fashion visitor on mobile, I should still experience shoe movement with responsive typography and image positioning and smooth, fast loading. (explicit)

• Result: movement preserved; typography and imagery responsive; loading smooth. Access: public, mobile.

FR-28 — 3D fallback. As a Fashion visitor, if 3D models are unavailable, I should see convincing simulated movement using high-quality transparent shoe images with CSS transforms and GSAP. (explicit)

• Result: movement preserved via fallback. Access: public.

FR-29 — Anonymous entry. As a Fashion visitor, I should open the public Landing page without identity verification. (required_inference)

• Result: the Landing page loads anonymously. Access: public.

FR-30 — Explore collection navigation. As a Fashion visitor, I should select "EXPLORE COLLECTION" to move to the collection section. (required_inference)

• Input: CTA selection. Result: the view moves to the collection section. Access: public. Continuation: the visitor browses collections.

FR-31 — Ten-colourway sneaker catalogue. As a Shoe shopper, I should see a premium sneaker collection of 10 unique high-top basketball sneakers with distinct colourways, premium materials and sophisticated streetwear aesthetics, presented as a luxury sneaker design catalogue. (explicit)

• Result: all 10 sneakers are presented, each with its own individual identity while maintaining consistent Jordan 1-inspired construction. Access: public.

FR-32 — Colourway set. As a Shoe shopper, I should see exactly these 10 colourways: Chicago Classic (red, white and black); Shadow Grey (black, charcoal and medium grey); University Blue (white, light blue and black); Mocha Edition (chocolate brown, white and black); Midnight Navy (deep navy, white and grey); Forest Green (dark green, cream and black); Royal Blue (royal blue, white and black); Triple Black (different black leather textures); Vintage Cream (off-white, beige and aged grey); Burgundy Edition (deep burgundy, white and black). (explicit)

• Result: each colourway is named and rendered with its stated colour composition. Access: public.

FR-33 — Sneaker construction. As a Shoe shopper, I should see every sneaker built on the same construction: a classic high-top basketball silhouette extending above the ankle; a structured leather upper with multiple overlapping panels; a perforated rounded toe box; large curved side branding; a padded ankle collar with a distinctive Wings-style emblem; premium flat cotton laces; layered leather overlays around the toe, sides and heel; a cushioned midsole with visible retro basketball-inspired proportions; a durable rubber outsole with circular traction patterns; and carefully constructed stitching with realistic material textures. (explicit)

• Result: all listed construction elements are present and consistent across all 10 designs. Access: public.

FR-34 — Five required views. As a Shoe shopper, I should see each sneaker shown in a side profile, a front three-quarter view, a rear view, a top-down view, and a close-up of material and stitching details. (explicit)

• Result: the five views are available for the sneakers in the catalogue presentation. Access: public. Failure/recovery: if a view render is unavailable, the remaining views still render and no placeholder rectangle or generic illustration is substituted.

FR-35 — Photorealistic studio presentation. As a Shoe shopper, I should see the sneakers rendered with professional studio lighting, realistic shadows, high-resolution photorealistic 3D rendering and a clean neutral background. (explicit)

• Result: renders read as photorealistic product photography-grade 3D. Access: public.

FR-36 — Anatomical accuracy. As a Shoe shopper, I should see accurate sneaker anatomy, realistic proportions, detailed leather textures and consistent construction across all 10 designs, with no cartoon styling, distorted shoe shapes or exaggerated proportions. (explicit)

• Result: every design holds realistic anatomy and proportions. Access: public.

FR-37 — Original fictional branding. As a Shoe shopper, I should see original fictional branding on the sneakers rather than Nike or Jordan trademarks. (explicit)

• Result: no Nike or Jordan trademark appears on any sneaker, label, copy or asset. Access: public.

4. User Personas

Fashion visitor

• Product context: A design-literate visitor drawn to premium, futuristic fashion experiences. They arrive to feel the brand and to see footwear presented as digital art.
• Primary goal: A smooth, cinematic brand experience on desktop or mobile in which shoes visibly move, rotate and transform.
• Distinct responsibilities: Experiences the hero, influences the shoe with the mouse (desktop) or touch (mobile), scrolls through the story and gallery, and reads the brand narrative.
• Inputs and decisions: Pointer movement, scroll, touch, and hover; decides how long to explore each scene.
• Interactions with other participants: Shares the public experience with the Shoe shopper; both may be the same person at different moments.
• Observable success: The shoe rotates and floats, the headline reveals, scroll-driven movement is smooth, and the story and gallery feel cinematic.
• Constraints: On mobile, complex cursor interactions are replaced by touch; reduced-motion settings are respected.

Shoe shopper

• Product context: A visitor evaluating footwear items by name, price, available colors and collection, looking for a "next icon."
• Primary goal: Compare footwear items and open the explore product action for an item of interest.
• Distinct responsibilities: Browses the five collections and the 10-colourway sneaker catalogue, reads product name, price placeholder and available colors, compares colourways and construction details, inspects the side profile, front three-quarter, rear, top-down and material/stitching close-up views, hovers shoes for subtle rotation, and selects explore product buttons; engages with the featured product's color variations and material/design descriptions.
• Inputs and decisions: Which collection, colourway and product to inspect; which color variation to view; which view of a sneaker to examine.
• Interactions with other participants: Shares the public experience with the Fashion visitor.
• Observable success: Finds an item of interest, understands its colourway and construction, and opens its explore product action.
• Constraints: Products animate into view in asymmetric editorial layouts; sneakers keep accurate anatomy and realistic proportions with original fictional branding; no checkout or cart is part of scope.

5. Core User Flows

Flow A — Fashion visitor: cinematic hero experience

1. The Fashion visitor opens the public Landing page anonymously; no identity verification occurs.
2. The full-screen hero renders with the headline "STEP BEYOND ORDINARY." revealing via clip-mask letter rise, and the supporting text "Redefining movement. Designed for individuality."
3. The oversized 3D sneaker appears as the centerpiece, slowly rotating and floating with subtle depth; background transitions are smooth.
4. On desktop, the visitor moves the mouse; the shoe's rotation responds, then returns to its slow orbit. On mobile, touch interactions replace cursor interactions.
5. The visitor hovers the "EXPLORE COLLECTION" button; it responds with a magnetic/interactive effect.
6. Failure/recovery: If the 3D model fails to load, high-quality transparent shoe imagery with CSS transforms and GSAP preserves the movement.
7. Reduced motion: Static frames with a usable arrangement replace continuous motion.
8. Continuation: The visitor selects "EXPLORE COLLECTION" to move to the collection section.

Flow B — Shoe shopper: browse collections and open a product

1. The Shoe shopper scrolls into the Collection section and sees the headline "FIND YOUR NEXT ICON." and the five collections: Sneakers, Lifestyle Shoes, Streetwear Collection, Premium Edition, Sports Collection.
2. Products animate into view on scroll in asymmetric editorial layouts, with staggered reveals using clipping masks, scaling and opacity.
3. The shopper sees the 10-colourway sneaker catalogue — Chicago Classic, Shadow Grey, University Blue, Mocha Edition, Midnight Navy, Forest Green, Royal Blue, Triple Black, Vintage Cream and Burgundy Edition — each a high-top basketball sneaker on the same Jordan 1-inspired construction, rendered photorealistically with studio lighting, realistic shadows and a clean neutral background.
4. Each product shows its name, price placeholder, available colors and an explore product button.
5. The shopper hovers a shoe; it rotates and scales subtly. On mobile, touch replaces hover.
6. The shopper selects an explore product button for an item of interest.
7. Failure/recovery: Missing imagery falls back to transparent shoe assets with CSS/GSAP motion — never placeholder rectangles or generic illustrations.
8. Continuation: The shopper proceeds to the featured product presentation.

Flow C — Shoe shopper: featured product exploration

1. The Shoe shopper reaches the Featured Product section and sees the headline "DESIGNED TO MOVE."
2. One featured shoe is presented full-width with large imagery and slow rotation; it is a high-top basketball sneaker with accurate anatomy and realistic proportions — structured leather upper with overlapping panels, perforated rounded toe box, large curved side branding, padded ankle collar with a Wings-style emblem, flat cotton laces, layered leather overlays, cushioned midsole and circular-traction rubber outsole, with original fictional branding.
3. As the shopper scrolls, the shoe moves from one side of the screen to the other while rotating.
4. Animated product details, material and design descriptions reveal.
5. The shopper selects an interactive color variation; the presentation updates.
6. Failure/recovery: If 3D assets are unavailable, transparent imagery with CSS/GSAP motion preserves the travel and rotation.
7. Continuation: The shopper continues to the brand story or gallery.

Flow D — Fashion visitor: brand story

1. The Fashion visitor scrolls into the Brand Story section and sees the headline "MORE THAN FOOTWEAR. IT'S AN IDENTITY."
2. A short brand story about creativity, individuality, movement and contemporary fashion is presented in oversized typography with cinematic fashion photography.
3. Text-reveal animations play as the visitor scrolls; parallax image transitions shift the photography.
4. Failure/recovery: If photography fails to load, a static editorial layout preserves readability.
5. Continuation: The visitor moves to the gallery.

Flow E — Fashion visitor: immersive gallery

1. The Fashion visitor reaches the Gallery and sees lifestyle shoe photography, close-up material details, streetwear-inspired fashion photography and different shoe angles, including the side profile, front three-quarter view, rear view, top-down view and material and stitching close-up of the sneakers.
2. The visitor scrolls horizontally; images transition smoothly.
3. Reduced motion: Horizontal scrolling remains usable so each item can be brought fully into view.
4. Continuation: The visitor reaches the footer.

Flow F — Fashion visitor: footer and brand close

1. The Fashion visitor reaches the minimal luxury footer and sees the HAOB SHOES logo, Shop, Collections, About, Contact, and Instagram and other social links.
2. The oversized HAOB SHOES wordmark animates.
3. The visitor may follow a footer link or end the session.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section. Muse: Gleb Kuznetsov; headline register: cinematic future tech.

Mode: Dark.

Color tokens (exact hex by role):

• Background: #07080A (deep black ground, ~70% of the screen)
• Surface: #121418
• Text: #F4F4F2
• Primary: #C9CDD4 (metallic silver for type and metallic surfaces)
• Accent: #E6FF3D (acid-lime, the only hot accent, under 5% of the screen)
• Muted: #7A7F88 (light grey for labels and hairline rules)

The user-requested palette (off-white, deep black, light grey, metallic silver, occasional bold accent) is honored: off-white maps to #F4F4F2, deep black to #07080A, light grey to #7A7F88, metallic silver to #C9CDD4, and the bold accent to #E6FF3D.

Typography:

• Headings: Space Grotesk — wide geometric caps, weight 500, tight tracking at large sizes, very large scale contrast.
• Body: JetBrains Mono.
• Scale: 1.5 modular — display clamp(56px, 12vw, 168px); 64 / 40 / 24 / 16 / 13 micro-labels in uppercase mono.

Shape language: Full-bleed dark fields, thin luminous 1px strokes, floating glass panels with 8px radii, radial dial rings and hairline data rules.

Layout: Full-viewport scenes stacked like film frames; asymmetric overlays; micro-labels pinned to corners; generous void around one product.

Imagery style: Real-time 3D sneaker renders on black, macro material close-ups, volumetric light and expedition-style fashion photography in monochrome. Catalogue sneaker renders use professional studio lighting, realistic shadows, high-resolution photorealistic 3D rendering and a clean neutral background, with accurate sneaker anatomy, realistic proportions and detailed leather textures; cartoon styling, distorted shoe shapes and exaggerated proportions are excluded.

Readability rule: Headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (e.g. clamp(...)) to fit; no element covers them. Imagery and decoration may crop, bleed, rotate or overlap freely.

7. Signature Design Concept

The public entry is a full-bleed black scene in which one oversized 3D sneaker floats centre-right at about 60vw, lit by a lime rim light. The headline "STEP BEYOND ORDINARY." stacks flush-left in 168px caps and overlaps the shoe edge. A thin lime rule and the "EXPLORE COLLECTION" pill sit under the headline. The nav is a single hairline bar with corner micro-labels.

Signature moves carried through the site:

• The hero sneaker rotates in a slow 3D orbit and tilts with the mouse on desktop.
• Headline letters rise from a clip mask, staggered, as the shoe scales in behind them.
• The featured shoe travels left to right across the viewport on scroll while it rotates.
• Collection items sit on floating glass panels with a lime scan-line sweep on hover.
• The footer wordmark HAOB SHOES fills the width and drifts on scroll.

This concept only recomposes accepted content, states and controls; it introduces no new behavior or destination.

Catalogue presentation: The 10-colourway sneaker catalogue is presented as a luxury sneaker design catalogue inside the accepted scenes — the collection showcase, the featured product presentation and the gallery — using the same dark, full-bleed, motion-first language. Each sneaker keeps its own identity through its colourway while sharing one Jordan 1-inspired construction, and each is documented through side profile, front three-quarter, rear, top-down and material/stitching close-up views under studio lighting on a clean neutral background.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized 3D sneaker, centre-right at about 60vw, lit by a lime rim light on a full-bleed black field.
• Input → transformation → outcome thesis: Pointer movement (desktop) and scroll input tilt and orbit the shoe; the shoe slowly rotates and floats with subtle depth; headline letters rise from a clip mask in a staggered reveal as the shoe scales in behind them; the outcome is a cinematic first frame in which the shoe is the centerpiece, not decoration.
• Motion vocabulary: Slow shoe orbit, mouse-influenced rotation, scroll-scrubbed lateral travel, light sweeps, staggered reveals, clip-mask letter rise.
• Composed first frame: Black field; hairline nav bar with corner micro-labels; flush-left stacked 168px caps headline overlapping the shoe edge; thin lime rule and EXPLORE COLLECTION pill beneath; the shoe floating centre-right.
• Reduced-motion state: Static frames with a usable arrangement and horizontal scrolling where needed; no continuous orbit or parallax.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

A real-time WebGL/React Three Fiber hero subject: one crafted 3D sneaker on a black void, lit by a lime rim light, slowly orbiting and floating with subtle depth, tilting with the mouse on desktop. The scene shows the product's defining state — the shoe as a moving, dimensional object — and degrades to transparent imagery with CSS/GSAP motion if 3D assets are unavailable.

9. Non-Functional Requirements

• NFR-1 — Motion performance. Image loading and animation performance must be optimized. (explicit) Rationale: the experience is motion-first and must remain fluid.
• NFR-2 — Reduced motion. The site must respect reduced-motion accessibility settings, providing static frames with a usable arrangement. (explicit)
• NFR-3 — Responsive integrity. The site must work on desktop, laptop, tablet and mobile, with responsive typography and image positioning. (explicit)
• NFR-4 — Mobile optimization. On mobile, 3D models and animations must be optimized and complex cursor interactions replaced by touch interactions, while preserving shoe movement and fast loading. (explicit)
• NFR-5 — Asset fidelity. Static shoe images must not substitute for requested interactive 3D models where actual 3D assets are available; placeholder rectangles and generic illustrations for products are prohibited. (explicit)
• NFR-6 — Backend restraint. No unnecessary backend functionality may be introduced. (explicit)
• NFR-7 — Anti-template design. The site must avoid generic ecommerce templates, static product grids, excessive text and ordinary transitions. (explicit)
• NFR-8 — Readable text and controls. Headlines, wordmarks, labels, numbers, card text and controls stay whole and uncovered at 375px, 768px and 1280px. (required_inference, from the creative direction's readability rule)
• NFR-9 — Render fidelity. Sneaker renders must be high-resolution and photorealistic, with professional studio lighting, realistic shadows, detailed leather textures and a clean neutral background. (explicit)

• NFR-10 — Anatomical consistency. Sneaker anatomy and proportions must stay accurate and construction must stay consistent across all 10 designs; cartoon styling, distorted shoe shapes and exaggerated proportions are prohibited. (explicit)
• NFR-11 — Original branding. Only original fictional branding may appear on the sneakers; Nike and Jordan trademarks must not be used. (explicit)

10. Tech Stack

• Frontend: React (single-page application), Tailwind CSS.
• Motion: GSAP, GSAP ScrollTrigger, Framer Motion, Lenis (smooth scrolling).
• 3D: Three.js (with React Three Fiber for the hero and product 3D interactions, including the 10-colourway sneaker catalogue renders and their five views).
• Backend: Shared FastAPI process for application APIs and domain modules (provisioned; no current product behavior).
• Database: MariaDB for application-owned persistent data (provisioned; no current domain entities).
• Infrastructure: Docker / docker-compose for the frontend, backend and database services.

All technology choices are source-specified and preserved exactly.

11. Assumptions and Constraints

• A-1: The site is a public, anonymous experience; no account, sign-in, cart, checkout or payment is in scope. (required_inference)
• A-2: The provisioned FastAPI backend and MariaDB database carry no current product behavior and are not surfaced as destinations. (required_inference)
• A-3: Where 3D assets are available, interactive 3D models are used; otherwise high-quality transparent shoe imagery with CSS transforms and GSAP provides the movement. (explicit)
• A-4: Product prices are placeholders, not transactional values. (explicit)
• A-5: Footer social links and navigation items are presentational brand links; no external integration behavior is specified. (required_inference)
• C-1: Do not use static shoe images as substitutes for requested interactive 3D models where actual 3D assets are available. (explicit)
• C-2: Do not use placeholder rectangles or generic illustrations for products. (explicit)
• C-3: Do not introduce unnecessary backend functionality. (explicit)
• C-4: Respect reduced-motion accessibility settings. (explicit)
• C-5: Optimize image loading and animation performance. (explicit)
• C-6: Avoid generic ecommerce templates, static product grids, excessive text and ordinary transitions. (explicit)
• C-7: On mobile, replace complex cursor interactions with touch interactions. (explicit)
• C-8: Maintain accurate sneaker anatomy, realistic proportions, detailed leather textures and consistent construction across all 10 designs; avoid cartoon styling, distorted shoe shapes and exaggerated proportions. (explicit)
• C-9: Use original fictional branding rather than Nike or Jordan trademarks. (explicit)

12. Glossary

• HAOB SHOES — The footwear brand and the site's wordmark.
• Wordmark — The distinctive HAOB SHOES logotype set in modern typography.
• Hero — The full-screen opening scene with the headline, supporting text, 3D sneaker and CTA.
• 360-degree rotation — Realistic 3D product rotation the visitor can interact with.
• ScrollTrigger — GSAP plugin that drives scroll-linked movement and reveals.
• Lenis — Smooth-scrolling library.
• Floating — Subtle continuous product motion with natural, non-bouncy movement.
• Product reveal — Emergence of shoes from dark or light backgrounds via clipping masks, scaling, opacity and staggering.
• Magnetic button — A button with a smooth interactive hover response.
• Featured product — The single immersive shoe presentation under "DESIGNED TO MOVE."
• Collection — One of the five footwear collections: Sneakers, Lifestyle Shoes, Streetwear Collection, Premium Edition, Sports Collection.
• Colourway — One of the 10 named sneaker designs: Chicago Classic, Shadow Grey, University Blue, Mocha Edition, Midnight Navy, Forest Green, Royal Blue, Triple Black, Vintage Cream, Burgundy Edition.
• High-top construction — The shared Jordan 1-inspired build: high-top silhouette above the ankle, structured leather upper with overlapping panels, perforated rounded toe box, large curved side branding, padded ankle collar with a Wings-style emblem, flat cotton laces, layered leather overlays, cushioned midsole and circular-traction rubber outsole.

• View set — The five required presentations of a sneaker: side profile, front three-quarter view, rear view, top-down view, and close-up material and stitching details.
• Wings-style emblem — The distinctive emblem on the padded ankle collar, rendered as original fictional branding.
• Reduced motion — The OS accessibility setting that replaces continuous motion with static, usable arrangements.