# Hover a board tile to reveal its action buttons, click it, and scale the image up into a lightbox

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 [985, 1105) on the 60/1 fps master: 120 frames, 2.000000 s. Local frame 0 = source frame 985.
Create a 1920x1080 progressive timeline at 60/1 fps and a Fusion composition exactly 120 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
An app window shows a left text column and a five-by-three image board. The pointer rests on one tile; at ~f10 two small round action buttons appear on the tile's top corners. At ~f30 the pointer clicks and the tile grows into a centred lightbox with prev/next arrows and an action bar beneath, the board fading behind it (~f30–f45). Around ~f80 the left column's text is replaced with a new paragraph while the lightbox stays.

## Mechanism
Hover-disclosed tile actions, then a click that scales the tile into a lightbox overlay while the side column updates asynchronously.

## Phases (local frames)
- 0: Pointer resting on tile
- 10: Tile action buttons appear
- 30: Click: tile scales into lightbox
- 45: Lightbox settled
- 80: Left column text swaps

## 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
  - left-plate [rect] at (184, 110) size 360x700 fill #ffffff
  - li-0 [text] at (200, 120) text "• Citrus ganache shell" 17px weight 400 #3a3a3a
  - li-1 [text] at (200, 148) text "• Pistachio praline" 17px weight 400 #3a3a3a
  - li-2 [text] at (200, 176) text "• Rose petit gateau" 17px weight 400 #3a3a3a
  - li-3 [text] at (200, 204) text "• Chef finishing detail" 17px weight 400 #3a3a3a
  - li-4 [text] at (200, 232) text "• Summer table arrival" 17px weight 400 #3a3a3a
  - li-5 [text] at (200, 260) text "• Boutique retail counter" 17px weight 400 #3a3a3a
  - heading [text] at (580, 98) text "Maison Fève: Solstice board" 18px weight 600 #1c1c1c visible [0, 30)
  - tile-0 [rect] at (580, 130) size 200x200 radius 10 fill #e9dccb
  - tile-1 [rect] at (796, 130) size 200x200 radius 10 fill #efe4d6
  - tile-2 [rect] at (1012, 130) size 200x200 radius 10 fill #5a3a2a
  - tile-3 [rect] at (1228, 130) size 200x200 radius 10 fill #7a4a35
  - tile-4 [rect] at (1444, 130) size 200x200 radius 10 fill #c99a7a
  - tile-5 [rect] at (580, 346) size 200x200 radius 10 fill #e9dccb
  - tile-6 [rect] at (796, 346) size 200x200 radius 10 fill #efe4d6
  - tile-7 [rect] at (1012, 346) size 200x200 radius 10 fill #5a3a2a
  - tile-8 [rect] at (1228, 346) size 200x200 radius 10 fill #7a4a35
  - tile-9 [rect] at (1444, 346) size 200x200 radius 10 fill #c99a7a
  - tile-10 [rect] at (580, 562) size 200x200 radius 10 fill #e9dccb
  - tile-11 [rect] at (796, 562) size 200x200 radius 10 fill #efe4d6
  - tile-12 [rect] at (1012, 562) size 200x200 radius 10 fill #5a3a2a
  - tile-13 [rect] at (1228, 562) size 200x200 radius 10 fill #7a4a35
  - tile-14 [rect] at (1444, 562) size 200x200 radius 10 fill #c99a7a
  - grid-dim [rect] at (160, 60) size 1600x960 fill #ffffff
      keyframes opacity: f30=0, f45=0.92 (out)
  - act-a [ellipse] at (800, 136) size 26x26 fill #ffffff stroke #d0d0d0 1px visible [10, 30)
  - act-b [ellipse] at (960, 136) size 26x26 fill #ffffff stroke #d0d0d0 1px visible [10, 30)
  - lightbox [group] at (796, 130) size 200x200 visible [30, 120)
      keyframes x: f30=636, f45=520 (out)
      keyframes y: f30=70, f45=120 (out)
      keyframes scale: f30=1, f45=3.4 (out)
    - lb-img [rect] at (796, 130) size 200x200 radius 8 fill #e9dccb
    - lb-bonbon-a [ellipse] at (836, 240) size 50x50 fill #3a2418
    - lb-bonbon-b [ellipse] at (906, 250) size 50x50 fill #3a2418
    - lb-bonbon-c [ellipse] at (866, 180) size 50x50 fill #3a2418
  - lb-prev [text] at (600, 500) text "‹" 40px weight 400 #5a5a5a visible [40, 120)
  - lb-next [text] at (1290, 500) text "›" 40px weight 400 #5a5a5a visible [40, 120)
  - lb-close [text] at (1660, 120) text "×" 30px weight 400 #5a5a5a visible [40, 120)
  - bar [rect] at (780, 920) size 380x40 radius 12 fill #ffffff stroke #e0e0e0 1px visible [42, 120)
  - bar-t [text] at (780, 928) size 380x0 text "⤓ Attach     ⟲ Remix     ▢ Open in ⌄" 17px weight 500 #3a3a3a visible [42, 120)
  - left-plate-b [rect] at (184, 110) size 360x700 fill #ffffff visible [80, 120)
  - lb-0 [text] at (200, 120) text "These read stronger: the arch" 17px weight 400 #3a3a3a visible [80, 120)
  - lb-1 [text] at (200, 146) text "and medallion carry the most" 17px weight 400 #3a3a3a visible [80, 120)
  - lb-2 [text] at (200, 172) text "weight, so I am adding a set of" 17px weight 400 #3a3a3a visible [80, 120)
  - lb-3 [text] at (200, 198) text "engraved golden-rose variants." 17px weight 400 #3a3a3a visible [80, 120)
  - lb-4 [text] at (200, 224) visible [80, 120)
  - lb-5 [text] at (200, 250) text "Added four variants to the board." 17px weight 400 #3a3a3a visible [80, 120)
  - lb-6 [text] at (200, 276) text "The board now has 19 images." 17px weight 400 #3a3a3a visible [80, 120)
- pointer [cursor] at (896, 290) clicks at [30]
    keyframes tx: f0=0, f28=-40 (inOut), f60=-40, f100=-100 (inOut)
    keyframes ty: f0=0, f28=10 (inOut), f60=10, f100=600 (inOut)

## Construction steps
1. Timeline 1920x1080 at 60 fps; Fusion composition 120 frames. Local 0 = master frame 985.
2. Window: 1600x960 white plate with traffic lights and one tab, on a violet gradient background; board of 200px tiles at 216px pitch starting at window-local (420,70).
3. Tile actions: two 26px white discs on the hovered tile's top corners, visible frames 10–29.
4. Lightbox: duplicate the hovered tile, pivot top-left, keyframe Size 1→3.4 and Position (636,60)→(520,120) over frames 30–45 with ease out; underneath, a white plate Blend 0→0.92 over the same range dims the board.
5. Add arrows, close glyph and the 380x40 action bar from frames 40–42 once the scale has mostly settled.
6. Left column: at frame 80 hard-swap the bullet list for the new paragraph (no fade).
7. Easy mistake: growing the lightbox from the centre. It scales from the clicked tile's own position toward the centre.

## Content variants
Default copy:
- heading: Maison Fève: Solstice board
- attach: Attach
- remix: Remix
- open: Open in
Adaptation changes:
- heading: Atelier Nord: Winter board
- 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.