# Scrub a hover line across a stacked chart and swap the KPI count at each column

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 "Introducing Sites in Codex" (VRvC5smyzso), published 2026-06-05.
Source interval [1400, 1470) on the 30/1 fps master: 70 frames, 2.333333 s. Local frame 0 = source frame 1400.
Create a 1920x1080 progressive timeline at 30/1 fps and a Fusion composition exactly 70 frames long. Keep integer frames; do not round the frame rate.
Background field: #4a4fd8. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A cream report page with a dark green sidebar shows a stacked area chart with a KPI card to its right reading a large '143'. The pointer moves onto the chart at about f10 and a thin vertical hover line with a highlighted x-axis label appears. As the pointer drags right the line jumps column to column: at f28 the KPI card swaps to '117' and its caption changes, at f48 it swaps to '96'. The page then begins to scroll upward at about f68.

## Mechanism
Hover-driven data binding: a vertical scrub line snaps between columns and the linked KPI card hard-swaps its number and caption at each snap.

## Phases (local frames)
- 0: Chart at rest, KPI shows the total
- 10: Hover line appears at column five
- 28: Snap to column four, KPI swaps to 117
- 48: Snap to column three, KPI swaps to 96
- 68: Page starts scrolling

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- page [group] at (160, 40) size 1600x1000 radius 18 fill #f5f2ea
    keyframes y: f68=40, f70=-20
  - side [rect] at (160, 40) size 170x1000 fill #10352b
  - side-brand [text] at (180, 70) text "Aster Ridge" 15px weight 600 #ffffff
  - side-nav [text] at (180, 130) text "Read-only workspace / Account overview / Meeting prep / Approved evidence" 13px weight 400 #a9c2b5
  - side-active [rect] at (172, 270) size 146x40 radius 8 fill #1d4a3d
  - side-active-t [text] at (180, 278) text "Executive business / review" 13px weight 600 #ffffff
  - kicker [text] at (370, 100) text "REGIONAL FOOTPRINT / QBR PREPARATION" 12px weight 400 #7a7a70
  - title [text] at (370, 122) text "Monitoring expansion now reaches every operating region." 28px weight 500 #111
  - sub [text] at (370, 166) size 700x0 text "Remote assets with active telemetry feeds. Select a reported snapshot to prepare a sharper operating question for the meeting." 14px weight 400 #666
  - legend [text] at (1370, 120) text "North Basin / Coastal network / Mountain corridor / Desert sites" 13px weight 400 #444
  - chart [group] at (390, 240) size 780x420
    - a-low [path] at (390, 240) fill #0f5c46
    - a-mid [path] at (390, 240) fill #2c8f6c
    - a-top [path] at (390, 240) fill #c9a24a
    - a-mid2 [path] at (390, 240) fill #2c8f6c
    - a-low2 [path] at (390, 240) fill #0f5c46
    - axis-line [line] at (390, 240) stroke #c8c4b8 1px
    - axis [text] at (360, 652) text "Q3 25         Q4 25         Q1 26         Q2 26         Q3 26         Q4 26         Aug 27" 12px weight 400 #777
    - hover [group] at (910, 240) size 2x440 visible [10, 70)
        keyframes x: f27=520, f28=390, f47=390, f48=260
      - hover-line [line] at (910, 240) stroke #333 1.5px
      - hover-pill [rect] at (880, 646) size 60x22 radius 6 fill #1d4a3d
      - hover-dot [ellipse] at (905, 425) size 10x10 fill #ffffff stroke #1d4a3d 2px
  - kpi [group] at (1200, 270) size 300x360 radius 12 fill #ffffff stroke #e5e1d6 1px
    - kpi-label [text] at (1222, 290) text "SELECTED SNAPSHOT" 11px weight 400 #8a8a80
    - kpi-a [text] at (1222, 314) text "143" 64px weight 500 #111 visible [0, 28)
    - kpi-b [text] at (1222, 314) text "117" 64px weight 500 #111 visible [28, 48)
    - kpi-c [text] at (1222, 314) text "96" 64px weight 500 #111 visible [48, 70)
    - kpi-unit [text] at (1222, 398) text "remote assets monitored" 13px weight 400 #666
    - kpi-cap-a [text] at (1222, 440) size 256x0 text "Expansion is distributed across four regions. Test whether secure, least-privilege access could shorten incident response." 14px weight 400 #333 visible [0, 28)
    - kpi-cap-b [text] at (1222, 440) size 256x0 text "Coastal monitoring is approaching the original plan. Ask how shared procedures are enforced during alarms." 14px weight 400 #333 visible [28, 48)
    - kpi-cap-c [text] at (1222, 440) size 256x0 text "Coverage accelerates after the evaluation boundary is discussed. Keep the conversation on read-only context." 14px weight 400 #333 visible [48, 70)
  - shelf [rect] at (1540, 80) size 200x940 fill #f0ece2
  - shelf-t [text] at (1556, 100) text "Source shelf / A1  Account profile / A2  Business review notes / A3  Industry priorities / A4  Customer talking points / A5  Security FAQ" 13px weight 400 #555
- pointer [cursor] at (700, 700)
    keyframes tx: f0=0, f10=210 (inOut), f20=210, f28=80 (inOut), f40=80, f48=-50 (inOut)
    keyframes ty: f0=0, f10=-120 (inOut), f48=-120

## Construction steps
1. Timeline 1920x1080 at 30 fps; Fusion composition 70 frames. Local 0 = master frame 1400.
2. Page: 1600x1000 cream plate on a blue field with a 170px dark green sidebar; chart group at (390,240) with three stacked polygon areas (gold over two greens) spanning seven columns 130px apart.
3. Hover group (dashed vertical line, x-axis pill, white dot) visible from frame 10 at column five (x=520 inside the chart); step its X to 390 on frame 28 and 260 on frame 48 with hold keys, not eased.
4. KPI card: 300x360 white card at (1200,270). Three Text+ nodes for 143 / 117 / 96 at 64px, each with a matching 14px caption; cut between them on frames 28 and 48 by trimming visibility.
5. Pointer: drift onto the chart over frames 0-10, then move left in two eased 8-frame hops that end on the swap frames.
6. Easy mistake: interpolating the number or crossfading the caption; the source hard-swaps both on the snap frame. Optional: start the whole page moving up on frame 68 to preview the scroll that follows.

## Content variants
Default copy:
- brand: Aster Ridge
- sectionKicker: REGIONAL FOOTPRINT / QBR PREPARATION
- sectionTitle: Monitoring expansion now reaches every operating region.
- sectionSub: Remote assets with active telemetry feeds. Select a reported snapshot to prepare a sharper operating question for the meeting.
- kpiLabel: SELECTED SNAPSHOT
- kpiA: 143
- kpiB: 117
- kpiC: 96
- kpiCaptionA: Expansion is distributed across four regions. Test whether secure, least-privilege access could shorten incident response.
- kpiCaptionB: Coastal monitoring is approaching the original plan. Ask how shared procedures are enforced during alarms.
- kpiCaptionC: Coverage accelerates after the evaluation boundary is discussed. Keep the conversation on read-only context.
- legend: North Basin / Coastal network / Mountain corridor / Desert sites
- axis: Q3 25 / Q4 25 / Q1 26 / Q2 26 / Q3 26 / Q4 26 / Aug 27
Adaptation changes:
- brand: Kestrel Grid
- sectionKicker: FLEET COVERAGE / BOARD PREP
- sectionTitle: Sensor coverage now spans the full generation fleet.
- sectionSub: Turbines with live vibration feeds. Pick a snapshot to sharpen the question for the board.
- kpiA: 212
- kpiB: 164
- kpiC: 128
- kpiCaptionA: Coverage is spread across three wind regions. Ask how alert thresholds are tuned per site.
- kpiCaptionB: The offshore group lags the plan. Ask what blocked the retrofit window.
- kpiCaptionC: Early coverage came from the pilot region only. Keep the discussion on data quality.
- legend: Offshore / Highlands / Plains / Pilot region

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