# Zoom a design canvas from 24% to 45% anchored on the hero frame, then show its hover 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 "Build and share interactive prototypes in Codex" (_9ImjmzAyus), published 2026-06-04.
Source interval [3136, 3216) on the 30/1 fps master: 80 frames, 2.666667 s. Local frame 0 = source frame 3136.
Create a 1920x1080 progressive timeline at 30/1 fps and a Fusion composition exactly 80 frames long. Keep integer frames; do not round the frame rate.
Background field: #3f3fd0. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A browser tab with a design-tool layout: pages/layers panel left, properties panel right with a zoom readout of 24%, and a concept page on a grey canvas (dark hero card at top, two panels, a user-flow row, checklist and a dark status card below). Frames 0-12 hold. From about local frame 13 (master 3149) the canvas zooms in with an ease-out while the panels stay fixed; the readout steps 27, 30, 35, 39, 41 and settles on 45% by ~29 (master 3165). The hero card stays roughly in place at the top while lower content grows down and out of view. Around frame 66 the pointer rests on the hero card and a thin blue hover outline appears around it.

## Mechanism
Anchored canvas zoom: only the document layer scales, about a point on the hero frame, with a stepped numeric readout in the chrome, followed by a hover outline on the frame the zoom targeted.

## Phases (local frames)
- 0: Overview at 24%
- 13: Zoom begins, readout steps
- 29: Settles at 45%
- 66: Hover outline on hero frame

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- blob-a [ellipse] at (-300, -200) size 1300x1000 fill #7d6ff2
- blob-b [ellipse] at (1200, 500) size 1200x900 fill #2a2a9a
- window [group] at (120, 40) size 1680x1000 radius 14 fill #ffffff
  - chrome [rect] at (120, 40) size 1680x44 radius 14 fill #f1f1f3
  - chrome-flat [rect] at (120, 62) size 1680x22 fill #f1f1f3
  - tl-r [ellipse] at (136, 55) size 12x12 fill #ff5f57
  - tl-y [ellipse] at (156, 55) size 12x12 fill #febc2e
  - tl-g [ellipse] at (176, 55) size 12x12 fill #28c840
  - tab-a [rect] at (240, 48) size 160x28 radius 6 fill #e2e2e6
  - tab-b [rect] at (410, 48) size 200x28 radius 6 fill #ffffff stroke #dcdce0 1px
  - tab-b-t [text] at (426, 55) text "New feature ideas" 12px weight 400 #333333
  - left [rect] at (120, 84) size 240x956 fill #ffffff
  - left-line [rect] at (360, 84) size 1x956 fill #e6e6e6
  - left-file [text] at (136, 104) text "New feature ideas" 12px weight 600 #222222
  - left-team [text] at (136, 122) text "Design team" 10px weight 400 #8a8a88
  - left-pages [text] at (136, 160) text "Pages" 10px weight 600 #8a8a88
  - left-list [text] at (136, 180) text "New feature moodboard / Proposal for X / Feature concept" 11px weight 400 #333333
  - left-sel [rect] at (128, 218) size 224x22 radius 4 fill #eef2ff
  - left-layers [text] at (136, 270) text "Layers" 10px weight 600 #8a8a88
  - left-layer [text] at (136, 290) text "Feature concept page" 11px weight 400 #333333
  - right [rect] at (1560, 84) size 240x956 fill #ffffff
  - right-line [rect] at (1560, 84) size 1x956 fill #e6e6e6
  - share [rect] at (1720, 96) size 64x24 radius 6 fill #1e88ff
  - share-t [text] at (1720, 102) size 64x0 text "Share" 11px weight 400 #ffffff
  - r-tabs [text] at (1576, 136) text "Design      Prototype" 11px weight 400 #333333
  - r-page [text] at (1576, 170) text "Page" 10px weight 600 #8a8a88
  - r-swatch [rect] at (1576, 188) size 14x14 radius 3 fill #f0f0f0 stroke #dcdcdc 1px
  - r-hex [text] at (1598, 188) text "F0F0F0    100%" 11px weight 400 #333333
  - r-vars [text] at (1576, 230) text "Variables" 10px weight 600 #8a8a88
  - r-styles [text] at (1576, 260) text "Styles" 10px weight 600 #8a8a88
  - r-export [text] at (1576, 290) text "Export" 10px weight 600 #8a8a88
  - zoom-0 [text] at (1640, 106) text "24%" 12px weight 400 #333333 visible [0, 13)
  - zoom-1 [text] at (1640, 106) text "27%" 12px weight 400 #333333 visible [13, 16)
  - zoom-2 [text] at (1640, 106) text "30%" 12px weight 400 #333333 visible [16, 19)
  - zoom-3 [text] at (1640, 106) text "35%" 12px weight 400 #333333 visible [19, 22)
  - zoom-4 [text] at (1640, 106) text "39%" 12px weight 400 #333333 visible [22, 25)
  - zoom-5 [text] at (1640, 106) text "41%" 12px weight 400 #333333 visible [25, 27)
  - zoom-6 [text] at (1640, 106) text "45%" 12px weight 400 #333333 visible [27, 80)
  - canvas [group] at (360, 84) size 1200x956
    - canvas-bg [rect] at (360, 84) size 1200x956 fill #f0f0f0
    - page [group] at (360, 84) size 1200x956
        keyframes scale: f13=1, f29=1.88 (out)
      - hero [rect] at (680, 264) size 560x140 radius 12 fill #141414
      - hero-kicker [text] at (700, 278) text "Feature concept" 8px weight 400 #8a8a88
      - hero-title [text] at (700, 292) text "Agenda copilot for the workspace" 22px weight 700 #ffffff
      - hero-l-0 [rect] at (700, 330) size 300x4 radius 2 fill #5a5a5a
      - hero-l-1 [rect] at (700, 339) size 280x4 radius 2 fill #5a5a5a
      - hero-l-2 [rect] at (700, 348) size 240x4 radius 2 fill #5a5a5a
      - hero-pill-a [rect] at (700, 376) size 60x14 radius 7 fill #1f9d55
      - hero-pill-b [rect] at (768, 376) size 60x14 radius 7 fill #3a3a3a
      - hero-pill-c [rect] at (836, 376) size 60x14 radius 7 fill #3a3a3a
      - hero-side [rect] at (1060, 280) size 160x108 radius 8 fill #2a2a2a
      - hero-side-l-0 [rect] at (1072, 294) size 120x4 radius 2 fill #666666
      - hero-side-l-1 [rect] at (1072, 306) size 130x4 radius 2 fill #666666
      - hero-side-l-2 [rect] at (1072, 318) size 110x4 radius 2 fill #666666
      - hero-side-l-3 [rect] at (1072, 330) size 90x4 radius 2 fill #666666
      - hero-side-l-4 [rect] at (1072, 342) size 120x4 radius 2 fill #666666
      - p1-h [text] at (680, 420) text "Prototype screenshot" 9px weight 700 #333333
      - p1 [rect] at (680, 434) size 340x250 radius 6 fill #ffffff stroke #e2e2e2 1px
      - p1-side [rect] at (690, 444) size 60x230 radius 4 fill #f3f3f3
      - p1-top [rect] at (760, 444) size 250x24 radius 4 fill #f3f3f3
      - p1-l-0 [rect] at (760, 480) size 230x4 radius 2 fill #e6e6e6
      - p1-l-1 [rect] at (760, 495) size 200x4 radius 2 fill #e6e6e6
      - p1-l-2 [rect] at (760, 510) size 240x4 radius 2 fill #e6e6e6
      - p1-l-3 [rect] at (760, 525) size 180x4 radius 2 fill #e6e6e6
      - p1-l-4 [rect] at (760, 540) size 220x4 radius 2 fill #e6e6e6
      - p1-l-5 [rect] at (760, 555) size 210x4 radius 2 fill #e6e6e6
      - p1-l-6 [rect] at (760, 570) size 150x4 radius 2 fill #e6e6e6
      - p1-l-7 [rect] at (760, 585) size 230x4 radius 2 fill #e6e6e6
      - p1-l-8 [rect] at (760, 600) size 190x4 radius 2 fill #e6e6e6
      - p1-l-9 [rect] at (760, 615) size 200x4 radius 2 fill #e6e6e6
      - p1-l-10 [rect] at (760, 630) size 160x4 radius 2 fill #e6e6e6
      - p1-l-11 [rect] at (760, 645) size 210x4 radius 2 fill #e6e6e6
      - p1-btn [rect] at (920, 660) size 90x14 radius 7 fill #141414
      - p2-h [text] at (1040, 420) text "Key context" 9px weight 700 #333333
      - p2 [rect] at (1040, 434) size 200x250 radius 6 fill #ffffff stroke #e2e2e2 1px
      - p2-bar-a [rect] at (1050, 446) size 3x40 fill #1f9d55
      - p2-bar-b [rect] at (1050, 496) size 3x40 fill #2b6fd6
      - p2-bar-c [rect] at (1050, 546) size 3x40 fill #e0a020
      - p2-bar-d [rect] at (1050, 596) size 3x40 fill #d93025
      - p2-l-0 [rect] at (1060, 448) size 150x4 radius 2 fill #e6e6e6
      - p2-l-1 [rect] at (1060, 460) size 120x4 radius 2 fill #e6e6e6
      - p2-l-2 [rect] at (1060, 472) size 140x4 radius 2 fill #e6e6e6
      - p2-l-3 [rect] at (1060, 484) size 100x4 radius 2 fill #e6e6e6
      - p2-l-4 [rect] at (1060, 496) size 150x4 radius 2 fill #e6e6e6
      - p2-l-5 [rect] at (1060, 508) size 130x4 radius 2 fill #e6e6e6
      - p2-l-6 [rect] at (1060, 520) size 140x4 radius 2 fill #e6e6e6
      - p2-l-7 [rect] at (1060, 532) size 110x4 radius 2 fill #e6e6e6
      - p2-l-8 [rect] at (1060, 544) size 150x4 radius 2 fill #e6e6e6
      - p2-l-9 [rect] at (1060, 556) size 120x4 radius 2 fill #e6e6e6
      - p2-l-10 [rect] at (1060, 568) size 140x4 radius 2 fill #e6e6e6
      - p2-l-11 [rect] at (1060, 580) size 100x4 radius 2 fill #e6e6e6
      - p2-l-12 [rect] at (1060, 592) size 150x4 radius 2 fill #e6e6e6
      - p2-l-13 [rect] at (1060, 604) size 120x4 radius 2 fill #e6e6e6
      - p2-l-14 [rect] at (1060, 616) size 130x4 radius 2 fill #e6e6e6
      - p2-l-15 [rect] at (1060, 628) size 100x4 radius 2 fill #e6e6e6
      - p3-h [text] at (680, 704) text "User flow" 9px weight 700 #333333
      - p3 [rect] at (680, 718) size 560x90 radius 6 fill #ffffff stroke #e2e2e2 1px
      - f1 [ellipse] at (710, 744) size 16x16 fill #141414
      - f2 [ellipse] at (830, 744) size 16x16 fill #141414
      - f3 [ellipse] at (950, 744) size 16x16 fill #141414
      - f4 [ellipse] at (1070, 744) size 16x16 fill #141414
      - f5 [ellipse] at (1190, 744) size 16x16 fill #141414
      - flow-line [line] at (360, 84) stroke #cfcfcf 1.5px
      - p4-h [text] at (680, 828) text "Implementation checklist" 9px weight 700 #333333
      - p4 [rect] at (680, 842) size 340x180 radius 6 fill #ffffff stroke #e2e2e2 1px
      - p4-l-0 [rect] at (692, 856) size 280x4 radius 2 fill #e6e6e6
      - p4-l-1 [rect] at (692, 876) size 240x4 radius 2 fill #e6e6e6
      - p4-l-2 [rect] at (692, 896) size 260x4 radius 2 fill #e6e6e6
      - p4-l-3 [rect] at (692, 916) size 200x4 radius 2 fill #e6e6e6
      - p4-l-4 [rect] at (692, 936) size 280x4 radius 2 fill #e6e6e6
      - p4-l-5 [rect] at (692, 956) size 230x4 radius 2 fill #e6e6e6
      - p4-l-6 [rect] at (692, 976) size 250x4 radius 2 fill #e6e6e6
      - p4-l-7 [rect] at (692, 996) size 210x4 radius 2 fill #e6e6e6
      - p5 [rect] at (1040, 842) size 200x180 radius 8 fill #141414
      - p5-h [text] at (1052, 854) text "Critique status" 8px weight 700 #ffffff
      - p5-a [rect] at (1052, 876) size 120x10 radius 5 fill #1f9d55
      - p5-b [rect] at (1052, 896) size 100x10 radius 5 fill #1f9d55
      - p5-c [rect] at (1052, 916) size 140x10 radius 5 fill #e0a020
      - p5-d [rect] at (1052, 936) size 90x10 radius 5 fill #1f9d55
      - hover [rect] at (676, 260) size 568x148 radius 13 stroke #1e88ff 2px visible [66, 80)
    - toolbar [rect] at (840, 974) size 240x40 radius 10 fill #ffffff
    - toolbar-t [text] at (840, 985) size 240x0 text "▸   ⌗   ▢   ✎   T   ◯   ⊕   ☰" 12px weight 400 #333333
    - toolbar-sel [rect] at (848, 980) size 26x28 radius 6 fill #1e88ff
- pointer [cursor] at (1020, 330)
    keyframes tx: f30=0, f60=40 (inOut)
    keyframes ty: f30=0, f60=12 (inOut)

## Construction steps
1. Timeline 1920x1080 at 30 fps; Fusion composition 80 frames. Local 0 = master frame 3136.
2. Window 1680x1000 at (120,40): 240 px left panel, 240 px right panel, 1200x956 canvas between them masked to its bounds.
3. Put every page element under one Transform inside the canvas mask. Pivot at the hero card centre (canvas-local x=600, y=250). Size 1 to 1.88 over frames 13-29 with ease-out.
4. Zoom readout: Text+ in the right panel stepping 24, 27, 30, 35, 39, 41, 45% at frames 0, 13, 16, 19, 22, 25, 27 (hold keys).
5. Hover: 2 px #1e88ff rounded rectangle around the hero card, inside the same Transform, cut in at frame 66; pointer eases 40 px right over frames 30-60.
6. Easy mistake: scaling the whole window; panels and chrome must stay put while the document alone grows.

## Content variants
Default copy:
- fileTab: New feature ideas
- fileName: New feature ideas
- hero: Agenda copilot for the workspace
Adaptation changes:
- fileTab: Support console concepts
- fileName: Support console concepts
- hero: Inbox triage for support teams

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