# Fade a theme pill into the corner, then hard-swap the page field from black to navy

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 "How Shopify Uses ChatGPT Work to Build Faster with AI Agents" (OHVu3Y4B3RI), published 2026-07-16.
Source interval [960, 1020) on the 24/1 fps master: 60 frames, 2.500000 s. Local frame 0 = source frame 960.
Create a 1920x1080 progressive timeline at 24/1 fps and a Fusion composition exactly 60 frames long. Keep integer frames; do not round the frame rate.
Background field: #d6d6d2. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A browser window on a light grey desktop shows a coding assistant with a white sidebar and a black page: a three-line 80px serif-style headline with the last word in green, an italic subline and a row of small green tags; a rounded webcam inset overlaps the bottom-right corner. At ~f12 a small white pill with a blue dot and 'change to light mode' fades in at the top-right of the page. At ~f15 the whole page field switches from black to deep navy in a single frame; the type stays white. Everything holds to the end.

## Mechanism
Control appears first, then the state change: a soft pill fade-in followed by a one-frame background colour swap with the typography untouched.

## Phases (local frames)
- 0: Black page holds
- 12: Theme pill fades in top-right
- 15: Page field hard-swaps to navy
- 59: Hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- window [group] at (230, 70) size 1460x950 radius 14 fill #ffffff
  - chrome [rect] at (230, 70) size 1460x40 fill #f1f1f1
  - d1 [ellipse] at (246, 83) size 13x13 fill #f25f58
  - d2 [ellipse] at (266, 83) size 13x13 fill #fbbe3c
  - d3 [ellipse] at (286, 83) size 13x13 fill #58c951
  - url [rect] at (710, 79) size 500x22 radius 6 fill #e2e2e2
  - sb-1 [text] at (252, 134) text "New chat" 15px weight 400 #333333
  - sb-2 [text] at (252, 162) text "Search" 15px weight 400 #333333
  - sb-3 [text] at (252, 190) text "Scheduled" 15px weight 400 #333333
  - sb-h [text] at (252, 246) text "PROJECTS" 12px weight 600 #9a9a9a
  - sb-active [rect] at (242, 270) size 220x28 radius 6 fill #ececec
  - sb-4 [text] at (252, 275) text "Create Rook 101 site" 14px weight 400 #111111
  - sb-5 [rect] at (252, 316) size 150x8 radius 4 fill #e2e2e2
  - sb-6 [rect] at (252, 338) size 120x8 radius 4 fill #e2e2e2
  - settings [text] at (252, 980) text "Settings" 14px weight 400 #555555
  - page [rect] at (480, 110) size 1210x860 fill #0e0e0e
      keyframes fill: f14=#0e0e0e, f15=#1c2a4a (hold)
  - page-tab [text] at (504, 124) text "ROOK 101" 12px weight 400 #8a8a8a
  - eyebrow [text] at (530, 200) text "— 01 · ORIENTATION" 13px weight 400 #8a8a8a
  - h1 [text] at (530, 250) text "Rook is a / partner with" 80px weight 800 #ffffff
  - h1last [text] at (530, 418) text "tools." 80px weight 400 #8dd8a0
  - sub [text] at (530, 540) text "Use it to read code, make changes, run checks, review diffs, / and keep working with you until the outcome is real." 20px weight 400 #c9c9c9
  - tags [text] at (530, 630) text "READ MORE      ASK IT FIRST      SHOW YOUR WORK      DELEGATE, DON'T DICTATE" 13px weight 400 #8dd8a0
  - composer [rect] at (520, 920) size 1130x40 radius 10 fill #ffffff stroke #e0e0e0 1px
  - composer-t [text] at (536, 931) text "Ask for follow-up changes" 14px weight 400 #9a9a9a
  - pill [group] at (1310, 140) size 300x44 radius 22 fill #ffffff visible [12, 60)
      keyframes opacity: f12=0, f16=1 (out)
    - pill-dot [ellipse] at (1324, 155) size 14x14 fill #2f7cf6
    - pill-t [text] at (1350, 152) text "change to light mode" 16px weight 400 #111111
    - pill-toggle [rect] at (1556, 151) size 40x22 radius 11 fill #111111
    - pill-knob [ellipse] at (1576, 154) size 16x16 fill #ffffff
  - pip [rect] at (1350, 680) size 320x320 radius 40 fill #7b8467

## Construction steps
1. Timeline 1920x1080 at 24 fps; Fusion composition 60 frames. Local 0 = master frame 960.
2. Desktop #d6d6d2; browser plate 1460x950 white at 230,70 with a 40px chrome bar, a 250px white sidebar and a 1210x860 page rectangle.
3. Page rectangle colour: hold key #0e0e0e through frame 14, hold key #1c2a4a at frame 15 - a single-frame swap, no dissolve. Keep all type white/green so only the field changes.
4. Headline: 80px extra-bold white on two lines at 300,180 with the final word on a third line in #8dd8a0 at regular weight; 20px grey subline at y 470; 13px mono green tag row at y 560.
5. Pill: 300x44 white rounded plate at page top-right (1080,70 in window space) with a blue dot, 16px label and a black toggle; Blend 0 -> 1 over frames 12-16 ease-out.
6. Webcam inset: 320x320 rounded plate (radius 40) at 1120,610 overlapping the page; in the edit this is the speaker's picture-in-picture.
7. Easy mistake: cross-dissolving the two page colours. The pill eases in, the field does not.

## Content variants
Default copy:
- eyebrow: — 01 · ORIENTATION
- h1: Rook is a / partner with
- h1last: tools.
- sub: Use it to read code, make changes, run checks, review diffs, / and keep working with you until the outcome is real.
- tags: READ MORE      ASK IT FIRST      SHOW YOUR WORK      DELEGATE, DON'T DICTATE
- pill: change to light mode
- sidebar1: New chat
- sidebar2: Search
- sidebar3: Scheduled
- project: Create Rook 101 site
Adaptation changes:
- eyebrow: — 02 · FIRST STEPS
- h1: Pilot is a / reviewer with
- h1last: context.
- sub: Point it at a repo, describe the change you want, / and let it propose, test and explain the diff.
- tags: START SMALL      REVIEW EVERYTHING      LEAVE NOTES      SHIP DAILY
- pill: switch to light theme
- project: Draft Pilot handbook

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