# Click the next slide thumbnail to hard-swap the main slide and jump the red selection outline

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 "Work with docs, sheets, and slides in ChatGPT" (E3dDr_QtBuo), published 2026-07-23.
Source interval [1688, 1740) on the 24000/1001 fps master: 52 frames, 2.168833 s. Local frame 0 = source frame 1688.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 52 frames long. Keep integer frames; do not round the frame rate.
Background field: #1f1f1f. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A dark slide editor: thumbnail rail on the left with slide 4 outlined in red, the main canvas showing slide 4 (a line chart titled 'Short videos lead'), and a presenter PiP top-right. The pointer travels down onto thumbnail 5 during local frames 0 to 14 and clicks at ~21 (master 1709). On the next frame the main canvas shows slide 5 (a horizontal bar chart, 'Sizzle leads engagement') and the red outline sits on thumbnail 5. No transition; the new slide holds to the end.

## Mechanism
Selection-driven hard swap: a click on a list item replaces the detail view in one frame and the selection indicator steps to the item, with no crossfade or motion.

## Phases (local frames)
- 0: Slide 4 shown, pointer approaching thumbnail 5
- 21: Click on thumbnail 5
- 22: Main slide and red outline swap
- 40: Hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- ribbon [rect] at (0, 0) size 1920x70 fill #2b2b2b
- ribbon-t [text] at (40, 24) text "Paste      Slides      Insert      Draw      Design      Transitions      Animations      Review      View" 15px weight 400 #c9c9c9
- rail [rect] at (0, 70) size 320x1010 fill #232323
- tn-3 [text] at (46, 140) text "3" 13px weight 400 #bdbdbd
- th-3 [rect] at (70, 100) size 214x120 radius 3 fill #ffffff
- th3-a [rect] at (84, 112) size 186x30 radius 2 fill #4b8ef0
- th3-b [rect] at (84, 150) size 52x50 radius 2 fill #dbe7fb
- th3-c [rect] at (144, 150) size 52x50 radius 2 fill #dbe7fb
- th3-d [rect] at (204, 150) size 52x50 radius 2 fill #dbe7fb
- tn-4 [text] at (46, 290) text "4" 13px weight 400 #bdbdbd
- th-4 [rect] at (70, 250) size 214x120 radius 3 fill #ffffff
- th4-line [path] at (100, 290) stroke #2b6fd6 2px
- th4-title [rect] at (84, 262) size 80x6 radius 3 fill #cfcfcf
- tn-5 [text] at (46, 440) text "5" 13px weight 400 #bdbdbd
- th-5 [rect] at (70, 400) size 214x120 radius 3 fill #ffffff
- th5-title [rect] at (84, 412) size 90x6 radius 3 fill #cfcfcf
- th5-a [rect] at (100, 430) size 150x12 fill #2b5fd9
- th5-b [rect] at (100, 446) size 110x12 fill #a9c1f5
- th5-c [rect] at (100, 462) size 90x12 fill #c9d7f7
- th5-d [rect] at (100, 478) size 60x12 fill #39c3e6
- th5-e [rect] at (100, 494) size 40x12 fill #1f5bd0
- tn-6 [text] at (46, 590) text "6" 13px weight 400 #bdbdbd
- th-6 [rect] at (70, 550) size 214x120 radius 3 fill #ffffff
- th6-title [rect] at (84, 562) size 100x6 radius 3 fill #cfcfcf
- th6-a [rect] at (84, 580) size 186x8 radius 1 fill #1a1a1a
- th6-b [rect] at (84, 596) size 186x8 radius 1 fill #e0e0e0
- th6-c [rect] at (84, 612) size 186x8 radius 1 fill #e0e0e0
- selection [rect] at (64, 244) size 226x132 radius 5 stroke #e0453b 3px
    keyframes y: f21=244, f22=394 (hold)
- slide [rect] at (420, 110) size 1180x740 radius 2 fill #ffffff
- slide-a [group] at (420, 110) size 1180x740 visible [0, 22)
  - title-a [text] at (480, 160) text "Short videos lead" 30px weight 600 #1a1a1a
  - axis [path] at (720, 730) stroke #cfcfcf 1.5px
  - ylabels [text] at (660, 262) text "80% / 70% / 60% / 50% / 40%" 13px weight 400 #8a8a88
  - series [path] at (720, 730) stroke #2b6fd6 3px
  - p1 [ellipse] at (754, 304) size 12x12 fill #2b6fd6
  - p2 [ellipse] at (914, 344) size 12x12 fill #2b6fd6
  - p3 [ellipse] at (1074, 424) size 12x12 fill #2b6fd6
  - p4 [ellipse] at (1234, 534) size 12x12 fill #2b6fd6
  - p5 [ellipse] at (1334, 644) size 12x12 fill #2b6fd6
  - xlabels [text] at (740, 746) text "Under 60 s        60–74 s        75–89 s        90–119 s        120+ s" 13px weight 400 #8a8a88
  - xaxis [text] at (720, 774) size 640x0 text "Runtime band" 14px weight 400 #6f6f6d
- slide-b [group] at (420, 110) size 1180x740 visible [22, 52)
  - title-b [text] at (480, 160) text "Sizzle leads engagement" 30px weight 600 #1a1a1a
  - bl-0 [text] at (480, 272) size 200x0 text "Sizzle" 15px weight 400 #4a4a48
  - bar-0 [rect] at (700, 260) size 700x46 radius 2 fill #2b5fd9
  - bv-0 [text] at (1412, 272) text "Average engagement · 7.6%" 13px weight 400 #6f6f6d
  - bl-1 [text] at (480, 364) size 200x0 text "Product walkthrough" 15px weight 400 #4a4a48
  - bar-1 [rect] at (700, 352) size 560x46 radius 2 fill #a9c1f5
  - bv-1 [text] at (1272, 364) text "Average engagement · 5.3%" 13px weight 400 #6f6f6d
  - bl-2 [text] at (480, 456) size 200x0 text "Talking head" 15px weight 400 #4a4a48
  - bar-2 [rect] at (700, 444) size 470x46 radius 2 fill #c9d7f7
  - bv-2 [text] at (1182, 456) text "Average engagement · 4.6%" 13px weight 400 #6f6f6d
  - bl-3 [text] at (480, 548) size 200x0 text "Walkthrough" 15px weight 400 #4a4a48
  - bar-3 [rect] at (700, 536) size 300x46 radius 2 fill #39c3e6
  - bv-3 [text] at (1012, 548) text "Average engagement · 3.5%" 13px weight 400 #6f6f6d
  - bl-4 [text] at (480, 640) size 200x0 text "Customer story" 15px weight 400 #4a4a48
  - bar-4 [rect] at (700, 628) size 220x46 radius 2 fill #1f5bd0
  - bv-4 [text] at (932, 640) text "Average engagement · 3.4%" 13px weight 400 #6f6f6d
  - xaxis-b [text] at (700, 774) size 700x0 text "Average engagement" 14px weight 400 #6f6f6d
- pip [rect] at (1660, 110) size 220x280 radius 10 fill #3a3d44
- pip-head [ellipse] at (1730, 170) size 80x96 fill #6c7079
- pip-body [rect] at (1700, 280) size 140x110 radius 30 fill #5a5e66
- pointer [cursor] at (190, 470) clicks at [21]
    keyframes tx: f0=-60, f14=0 (out)
    keyframes ty: f0=90, f14=0 (out)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion composition 52 frames. Local 0 = master frame 1688.
2. Rail: four 214x120 white thumbnails at y=100, 250, 400, 550 inside a 320 px dark rail; main slide 1180x740 white at (420,110) with drop shadow.
3. Selection outline: 226x132 rectangle, 3 px #e0453b stroke, radius 5; keyframe Y from 244 to 394 at frame 22 with a hold (step) interpolation.
4. Slide content: two groups. Group A (title + line chart) visible frames 0-21; group B (title + five horizontal bars with value captions) from frame 22. Use a cut, not a dissolve.
5. Pointer: starts near (130,560), eases onto thumbnail 5 by frame 14, click ring at 21.
6. Easy mistake: animating the outline's Y with default smooth interpolation; it must jump.

## Content variants
Default copy:
- titleA: Short videos lead
- axisA: Runtime band
- titleB: Sizzle leads engagement
- axisB: Average engagement
Adaptation changes:
- titleA: Retention drops after week two
- axisA: Week of subscription
- titleB: Referrals convert best
- axisB: Conversion by channel

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