# Hover a sidebar item to raise its pill, click, and smooth-scroll the page to that section

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 Research and Customer Outreach" (5DbZAMGZ5oM), published 2026-07-28.
Source interval [1262, 1350) on the 30/1 fps master: 88 frames, 2.933333 s. Local frame 0 = source frame 1262.
Create a 1920x1080 progressive timeline at 30/1 fps and a Fusion composition exactly 88 frames long. Keep integer frames; do not round the frame rate.
Background field: #0a0912. Export silent H.264 yuv420p to match the intended playback container.

## Observation
The account-brief page is at the 'What they actually said' section. The pointer leaves the quote block and travels left to the sidebar nav (f0-20); as it lands on the 'Stakeholders' item a rounded hover pill appears behind the label (~f22-30). On the click (~f34) the URL gains a '#stakeholders' anchor and the content column scrolls upward over about 40 frames, passing a dark card and settling on the 'Known executives' heading with a row of four person cards (~f78).

## Mechanism
Anchor navigation: a hover pill acknowledges the target, and the click drives one eased vertical scroll of the content column while the sidebar stays fixed.

## Phases (local frames)
- 0: Pointer leaves the quote block
- 22: Hover pill fades in behind the nav item
- 34: Click; URL gains anchor
- 36: Content column scrolls up 1180px, eased
- 78: Settles on the next section heading and cards

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- page [group] at (60, 40) size 1800x1000 radius 14 fill #ffffff stroke #d8d8d8 1px
  - content [group] at (60, 40) size 1800x2400
      keyframes y: f36=0, f78=-1180 (inOut)
    - sec-kicker [text] at (400, 250) text "03 · ANNOUNCEMENT AND EVIDENCE" 13px weight 400 #888
    - sec-title [text] at (400, 276) text "What Harbor actually said." 48px weight 500 #111
    - sec-aside [text] at (1260, 280) size 420x0 text "Four passages turn the earnings call into a precise account-development signal." 15px weight 400 #666
    - q1-meta [text] at (480, 370) text "00:16:18   LENA MARQUEZ" 12px weight 400 #999
    - q1-title [text] at (480, 394) text "Lantern is funded and board-approved" 22px weight 500 #111
    - q1-body [text] at (480, 432) size 1100x0 text ""This quarter, our board approved Project Lantern, a $900 million multi-year investment within our Fleet 2030 productivity program."" 16px weight 400 #333
    - q1-label [text] at (480, 498) text "ACCOUNT IMPLICATION" 12px weight 400 #999
    - q1-impl [text] at (660, 495) text "Lead with the Lantern first release and its telemetry proof requirements." 15px weight 400 #333
    - q1-link [text] at (480, 540) text "Open evidence note ↗" 15px weight 500 #111
    - q1-conf [text] at (1620, 392) text "CONFIRMED" 12px weight 400 #3a7f4a
    - rule [line] at (60, 40) stroke #e4e4e4 1px
    - q2-meta [text] at (480, 620) text "00:24:40   DANIEL MERCER" 12px weight 400 #999
    - q2-title [text] at (480, 644) text "Fragmented evidence is slowing diagnosis" 22px weight 500 #111
    - q2-body [text] at (480, 682) size 1100x0 text ""Today, a single production issue can require teams to move between telemetry, runbooks, ticket history, model-change context and specialist knowledge that live in different systems."" 16px weight 400 #333
    - dark-card [rect] at (400, 840) size 1320x330 radius 14 fill #0f2340
    - dark-card-t [text] at (440, 880) size 600x0 text "Lead narrow. Prove the operating pattern." 30px weight 500 #ffffff
    - dark-card-b [text] at (440, 980) size 1240x0 text "Observability is the only primary entry point. Every quantitative target below is an internal working benchmark, not a customer commitment." 15px weight 400 #c8d2e0
    - next-kicker [text] at (400, 1430) text "04 · STAKEHOLDER DECISION MAP" 13px weight 400 #888
    - next-title [text] at (400, 1456) text "Known executives. Unknown / buying committee." 48px weight 500 #111
    - next-aside [text] at (1260, 1460) size 420x0 text "Public-role evidence is strong for the four earnings-call executives. Every research candidate remains unverified until a current source confirms the role." 15px weight 400 #666
    - row-kicker [text] at (480, 1600) text "CONFIRMED THROUGH THE EARNINGS CALL" 12px weight 400 #999
    - card0 [rect] at (480, 1630) size 280x190 radius 12 fill #ffffff stroke #e4e4e4 1px
    - card0-av [ellipse] at (496, 1646) size 36x36 fill #c9d3de
    - card0-n [text] at (542, 1648) text "Lena Marquez" 15px weight 600 #111
    - card0-r [text] at (542, 1668) text "Chief Executive" 12px weight 400 #777
    - card0-b [text] at (496, 1702) size 248x0 text "Executive program sponsorship and enterprise priorities. Announced the board-approved initiative on the call." 13px weight 400 #444
    - card1 [rect] at (780, 1630) size 280x190 radius 12 fill #ffffff stroke #e4e4e4 1px
    - card1-av [ellipse] at (796, 1646) size 36x36 fill #c9d3de
    - card1-n [text] at (842, 1648) text "Nathan Cho" 15px weight 600 #111
    - card1-r [text] at (842, 1668) text "Chief Financial Officer" 12px weight 400 #777
    - card1-b [text] at (796, 1702) size 248x0 text "Executive program sponsorship and enterprise priorities. Announced the board-approved initiative on the call." 13px weight 400 #444
    - card2 [rect] at (1080, 1630) size 280x190 radius 12 fill #ffffff stroke #e4e4e4 1px
    - card2-av [ellipse] at (1096, 1646) size 36x36 fill #c9d3de
    - card2-n [text] at (1142, 1648) text "Daniel Mercer" 15px weight 600 #111
    - card2-r [text] at (1142, 1668) text "Chief Operating Officer" 12px weight 400 #777
    - card2-b [text] at (1096, 1702) size 248x0 text "Executive program sponsorship and enterprise priorities. Announced the board-approved initiative on the call." 13px weight 400 #444
    - card3 [rect] at (1380, 1630) size 280x190 radius 12 fill #ffffff stroke #e4e4e4 1px
    - card3-av [ellipse] at (1396, 1646) size 36x36 fill #c9d3de
    - card3-n [text] at (1442, 1648) text "Priya Natarajan" 15px weight 600 #111
    - card3-r [text] at (1442, 1668) text "Chief Technology Officer" 12px weight 400 #777
    - card3-b [text] at (1396, 1702) size 248x0 text "Executive program sponsorship and enterprise priorities. Announced the board-approved initiative on the call." 13px weight 400 #444
    - row2-kicker [text] at (480, 1870) text "RESEARCH CANDIDATES TO VALIDATE" 12px weight 400 #999
  - side-plate [rect] at (60, 112) size 300x928 fill #ffffff
  - chrome [rect] at (60, 40) size 1800x72 fill #f1f1f1
  - dot1 [ellipse] at (78, 54) size 12x12 fill #ff5f57
  - dot2 [ellipse] at (96, 54) size 12x12 fill #febc2e
  - dot3 [ellipse] at (114, 54) size 12x12 fill #28c840
  - url [rect] at (80, 80) size 1760x26 radius 8 fill #e6e6e6
  - url-text [text] at (94, 84) text "harbor-devices-brief-20260710.example.site" 14px weight 400 #555 visible [0, 34)
  - url-text-2 [text] at (94, 84) text "harbor-devices-brief-20260710.example.site#stakeholders" 14px weight 400 #555 visible [34, 88)
  - topbar [text] at (90, 132) text "Meridian Systems Inc." 15px weight 600 #222
  - side-head [text] at (90, 190) text "ACCOUNT BRIEF" 13px weight 400 #888
  - side-acct [text] at (90, 212) text "Harbor Devices" 16px weight 600 #222
  - hover-pill [rect] at (78, 394) size 150x28 radius 14 fill #efefef
      keyframes opacity: f22=0, f30=1 (out)
  - side-nav-a [text] at (90, 260) text "Why now / Company / Announcement / Capability map / Reference story" 13px weight 400 #666
  - side-nav-target [text] at (90, 400) text "Stakeholders" 13px weight 400 #666
      keyframes color: f33=#666666, f36=#111111
  - side-nav-b [text] at (90, 428) text "Account approach / Outbound email / Meeting prep / Research gaps" 13px weight 400 #666
  - cta [rect] at (90, 920) size 180x70 radius 10 fill #0f2340
  - cta-a [text] at (106, 936) text "Commercial state" 12px weight 400 #9fb0c8
  - cta-b [text] at (106, 954) text "No active opportunity" 14px weight 600 #ffffff
- pointer [cursor] at (900, 520) clicks at [34]
    keyframes tx: f0=0, f22=-780 (inOut), f88=-778
    keyframes ty: f0=0, f22=-108 (inOut), f88=-104

## Construction steps
1. Timeline 1920x1080 at 30 fps; Fusion composition 88 frames. Local 0 = master frame 1262.
2. Split the browser page into a fixed layer (chrome, URL bar, 300px sidebar with nav labels and CTA card) and a tall 'content' layer (2400px) that carries both sections; mask the content to the page rectangle.
3. Pointer: (900,520) to the sidebar item at (120,412) over frames 0-22 with ease in/out; click ring at 34.
4. Hover pill: 150x28 rounded rect at #efefef behind the 'Stakeholders' label, Blend 0 to 1 over frames 22-30. Darken the label from #666 to #111 at frames 33-36 and swap the URL text to append the '#stakeholders' anchor on frame 34.
5. Content layer Y: 0 at frame 36 to -1180 at frame 78 with ease in/out so the dark card streaks past and the 'Known executives' heading with four cards settles in the same slot the previous heading occupied.
6. Easy mistake: the sidebar must not move with the scroll; keep it and the browser chrome outside the scrolling layer.

## Content variants
Default copy:
- url: harbor-devices-brief-20260710.example.site
- urlAnchor: #stakeholders
- org: Meridian Systems Inc.
- account: Harbor Devices
- sectionTitle: What Harbor actually said.
- sectionAside: Four passages turn the earnings call into a precise account-development signal.
- speaker1: LENA MARQUEZ
- quote1Title: Lantern is funded and board-approved
- quote1: "This quarter, our board approved Project Lantern, a $900 million multi-year investment within our Fleet 2030 productivity program."
- quote1Impl: Lead with the Lantern first release and its telemetry proof requirements.
- openLink: Open evidence note
- speaker2: DANIEL MERCER
- quote2Title: Fragmented evidence is slowing diagnosis
- navTarget: Stakeholders
- nextKicker: 04 · STAKEHOLDER DECISION MAP
- nextTitle: Known executives. Unknown / buying committee.
- nextAside: Public-role evidence is strong for the four earnings-call executives. Every research candidate remains unverified until a current source confirms the role.
- cardBody: Executive program sponsorship and enterprise priorities. Announced the board-approved initiative on the call.
Adaptation changes:
- url: northwind-labs-brief-20260802.example.site
- account: Northwind Labs
- sectionTitle: What Northwind actually said.
- sectionAside: Three passages from the annual report become one account signal.
- speaker1: OWEN HALE
- quote1Title: Modernisation budget is confirmed
- quote1: "We have committed $400 million over three years to modernise plant telemetry and the data platform beneath it."
- quote1Impl: Anchor outreach on the plant telemetry tranche.
- speaker2: RUTH ADEYEMI
- quote2Title: Alert fatigue is the stated blocker
- nextTitle: Named sponsors. Unmapped / approval chain.
- nextAside: Three executives are quoted in public filings. Procurement and security reviewers are inferred and need confirmation.
- cardBody: Owns the modernisation budget line and reports progress to the board each quarter.

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