# Step a lightbox through ad variants on a fixed beat while the frame resizes to each new aspect ratio

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 [4100, 4400) on the 60/1 fps master: 300 frames, 5.000000 s. Local frame 0 = source frame 4100.
Create a 1920x1080 progressive timeline at 60/1 fps and a Fusion composition exactly 300 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 shows a square ad card with a small brand kicker, a large serif headline, a date and a product photo. Every ~48 frames the card hard-swaps to the next variant: two landscape 4:3 versions (~f14, ~f62), two 16:9 versions (~f110, ~f158), a very wide banner (~f206) and a portrait (~f254). The card is always re-centred and the arrows and action bar stay put; the left text column and the window do not change.

## Mechanism
Fixed-tempo carousel stepping: each step is a hard swap that re-fits the centred card to a different aspect ratio without any slide or fade.

## Phases (local frames)
- 0: Square variant
- 14: Landscape 4:3
- 62: Landscape 4:3 variant
- 110: Landscape 16:9
- 158: 16:9 variant
- 206: Wide banner
- 254: Portrait

## 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
  - li-0 [text] at (200, 120) text "Created six display sizes:" 16px weight 400 #5a5a5a
  - li-1 [text] at (200, 144) text "  300×250" 16px weight 400 #5a5a5a
  - li-2 [text] at (200, 168) text "  336×280" 16px weight 400 #5a5a5a
  - li-3 [text] at (200, 192) text "  728×90" 16px weight 400 #5a5a5a
  - li-4 [text] at (200, 216) text "  970×250" 16px weight 400 #5a5a5a
  - li-5 [text] at (200, 240) text "  300×600" 16px weight 400 #5a5a5a
  - li-6 [text] at (200, 264) text "  160×600" 16px weight 400 #5a5a5a
  - li-7 [text] at (200, 288)
  - li-8 [text] at (200, 312) text "All tiles are on the board." 16px weight 400 #5a5a5a
  - ad-sq [rect] at (720, 180) size 680x640 radius 10 fill #efe6d8 visible [0, 14)
  - ad-sq-k [text] at (750, 206) text "MAISON ORME" 14px weight 500 #8a7a5a visible [0, 14)
  - ad-sq-t [text] at (750, 230) text "Grand / Opening" 60px weight 600 #2a1c12 visible [0, 14)
  - ad-sq-d [text] at (750, 386) text "June 2" 18px weight 400 #5a4a3a visible [0, 14)
  - ad-sq-p [ellipse] at (1094, 404) size 244.8x244.8 fill #3a2418 visible [0, 14)
  - ad-l43 [rect] at (660, 220) size 800x600 radius 10 fill #efe6d8 visible [14, 62)
  - ad-l43-k [text] at (690, 246) text "MAISON ORME" 14px weight 500 #8a7a5a visible [14, 62)
  - ad-l43-t [text] at (690, 270) text "Grand / Opening" 60px weight 600 #2a1c12 visible [14, 62)
  - ad-l43-d [text] at (690, 426) text "June 2" 18px weight 400 #5a4a3a visible [14, 62)
  - ad-l43-p [ellipse] at (1100, 430) size 288x288 fill #3a2418 visible [14, 62)
  - ad-l43b [rect] at (680, 240) size 760x570 radius 10 fill #efe6d8 visible [62, 110)
  - ad-l43b-k [text] at (710, 266) text "MAISON ORME" 14px weight 500 #8a7a5a visible [62, 110)
  - ad-l43b-t [text] at (710, 290) text "Grand / Opening" 60px weight 600 #2a1c12 visible [62, 110)
  - ad-l43b-d [text] at (710, 446) text "June 2" 18px weight 400 #5a4a3a visible [62, 110)
  - ad-l43b-p [ellipse] at (1098, 439.5) size 273.6x273.6 fill #3a2418 visible [62, 110)
  - ad-wide [rect] at (560, 300) size 1000x560 radius 10 fill #efe6d8 visible [110, 158)
  - ad-wide-k [text] at (590, 326) text "MAISON ORME" 14px weight 500 #8a7a5a visible [110, 158)
  - ad-wide-t [text] at (590, 350) text "Grand / Opening" 60px weight 600 #2a1c12 visible [110, 158)
  - ad-wide-d [text] at (590, 506) text "June 2" 18px weight 400 #5a4a3a visible [110, 158)
  - ad-wide-p [ellipse] at (1110, 496) size 360x308 fill #3a2418 visible [110, 158)
  - ad-wide2 [rect] at (580, 320) size 960x540 radius 10 fill #efe6d8 visible [158, 206)
  - ad-wide2-k [text] at (610, 346) text "MAISON ORME" 14px weight 500 #8a7a5a visible [158, 206)
  - ad-wide2-t [text] at (610, 370) text "Grand / Opening" 60px weight 600 #2a1c12 visible [158, 206)
  - ad-wide2-d [text] at (610, 526) text "June 2" 18px weight 400 #5a4a3a visible [158, 206)
  - ad-wide2-p [ellipse] at (1108, 509) size 345.6x297 fill #3a2418 visible [158, 206)
  - ad-banner [rect] at (520, 400) size 1100x300 radius 10 fill #efe6d8 visible [206, 254)
  - ad-banner-k [text] at (550, 426) text "MAISON ORME" 14px weight 500 #8a7a5a visible [206, 254)
  - ad-banner-t [text] at (550, 450) text "Grand / Opening" 48px weight 600 #2a1c12 visible [206, 254)
  - ad-banner-d [text] at (550, 576) text "June 2" 18px weight 400 #5a4a3a visible [206, 254)
  - ad-banner-p [ellipse] at (1125, 505) size 396x165 fill #3a2418 visible [206, 254)
  - ad-tall [rect] at (860, 160) size 380x760 radius 10 fill #efe6d8 visible [254, 300)
  - ad-tall-k [text] at (890, 186) text "MAISON ORME" 14px weight 500 #8a7a5a visible [254, 300)
  - ad-tall-t [text] at (890, 210) text "Grand / Opening" 60px weight 600 #2a1c12 visible [254, 300)
  - ad-tall-d [text] at (890, 366) text "June 2" 18px weight 400 #5a4a3a visible [254, 300)
  - ad-tall-p [ellipse] at (1069, 426) size 136.8x136.8 fill #3a2418 visible [254, 300)
  - prev [text] at (460, 460) text "‹" 40px weight 400 #5a5a5a
  - next [text] at (1640, 460) text "›" 40px weight 400 #5a5a5a
  - close [text] at (1660, 100) text "×" 30px weight 400 #5a5a5a
  - bar-plate [rect] at (780, 960) size 380x40 radius 12 fill #ffffff stroke #e0e0e0 1px
  - bar-t [text] at (780, 968) size 380x0 text "⤓ Attach     ⟲ Remix     ▢ Open in ⌄" 17px weight 500 #3a3a3a

## Construction steps
1. Timeline 1920x1080 at 60 fps; Fusion composition 300 frames. Local 0 = master frame 4100.
2. Window, left column, arrows and action bar are static for the whole study.
3. Build seven card variants as separate groups (kicker 14px tracked, headline 60px serif in the source, date 18px, photo ellipse). Sizes: 680x640, 800x600, 760x570, 1000x560, 960x540, 1100x300, 380x760, each centred in the 1600px window.
4. Switch variants with hard cuts at frames 14, 62, 110, 158, 206 and 254 (48-frame tempo).
5. Keep the headline size proportional to card height (about 16%) so the banner variant drops to a single line size.
6. Easy mistake: cross-dissolving between variants. The source cuts, and the card re-centres instantly.

## Content variants
Default copy:
- brand: MAISON ORME
- headline: Grand / Opening
- date: June 2
- attach: Attach
- remix: Remix
- open: Open in
Adaptation changes:
- brand: CAFÉ LUMEN
- headline: Now / Roasting
- date: March 14

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