# Expand a context-menu row into an inline submenu, walk the highlight down, then cut to the share sheet

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 "Build and test iOS apps without leaving Codex" (u9zLlcsCDiQ), published 2026-06-15.
Source interval [745, 825) on the 24000/1001 fps master: 80 frames, 3.336667 s. Local frame 0 = source frame 745.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 80 frames long. Keep integer frames; do not round the frame rate.
Background field: #f6f6f6. Export silent H.264 yuv420p to match the intended playback container.

## Observation
Inside a phone simulator on the right, a post's long-press context menu is open (Quote, Share ›, View in Browser, Copy Text…) with the hover highlight on 'Share' (f0–27). At ~f28 the Share row expands in place: its chevron turns down, 'Quote' dims, three sub-rows (Share Post, Share Link, Share as Image) are inserted and every row below steps downward. The highlight walks to 'Share as Image' by ~f45 and the pointer clicks at ~f55. At ~f58 the screen hard-cuts to a 'Share post as image' sheet with a Done button and a preview card. The left pane's agent log stays static.

## Mechanism
An accordion submenu: a menu row expands inline and pushes later rows down as a step, the hover highlight walks to the new child row, and a click hard-cuts to the resulting sheet.

## Phases (local frames)
- 0: Context menu open, highlight on Share
- 28: Share expands inline; rows below step down
- 45: Highlight moves to the child row
- 55: Click
- 58: Hard cut to share sheet
- 79: Sheet holds

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- left-pane [group] at (0, 0) size 1140x1080
  - log [text] at (80, 120) size 980x0 text "Working for 12s / Check current preview / The browser session is still alive; I hit a reused scratch variable in the automation, so I'm rerunning that check with a fresh name. / Tap overflow / The context menu is open. The share item has a submenu indicator, so I'm opening that next." 15px weight 400 #4a4a4a
  - composer [rect] at (80, 940) size 980x80 radius 18 fill #ffffff stroke #e2e2e2 1px
- sim-header [rect] at (1180, 20) size 540x60 radius 14 fill #2b2b2e
- sim-title [text] at (1204, 30) text "Phone 17 Pro" 16px weight 600 #ffffff
- sim-os [text] at (1204, 52) text "OS 26.5" 12px weight 400 #9a9a9a
- phone [group] at (1180, 90) size 540x960
  - bezel [rect] at (1180, 90) size 540x960 radius 60 fill #111111
  - screen [group] at (1194, 104) size 512x932 visible [0, 58)
    - screen-bg [rect] at (1194, 104) size 512x932 radius 48 fill #ffffff
    - post-0 [group] at (1194, 194) size 512x150
      - pav-0 [ellipse] at (1218, 214) size 40x40 fill #d8d8d8
      - pl1-0 [rect] at (1274, 216) size 300x12 radius 4 fill #dddddd
      - pl2-0 [rect] at (1274, 240) size 380x10 radius 4 fill #e8e8e8
      - pl3-0 [rect] at (1274, 258) size 340x10 radius 4 fill #e8e8e8
    - post-1 [group] at (1194, 344) size 512x150
      - pav-1 [ellipse] at (1218, 364) size 40x40 fill #d8d8d8
      - pl1-1 [rect] at (1274, 366) size 300x12 radius 4 fill #dddddd
      - pl2-1 [rect] at (1274, 390) size 380x10 radius 4 fill #e8e8e8
      - pl3-1 [rect] at (1274, 408) size 340x10 radius 4 fill #e8e8e8
    - post-2 [group] at (1194, 494) size 512x150
      - pav-2 [ellipse] at (1218, 514) size 40x40 fill #d8d8d8
      - pl1-2 [rect] at (1274, 516) size 300x12 radius 4 fill #dddddd
      - pl2-2 [rect] at (1274, 540) size 380x10 radius 4 fill #e8e8e8
      - pl3-2 [rect] at (1274, 558) size 340x10 radius 4 fill #e8e8e8
    - post-3 [group] at (1194, 644) size 512x150
      - pav-3 [ellipse] at (1218, 664) size 40x40 fill #d8d8d8
      - pl1-3 [rect] at (1274, 666) size 300x12 radius 4 fill #dddddd
      - pl2-3 [rect] at (1274, 690) size 380x10 radius 4 fill #e8e8e8
      - pl3-3 [rect] at (1274, 708) size 340x10 radius 4 fill #e8e8e8
    - dim [rect] at (1194, 104) size 512x932 radius 48 fill #000000
    - menu [group] at (1264, 404) size 380x372
      - menu-bg [rect] at (1264, 404) size 380x372 radius 18 fill #ffffff
          keyframes h: f27=372, f28=504
      - hover [rect] at (1264, 462) size 380x44 radius 10 fill #f0f0f0
          keyframes y: f0=58, f44=58, f45=234
      - it-0 [text] at (1286, 474) text "Quote" 19px weight 500 #111111
          keyframes color: f27=#111111, f28=#b0b0b0
      - it-1 [text] at (1286, 518) text "Share" 19px weight 500 #111111
      - chev [text] at (1600, 514) text "›" 24px weight 400 #666666
          keyframes rotate: f27=0, f28=90
      - sub [group] at (1264, 550) size 380x132 visible [28, 80)
        - sub-0 [text] at (1312, 560) text "Share Post" 19px weight 500 #111111
        - sub-1 [text] at (1312, 604) text "Share Link" 19px weight 500 #111111
        - sub-2 [text] at (1312, 648) text "Share as Image" 19px weight 500 #111111
        - sub-ico-0 [rect] at (1286, 564) size 14x14 radius 3 fill #8a8a8a
        - sub-ico-1 [rect] at (1286, 608) size 14x14 radius 3 fill #8a8a8a
        - sub-ico-2 [rect] at (1286, 652) size 14x14 radius 3 fill #8a8a8a
      - rest [group] at (1264, 550) size 380x220
          keyframes y: f27=146, f28=278
        - it-2 [text] at (1286, 562) text "View in Browser" 19px weight 500 #111111
        - it-3 [text] at (1286, 606) text "Copy Text" 19px weight 500 #111111
        - it-4 [text] at (1286, 650) text "Select Text" 19px weight 500 #111111
        - it-5 [text] at (1286, 694) text "Copy Link" 19px weight 500 #111111
        - it-6 [text] at (1286, 738) text "Translate" 19px weight 500 #111111
  - sheet [group] at (1194, 104) size 512x932 visible [58, 80)
    - sheet-bg [rect] at (1194, 104) size 512x932 radius 48 fill #f2f2f4
    - grabber [rect] at (1430, 118) size 40x5 radius 3 fill #c8c8cc
    - sheet-title [text] at (1194, 148) size 512x0 text "Share post as image" 20px weight 600 #111111
    - done-bg [rect] at (1604, 140) size 80x36 radius 18 fill #ffffff
    - done [text] at (1604, 148) size 80x0 text "Done" 16px weight 600 #111111
    - share-row [rect] at (1218, 214) size 464x56 radius 14 fill #ffffff
    - share-row-t [text] at (1264, 230) text "Share Image" 18px weight 500 #111111
    - share-ico [rect] at (1232, 230) size 18x22 radius 3 fill #333333
    - card [group] at (1218, 304) size 464x180
      - card-bg [rect] at (1218, 304) size 464x180 radius 18 fill #ffffff stroke #e3e3e3 1px
      - cav [ellipse] at (1242, 328) size 44x44 fill #d8d8d8
      - cauthor [text] at (1302, 330) text "Riley Chen" 18px weight 600 #111111
      - cpost [text] at (1302, 360) text "Here's to the builders. The tinkerers. / The ones who ship on Fridays." 16px weight 400 #333333
- pointer [cursor] at (1500, 420) clicks at [28, 55]
    keyframes ty: f30=0, f44=176 (inOut)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion comp 80 frames. Local 0 = master frame 745.
2. Left pane: static 15px agent log on #f6f6f6 plus an empty composer; it never changes.
3. Phone: 540x960 black bezel (radius 60) with a 512x932 white screen masked to radius 48; four placeholder post rows and an 18% black dim under the menu.
4. Menu: 380px white card, 44px rows, hover plate #f0f0f0. At frame 28 (a single-frame step, no ease): card height 372 to 504, Quote colour to #b0b0b0, chevron rotate 0 to 90, insert the three child rows at y 146, and move the remaining rows group from y 146 to y 278.
5. Highlight: hold on Share until frame 44, step to the child row (y 234) at frame 45; pointer follows with ease-in-out 30–44 and click rings at 28 and 55.
6. Hard cut at frame 58: swap the screen group for the sheet group (title, Done pill, share row, preview card).
7. Easy mistake: animating the accordion with easing; the source inserts the sub-rows in one frame.

## Content variants
Default copy:
- m0: Quote
- m1: Share
- m2: View in Browser
- m3: Copy Text
- m4: Select Text
- m5: Copy Link
- m6: Translate
- s0: Share Post
- s1: Share Link
- s2: Share as Image
- sheetTitle: Share post as image
- done: Done
- shareRow: Share Image
- author: Riley Chen
- post: Here's to the builders. The tinkerers. / The ones who ship on Fridays.
- device: Phone 17 Pro
- os: OS 26.5
- log: Working for 12s / Check current preview / The browser session is still alive; I hit a reused scratch variable in the automation, so I'm rerunning that check with a fresh name. / Tap overflow / The context menu is open. The share item has a submenu indicator, so I'm opening that next.
Adaptation changes:
- m0: Reply
- m1: Forward
- m2: Open Thread
- m3: Copy
- m4: Pin
- m5: Mute
- m6: Report
- s0: Forward to Chat
- s1: Forward as Link
- s2: Forward as Image
- sheetTitle: Forward as image
- shareRow: Save Image
- author: Morgan Lee
- post: Shipping notes, week 31: fewer meetings, / more previews, one very tired build server.

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