System Requirements Document for 3d-camera-portfolio

1. Introduction

Product intent. 3d-camera-portfolio is a premium, single-page 3D professional camera portfolio website. It presents a professional camera as a real-time, physically based 3D instrument on a cinematic dark stage, and lets a visitor inspect that instrument through scroll-driven and pointer-driven interaction: a rotating hero camera, an interactive camera-design inspection, a lens that unlocks, detaches, approaches the viewer and reattaches, an exploded assembly with labelled internal components, macro lens detail with working aperture blades, a photography gallery, a specifications table, and a final reassembly into a cinematic hero shot with a closing headline.

The site is a presentation surface, not a store. It exists to make a visually literate, template-fatigued audience feel awe and instrument-lust toward a piece of precision optical hardware, and to present the photographer's work as data-grade evidence of what the instrument does.

Audience. The single accepted active human persona is the Portfolio Visitor — anyone evaluating the camera and the photographer's work: photography clients, brand partners, and press. They arrive with no account, scroll one page, interact with the 3D camera, browse the gallery, and read the specifications.

Delivery shape. One responsive scrolling page. No extra pages, no login, no shopping cart, no checkout.

2. System Overview

3d-camera-portfolio is delivered as a single responsive scrolling page — Landing — that is publicly reachable with no identity, no account, and no session. The page is composed of eight ordered, scroll-animated sections (01 HERO through 08 REVEAL) that share one full-bleed WebGL canvas. HTML content floats above that canvas in a fixed HUD grid; the canvas is pinned while sections scroll over it, and a single continuous GSAP ScrollTrigger timeline scrubs the camera's state.

Actors.

• Portfolio Visitor (active human persona, closed catalog): scrolls the page, rotates and zooms the camera in the design section, watches the lens detach and reattach, explores the exploded assembly and its labels, watches the aperture blades iris, browses the photography gallery, and reads the specifications.
• Real-time 3D renderer (system process, non-persona): the WebGL/R3F scene that renders the camera, materials, lighting, haze and particles, and that executes the scrubbed camera timeline.
• Scroll/animation controller (system process, non-persona): the GSAP ScrollTrigger timeline that maps scroll position to camera state and drives HUD counters, leader lines and the section index.

Accepted behavior. Nine scroll-animated sections of accepted content, interactive 3D rotation and zoom in the camera-design section, a five-stage lens animation, a labelled exploded view, macro lens detail with irising aperture blades, a five-category photography gallery, a specifications table, and a final reassembly and hero orbit with a closing headline. All of it is reversible: scrolling back up plays every animation in reverse.

Ownership. All accepted human-facing behavior is owned by the single first-party page Landing. There is no provider-owned surface, no external destination, and no headless delivery in the current scope. The 3D renderer and the scroll controller are supporting system processes behind the Landing page's human interaction; they never own a visitor-facing capability on their own.

Narrow exclusions. No extra pages. No login. No shopping cart. No checkout. No stock photography, device mockups or flat clip art inside the 3D sections. No account management, no commerce, no CMS, no multi-page routing.

2a. Product Interpretation and Delivery Boundary

Delivery and access ownership. The product is a single first-party public page. It is anonymously reachable: a visitor opens the URL and the experience begins immediately. Because the source explicitly excludes login and the experience is a presentation of a camera and a portfolio rather than a durable per-person relationship, no application-owned identity, no account, and no session continuity are introduced. There is no private state to own, resume, or bind to a participant, so no first-use identity establishment, no returning verification, and no protected destination exist. The only access boundary is the public entry itself.

Current versus future. Everything in this document is current. The source names no future horizon, no roadmap item, and no deferred capability. The explicit exclusions — extra pages, login, shopping cart, checkout — are binding for the current generation and are not treated as future work.

What the product is not. It is not a shop, not a catalogue with purchasing, not a client portal, and not a multi-page marketing site. The camera is presented as an instrument to be inspected, not a SKU to be bought.

2b. Source Content Inventory

Not applicable. No reference directive in the supplied material declares a content_source, so no verified factual inventory is reproduced here. All camera specifications, gallery categories and headlines in this document are the exact items named by the user-authored requirement thread; no external factual entities, collections, contacts, links or media references were supplied for reproduction.

2c. Page Content and Component Coverage

Landing

The single page of the product. One full-bleed WebGL canvas is pinned behind the whole document; HTML content floats above it in a fixed 12-column HUD grid (24px gutters, 16px at 375px). A left-rail numbered section index (01 HERO … 08 REVEAL) doubles as a progress instrument and a jump control. A top rail carries the wordmark on the left and the section index on the right, both 11px uppercase.

Shared page-level information and state

• Current scroll progress through the eight-section timeline, expressed as the fill level of the left-rail index and of the hero's vertical scroll indicator.
• Current camera state: idle orbit, hero rotation, design inspection orientation and zoom, lens unlocked / detached / approaching / reattached, exploded, aperture iris position, reassembled hero orbit.
• Current section identity, used to dock the correct labels, spec highlight and gallery frame.
• Reduced-motion state: pinning dropped, one composed three-quarter still per section, aperture blades held at f/2.8, all reveals instant opacity changes.

Shared page-level actions

• Primary: scroll the page (forward and reverse) to drive the camera timeline.
• Primary: jump to a section via the left-rail numbered index.
• Supporting: rotate and zoom the camera in the Camera Design section.
• Supporting: select a gallery category to bring its image into the focus-bracket frame.

Shared domain entities

• Camera assembly: body, buttons, dials, grip, viewfinder, display, lens.
• Lens assembly: barrel, macro detail, optical glass elements, nine aperture blades.
• Internal components: lens, camera covers, sensor, shutter, circuit board, battery, internal components.
• Gallery item: category (portrait, landscape, wildlife, macro, night), image, EXIF readout.
• Specification row: label, tabular monospace value.
• Section index entry: number (01–08), name.

Shared component responsibilities

• Pinned 3D canvas: renders the camera, physically based materials, cinematic lighting, volumetric haze and dust particles; never scrolls past the viewport.
• Scroll timeline controller: one GSAP ScrollTrigger timeline per section, pinned and reversible, easing power2.inOut at 0.6–1.2s durations.
• HUD grid overlay: positions all readable text and controls in the 12-column grid, always inside the viewport and never covered by the canvas, leader lines or light sweeps.
• Left-rail section index: numbered 01–08, fills with cyan as each pinned section completes, acts as a jump control.
• Top rail: wordmark left, section index right, 11px uppercase.
• Micro-label system: 11px uppercase Space Grotesk at +0.28em tracking, paired with JetBrains Mono tabular numerals.

Section 01 — HERO

• Information/state: full-viewport black void; a single dramatic key light raking across the camera from upper-left with a cyan rim light behind it; the camera in three-quarter view filling the right 70% of the frame and bleeding past the right and bottom edges at desktop, cropped to a tighter front-three-quarter at 375px; a faint volumetric haze and dust-particle field catching the key light.
• Primary actions: scroll to begin the timeline; the camera performs a smooth rotation.
• Supporting actions: the vertical scroll indicator fills as the visitor scrolls.
• Components: bold headline "EVERY FRAME / IS ENGINEERED" bottom-left in columns 1–6, stacked in two flush-left lines with "ENGINEERED" in cyan, 44px mobile → 128px desktop; beneath it a 1px cyan rule and the monospace line 35mm · f/1.4 · 61MP · ISO 102400; bottom-right a vertical scroll indicator — a 64px cyan hairline that fills as you scroll, with "SCROLL" set vertically in 11px uppercase tracked type; top rail with wordmark and section index.
• States: loading — the 3D scene initialises and the headline, rule, spec line and scroll indicator are present and readable before the model resolves; empty — not applicable, the hero always has content; success — camera renders with key and rim lighting, idle orbit running at 0.04 rad/s, scroll indicator tracking; error — if WebGL is unavailable or the model fails, the void, headline, cyan rule, spec line and scroll indicator remain fully readable and the page remains scrollable; recovery — the visitor can continue scrolling through all HTML sections, which remain complete without the canvas.

Section 02 — CAMERA DESIGN

• Information/state: the camera held in an inspectable pose; the currently inspected part is identified by a micro-label.
• Primary actions: interactive 3D rotation of the camera by pointer drag; interactive zoom.
• Supporting actions: scroll continues the timeline; the section index advances to 02.
• Components: the camera body, buttons, dials, grip, viewfinder, display and lens, each showcased as an inspectable element; a part label in 11px uppercase tracked type with a monospace value; the left-rail index.
• States: loading — the section's HTML labels are present while the model resolves; empty — not applicable; success — rotation and zoom respond to pointer input and every named part (body, buttons, dials, grip, viewfinder, display, lens) is reachable in the inspection; error — if pointer interaction is unavailable, the camera holds a composed three-quarter still and all part labels remain readable; recovery — the visitor scrolls on and the timeline continues from the held pose.

Section 03 — LENS ANIMATION

• Information/state: the lens progresses through five ordered stages — unlocking, rotating, detaching from the camera, moving closer to the viewer until the front element fills 60% of frame, and reattaching smoothly.
• Primary actions: scroll forward to advance the stages; scroll backward to reverse them.
• Supporting actions: the section index advances to 03.
• Components: the lens assembly and its mount; a stage micro-label; the left-rail index.
• States: loading — the stage label is present while the lens geometry resolves; empty — not applicable; success — all five stages play in order on forward scroll and play in reverse on reverse scroll, ending with the lens reattached; error — if the timeline cannot run, the lens holds a composed still and the stage labels remain readable; recovery — reverse scrolling restores the attached state and the visitor continues to the next section.

Section 04 — EXPLODED VIEW

• Information/state: the assembly separated outward along its axes, floating in volumetric haze, with each separated part labelled.
• Primary actions: scroll to control the separation and reassembly.
• Supporting actions: the section index advances to 04.
• Components: the lens, camera covers, sensor, shutter, circuit board, battery and internal components, each separated and labelled; absolutely positioned callouts with 1px cyan leader lines that draw themselves on scroll and always terminate at a label inside the safe area; at 375px the callouts collapse to a stacked list beneath the canvas; the left-rail index.
• States: loading — the stacked label list is present while the assembly resolves; empty — not applicable; success — every named part separates, its leader line draws, and its label is fully readable inside the viewport at 375px, 768px and 1280px; error — if leader lines cannot draw, the stacked label list beneath the canvas carries every part name; recovery — reverse scrolling reassembles the parts and the visitor continues.

Section 05 — LENS TECHNOLOGY

• Information/state: macro lens detail at close range; realistic optical glass with refraction and a subtle bloom at grazing angles; nine aperture blades irising between f/1.4 and f/16, their edges catching the amber accent light as they cross.
• Primary actions: scroll to drive the aperture blades open and closed.
• Supporting actions: the section index advances to 05.
• Components: the macro lens detail view; the optical glass elements; the nine-blade aperture mechanism; a monospace aperture readout; the left-rail index.
• States: loading — the aperture readout is present while the glass and blades resolve; empty — not applicable; success — the blades visibly open and close with scroll and the readout tracks the current aperture; error — if the mechanism cannot animate, the blades hold a composed position and the readout remains readable; recovery — reverse scrolling returns the blades to their starting aperture.

Section 06 — PHOTOGRAPHY GALLERY

• Information/state: five full-bleed images — portrait, landscape, wildlife, macro and night — cross-fading inside a cyan focus-bracket frame with an EXIF readout in monospace. This is the only section where photography appears; it is treated as data.
• Primary actions: select a category to bring its image into the frame; scroll to advance the cross-fade.
• Supporting actions: the section index advances to 06.
• Components: the focus-bracket frame; the five category images; the category selector; the monospace EXIF readout; the left-rail index.
• States: loading — the frame, category labels and EXIF readout are present while images load; empty — if an image is unavailable, the frame, its category label and the EXIF readout remain readable; success — each of the five categories can be brought fully into the frame with an elegant cross-fade and a readable EXIF readout; error — a failed image leaves the frame, label and readout intact; recovery — the visitor selects another category or scrolls on.

Section 07 — SPECIFICATIONS

• Information/state: a ruled HUD data table — label left, tabular monospace value right, hairline cyan dividers, no cards and no tiles — with a single amber highlight on the value currently in view.
• Primary actions: scroll to move the amber highlight through the table.
• Supporting actions: the section index advances to 07.
• Components: rows for camera resolution, sensor, ISO, autofocus, video capabilities, lens compatibility and dimensions; tabular JetBrains Mono values; hairline cyan dividers; the amber in-view highlight; the left-rail index.
• States: loading — the table renders as static readable text immediately; empty — not applicable, all seven rows are always present; success — every row's label and value are fully readable at 375px, 768px and 1280px and the amber highlight tracks the in-view value; error — if the highlight cannot track, the table remains fully readable without it; recovery — scrolling back moves the highlight back.

Section 08 — FINAL REVEAL

• Information/state: all components reassembled; the complete camera rotating into a cinematic hero shot.
• Primary actions: scroll to complete the reassembly and the final orbit.
• Supporting actions: the section index completes at 08; the closing headline resolves.
• Components: the reassembled camera; the final hero orbit; the powerful closing headline; the completed left-rail index.
• States: loading — the closing headline is present while the final assembly resolves; empty — not applicable; success — every component is reassembled, the camera completes its cinematic hero rotation, and the closing headline is fully readable; error — if the final orbit cannot run, the reassembled camera holds a composed hero still and the closing headline remains readable; recovery — reverse scrolling returns the visitor to the exploded state and the timeline replays.

3. Functional Requirements

FR-01 — Single-page 3D camera portfolio (explicit) As a Portfolio Visitor, I should experience the entire camera portfolio on one responsive scrolling page, so that I can move continuously through the presentation without navigating away.

• Trigger/input: opening the site URL.
• Observable result: one page containing the eight ordered sections 01 HERO through 08 REVEAL, with no additional pages, no login, no shopping cart and no checkout.
• Access state: public, anonymous, no identity required.
• Failure/recovery: if any section's 3D content fails, the remaining sections and their readable content stay intact and scrollable.
• Continuation: the visitor scrolls from section 01 through section 08 and back.

FR-02 — Realistic models, cinematic lighting and smooth scroll-based animation (explicit) As a Portfolio Visitor, I should see realistic 3D models under cinematic lighting with smooth scroll-based animation, so that the camera reads as a real precision instrument rather than an illustration.

• Trigger/input: scrolling the page.
• Observable result: physically based materials (textured magnesium-alloy body, knurled rubber grip, sapphire-coated multi-coated glass with real refraction and subtle bloom at grazing angles, anodised aluminium dials with engraved numerals), a dramatic key light with a cyan rim light, volumetric haze and a dust-particle field, and a continuous camera timeline scrubbed by scroll.
• Access state: public.
• Failure/recovery: if the WebGL scene cannot render, the page degrades to its complete readable HTML content.
• Continuation: the timeline continues into the next section.

FR-03 — Hero section (explicit) As a Portfolio Visitor, I should see a highly realistic 3D camera with dramatic lighting, smooth rotation, a bold headline and a scroll indicator, so that I immediately understand this is a cinematic presentation of a professional camera.

• Trigger/input: landing on the page.
• Observable result: the camera in three-quarter view filling the right 70% of the frame and bleeding past the right and bottom edges at desktop, cropped to a tighter front-three-quarter at 375px; a slow idle orbit at 0.04 rad/s; the headline "EVERY FRAME / IS ENGINEERED" bottom-left in columns 1–6 with "ENGINEERED" in cyan; a 1px cyan rule and the monospace line 35mm · f/1.4 · 61MP · ISO 102400; a 64px cyan vertical scroll indicator that fills as the visitor scrolls, with "SCROLL" set vertically in 11px uppercase tracked type.
• Access state: public.
• Failure/recovery: if the model or WebGL fails, the void, headline, rule, spec line and scroll indicator remain fully readable and the page remains scrollable.
• Continuation: scrolling advances to section 02.

FR-04 — Camera design section with interactive rotation and zoom (explicit) As a Portfolio Visitor, I should inspect the camera body, buttons, dials, grip, viewfinder, display and lens with interactive 3D rotation and zoom, so that I can examine the hardware the way I would handle it in person.

• Trigger/input: pointer drag to rotate; pointer zoom input to zoom.
• Observable result: the camera rotates and zooms in response, and each named part — body, buttons, dials, grip, viewfinder, display, lens — is showcased and identifiable.
• Access state: public.
• Failure/recovery: if pointer interaction is unavailable, the camera holds a composed three-quarter still with all part labels readable.
• Continuation: the visitor scrolls on and the timeline resumes from the held pose.

FR-05 — Lens animation section (explicit) As a Portfolio Visitor, I should watch the lens unlock, rotate, detach from the camera, move closer to the viewer and reattach smoothly, so that I can appreciate the lens mount as a mechanical event.

• Trigger/input: scrolling through section 03.
• Observable result: five ordered stages — unlock, twist 90°, detach, translate toward the viewer until the front element fills 60% of frame, reattach smoothly.
• Access state: public.
• Failure/recovery: if the timeline cannot run, the lens holds a composed still with stage labels readable.
• Continuation: the lens ends reattached and the visitor continues to section 04.

FR-06 — Exploded view section (explicit) As a Portfolio Visitor, I should see the lens, camera covers, sensor, shutter, circuit board, battery and internal components separated with labels and scroll-controlled animations, so that I can understand what is inside the camera.

• Trigger/input: scrolling through section 04.
• Observable result: the assembly separates outward along its axes in volumetric haze; each named part carries a label; 1px cyan leader lines draw themselves on scroll and terminate at labels inside the safe area; at 375px the callouts collapse to a stacked list beneath the canvas.
• Access state: public.
• Failure/recovery: if leader lines cannot draw, the stacked label list beneath the canvas carries every part name.
• Continuation: reverse scrolling reassembles the parts; forward scrolling continues to section 05.

FR-07 — Lens technology section (explicit) As a Portfolio Visitor, I should see macro lens details, realistic optical glass and working aperture blades opening and closing, so that I can see the optics behave like real optics.

• Trigger/input: scrolling through section 05.
• Observable result: macro lens detail at close range; optical glass with real refraction and subtle bloom at grazing angles; nine aperture blades rotating and closing from f/1.4 to f/16 with their edges catching the amber accent light; a monospace aperture readout tracking the current value.
• Access state: public.
• Failure/recovery: if the mechanism cannot animate, the blades hold a composed position and the readout remains readable.
• Continuation: reverse scrolling returns the blades to their starting aperture; forward scrolling continues to section 06.

FR-08 — Photography gallery section (explicit) As a Portfolio Visitor, I should see portrait, landscape, wildlife, macro and night photography with elegant transitions, so that I can judge the photographer's work.

• Trigger/input: selecting a category or scrolling through section 06.
• Observable result: five full-bleed images cross-fading inside a cyan focus-bracket frame with an EXIF readout in monospace; each of the five categories can be brought fully into the frame.
• Access state: public.
• Failure/recovery: if an image is unavailable, the frame, its category label and the EXIF readout remain readable.
• Continuation: the visitor selects another category or scrolls on to section 07.

FR-09 — Specifications section (explicit) As a Portfolio Visitor, I should read camera resolution, sensor, ISO, autofocus, video capabilities, lens compatibility and dimensions in a premium layout, so that I can evaluate the hardware on its numbers.

• Trigger/input: scrolling through section 07.
• Observable result: a ruled HUD data table with label left, tabular monospace value right, hairline cyan dividers, no cards and no tiles, and a single amber highlight on the value currently in view; all seven named rows present.
• Access state: public.
• Failure/recovery: if the highlight cannot track, the table remains fully readable without it.
• Continuation: the visitor scrolls on to section 08.

FR-10 — Final reveal section (explicit) As a Portfolio Visitor, I should see all components reassemble, the complete camera rotate into a cinematic hero shot, and a powerful closing headline, so that the presentation ends on a resolved, cinematic note.

• Trigger/input: scrolling through section 08.
• Observable result: every component reassembled; the complete camera rotating into a cinematic hero shot; a powerful closing headline fully readable.
• Access state: public.
• Failure/recovery: if the final orbit cannot run, the reassembled camera holds a composed hero still and the closing headline remains readable.
• Continuation: reverse scrolling returns the visitor to the exploded state and replays the timeline.

FR-11 — Reverse-scroll animations (explicit) As a Portfolio Visitor, I should have every animation play in reverse when I scroll back up, so that the presentation stays coherent in both directions.

• Trigger/input: scrolling upward.
• Observable result: each pinned, reversible GSAP ScrollTrigger timeline plays backward — the lens reattaches in reverse order, the exploded assembly closes, the aperture blades reopen, the section index unfills.
• Access state: public.
• Failure/recovery: if a timeline cannot reverse, the section holds its composed still and the visitor can continue scrolling.
• Continuation: the visitor can move freely in either direction at any point.

FR-12 — Optimized 3D performance and smooth transitions (explicit) As a Portfolio Visitor, I should experience optimized 3D performance and smooth transitions, so that the cinematic presentation never stutters into a slideshow.

• Trigger/input: continuous scrolling and pointer interaction.
• Observable result: the camera never fully stops — a slow idle orbit at 0.04 rad/s runs under everything; easing is power2.inOut with 0.6–1.2s durations and nothing bounces; light sweeps trace the top plate on scroll velocity; HUD numbers count up as they enter.
• Access state: public.
• Failure/recovery: if frame rate degrades, the timeline still advances with scroll and all readable content remains intact.
• Continuation: the visitor continues through the sections.

FR-13 — Responsive single-page layout with readable text and controls (explicit) As a Portfolio Visitor, I should have the whole experience work on a responsive scrolling page with all readable text and controls kept whole, so that I can read and operate everything at any viewport.

• Trigger/input: viewing at 375px, 768px and 1280px.
• Observable result: the 12-column HUD grid uses 24px gutters (16px at 375px); headlines, wordmarks, labels, numbers and controls stay entirely inside the viewport and their container, wrapping or scaling with clamp() to fit; no canvas, callout leader line or light sweep covers any part of them; exploded-view callouts collapse to a stacked list beneath the canvas at 375px; no label is rendered under 11px or cropped by the viewport edge.
• Access state: public.
• Failure/recovery: if a label cannot fit inline, it wraps or moves to the stacked list rather than being cropped.
• Continuation: the visitor continues scrolling at any breakpoint.

FR-14 — Reduced-motion presentation (explicit, from the accepted creative direction) As a Portfolio Visitor who prefers reduced motion, I should get a usable static arrangement, so that I can read and use the whole page without scroll-scrubbed animation.

• Trigger/input: the operating system's prefers-reduced-motion setting.
• Observable result: pinning is dropped; the camera holds one composed three-quarter still per section; aperture blades sit at f/2.8; all reveals become instant opacity changes; every section's readable content and controls remain fully available.
• Access state: public.
• Failure/recovery: not applicable — the static arrangement is the fallback.
• Continuation: the visitor scrolls through all eight sections as ordinary static content.

FR-15 — No extra pages, login, shopping cart or checkout (explicit) As a Portfolio Visitor, I should never be asked to navigate to another page, sign in, add anything to a cart or check out, so that the experience stays a pure presentation.

• Trigger/input: any interaction on the page.
• Observable result: no additional route, no authentication surface, no cart, no checkout exists anywhere in the product.
• Access state: public, anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor remains on the single page.

4. User Personas

Portfolio Visitor

Product context. The Portfolio Visitor arrives at a premium, single-page 3D camera portfolio from a link, a search, or a referral. They are visually literate and jaded by template portfolios — they have seen the same hero-plus-cards layout a hundred times. They are evaluating a professional camera and the photographer's work behind it: as a photography client deciding whether to commission, as a brand partner assessing fit, or as press looking for something worth writing about. They arrive with no account and no intention of creating one.

Primary goal. To be impressed — to come away with a felt sense of awe and instrument-lust toward a piece of precision optical hardware, and with concrete evidence of what that hardware produces.

Distinct accepted responsibilities. The Portfolio Visitor is the sole active human actor, and their work is inspection and evaluation, not transaction:

• Scroll the single page forward and backward, driving one continuous camera timeline.
• Rotate and zoom the camera in the Camera Design section to examine the body, buttons, dials, grip, viewfinder, display and lens.
• Watch the lens unlock, rotate, detach, approach and reattach in the Lens Animation section.
• Explore the exploded assembly and read the labels for the lens, camera covers, sensor, shutter, circuit board, battery and internal components.
• Watch the macro lens detail and the nine aperture blades open and close in the Lens Technology section.
• Browse the portrait, landscape, wildlife, macro and night photography in the gallery and read the EXIF data.
• Read the specifications table: resolution, sensor, ISO, autofocus, video capabilities, lens compatibility, dimensions.
• Reach the final reassembly and closing headline.

Relevant inputs and decisions. The visitor's inputs are scroll position, pointer drag, pointer zoom, and gallery category selection. Their decisions are informal but real: whether to keep scrolling or leave, whether to linger on the camera design or the exploded view, whether the gallery images justify the hardware claims, and whether the specifications hold up against the impression the 3D presentation created.

Interactions with other accepted participants. There are no other accepted human participants. The visitor interacts with two system processes that serve them: the real-time 3D renderer that draws the camera, and the scroll/animation controller that maps their scroll to camera state. Neither acts on the visitor's behalf or makes decisions for them; both are instruments the visitor drives.

Observable success. The visitor scrolls from 01 HERO to 08 REVEAL, has rotated and zoomed the camera at least once, has seen the lens detach and reattach, has read at least some exploded-view labels, has watched the aperture blades move, has brought gallery images into the focus-bracket frame, has read the specifications table, and has seen the final reassembly and closing headline — all without ever leaving the page, signing in, or encountering a cart or checkout.

What makes this role distinct. The Portfolio Visitor is not a buyer, not an account holder, and not an operator of a tool. Their entire relationship with the product is perceptual and evaluative, conducted in a single anonymous session on a single page. There is no state to save, no preference to persist, no commitment to record, and no second participant to hand off to. That is precisely why the product has no identity, no cart and no checkout: the visitor's only job is to look, and to be convinced.

5. Core User Flows

Flow 1 — Arriving and reading the hero

1. The Portfolio Visitor opens the site URL. No login, no gate, no interstitial — the Landing page begins loading immediately.
2. The black void (#05070B) fills the viewport. The headline "EVERY FRAME / IS ENGINEERED" is already readable bottom-left in columns 1–6, with "ENGINEERED" in cyan, above a 1px cyan rule and the monospace line 35mm · f/1.4 · 61MP · ISO 102400.
3. The 3D camera resolves in three-quarter view, filling the right 70% of the frame and bleeding past the right and bottom edges at desktop; at 375px it is cropped to a tighter front-three-quarter. A dramatic key light rakes across it from upper-left with a cyan rim light behind, and a faint volumetric haze and dust field catch the light.
4. The camera begins its slow idle orbit at 0.04 rad/s and never fully stops.
5. The visitor notices the 64px cyan vertical scroll indicator bottom-right, filling as they scroll, with "SCROLL" set vertically in 11px uppercase tracked type.
6. Failure path: if WebGL is unavailable or the model fails to load, the void, headline, cyan rule, spec line and scroll indicator remain fully readable and the page remains scrollable. The visitor loses the 3D camera but not the presentation.
7. Continuation: the visitor scrolls down and the timeline advances to section 02.

Flow 2 — Inspecting the camera design

1. The visitor scrolls into section 02. The left-rail index advances to 02 and fills with cyan.
2. The camera settles into an inspectable pose. Part labels in 11px uppercase tracked type identify the body, buttons, dials, grip, viewfinder, display and lens.
3. The visitor drags with the pointer to rotate the camera and uses pointer zoom to move in. The camera responds directly — this is the one section where the visitor's hand, not the scroll, controls the object.
4. The visitor examines the textured magnesium-alloy body, the knurled rubber grip, the anodised aluminium dials with engraved numerals, the viewfinder and the display.
5. Failure path: if pointer interaction is unavailable, the camera holds a composed three-quarter still and every part label remains readable.
6. Continuation: the visitor scrolls on; the timeline resumes from the held pose and advances to section 03.

Flow 3 — Watching the lens detach and reattach

1. The visitor scrolls into section 03. The index advances to 03.
2. The lens unlocks and twists 90°.
3. The lens detaches from the camera body.
4. The lens translates toward the viewer until the front element fills 60% of the frame — the visitor is now looking into the glass.
5. The lens reattaches smoothly, seating back onto the mount.
6. Reverse path: if the visitor scrolls back up at any point, all five stages play in reverse — the lens detaches again, retreats, and reattaches as the visitor moves back through the section.
7. Failure path: if the timeline cannot run, the lens holds a composed still with stage labels readable.
8. Continuation: the visitor scrolls on to section 04.

Flow 4 — Exploring the exploded assembly

1. The visitor scrolls into section 04. The index advances to 04.
2. The assembly separates outward along its axes and floats in volumetric haze.
3. The lens, camera covers, sensor, shutter, circuit board, battery and internal components each move to their own position.
4. 1px cyan leader lines draw themselves on scroll, each terminating at a label inside the safe area. The visitor reads the part names.
5. At 375px, the callouts collapse to a stacked list beneath the canvas so every label stays fully readable and uncropped.
6. Reverse path: scrolling back up reassembles the parts in reverse.
7. Failure path: if leader lines cannot draw, the stacked label list beneath the canvas still carries every part name.
8. Continuation: the visitor scrolls on to section 05.

Flow 5 — Watching the aperture blades work

1. The visitor scrolls into section 05. The index advances to 05.
2. The macro lens detail comes into close range. The optical glass shows real refraction and a subtle bloom at grazing angles.
3. Nine aperture blades rotate and close from f/1.4 to f/16 as the visitor scrolls, their edges catching the amber accent light as they cross.
4. A monospace aperture readout tracks the current value.
5. Reverse path: scrolling back up reopens the blades toward f/1.4.
6. Failure path: if the mechanism cannot animate, the blades hold a composed position and the readout remains readable.
7. Continuation: the visitor scrolls on to section 06.

Flow 6 — Browsing the photography gallery

1. The visitor scrolls into section 06. The index advances to 06. This is the only section where photography appears.
2. Five full-bleed images — portrait, landscape, wildlife, macro and night — cross-fade inside a cyan focus-bracket frame.
3. The visitor selects a category to bring its image fully into the frame; the transition is an elegant cross-fade, not a hard cut.
4. A monospace EXIF readout accompanies the framed image, treating the photograph as data.
5. Failure path: if an image is unavailable, the frame, its category label and the EXIF readout remain readable.
6. Continuation: the visitor selects another category or scrolls on to section 07.

Flow 7 — Reading the specifications

1. The visitor scrolls into section 07. The index advances to 07.
2. A ruled HUD data table renders: label left, tabular monospace value right, hairline cyan dividers. No cards, no tiles.
3. The visitor reads camera resolution, sensor, ISO, autofocus, video capabilities, lens compatibility and dimensions.
4. A single amber highlight marks the value currently in view, moving as the visitor scrolls.
5. Failure path: if the highlight cannot track, the table remains fully readable without it.
6. Continuation: the visitor scrolls on to section 08.

Flow 8 — The final reveal

1. The visitor scrolls into section 08. The index completes at 08.
2. Every component reassembles — the exploded assembly closes back into a whole camera.
3. The complete camera rotates into a cinematic hero shot.
4. A powerful closing headline resolves and is fully readable.
5. Reverse path: scrolling back up returns the visitor to the exploded state and replays the timeline.
6. Failure path: if the final orbit cannot run, the reassembled camera holds a composed hero still and the closing headline remains readable.
7. Completion: the visitor has seen the whole instrument, from hero rotation through disassembly to reassembly, without leaving the page.

Flow 9 — Reduced-motion visit

1. A visitor whose system requests reduced motion opens the site.
2. Pinning is dropped. The camera holds one composed three-quarter still per section instead of scrubbing.
3. The aperture blades sit at f/2.8 rather than irising.
4. All reveals become instant opacity changes.
5. Every section's readable content and controls remain fully available: the headline, spec line, part labels, exploded-view stacked label list, gallery frame with EXIF readout, the full specifications table, and the closing headline.
6. The visitor scrolls through all eight sections as ordinary static content and reaches the same complete presentation.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — Cinematic future-tech: a black-void stage where the camera is a machine you inspect. The camera is presented like a concept vehicle, not a shop listing.

Mode. Dark only. There is no light mode; the void is the product.

Colour tokens (exact hex, by role).

Explicitly avoided. Any blue–indigo primary (#0057FF, #2563EB, #4F46E5) on a white or near-white ground. Gradient blobs. Glassmorphic marketing cards. Blue-on-white anywhere.

Typography.

• Headings: Space Grotesk — wide geometric display, uppercase, tracking +0.02em on display sizes, weights 500–700 only (never 300 — it vanishes on black). Headlines are set as stacked lines that break mid-phrase like a spec sheet, with the final word in cyan.
• Body: Sora.
• Numerals: always tabular, set in JetBrains Mono for spec values and frame counts.
• Micro-labels: 11px uppercase Space Grotesk at +0.28em tracking, paired with monospace numerals.
• Type scale: 1.25 modular with a display tier — hero headline 44px mobile → 128px desktop (clamp); section headlines 28 → 56px; lede 18 → 22px; body 15 → 17px; micro-label 11 → 12px.

Shape language. Zero-radius rectangles and 1px luminous strokes — a machined instrument, not a soft app. Panels are thin-bordered glass: rgba(233,238,245,0.06) fill, 1px rgba(127,227,255,0.35) border, 8px backdrop blur, floating over the void. Circular gauges, focus-bracket corners, crosshair ticks and dial-like arcs echo the camera's own geometry. Buttons are pill-shaped but tiny and outlined in cyan; the only filled shape on the page is the amber shutter ring. Diagonal 1px guide lines cross section boundaries like a HUD.

Spacing rhythm. A fixed 12-column HUD grid with 24px gutters (16px at 375px). Sections are full-viewport and pinned. Labels dock to the left rail; spec rows are ruled with hairline cyan dividers and generous vertical rhythm rather than card padding.

Imagery style. The 3D camera is the only image in the first six sections — no stock photography, no clip art, no device mockups. Materials are physically based: textured magnesium-alloy body, knurled rubber grip, sapphire-coated multi-coated glass with real refraction and a subtle bloom at grazing angles, anodised aluminium dials with engraved numerals. Section 07 (gallery) is the only place for photography, treated as data: five full-bleed images cross-fading inside a cyan focus-bracket frame with a monospace EXIF readout. A faint volumetric haze and a dust-particle field catch the key light in the void.

7. Signature Design Concept

The pinned instrument stage.

The public entry is not a hero image with a headline above it. It is a single full-viewport black void in which a real-time 3D camera is handled rather than illustrated.

The camera occupies the right two-thirds of the frame in three-quarter view, bleeding past the right and bottom edges at desktop and cropped to a tighter front-three-quarter at 375px. A single dramatic key light rakes across it from upper-left; a cyan rim light separates it from the void behind. A faint volumetric haze and a dust-particle field catch the key light, so the camera sits in air rather than on a background.

The headline "EVERY FRAME / IS ENGINEERED" sits bottom-left in columns 1–6, stacked in two flush-left lines, 44px on mobile and up to 128px on desktop, with "ENGINEERED" in cyan. It shares the frame with the camera instead of sitting above it. Beneath it, a 1px cyan rule and the monospace line 35mm · f/1.4 · 61MP · ISO 102400. Bottom-right, a 64px cyan hairline fills as you scroll, with "SCROLL" set vertically in 11px uppercase tracked type. Top rail: wordmark left, section index right, both 11px uppercase.

The signature move is that this stage never leaves. The camera does not scroll past the viewport — HTML sections scroll over a fixed canvas while one continuous GSAP ScrollTrigger timeline scrubs the camera's state. The same object that greets you in the hero is the object you rotate in section 02, the object whose lens detaches in section 03, the object that explodes in section 04, whose blades iris in section 05, and which reassembles into the final hero orbit in section 08. The left-rail numbered index (01 HERO … 08 REVEAL) fills with cyan as each pinned section completes, doubling as a progress instrument and a jump control.

There is no centred stack, no gradient blob, no blue button, and no floating product render on a white ground. The void is the composition.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: a single real-time 3D professional camera in three-quarter view, filling the right 70% of the frame and bleeding past the right and bottom edges at desktop, cropped to a tighter front-three-quarter at 375px — a physically based magnesium-alloy body with a knurled rubber grip, anodised aluminium dials with engraved numerals, and sapphire-coated multi-coated glass.
• Input → transformation → outcome thesis: the visitor's scroll position is the input; it is mapped continuously onto one GSAP ScrollTrigger timeline that transforms the camera's rotation, lens state, assembly state and aperture iris; the outcome is that the camera appears to be handled by the visitor rather than illustrated for them — it never fully stops, holding a slow idle orbit at 0.04 rad/s under everything.
• Motion vocabulary: cinematic and continuous. Easing is power2.inOut with 0.6–1.2s durations; nothing bounces. Light sweeps trace the top plate on scroll velocity. HUD numbers count up as they enter. The camera rotates → the lens unlocks (twist 90°, then translate +Z toward the viewer until the front element fills 60% of frame) → reattaches → explodes outward along axes → the nine aperture blades iris 9→2 → reassembles → final hero orbit.
• Composed first frame: the void at #05070B; the camera three-quarter right, key light raking from upper-left, cyan rim light behind, haze and dust catching the light; "EVERY FRAME / IS ENGINEERED" bottom-left in columns 1–6 with "ENGINEERED" in cyan; a 1px cyan rule and 35mm · f/1.4 · 61MP · ISO 102400 beneath it; the 64px cyan vertical scroll indicator bottom-right with "SCROLL" set vertically; wordmark left and section index right on the top rail.
• Reduced-motion state: pinning is dropped; the camera holds one composed three-quarter still per section; the aperture blades sit at f/2.8; all reveals become instant opacity changes. Every headline, label, spec value and control remains fully readable and operable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

The direction's hero dimensionality is webgl, so a real-time 3D hero is expected. One crafted real-time object carries it: a single professional camera assembly — body, buttons, dials, grip, viewfinder, display and lens — built with physically based materials (textured magnesium alloy, knurled rubber, sapphire-coated multi-coated glass with real refraction and subtle bloom at grazing angles, anodised aluminium with engraved numerals). The scene shows the product's defining state: a precision optical instrument under a single dramatic key light with a cyan rim light, floating in volumetric haze with a dust-particle field, rotating slowly and continuously. The camera is the only image in the first six sections; no stock photography, no clip art, no device mockups appear in the 3D sections.

9. Non-Functional Requirements

NFR-01 — Responsive single-page delivery (explicit) The entire experience is one responsive scrolling page. It must be usable and fully readable at 375px, 768px and 1280px. The 12-column HUD grid uses 24px gutters, reduced to 16px at 375px. Rationale: the source requires everything on one responsive scrolling page with no extra pages.

NFR-02 — Readable text and controls stay whole (explicit, from the accepted creative direction) Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No canvas, callout leader line, light sweep or other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut as the direction asks, as long as they cover no readable text or control. Exploded-view callouts collapse to a stacked list beneath the canvas at 375px. No label is rendered under 11px or cropped by the viewport edge. Rationale: the direction's readability rule takes precedence over any cropping gesture.

NFR-03 — Optimized 3D performance (explicit) The 3D scene must be optimized so that scroll-scrubbed animation and pointer interaction stay smooth. The camera never fully stops — a slow idle orbit at 0.04 rad/s runs under everything. Rationale: the source explicitly requires optimized 3D performance and smooth transitions.

NFR-04 — Realistic materials (explicit) Materials must be physically based: textured magnesium-alloy body, knurled rubber grip, sapphire-coated multi-coated glass with real refraction and a subtle bloom at grazing angles, anodised aluminium dials with engraved numerals. Rationale: the source explicitly requires realistic materials.

NFR-05 — Smooth, reversible transitions (explicit) Every animation must be smooth and reversible. Easing is power2.inOut with 0.6–1.2s durations; nothing bounces. Reverse scrolling plays every timeline backward. Rationale: the source explicitly requires reverse-scroll animations and smooth transitions.

NFR-06 — Reduced-motion accessibility (explicit, from the accepted creative direction) Under prefers-reduced-motion, pinning is dropped, the camera holds one composed three-quarter still per section, the aperture blades sit at f/2.8, and all reveals become instant opacity changes. Every section's readable content and controls remain fully available. Rationale: the direction mandates a usable static arrangement.

NFR-07 — Public anonymous access (explicit) The page is publicly reachable with no login, no account, and no session. No authentication surface exists. Rationale: the source explicitly excludes login, and no durable per-person state exists to justify identity.

NFR-08 — No commerce (explicit) No shopping cart and no checkout exist anywhere in the product. Rationale: the source explicitly excludes both.

NFR-09 — No extra pages (explicit) The product is exactly one page. No additional route, view or destination exists. Rationale: the source explicitly requires everything on one page with no extra pages.

NFR-10 — Graceful degradation (required_inference) If WebGL is unavailable or a 3D asset fails, the page's complete readable HTML content — headlines, spec line, part labels, exploded-view stacked label list, gallery frame with EXIF readout, the full specifications table, and the closing headline — remains present, readable and scrollable. Rationale: the source requires a usable presentation; a hard failure of the renderer must not remove the accepted content.

10. Tech Stack

All technology choices below are explicit user requirements and are preserved exactly.

• React — the UI framework for the single-page application.
• Three.js — the WebGL rendering layer for the 3D camera, materials, lighting, haze and particles.
• React Three Fiber — the React renderer for Three.js, used to compose the camera scene declaratively.
• GSAP ScrollTrigger — the scroll-driven animation system: one pinned, reversible timeline per section, scrubbing the continuous camera timeline.
• Tailwind CSS — the styling layer for the HUD grid, typography, panels, spec table and all readable content.

Supporting choices (defaults, not specified by user):

• Vite as the build tool and dev server for the React single-page app. [Default — not specified by user]
• Space Grotesk, Sora and JetBrains Mono loaded as web fonts to satisfy the accepted typographic direction. [Default — not specified by user]
• Static hosting of the built single-page bundle. The product has no server-side behavior, no database, no API, no authentication service and no commerce backend, so no backend service, container or orchestration layer is required. [Default — not specified by user]

11. Assumptions and Constraints

Hard constraints (explicit, binding).

• No extra pages. The product is exactly one page.
• No login. No authentication surface, no account, no session.
• No shopping cart.
• No checkout.
• Everything on one responsive scrolling page, with reverse-scroll animations, optimized 3D performance, realistic materials and smooth transitions.

Assumptions (narrow, labeled).

• A-01 [Assumption] The camera's specification values displayed in the Specifications section and the hero spec line are the values named by the source (35mm · f/1.4 · 61MP · ISO 102400 for the hero line; resolution, sensor, ISO, autofocus, video capabilities, lens compatibility and dimensions as the seven spec rows). No external factual source was supplied, so no additional verified values are invented.
• A-02 [Assumption] The five gallery categories — portrait, landscape, wildlife, macro, night — are the complete gallery set, as named by the source.
• A-03 [Assumption] The nine aperture blades and the f/1.4 → f/16 range come from the accepted creative direction, which specifies the irising mechanism; the source requires "working aperture blades opening and closing" without naming a blade count or range.
• A-04 [Assumption] The eight-section order (01 HERO, 02 CAMERA DESIGN, 03 LENS ANIMATION, 04 EXPLODED VIEW, 05 LENS TECHNOLOGY, 06 PHOTOGRAPHY GALLERY, 07 SPECIFICATIONS, 08 FINAL REVEAL) follows the order in which the source names the sections.
• A-05 [Assumption] The 3D camera model is authored for this project rather than sourced from a third-party asset library, since the source requires realistic models with specific named parts (body, buttons, dials, grip, viewfinder, display, lens, sensor, shutter, circuit board, battery).
• A-06 [Assumption] The site is delivered as a static single-page bundle; no server-side runtime is required because the product has no accounts, no commerce and no persistent per-visitor state.

Explicitly out of scope.

• Additional pages, routes or views of any kind.
• Login, accounts, profiles, or any identity surface.
• Shopping cart, checkout, pricing, or any commerce capability.
• Stock photography, device mockups or flat clip art inside the 3D sections.
• Any CMS, admin surface, or content-editing capability.

12. Glossary

• Portfolio Visitor — The single accepted active human persona: anyone evaluating the camera and the photographer's work, arriving anonymously and scrolling one page.
• Landing — The single page of the product; the public entry surface that owns all accepted human-facing behavior.
• Pinned 3D stage — The signature interaction: a full-bleed WebGL canvas fixed behind the document while HTML sections scroll over it, so the camera appears handled rather than illustrated.
• ScrollTrigger timeline — The GSAP ScrollTrigger timeline, one per section, pinned and reversible, that maps scroll position to camera state.
• Idle orbit — The slow continuous rotation of the camera at 0.04 rad/s that runs under everything so the camera never fully stops.
• Lens animation — The five ordered stages in section 03: unlocking, rotating, detaching from the camera, moving closer to the viewer until the front element fills 60% of frame, and reattaching smoothly.
• Exploded view — Section 04: the assembly separated outward along its axes with labelled parts — lens, camera covers, sensor, shutter, circuit board, battery and internal components — floating in volumetric haze.
• Leader line — A 1px cyan line that draws itself on scroll from an exploded-view part to its label, always terminating inside the safe area.
• Aperture blades — The nine-blade irising mechanism in section 05 that rotates and closes from f/1.4 to f/16 with scroll, its edges catching the amber accent light.
• Focus-bracket frame — The cyan frame in the Photography Gallery inside which the five category images cross-fade with a monospace EXIF readout.
• HUD grid — The fixed 12-column overlay grid (24px gutters, 16px at 375px) that positions all readable text and controls above the canvas.

• Section index — The left-rail numbered index (01 HERO … 08 REVEAL) that fills with cyan as each pinned section completes and doubles as a jump control.
• Instrument light — The electric cyan #7FE3FF used for 1px strokes, focus brackets, aperture-blade glow, active scroll markers and leader lines.
• Hot accent — The amber #FFB35C, reserved for exactly one thing per screen: the shutter-release ring, the active spec value, the CTA underline, or the aperture blade edges catching light.
• Reduced-motion state — The static arrangement served under prefers-reduced-motion: pinning dropped, one composed three-quarter still per section, aperture blades at f/2.8, all reveals instant opacity changes.