# Collapse the tab strip, then the address bar, while the page scales up to fill the freed height

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 [2240, 2300) on the 24000/1001 fps master: 60 frames, 2.502500 s. Local frame 0 = source frame 2240.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 60 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 full browser shows a channel content page under three chrome bands: a grey tab strip, a white address bar and a white automation banner ('… started debugging this browser · Cancel'). At ~f12 the tab strip disappears and the banner rides up into its place; at ~f18 the address bar disappears too and the banner reaches the very top by ~f22. Meanwhile (~f12–26) the page content slides up and grows about 3% so the layout re-fills the frame; a dark toast near the bottom stays put relative to the page. Everything holds from ~f26.

## Mechanism
Progressive chrome strip: two browser bands cut out in sequence while the surviving banner re-docks and the page scales up to re-fill the frame.

## Phases (local frames)
- 0: Full browser chrome: tab strip, address bar, banner
- 12: Tab strip drops out; banner moves up; page begins to scale
- 18: Address bar drops out
- 22: Banner docked at top
- 26: Page settled at 1.03x; hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- page [group] at (0, 130) size 1920x1080
    keyframes y: f12=130, f26=0 (inOut)
    keyframes scale: f12=1, f26=1.03 (inOut)
  - p-bg [rect] at (0, 130) size 1920x1080 fill #f9f9f9
  - p-top [rect] at (0, 130) size 1920x64 fill #ffffff stroke #e5e7eb 1px
  - p-logo [rect] at (24, 150) size 28x24 radius 4 fill #e11d48
  - p-logo-t [text] at (60, 150) text "Studio" 18px weight 700 #111827
  - p-search [rect] at (560, 146) size 700x32 radius 16 fill #f1f1f1
  - p-create [text] at (1780, 152) text "⊕ Create" 15px weight 400 #111827
  - p-nav [rect] at (0, 194) size 260x1016 fill #ffffff stroke #e5e7eb 1px
  - p-avatar [ellipse] at (90, 250) size 80x80 fill #e5e7eb
  - p-yourch [text] at (0, 350) size 260x0 text "Your channel" 15px weight 600 #111827
  - p-nav0 [text] at (40, 420) text "Dashboard" 16px weight 400 #111827
  - p-nav1 [text] at (40, 476) text "Content" 16px weight 600 #111827
  - p-nav2 [text] at (40, 532) text "Analytics" 16px weight 400 #111827
  - p-nav3 [text] at (40, 588) text "Community" 16px weight 400 #111827
  - p-nav4 [text] at (40, 644) text "Settings" 16px weight 400 #111827
  - p-nav5 [text] at (40, 700) text "Send feedback" 16px weight 400 #111827
  - p-title [text] at (320, 260) text "Channel content" 30px weight 600 #111827
  - p-tabs [text] at (320, 330) text "Inspiration     Videos     Shorts     Live     Playlists     Podcasts     Promotions     Collaborations" 15px weight 400 #4b5563
  - p-tabline [line] at (0, 130) stroke #e5e7eb 1px
  - p-filter [text] at (320, 386) text "☰  Filter" 14px weight 400 #4b5563
  - p-head [text] at (320, 430) size 1560x0 text "☐   Video                                                                                                Restrictions            Date ↓                Views        Comments" 13px weight 400 #6b7280
  - p-r1 [rect] at (360, 470) size 120x68 radius 4 fill #7c2d12
  - p-r1t [text] at (500, 476) text "Debug web apps with browser use" 15px weight 600 #111827
  - p-r1s [text] at (500, 502) size 600x0 text "Automation can now use the DevTools protocol to inspect console logs, runtime errors and network traffic." 13px weight 400 #6b7280
  - p-r1d [text] at (1240, 476) text "None              Jun 16, 2026                0                 0" 13px weight 400 #4b5563
  - p-r2 [rect] at (360, 560) size 120x68 radius 4 fill #1e3a5f
  - p-r2t [text] at (500, 566) text "Introducing Sites" 15px weight 600 #111827
  - p-r2s [text] at (500, 592) size 600x0 text "Sites lets anyone on your team turn an idea into a secure application in minutes." 13px weight 400 #6b7280
  - p-r2d [text] at (1240, 566) text "None              Jun 16, 2026                0                 0" 13px weight 400 #4b5563
  - p-rows [text] at (1200, 670) text "Rows per page  30 ⌄      1–2 of 2      |‹   ‹   ›   ›|" 13px weight 400 #6b7280
  - p-toast [rect] at (520, 890) size 420x44 radius 4 fill #111827
  - p-toast-t [text] at (520, 902) size 420x0 text "This video is only visible to you." 15px weight 400 #ffffff
- tabstrip [group] at (0, 0) size 1920x46 fill #dfe3e8 visible [0, 16)
    keyframes opacity: f12=1, f15=0
  - dots [text] at (16, 12) text "●" 16px weight 400 #f87171
  - dots2 [text] at (36, 12) text "●" 16px weight 400 #fbbf24
  - dots3 [text] at (56, 12) text "●" 16px weight 400 #34d399
  - tab1 [rect] at (100, 8) size 260x38 radius 8 fill #eceff2
  - tab1t [text] at (116, 17) text "▦  Publishing Calendar" 13px weight 400 #374151
  - tab2 [rect] at (368, 8) size 260x38 radius 8 fill #eceff2
  - tab2t [text] at (384, 17) text "▶  Studio upload" 13px weight 400 #374151
  - tab3 [rect] at (636, 8) size 260x38 radius 8 fill #ffffff
  - tab3t [text] at (652, 17) text "▶  Channel content" 13px weight 400 #111827
  - tab3x [text] at (870, 15) text "×" 15px weight 400 #6b7280
- addressbar [group] at (0, 46) size 1920x44 fill #ffffff visible [0, 22)
    keyframes opacity: f18=1, f21=0
  - navb [text] at (20, 56) text "‹    ›    ↻" 16px weight 400 #6b7280
  - urlpill [rect] at (120, 52) size 1500x32 radius 16 fill #f1f3f4
  - urlt [text] at (150, 59) text "studio.example.com/channel/UCj8tW2Es1CKZ/videos/upload" 13px weight 400 #374151
  - work [rect] at (1700, 54) size 90x28 radius 14 fill #fff7ed stroke #fdba74 1px
  - workt [text] at (1700, 60) size 90x0 text "● Work" 12px weight 400 #9a3412
- banner [group] at (0, 90) size 1920x40 fill #ffffff
    keyframes y: f12=90, f16=44, f18=44, f22=0
  - banner-t [text] at (0, 100) size 1800x0 text ""Automation (internal)" started debugging this browser" 14px weight 400 #374151
  - banner-btn [rect] at (1160, 96) size 72x28 radius 14 fill #1a73e8
  - banner-btn-t [text] at (1160, 102) size 72x0 text "Cancel" 12px weight 600 #ffffff
  - banner-x [text] at (1880, 98) text "×" 16px weight 400 #6b7280
  - banner-line [line] at (0, 90) stroke #e5e7eb 1px
- pointer [cursor] at (1130, 900)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion comp of 60 frames. Local 0 = master frame 2240.
2. Page: build the studio page (top bar, 260 px nav, 30 px title, tab row, two video rows, pagination line and a 420x44 dark toast) inside one group whose pivot is the top-centre.
3. Chrome: tab strip 1920x46 (#dfe3e8, three tab pills) at y=0; address bar 1920x44 (URL pill, profile chip) at y=46; banner 1920x40 white with centred text and a blue Cancel pill at y=90.
4. Tab strip: Opacity 1 to 0 over frames 12–15 and end visibility at 16. Address bar: Opacity 1 to 0 over 18–21, end at 22. Banner Y: 90 to 44 over 12–16, then 44 to 0 over 18–22 (linear).
5. Page group: Y 130 to 0 and Size 1.0 to 1.03 over 12–26 with ease in/out; because the pivot is top-centre the page grows downward and outward without drifting, and the left nav stays inside the frame.
6. Easy mistake: fading all chrome at once. The source removes the bands in two steps and the banner visibly re-docks twice; keep the 6-frame gap.

## Content variants
Default copy:
- tab1: Publishing Calendar
- tab2: Studio upload
- tab3: Channel content
- url: studio.example.com/channel/UCj8tW2Es1CKZ/videos/upload
- banner: "Automation (internal)" started debugging this browser
- cancel: Cancel
- pageTitle: Channel content
- tabs: Inspiration     Videos     Shorts     Live     Playlists     Podcasts     Promotions     Collaborations
- row1: Debug web apps with browser use
- row1s: Automation can now use the DevTools protocol to inspect console logs, runtime errors and network traffic.
- row2: Introducing Sites
- row2s: Sites lets anyone on your team turn an idea into a secure application in minutes.
- toast: This video is only visible to you.
- nav: Dashboard / Content / Analytics / Community / Settings / Send feedback
Adaptation changes:
- banner: "Test runner" is controlling this browser
- pageTitle: Workspace uploads
- row1: Recording and replaying browser tests
- row1s: Capture a session once, then replay it against every build with a single command.
- row2: Setting up shared fixtures
- row2s: Reuse login state and seeded data across suites.
- toast: Only your team can see this upload.

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