# Click Remix under a lightbox to raise a tabbed option sheet, then click a tab to swap its three cards

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 "Create campaign concepts and assets with Codex" (2ey7znf8SI0), published 2026-06-10.
Source interval [2070, 2230) on the 60/1 fps master: 160 frames, 2.666667 s. Local frame 0 = source frame 2070.
Create a 1920x1080 progressive timeline at 60/1 fps and a Fusion composition exactly 160 frames long. Keep integer frames; do not round the frame rate.
Background field: #3b3be0. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A lightbox of a product photo sits over a dimmed board with a small action bar beneath it. The pointer moves to the Remix action and clicks (~f16). Immediately the whole view widens and a tab row plus three option cards appear along the bottom (~f20–f32) while the photo shifts up slightly. The pointer then walks along the tabs and clicks one at ~f80, and the three cards are replaced by a different set with one card highlighted under the pointer (~f80–f160).

## Mechanism
Action click that raises a tabbed option sheet, followed by a tab click that hard-swaps the sheet's card set.

## Phases (local frames)
- 0: Lightbox with action bar
- 16: Remix clicked
- 22: Tab row and three cards appear
- 80: Tab clicked: cards swap
- 140: Hold with hovered card

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- bg [rect] at (0, 0) size 1920x1080 fill #3b3be0
- glow [ellipse] at (900, -200) size 1400x1200 fill #8a5cf5
- window [group] at (160, 60) size 1600x960 radius 16 fill #ffffff stroke #d8d8e0 1px
  - tl-r [ellipse] at (176, 74) size 12x12 fill #ff5f57
  - tl-y [ellipse] at (194, 74) size 12x12 fill #febc2e
  - tl-g [ellipse] at (212, 74) size 12x12 fill #28c840
  - tab [rect] at (460, 68) size 220x26 radius 7 fill #f0f0f3
  - tab-t [text] at (476, 72) text "Creative Producer" 15px weight 500 #3a3a3a
  - dim [rect] at (160, 60) size 1600x960 fill #fbfbfb
  - left-plate [rect] at (184, 110) size 360x700 fill #ffffff
  - photo [group] at (680, 170) size 680x560
      keyframes y: f16=110, f30=40 (out)
      keyframes scale: f16=1, f30=0.92 (out)
    - photo-bg [rect] at (680, 170) size 680x560 radius 10 fill #ded6c8
    - tray [rect] at (800, 470) size 440x140 radius 6 fill #f0ebe2
    - b1 [ellipse] at (830, 470) size 70x70 fill #3a2418
    - b2 [ellipse] at (930, 470) size 70x70 fill #5a3a2a
    - b3 [ellipse] at (1030, 470) size 70x70 fill #3a2418
    - b4 [ellipse] at (1130, 470) size 70x70 fill #5a3a2a
    - vase [ellipse] at (1240, 290) size 60x150 fill #6a7a5a
  - prev [text] at (600, 440) text "‹" 40px weight 400 #5a5a5a
  - next [text] at (1390, 440) text "›" 40px weight 400 #5a5a5a
  - close [text] at (1660, 120) text "×" 30px weight 400 #5a5a5a
  - bar [group] at (780, 760) size 380x40
      keyframes y: f16=700, f30=915 (out)
    - bar-plate [rect] at (780, 760) size 380x40 radius 12 fill #ffffff stroke #e0e0e0 1px
    - bar-t [text] at (780, 768) size 380x0 text "⤓ Attach     ⟲ Remix     ▢ Open in ⌄" 17px weight 500 #3a3a3a
    - remix-hl [rect] at (910, 764) size 110x32 radius 8 fill #e8ebff visible [16, 160)
  - tab-pill-0 [rect] at (600, 820) size 150x28 radius 14 fill #ffffff visible [22, 160)
  - tab-t-0 [text] at (600, 825) size 150x0 text "Style" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-1 [rect] at (780, 820) size 150x28 radius 14 fill #ffffff visible [22, 160)
  - tab-t-1 [text] at (780, 825) size 150x0 text "Colors" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-2 [rect] at (960, 820) size 150x28 radius 14 fill #ffffff visible [22, 160)
  - tab-t-2 [text] at (960, 825) size 150x0 text "Location" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-3 [rect] at (1140, 820) size 150x28 radius 14 fill #ececf0 visible [22, 80)
  - tab-t-3 [text] at (1140, 825) size 150x0 text "Props" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-4 [rect] at (1320, 820) size 150x28 radius 14 fill #ffffff visible [22, 160)
  - tab-t-4 [text] at (1320, 825) size 150x0 text "Character" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-5 [rect] at (1500, 820) size 150x28 radius 14 fill #ffffff visible [22, 160)
  - tab-t-5 [text] at (1500, 825) size 150x0 text "Format" 16px weight 500 #3a3a3a visible [22, 160)
  - tab-pill-0b [rect] at (600, 820) size 150x28 radius 14 fill #ececf0 visible [80, 160)
  - tab-t-0b [text] at (600, 825) size 150x0 text "Style" 16px weight 500 #3a3a3a visible [80, 160)
  - a-c0 [rect] at (600, 860) size 340x110 radius 12 fill #f7f7f5 visible [22, 80)
  - a-t0 [text] at (616, 872) text "Minimal support" 18px weight 600 #1c1c1c visible [22, 80)
  - a-b0 [text] at (616, 900) size 310x0 text "Reduce supporting objects so the main subject carries more weight." 15px weight 400 #5a5a5a visible [22, 80)
  - a-c1 [rect] at (960, 860) size 340x110 radius 12 fill #f7f7f5 visible [22, 80)
  - a-t1 [text] at (976, 872) text "Contextual cues" 18px weight 600 #1c1c1c visible [22, 80)
  - a-b1 [text] at (976, 900) size 310x0 text "Add a few believable objects that clarify place or use." 15px weight 400 #5a5a5a visible [22, 80)
  - a-c2 [rect] at (1320, 860) size 340x110 radius 12 fill #f7f7f5 visible [22, 80)
  - a-t2 [text] at (1336, 872) text "Premium finish" 18px weight 600 #1c1c1c visible [22, 80)
  - a-b2 [text] at (1336, 900) size 310x0 text "Sharper materials, cleaner surfaces and more elevated detail." 15px weight 400 #5a5a5a visible [22, 80)
  - b-c0 [rect] at (600, 860) size 340x110 radius 12 fill #f7f7f5 visible [80, 160)
  - b-t0 [text] at (616, 872) text "Editorial counter" 18px weight 600 #1c1c1c visible [80, 160)
  - b-b0 [text] at (616, 900) size 310x0 text "Cleaner lighting, tighter hierarchy, more premium campaign finish." 15px weight 400 #5a5a5a visible [80, 160)
  - b-c1 [rect] at (960, 860) size 340x110 radius 12 fill #f7f7f5 visible [80, 160)
  - b-t1 [text] at (976, 872) text "Documentary counter" 18px weight 600 #1c1c1c visible [80, 160)
  - b-b1 [text] at (976, 900) size 310x0 text "More candid texture, natural light and believable detail." 15px weight 400 #5a5a5a visible [80, 160)
  - b-c2 [rect] at (1320, 860) size 340x110 radius 12 fill #f3f4ff visible [80, 160)
  - b-t2 [text] at (1336, 872) text "Dramatic counter" 18px weight 600 #1c1c1c visible [80, 160)
  - b-b2 [text] at (1336, 900) size 310x0 text "Richer blacks, sharper highlights and more cinematic emphasis." 15px weight 400 #5a5a5a visible [80, 160)
- pointer [cursor] at (960, 640) clicks at [16, 80]
    keyframes tx: f0=0, f14=-10 (inOut), f40=-10, f78=-290 (inOut), f100=-290, f130=600 (inOut)
    keyframes ty: f0=0, f14=90 (inOut), f40=90, f78=190 (inOut), f100=190, f130=270 (inOut)

## Construction steps
1. Timeline 1920x1080 at 60 fps; Fusion composition 160 frames. Local 0 = master frame 2070.
2. Lightbox: 680x560 photo plate at window-local (520,110) with arrows and a 380x40 action bar at (620,700).
3. Remix click at frame 16 (pointer click ring): keyframe the photo Y 110→40 and Size 1→0.92, and the action bar Y 700→915, over frames 16–30 ease out.
4. Sheet: six 150x28 tab pills at y=760 (180px pitch) and three 340x110 cards at y=800 (360px pitch), all switching on at frame 22; the fourth tab pill is shaded as active.
5. Tab click at frame 80: end the first card set and the active shading at frame 80 and start the second set with the first tab shaded and the third card tinted #f3f4ff under the pointer. Hard swap.
6. Pointer: to Remix by frame 14, hold, to the tab row by frame 78, then drift right across the cards.
7. Easy mistake: animating the cards in. They appear as a block; only the photo and action bar ease.

## Content variants
Default copy:
- attach: Attach
- remix: Remix
- open: Open in
Adaptation changes:
- attach: Add
- remix: Variations
- open: Export to

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