# Push in on a floating browser, then scroll the account page down to its stakeholder map

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 "ChatGPT Work for Sales: Account Planning and Meeting Prep" (hjXi7b01s2c), published 2026-07-28.
Source interval [2430, 2610) on the 60/1 fps master: 180 frames, 3.000000 s. Local frame 0 = source frame 2430.
Create a 1920x1080 progressive timeline at 60/1 fps and a Fusion composition exactly 180 frames long. Keep integer frames; do not round the frame rate.
Background field: #0a0d18. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A small browser window floats centred on a dark starfield showing an account-plan page with a navy hero card (local f0–14). Between ~f14 and f28 the whole window pushes in until the page fills most of the frame. From ~f35 the page content scrolls upward past bullet lists and a dated 'path to close' timeline; by ~f150 a 'People we need aligned' heading and a tree of stakeholder cards has scrolled into view and settles by f175.

## Mechanism
A camera push-in on a floating app window followed by a long eased page scroll inside a fixed browser chrome, landing on a new section.

## Phases (local frames)
- 0: Small floating browser holds
- 14: Camera pushes in on the window
- 35: Page scrolls up past lists and timeline
- 150: Stakeholder map arrives and settles

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- star-0 [ellipse] at (0, 0) size 3x3 fill #ffffff
- star-1 [ellipse] at (397, 211) size 3x3 fill #ffffff
- star-2 [ellipse] at (794, 422) size 3x3 fill #ffffff
- star-3 [ellipse] at (1191, 633) size 3x3 fill #ffffff
- star-4 [ellipse] at (1588, 844) size 3x3 fill #ffffff
- star-5 [ellipse] at (85, 1055) size 3x3 fill #ffffff
- star-6 [ellipse] at (482, 206) size 3x3 fill #ffffff
- star-7 [ellipse] at (879, 417) size 3x3 fill #ffffff
- star-8 [ellipse] at (1276, 628) size 3x3 fill #ffffff
- star-9 [ellipse] at (1673, 839) size 3x3 fill #ffffff
- star-10 [ellipse] at (170, 1050) size 3x3 fill #ffffff
- star-11 [ellipse] at (567, 201) size 3x3 fill #ffffff
- star-12 [ellipse] at (964, 412) size 3x3 fill #ffffff
- star-13 [ellipse] at (1361, 623) size 3x3 fill #ffffff
- star-14 [ellipse] at (1758, 834) size 3x3 fill #ffffff
- star-15 [ellipse] at (255, 1045) size 3x3 fill #ffffff
- star-16 [ellipse] at (652, 196) size 3x3 fill #ffffff
- star-17 [ellipse] at (1049, 407) size 3x3 fill #ffffff
- browser [group] at (300, 110) size 1320x860
  - chrome [rect] at (300, 110) size 1320x860 radius 14 fill #ffffff stroke #2a2f3d 1px
  - tabbar [rect] at (300, 110) size 1320x40 radius 14 fill #f1f2f4
  - dot-r [ellipse] at (316, 124) size 12x12 fill #ff5f57
  - dot-y [ellipse] at (336, 124) size 12x12 fill #febc2e
  - dot-g [ellipse] at (356, 124) size 12x12 fill #28c840
  - urlbar [rect] at (700, 118) size 520x24 radius 6 fill #ffffff stroke #dcdfe4 1px
  - agenda [rect] at (300, 150) size 190x820 fill #f7f7f8
  - agenda-0 [rect] at (316, 180) size 150x10 radius 4 fill #d9dce2
  - agenda-1 [rect] at (316, 240) size 150x10 radius 4 fill #d9dce2
  - agenda-2 [rect] at (316, 300) size 150x10 radius 4 fill #d9dce2
  - agenda-3 [rect] at (316, 360) size 150x10 radius 4 fill #d9dce2
  - agenda-4 [rect] at (316, 420) size 150x10 radius 4 fill #d9dce2
  - agenda-5 [rect] at (316, 480) size 150x10 radius 4 fill #d9dce2
  - agenda-6 [rect] at (316, 540) size 150x10 radius 4 fill #d9dce2
  - agenda-7 [rect] at (316, 600) size 150x10 radius 4 fill #d9dce2
  - agenda-8 [rect] at (316, 660) size 150x10 radius 4 fill #d9dce2
  - agenda-9 [rect] at (316, 720) size 150x10 radius 4 fill #d9dce2
  - agenda-10 [rect] at (316, 780) size 150x10 radius 4 fill #d9dce2
  - agenda-11 [rect] at (316, 840) size 150x10 radius 4 fill #d9dce2
  - nav [rect] at (490, 150) size 170x820 fill #0f2447
  - nav-brand [text] at (506, 170) text "Blossom" 16px weight 700 #ffffff
  - nav-0 [rect] at (506, 220) size 120x10 radius 4 fill #3a5580
  - nav-1 [rect] at (506, 260) size 120x10 radius 4 fill #3a5580
  - nav-2 [rect] at (506, 300) size 120x10 radius 4 fill #3a5580
  - nav-3 [rect] at (506, 340) size 120x10 radius 4 fill #3a5580
  - nav-4 [rect] at (506, 380) size 120x10 radius 4 fill #3a5580
  - nav-5 [rect] at (506, 420) size 120x10 radius 4 fill #3a5580
  - nav-6 [rect] at (506, 460) size 120x10 radius 4 fill #3a5580
  - nav-7 [rect] at (506, 500) size 120x10 radius 4 fill #3a5580
  - nav-8 [rect] at (506, 540) size 120x10 radius 4 fill #3a5580
  - viewport [group] at (660, 150) size 960x820
    - content [group] at (700, 180) size 900x1440
        keyframes y: f35=30, f170=-870 (inOut)
      - hdr-eyebrow [text] at (700, 180) text "ACCOUNT PLAN" 14px weight 600 #6b7280
      - hdr-title [text] at (700, 204) text "Northwind Fabrication Co." 34px weight 700 #111827
      - hero [rect] at (700, 270) size 560x190 radius 16 fill #132a4d
      - hero-kicker [text] at (724, 292) text "RECOMMENDED NEXT ACTION" 12px weight 600 #9fb3d6
      - hero-title [text] at (724, 318) size 510x0 text "Turn Thursday's demo into a paid pilot decision" 26px weight 600 #ffffff
      - hero-cta [rect] at (724, 412) size 180x32 radius 8 fill #2f6fe4
      - stat-1 [rect] at (1290, 270) size 190x190 radius 16 fill #ffffff stroke #e5e7eb 1px
      - stat-2 [rect] at (1500, 270) size 190x190 radius 16 fill #ffffff stroke #e5e7eb 1px
      - sec-1 [text] at (700, 500) text "WHY WE WIN" 14px weight 600 #6b7280
      - bullets [group] at (700, 530) size 1000x220
        - b-0-dot [rect] at (700, 542) size 8x8 radius 4 fill #2b3d63
        - b-0-bar [rect] at (722, 538) size 520x14 radius 4 fill #d7dbe3
        - b-1-dot [rect] at (700, 578) size 8x8 radius 4 fill #2b3d63
        - b-1-bar [rect] at (722, 574) size 657x14 radius 4 fill #d7dbe3
        - b-2-dot [rect] at (700, 614) size 8x8 radius 4 fill #2b3d63
        - b-2-bar [rect] at (722, 610) size 534x14 radius 4 fill #d7dbe3
        - b-3-dot [rect] at (700, 650) size 8x8 radius 4 fill #2b3d63
        - b-3-bar [rect] at (722, 646) size 671x14 radius 4 fill #d7dbe3
        - b-4-dot [rect] at (700, 686) size 8x8 radius 4 fill #2b3d63
        - b-4-bar [rect] at (722, 682) size 548x14 radius 4 fill #d7dbe3
        - b-5-dot [rect] at (700, 722) size 8x8 radius 4 fill #2b3d63
        - b-5-bar [rect] at (722, 718) size 685x14 radius 4 fill #d7dbe3
      - sec-2 [text] at (700, 780) text "PATH TO CLOSE" 14px weight 600 #6b7280
      - timeline [rect] at (700, 810) size 1000x2 fill #d1d5db
      - tl-0 [text] at (700, 824) text "Aug 4" 15px weight 600 #111827
      - tl-1 [text] at (900, 824) text "Aug 11" 15px weight 600 #111827
      - tl-2 [text] at (1100, 824) text "Aug 18" 15px weight 600 #111827
      - tl-3 [text] at (1300, 824) text "Aug 25" 15px weight 600 #111827
      - tl-4 [text] at (1500, 824) text "Sep 1" 15px weight 600 #111827
      - tl-0-bar [rect] at (700, 856) size 140x10 radius 4 fill #e5e7eb
      - tl-1-bar [rect] at (900, 856) size 140x10 radius 4 fill #e5e7eb
      - tl-2-bar [rect] at (1100, 856) size 140x10 radius 4 fill #e5e7eb
      - tl-3-bar [rect] at (1300, 856) size 140x10 radius 4 fill #e5e7eb
      - tl-4-bar [rect] at (1500, 856) size 140x10 radius 4 fill #e5e7eb
      - sec-3 [text] at (700, 940) text "STAKEHOLDER MAP" 14px weight 600 #6b7280
      - people-title [text] at (700, 966) text "People we need aligned" 30px weight 700 #111827
      - people-note [rect] at (700, 1018) size 1000x40 radius 8 fill #fef9c3
      - orgchart [group] at (700, 1080) size 1000x540
        - tree-1 [line] at (700, 1080) stroke #c5cbd6 2px
        - tree-2 [line] at (700, 1080) stroke #c5cbd6 2px
        - tree-3 [line] at (700, 1080) stroke #c5cbd6 2px
        - tree-4 [line] at (700, 1080) stroke #c5cbd6 2px
        - tree-5 [line] at (700, 1080) stroke #c5cbd6 2px
        - card-0 [group] at (1260, 1170) size 260x120
          - card-0-bg [rect] at (1260, 1170) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-0-avatar [ellipse] at (1276, 1198) size 60x60 fill #c9d3e3
          - card-0-role [text] at (1352, 1196) text "EXECUTIVE SPONSOR" 13px weight 600 #7a8699
          - card-0-name [text] at (1352, 1218) text "Dana Whitfield" 18px weight 600 #111827
          - card-0-l1 [rect] at (1352, 1250) size 120x8 radius 4 fill #e5e9f0
        - card-1 [group] at (760, 1330) size 260x120
          - card-1-bg [rect] at (760, 1330) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-1-avatar [ellipse] at (776, 1358) size 60x60 fill #c9d3e3
          - card-1-role [text] at (852, 1356) text "ECONOMIC BUYER" 13px weight 600 #7a8699
          - card-1-name [text] at (852, 1378) text "Marcus Oyelaran" 18px weight 600 #111827
          - card-1-l1 [rect] at (852, 1410) size 120x8 radius 4 fill #e5e9f0
        - card-2 [group] at (1080, 1330) size 260x120
          - card-2-bg [rect] at (1080, 1330) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-2-avatar [ellipse] at (1096, 1358) size 60x60 fill #c9d3e3
          - card-2-role [text] at (1172, 1356) text "CHAMPION" 13px weight 600 #7a8699
          - card-2-name [text] at (1172, 1378) text "Priya Raman" 18px weight 600 #111827
          - card-2-l1 [rect] at (1172, 1410) size 120x8 radius 4 fill #e5e9f0
        - card-3 [group] at (1400, 1330) size 260x120
          - card-3-bg [rect] at (1400, 1330) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-3-avatar [ellipse] at (1416, 1358) size 60x60 fill #c9d3e3
          - card-3-role [text] at (1492, 1356) text "PAPER PROCESS" 13px weight 600 #7a8699
          - card-3-name [text] at (1492, 1378) text "Tom Keller" 18px weight 600 #111827
          - card-3-l1 [rect] at (1492, 1410) size 120x8 radius 4 fill #e5e9f0
        - card-4 [group] at (920, 1490) size 260x120
          - card-4-bg [rect] at (920, 1490) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-4-avatar [ellipse] at (936, 1518) size 60x60 fill #c9d3e3
          - card-4-role [text] at (1012, 1516) text "TECHNICAL LEAD" 13px weight 600 #7a8699
          - card-4-name [text] at (1012, 1538) text "Sofia Grant" 18px weight 600 #111827
          - card-4-l1 [rect] at (1012, 1570) size 120x8 radius 4 fill #e5e9f0
        - card-5 [group] at (1240, 1490) size 260x120
          - card-5-bg [rect] at (1240, 1490) size 260x120 radius 12 fill #ffffff stroke #dfe3ea 1px
          - card-5-avatar [ellipse] at (1256, 1518) size 60x60 fill #c9d3e3
          - card-5-role [text] at (1332, 1516) text "SECURITY REVIEW" 13px weight 600 #7a8699
          - card-5-name [text] at (1332, 1538) text "Evan Cho" 18px weight 600 #111827
          - card-5-l1 [rect] at (1332, 1570) size 120x8 radius 4 fill #e5e9f0

## Camera (whole scene, about canvas centre)
- scale: f14=0.62, f28=1.0 (out)

## Construction steps
1. Timeline 1920x1080 at 60 fps; Fusion comp 180 frames. Local 0 = master frame 2430.
2. Background: solid #0a0d18 with a dozen 3px white dots at 50% opacity for the starfield.
3. Browser chrome: 1320x860 white plate with a 40px grey tab bar, three traffic-light dots and a fixed 190px agenda column plus 170px navy nav column; none of these scroll.
4. Viewport: a masked 960x820 rectangle; inside it one Transform node holds the whole page (hero card, bullets, timeline, people heading, org-chart cards). Keyframe its Y from +30 at frame 35 to -870 at frame 170 with ease-in-out.
5. Camera: a top-level Transform on the entire comp about canvas centre, Size 0.62 at frame 14 to 1.00 at frame 28, ease-out. Do not start the scroll until the push-in has landed.
6. Org-chart cards: 260x120 white cards with a 60px avatar circle, small caps role and 18px name; connect them with 2px #c5cbd6 polylines drawn before the cards so the cards cover the joints.
7. Easy mistake: scale the whole comp, not the window plate alone, otherwise the starfield stays static and the push-in reads as a window resize.

## Content variants
Default copy:
- eyebrow: ACCOUNT PLAN
- account: Northwind Fabrication Co.
- heroTitle: Turn Thursday's demo into a paid pilot decision
- sectionA: WHY WE WIN
- sectionB: PATH TO CLOSE
- sectionC: STAKEHOLDER MAP
- peopleTitle: People we need aligned
- date0: Aug 4
- date1: Aug 11
- date2: Aug 18
- date3: Aug 25
- date4: Sep 1
- role0: EXECUTIVE SPONSOR
- role1: ECONOMIC BUYER
- role2: CHAMPION
- role3: PAPER PROCESS
- role4: TECHNICAL LEAD
- role5: SECURITY REVIEW
- personA: Dana Whitfield
- personB: Marcus Oyelaran
- personC: Priya Raman
- personD: Tom Keller
- personE: Sofia Grant
- personF: Evan Cho
- brand: Blossom
Adaptation changes:
- account: Harbor Logistics Group
- heroTitle: Convert the security workshop into a signed order form
- peopleTitle: Decision makers to brief
- personA: Lena Ortiz
- personB: Mark Feldman
- personC: Grace Holloway
- personD: Daniel Mercer
- personE: Ana Petrova
- personF: Noah Lindqvist
- date0: Sep 8
- date1: Sep 15
- date2: Sep 22
- date3: Sep 29
- date4: Oct 6
- brand: Lumen

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