# Click Save and cross-dissolve a full upload wizard into a small processing modal over the list page

Manual DaVinci Resolve / Fusion construction guide generated from the recipe. It is not a tested .drp.
The accompanying Remotion project (recipe.json) is the executable definition; the numbers below are copied from it.
Neither construction establishes source fidelity: this is an original vector approximation of an inspected editing moment.

## Source and clock
Reference: OpenAI's "Record & Replay in Codex" (ZK3JhU73W18), published 2026-06-18.
Source interval [985, 1049) on the 24000/1001 fps master: 64 frames, 2.669333 s. Local frame 0 = source frame 985.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 64 frames long. Keep integer frames; do not round the frame rate.
Background field: #f9f9f9. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A large upload wizard (title, four-step progress, 'Save or publish' radio list with Private selected, a video preview card and link, a footer with processing status and a dark Save button) sits over a channel content page. The pointer rests on Save and clicks at ~f18. From ~f20 the wizard fades out while a much smaller 'Video processing' modal (title, sentence, thumbnail row, progress line, Close) fades in centred over the page; by ~f32 only the modal remains. Nothing moves; the swap is purely opacity and the page behind is visible through both.

## Mechanism
Cross-dissolve between two differently sized modals on the same page after a confirm click.

## Phases (local frames)
- 0: Wizard open, pointer on Save
- 18: Save clicked
- 20: Wizard begins fading out
- 22: Processing modal begins fading in
- 32: Dissolve complete; modal only
- 64: Hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- page [rect] at (0, 0) size 1920x1080 fill #f9f9f9
- topbar [rect] at (0, 0) size 1920x64 fill #ffffff stroke #e5e7eb 1px
- search [rect] at (600, 16) size 700x32 radius 16 fill #f1f1f1
- nav [rect] at (0, 0) size 260x1080 fill #ffffff stroke #e5e7eb 1px
- avatar [ellipse] at (90, 90) size 80x80 fill #e5e7eb
- yourch [text] at (0, 190) size 260x0 text "Your channel" 15px weight 600 #111827
- nav0 [text] at (40, 260) text "Dashboard" 16px weight 400 #111827
- nav1 [text] at (40, 316) text "Content" 16px weight 600 #111827
- nav2 [text] at (40, 372) text "Analytics" 16px weight 400 #111827
- nav3 [text] at (40, 428) text "Community" 16px weight 400 #111827
- nav4 [text] at (40, 484) text "Settings" 16px weight 400 #111827
- nav5 [text] at (40, 540) text "Send feedback" 16px weight 400 #111827
- page-title [text] at (320, 110) text "Channel content" 30px weight 600 #111827
- tabs [text] at (320, 175) text "Inspiration     Videos     Shorts     Live     Playlists     Podcasts     Promotions" 15px weight 400 #4b5563
- tabs-line [line] at (0, 0) stroke #e5e7eb 1px
- row1-thumb [rect] at (340, 260) size 120x68 radius 4 fill #7c2d12
- row1-t [text] at (480, 266) text "Debug web apps with browser use" 15px weight 600 #111827
- row1-s [text] at (480, 292) size 700x0 text "Automation can now use the DevTools protocol to inspect console logs, runtime errors and network traffic." 13px weight 400 #6b7280
- row2-thumb [rect] at (340, 350) size 120x68 radius 4 fill #1e3a5f
- row2-t [text] at (480, 356) text "Introducing Sites in Codex" 15px weight 600 #111827
- row2-s [text] at (480, 382) size 700x0 text "Sites lets anyone on your team turn an idea into a secure application in minutes." 13px weight 400 #6b7280
- dialog [group] at (290, 150) size 1340x780 radius 10 fill #ffffff visible [0, 32)
    keyframes opacity: f20=1, f30=0 (in)
  - d-title [text] at (322, 174) text "Introducing Sites in Codex" 22px weight 600 #111827
  - d-saved [text] at (1370, 180) text "Saved as private" 13px weight 400 #6b7280
  - d-x [text] at (1580, 170) text "×" 24px weight 400 #6b7280
  - d-steps [text] at (400, 234) size 1120x0 text "Details            Video elements            Checks            Visibility" 15px weight 400 #111827
  - d-stepline [line] at (290, 150) stroke #111827 2px
  - d-dot0 [ellipse] at (422, 270) size 16x16 fill #111827
  - d-dot1 [ellipse] at (775, 270) size 16x16 fill #111827
  - d-dot2 [ellipse] at (1128, 270) size 16x16 fill #111827
  - d-dot3 [ellipse] at (1482, 270) size 16x16 fill #111827
  - d-box [rect] at (322, 320) size 800x470 radius 8 fill #ffffff stroke #e5e7eb 1px
  - d-savetitle [text] at (346, 340) text "Save or publish" 18px weight 600 #111827
  - d-savesub [text] at (346, 370) text "Make your video public, unlisted, or private" 14px weight 400 #6b7280
  - d-radio0 [ellipse] at (350, 420) size 22x22 fill #ffffff stroke #111827 2px
  - d-radio-dot [ellipse] at (356, 426) size 10x10 fill #111827
  - d-opt0 [text] at (390, 418) text "Private" 17px weight 600 #111827
  - d-opts0 [text] at (390, 446) text "Only you and people you choose can watch your video" 14px weight 400 #6b7280
  - d-radio1 [ellipse] at (350, 530) size 22x22 fill #ffffff stroke #9ca3af 2px
  - d-opt1 [text] at (390, 528) text "Unlisted" 17px weight 600 #111827
  - d-opts1 [text] at (390, 556) text "Anyone with the video link can watch your video" 14px weight 400 #6b7280
  - d-radio2 [ellipse] at (350, 640) size 22x22 fill #ffffff stroke #9ca3af 2px
  - d-opt2 [text] at (390, 638) text "Public" 17px weight 600 #111827
  - d-opts2 [text] at (390, 666) text "Everyone can watch your video" 14px weight 400 #6b7280
  - d-share [rect] at (390, 480) size 170x36 radius 18 fill #f1f1f1
  - d-share-t [text] at (390, 489) size 170x0 text "⇪  Share privately" 14px weight 400 #111827
  - d-prev [rect] at (1170, 320) size 400x225 radius 6 fill #1e3a5f
  - d-prev-t [text] at (1170, 400) size 400x0 text "Sites in Codex" 36px weight 700 #ffffff
  - d-prev-s [text] at (1170, 450) size 400x0 text "Processing video" 14px weight 400 #d1d5db
  - d-linklabel [text] at (1170, 570) text "Video link" 13px weight 400 #6b7280
  - d-link [text] at (1170, 592) text "https://vid.example/HYsj0ptcovg" 15px weight 400 #1d4ed8
  - d-footer [line] at (290, 150) stroke #e5e7eb 1px
  - d-progress [text] at (322, 880) text "⇧  Processing up to 4K … 3 minutes left" 14px weight 400 #4b5563
  - d-save [rect] at (1520, 868) size 80x38 radius 4 fill #111827
  - d-save-t [text] at (1520, 878) size 80x0 text "Save" 15px weight 600 #ffffff
- modal [group] at (660, 380) size 600x320 radius 10 fill #ffffff visible [22, 64)
    keyframes opacity: f22=0, f32=1 (out)
  - m-title [text] at (692, 408) text "Video processing" 22px weight 600 #111827
  - m-sub [text] at (692, 446) size 540x0 text "Your private video is still processing standard definition (SD)." 14px weight 400 #4b5563
  - m-row [rect] at (692, 490) size 536x90 radius 6 fill #f6f6f6
  - m-thumb [rect] at (704, 502) size 118x66 radius 4 fill #1e3a5f
  - m-item [text] at (840, 520) text "Introducing Sites in Codex" 15px weight 400 #111827
  - m-progress [text] at (692, 608) text "⇧  Processing up to 4K … 3 minutes left" 13px weight 400 #4b5563
  - m-close [rect] at (1156, 644) size 72x34 radius 4 fill #f1f1f1
  - m-close-t [text] at (1156, 653) size 72x0 text "Close" 14px weight 600 #111827
- pointer [cursor] at (1560, 880) clicks at [18]
    keyframes ty: f34=0, f50=40 (inOut)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion comp of 64 frames. Local 0 = master frame 985.
2. Page: #f9f9f9 with a white 260 px nav (avatar, six items), top bar with search pill, 'Channel content' 30 px title, tab row with a rule and two video rows (thumbnail rect + title + description).
3. Wizard: 1340x780 white group at (290,150) with a large drop shadow; 22 px title, four dots on a 2 px step line, an 800x470 option box with three radios (first filled), a 400x225 navy preview card with a link line, and a footer with status text and an 80x38 dark Save button.
4. Modal: 600x320 white group at (660,380): 22 px title, one-sentence subtitle, a 536x90 grey item row with a thumbnail, progress line and a Close button.
5. Dissolve: wizard Opacity 1 to 0 over frames 20–30 (ease in) and end its visibility at 32; modal Opacity 0 to 1 over 22–32 (ease out). Pointer click ring at 18 on Save, then drift 40 px down.
6. Easy mistake: scaling the wizard down into the modal. The source has no size or position change; both cards simply fade at fixed positions with a 2-frame offset.

## Content variants
Default copy:
- dialogTitle: Introducing Sites in Codex
- saved: Saved as private
- steps: Details            Video elements            Checks            Visibility
- saveTitle: Save or publish
- saveSub: Make your video public, unlisted, or private
- opt1: Private
- opt1s: Only you and people you choose can watch your video
- opt2: Unlisted
- opt2s: Anyone with the video link can watch your video
- opt3: Public
- opt3s: Everyone can watch your video
- share: Share privately
- previewTitle: Sites in Codex
- previewSub: Processing video
- linkLabel: Video link
- link: https://vid.example/HYsj0ptcovg
- progress: Processing up to 4K … 3 minutes left
- save: Save
- modalTitle: Video processing
- modalSub: Your private video is still processing standard definition (SD).
- modalItem: Introducing Sites in Codex
- modalProgress: Processing up to 4K … 3 minutes left
- close: Close
- pageTitle: Channel content
- tabs: Inspiration     Videos     Shorts     Live     Playlists     Podcasts     Promotions
- nav: Dashboard / Content / Analytics / Community / Settings / Send feedback
Adaptation changes:
- dialogTitle: Recording and replaying browser tests
- saved: Draft saved
- saveTitle: Choose an audience
- saveSub: Decide who can see this upload
- opt1: Team only
- opt1s: Only members of your workspace can watch
- opt2: Link
- opt2s: Anyone with the link can watch
- opt3: Everyone
- opt3s: Listed publicly on your channel
- previewTitle: Record & Replay
- modalTitle: Upload processing
- modalSub: Your team-only upload is still processing the preview rendition.
- modalItem: Recording and replaying browser tests
- modalProgress: Rendering up to 4K … about 2 minutes
- link: https://vid.example/Rr2xQ9
- pageTitle: Workspace uploads

## Limits
Easing names map to Fusion spline shapes: linear = linear, in/out/inOut = ease curves on the same frames, hold = step, spring/overshoot = slight overshoot past the target before settling.
Text reveal frames give the first and last unit; distribute characters/words evenly between them. Cursor click rings last 14 frames.
Vector illustration is an approximation of layout and motion, not the product UI or recovered production assets.