System Requirements Document for childhood-photo-recent

1. Introduction

childhood-photo-recent is a single-purpose portrait-generation experience for creating one realistic composite photograph of a person as a child and as they are today. The requester supplies a childhood photo and a recent photo, then confirms the composition and visual direction. The intended result is a professional, minimal, emotionally communicative studio portrait that feels like a real photoshoot.

The current brief places the childhood version on the left, looking right with an innocent smile, with “1979” above her. The present-day version sits on the right with her hands under her chin, looking at the child with a calm smile, with “2026” above her. The background is plain and soft, and the lighting is soft and cinematic.

2. System Overview

The system is a custom, anonymous, single-purpose experience with five ordered pages: Landing, References, Composition, Generation, and Result. The sole active human persona is the Portrait Requester. The requester provides both reference photos, confirms the composition and visual direction, initiates generation, and views the resulting portrait. A generation service performs the image creation after the requester starts it.

The current product outcome is one composite portrait image. The system must preserve the requested left-right arrangement, year labels, expressions, pose, studio background, lighting, emotional photography style, and real-photoshoot appearance. The present-day portrait’s appearance follows the recent reference photo.

The experience does not require an account or sign-in. The supplied page contract gives every page anonymous access. No additional personas, account-management functions, image-editing tools, or adjacent product capabilities are in scope.

2a. Product Interpretation and Delivery Boundary

The five supplied pages are the complete current page contract and remain in the supplied order. The requester can enter anonymously, provide the two photos, confirm the composition, start generation, and view the result. The generation service is responsible for completing image creation before the result is presented; the requester remains responsible for supplying the inputs and initiating the work.

The two supplied reference images are authoritative content sources: the childhood photo is the source for the child version, and the recent photo is the source for the present-day appearance. The newest visual-reference instruction does not request copying a website or page; it is image context only. It does not replace the explicit portrait requirements or authorize unrelated imagery or product behavior.

2b. Source Content Inventory

Childhood reference photo

• Source: chat_media/b817dc7d-c634-4e42-99ac-0fdc564c5b4b/d53bb02c_1000000109.png
• Use: authoritative source for the child version on the left.
• Visible content: a child with short dark hair, wearing a white top, photographed against a pale, worn background. The image includes the visible text “c. 1990” and “Restored: Studio...” near its lower-right corner.

Recent reference photo

• Source: chat_media/b817dc7d-c634-4e42-99ac-0fdc564c5b4b/3c7d876b_Picsart_26-09-26_07-30-52-159.png
• Use: authoritative source for the present-day version on the right and for the present-day portrait’s appearance.
• Visible content: a bald adult with a dark beard and mustache, wearing a dark top, photographed against a dark background.

2c. Page Content and Component Coverage

Landing

• Information and state: Introduces the single composite-portrait experience before image inputs or creation work. Shows the requested concept and an empty two-part studio-card preview that communicates the intended child-left/present-right composition.
• Primary action: “Begin” opens References.
• Supporting content: A concise explanation of the portrait outcome; the preview may show the “1979” and “2026” labels as part of the intended composition.
• Domain entities: Portrait brief; intended two-version composition.
• Components: Oversized editorial statement; restrained helper copy; one wide studio card with two equal image areas; primary action.
• States: Initial loading presents the page without blocking the entry action. Empty state shows the two unfilled portrait areas. Success is the requester’s transition to References. If the page cannot load, show a clear error and a way to retry or return to the entry state.

References

• Information and state: Collects the childhood reference photo and recent reference photo as separate inputs. The childhood image is used for the child version; the recent image guides the present-day appearance.
• Primary action: Provide both photos and continue to Composition.
• Supporting actions: Replace an input photo before continuing.
• Domain entities: Childhood reference photo; recent reference photo.
• Components: Two clearly labeled upload slots: “Childhood, 1979” and “Present, 2026”; image previews; continuation control.
• States: Empty slots identify the required photo for each version. Loading indicates an image is being accepted. Success shows each selected image in its corresponding slot. If an image cannot be accepted, identify the affected slot and allow the requester to retry or replace it. Continuation is available when both required references are provided.

Composition

• Information and state: Presents the composition and visual direction for confirmation before generation.
• Primary action: Confirm the brief and continue to Generation.
• Supporting content: The child is on the left, looking right with an innocent smile, with “1979” above; the present-day version is on the right, seated with hands under her chin, looking at the child with a calm smile, with “2026” above. The background is plain and soft, studio-style; lighting is soft and cinematic; style is professional, minimal, and emotional, focused on the feeling and visual communication between the two versions; the result should look like a real photoshoot. The recent photo guides the present-day appearance.
• Domain entities: Confirmed composition and visual direction; both reference photos.
• Components: Readable composition summary; two-version preview or equivalent visual arrangement; confirmation control.
• States: Loading presents the brief and references when available. Success records the requester’s confirmation and opens Generation. If the brief or references cannot be presented, show an error and allow recovery by returning to References or retrying the page.

Generation

• Information and state: Shows that the confirmed portrait is being created from the two supplied references and composition.
• Primary action: Start generation using the confirmed inputs and brief.
• Supporting content: Progress or status sufficient to show that generation is underway.
• Domain entities: Confirmed portrait brief; generation status; generated portrait when complete.
• Components: Clear generation status; restrained progress indication; result transition.
• States: Loading indicates generation is in progress. Success proceeds to Result only after the generation service completes. On failure, explain that the portrait could not be generated and provide a retry path using the confirmed inputs and brief.

Result

• Information and state: Presents the single generated composite portrait.
• Primary action: View the completed portrait.
• Supporting content: The image must reflect the confirmed composition and real-photoshoot direction. The result is the child on the left and present-day version on the right, with the specified years, expressions, pose, background, lighting, and emotional style.
• Domain entities: Generated composite portrait; confirmed portrait brief.
• Components: Prominent portrait presentation in a rounded frame; concise supporting metadata only where it describes the generated result.
• States: Loading while the completed image is being presented. Empty state is not a completed outcome; if no generated image is available, explain that generation has not completed and provide a return to Generation. Success displays the generated portrait. If the image cannot be displayed, show an error and allow retrying the result view or returning to Generation.

3. Functional Requirements

1. As a Portrait Requester, I should be able to understand the portrait experience and begin it.

   • Provenance: required_inference for the anonymous entry and start interaction; the portrait outcome is explicit.
   • Trigger and access: The requester opens Landing anonymously and selects “Begin.”
   • Observable result: The system opens References and makes clear that the experience creates one composite portrait from a childhood photo and a recent photo.
   • Failure and recovery: If Landing fails to load, the requester sees an error and can retry.
   • Continuation: The requester proceeds to provide the two reference photos.

2. As a Portrait Requester, I should be able to provide a childhood reference photo and a recent reference photo for the composite portrait.

   • Provenance: required_inference for providing the inputs; the use of the childhood photo and recent photo is explicit.
   • Trigger and access: On References, the requester supplies a childhood photo and a recent photo; access is anonymous.
   • Observable result: Each photo is associated with its intended version: childhood photo for the child version, recent photo for the present-day version and appearance.
   • Failure and recovery: If either image cannot be accepted, the system identifies the affected input and allows retry or replacement.
   • Continuation: Once both photos are provided, the requester proceeds to Composition.

3. As a Portrait Requester, I should be able to confirm the requested composition and visual direction before generation.

   • Provenance: required_inference for confirmation; the composition and visual direction are explicit.
   • Trigger and access: On Composition, the requester reviews and confirms the brief; access is anonymous.
   • Observable result: The confirmed brief specifies a single composite portrait with the child on the left, looking right with an innocent smile, and “1979” above; the present-day version on the right, seated with hands under her chin, looking at the child with a calm smile, and “2026” above; a plain, soft studio background; soft, cinematic lighting; professional, minimal, emotional photography focused on the feeling and visual communication between the two versions; and a real-photoshoot appearance. The recent photo guides the present-day appearance.
   • Failure and recovery: If the brief or references cannot be presented, the requester can retry or return to References.
   • Continuation: Confirmation opens Generation.

4. As a Portrait Requester, I should be able to start generation of the confirmed portrait and see whether it completes.

   • Provenance: required_inference for the generation handoff and observable status; the requested portrait is explicit.
   • Trigger and access: On Generation, the requester starts creation using the supplied references and confirmed brief; access is anonymous.
   • Observable result: The system indicates that generation is underway. The generation service completes before the portrait is presented.
   • Failure and recovery: If generation fails, the requester sees that it did not complete and can retry using the confirmed inputs and brief.
   • Continuation: On successful completion, the requester proceeds to Result.

5. As a Portrait Requester, I should be able to view the completed composite portrait.

   • Provenance: explicit for the single composite portrait and its specified visual requirements; required_inference for presenting the completed result.
   • Trigger and access: After generation completes, the requester opens Result anonymously.
   • Observable result: The generated image presents the child version on the left and present-day version on the right, with the specified years, expressions, pose, background, lighting, emotional photography style, and real-photoshoot appearance; the present-day appearance follows the recent reference photo.
   • Failure and recovery: If the result cannot be displayed, the requester sees an error and can retry the result view or return to Generation.
   • Continuation: The requester can view the completed portrait. No further result-management capability is specified.

4. User Personas

Portrait Requester

• Provenance: required_inference, as established by the accepted Planning Scope.
• Product context: The person commissioning a single composite portrait of herself as a child and as she is now.
• Primary goal: Receive a realistic, emotionally communicative studio portrait that follows her reference photos and composition brief.
• Distinct responsibilities: Provide the childhood and recent photos; confirm the composition and visual direction; start generation; view the completed portrait.
• Relevant inputs and decisions: Select the two reference photos and confirm the left-right arrangement, years, expressions, pose, background, lighting, and photography style.
• Interaction with other participants: The generation service processes the confirmed references and brief. The requester initiates that work and observes whether it succeeds.
• Observable success: A single composite portrait is presented with the child on the left and present-day version on the right, matching the requested appearance and real-photoshoot style.

5. Core User Flows

1. Begin the portrait experience

1. The Portrait Requester opens Landing without signing in.
2. The page explains the single composite-portrait outcome and shows the intended two-part studio composition.
3. The requester selects “Begin.”
4. The system opens References. If the entry page fails, the requester can retry.

2. Provide the two reference photos

1. The Portrait Requester arrives at References.
2. The requester supplies a childhood photo in “Childhood, 1979” and a recent photo in “Present, 2026.”
3. The system shows each photo in its corresponding slot; the recent photo is the source for the present-day appearance.
4. If either photo cannot be accepted, the requester sees which input needs attention and retries or replaces it.
5. Once both photos are present, the requester continues to Composition.

3. Confirm the composition and visual direction

1. The Portrait Requester reviews the brief on Composition.
2. The requester confirms the child on the left, looking right with an innocent smile, with “1979” above.
3. The requester confirms the present-day version on the right, seated with hands under her chin, looking at the child with a calm smile, with “2026” above.
4. The requester confirms the plain, soft studio background; soft, cinematic lighting; professional, minimal, emotional photography focused on the feeling and visual communication between the two versions; and real-photoshoot appearance. The recent photo guides the present-day appearance.
5. The system records the confirmed brief and opens Generation. If the brief or references cannot be presented, the requester retries or returns to References.

4. Generate the portrait

1. The Portrait Requester starts generation on Generation using the two supplied photos and confirmed brief.
2. The system indicates that generation is underway while the generation service creates the portrait.
3. If generation fails, the requester sees the failure and can retry with the confirmed inputs and brief.
4. When generation completes, the system opens Result.

5. View the completed portrait

1. The Portrait Requester opens Result after generation completes.
2. The system presents the single composite portrait.
3. The requester observes the child on the left and present-day version on the right, with the requested years, expressions, pose, background, lighting, emotional style, and real-photoshoot appearance.
4. If the image cannot be displayed, the requester retries the result view or returns to Generation.

6. Visuals Colors and Theme

The visual direction is “Quiet precision for a portrait that must feel real,” with Jony Ive as its named muse. The interface should feel like a well-lit photographer’s studio: calm, precise, warm, and visually subordinate to the two portraits. The emotional register is tender, cinematic, and slightly ceremonial.

• Light-mode palette: Warm paper ground #F4F2EF; white surface #FFFFFF; ink text and primary actions #1A1A1C; terracotta accent #B5654A; muted text #8C8880. Use terracotta only for the year labels, active step marker, and text links. Do not use blue or indigo.
• Typography: Fraunces for headings at light-to-regular optical weight (300–400), with -0.02em tracking. Inter Tight for body and utility text. Display scale: clamp(40px, 8vw, 100px); modular type scale: 18 / 24 / 32 / 42 / 56 / 75 / 100px. Body: 17px / 1.65. Labels: 13px uppercase with 0.12em tracking. Year labels: 14px uppercase with 0.18em tracking.
• Shape and spacing: Continuous soft curves: 20px card radii, 999px pill buttons and step pills, 12px inputs and image frames. Use hairline rules rather than decorative edges. Use a single-column focus, 1280px maximum content width, 96px desktop margins, and 24px mobile margins. Keep the step flow in a horizontal row of hairline-connected dots and labels.
• Image treatment: The two supplied photographs are the only product imagery. Present them in identical white studio cards with a soft warm-grey floor edge, as if lit by a large softbox at 45 degrees. Do not use stock people or illustrated avatars. A quiet paper-texture light gradient may appear as an atmospheric band, not as a substitute for the portrait imagery.
• Responsive readability: At 375px, 768px, and 1280px, keep all readable text, labels, numbers, cards’ text, and controls fully within the viewport and their containers. Wrap or scale content as needed; no other element may cover readable text or controls.
• Shadows and decoration: No shadow heavier than 0 1px 2px rgba(26,26,28,0.06). No glassmorphism, gradient-blob hero, mesh gradient, decorative blobs, or hard color blocks. Use no icons beyond a minimal 1.5px stroke set.
• Avoid: Generic indigo/blue-on-white SaaS styling; centered headline-and-button landing composition; a grid of identical hover-lift cards; bouncy or springy easing; particles, confetti, or playful motion around the photographs; and headings set in Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system UI.

7. Signature Design Concept

The Landing page opens as a two-panel studio stage on warm paper. A large Fraunces statement sits flush left in the upper-left quadrant: “Two versions of you, one photograph.” Beneath it, a short ink rule and muted helper line lead the eye to a single wide white studio card. The card is divided into two equal halves by a hairline, with identical inner image frames: childhood on the left and present-day on the right. The “1979” and “2026” labels sit above their respective halves in terracotta. A solid ink pill button labeled “Begin” sits at the card’s bottom-left. The composition uses only the accepted portrait concept and controls; it introduces no additional behavior or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated
Motion Tempo: restrained
Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: The empty two-part studio card representing the requested childhood and present-day portrait.
• Input → transformation → outcome thesis: The requester begins the experience; the two empty reference positions establish where the childhood and recent photos will be used; the outcome is a single composite portrait.
• Motion vocabulary: Slow, physical easing with cubic-bezier(0.22, 0.61, 0.36, 1) over 600–800ms for reveals and 200ms for control feedback. On scroll into view, the portrait card lifts 8px and fades from 0 to 1 opacity once, then remains still. The year labels fade in 120ms apart, left then right. Uploaded reference thumbnails cross-fade into their slots rather than popping. No bounce, particles, or floating.
• Composed first frame: Warm paper ground; oversized left-aligned Fraunces statement; short ink rule and muted helper copy; empty white two-up studio card with equal image areas; “1979” and “2026” labels; one ink “Begin” pill at the card’s bottom-left.
• Reduced-motion state: Stop nonessential animation and show the full composition and all readable content without motion. Keep all text and controls fully visible.

9. Non-Functional Requirements

1. Visual fidelity — explicit: The generated portrait must look as real as a real photoshoot, with professional, minimal, emotional photography focused on the feeling and visual communication between the two versions.
2. Composition fidelity — explicit: Preserve the child-left and present-right arrangement; the specified year labels, expressions, and present-day pose; the plain, soft studio background; and soft, cinematic lighting.
3. Reference fidelity — explicit: Use the childhood photo as the source for the child version and the recent photo as the source for the present-day version’s appearance.
4. Responsive readability — explicit in the creative direction: At 375px, 768px, and 1280px, readable text and controls must remain whole within the viewport and their containers. Imagery and decoration may be cropped as directed, but must not cover readable text or controls.
5. Motion restraint — explicit in the creative direction: Use the specified restrained motion vocabulary; avoid bounce, spring effects, particles, confetti, and floating motion around the photographs. Honor reduced-motion preferences by stopping motion and keeping content readable.
6. Anonymous access — required_inference from the versioned page contract: All five supplied pages have anonymous access. No account or sign-in is required for the accepted journey.

10. Tech Stack

• Frontend: React — [Default — not specified by user]
• Backend: Python/FastAPI — [Default — not specified by user]
• Image generation: A generation service must create the portrait from the supplied references and confirmed brief; the specific provider or technology is not specified.
• Storage: Appropriate storage for the supplied references and generated image — [Default — not specified by user]
• Deployment: Docker/docker-compose — [Default — not specified by user]

11. Assumptions and Constraints

• The supplied page contract is versioned and final: use Landing, References, Composition, Generation, and Result, in that order, with anonymous access.
• The requester supplies both a childhood reference photo and a recent reference photo. This is a required prerequisite for the accepted portrait outcome, not an additional product capability.
• The requester confirms the composition and visual direction before generation.
• The generation service completes before the portrait is presented.
• The years “1979” and “2026” are required labels in the requested composition. The childhood reference image’s visible “c. 1990” text is part of the source image, not a replacement for the requested “1979” label.
• The recent reference photo is authoritative for the present-day appearance. The supplied image depicts a bald adult with a dark beard and mustache; the portrait must follow the photo rather than infer a different appearance from the brief’s pronoun.
• No future requirements are specified.

12. Glossary

• Childhood reference photo: The supplied photo used as the source for the child version.
• Recent reference photo: The supplied photo used as the source for the present-day version’s appearance.
• Composite portrait: The single image combining the childhood and present-day versions in the requested composition.
• Confirmed brief: The requester-confirmed composition and visual direction used for generation.