# Fade a promo banner in at the fold, then scroll the page under a sticky rail while a countdown ticks

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 "Using Voice in ChatGPT Work" (_Gd9yzAc-WI), published 2026-07-29.
Source interval [5239, 5299) on the 30000/1001 fps master: 60 frames, 2.002000 s. Local frame 0 = source frame 5239.
Create a 1920x1080 progressive timeline at 30000/1001 fps and a Fusion composition exactly 60 frames long. Keep integer frames; do not round the frame rate.
Background field: #3d3fd0. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A browser window on a blue-violet backdrop shows a hotel checkout: a left column of stay details, a sticky right rail with totals and a 'Time left to book 25 min : 54 sec' countdown, a company-policy toast top right and a soft purple orb marking the agent's pointer (master 5239). At master 5242-5245 (local 3-6) a purple promo banner fades in at the bottom edge of the page. From about 5245 the left column scrolls upward, fast at first and easing out, carrying the banner up about 600 px by 5284 (local 45) while a cancellation policy block and two buttons enter beneath it. The right rail and toast never move; the countdown reads 53 sec at about 5254 and 52 sec at about 5284.

## Mechanism
Agent-driven scroll: new content appears at the fold, then the page column eases upward under fixed sticky UI while a live countdown ticks, showing time passing during an automated task.

## Phases (local frames)
- 0: Checkout page at rest
- 3: Promo banner fades in at the fold
- 6: Column starts scrolling up
- 15: Countdown ticks to 53
- 45: Scroll settles; policy block and buttons visible
- 45: Countdown ticks to 52

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- backdrop-glow [ellipse] at (200, -200) size 1500x900 fill #7b6cf0
- browser [group] at (120, 20) size 1680x1080 radius 14 fill #ffffff
  - tabstrip [rect] at (120, 20) size 1680x40 fill #e9e9ee
  - tab-active [rect] at (420, 26) size 200x34 radius 8 fill #ffffff
  - tab1 [rect] at (180, 32) size 200x22 radius 6 fill #d9d9e0
  - tab3 [rect] at (660, 32) size 200x22 radius 6 fill #d9d9e0
  - tab4 [rect] at (900, 32) size 200x22 radius 6 fill #d9d9e0
  - urlbar [rect] at (120, 60) size 1680x44 fill #f6f6f8
  - urlfield [rect] at (240, 68) size 1200x28 radius 14 fill #ffffff stroke #e2e2e8 1px
  - url [text] at (260, 73) text "app.travelboard.example/trip/4a9f/checkout" 16px weight 400 #555
  - page [group] at (120, 104) size 1680x996
    - column [group] at (180, 104) size 1000x1800
        keyframes y: f6=0, f45=-616 (out)
      - stay-title [text] at (180, 144) text "Stay details" 22px weight 600 #151515
      - hotel-img [rect] at (180, 194) size 150x100 radius 8 fill #c98f6b
      - hotel-img-2 [rect] at (200, 234) size 110x40 radius 4 fill #8fb9d0
      - hotel-name [text] at (350, 198) text "Harbourview Lodge Opera" 20px weight 600 #151515
      - hotel-meta [text] at (350, 228) text "4-star hotel · 8.9 Very good (291 reviews)" 16px weight 400 #555
      - hotel-links [text] at (350, 264) text "Hotel details    Change hotel" 16px weight 600 #151515
      - rule-a [line] at (180, 104) stroke #ececf0 1px
      - room-img [rect] at (180, 354) size 150x100 radius 8 fill #9aa5b1
      - room-name [text] at (350, 358) text "Room, 1 King Bed" 20px weight 600 #151515
      - room-meta [text] at (350, 388) text "1 King Bed" 16px weight 400 #555
      - room-links [text] at (350, 424) text "Room details    Change room" 16px weight 600 #151515
      - rule-b [line] at (180, 104) stroke #ececf0 1px
      - ci-label [text] at (180, 508) text "Check-in:" 16px weight 400 #555
      - ci [text] at (350, 508) text "Tue, Aug 25, 2026 after 2:00 pm" 16px weight 600 #151515
      - co-label [text] at (180, 544) text "Check-out:" 16px weight 400 #555
      - co [text] at (350, 544) text "Sun, Aug 30, 2026 until 11:00 am" 16px weight 600 #151515
      - du-label [text] at (180, 580) text "Duration:" 16px weight 400 #555
      - du [text] at (350, 580) text "5 nights" 16px weight 600 #151515
      - request [text] at (180, 634) text "Have a special request?" 16px weight 600 #151515
      - banner [group] at (180, 1004) size 1000x100 radius 12 fill #4b3fd6 visible [3, 60)
          keyframes opacity: f3=0, f8=1 (out)
        - banner-teal [ellipse] at (560, 944) size 500x260 fill #2fb8a6
        - banner-icon [ellipse] at (202, 1034) size 40x40 fill #ffffff
        - banner-title [text] at (260, 1028) text "Extend your trip" 20px weight 600 #ffffff
        - banner-sub [text] at (260, 1058) text "Add a personal hotel stay. Personal bookings are always private." 16px weight 400 #e8e6ff
        - banner-btn [rect] at (980, 1032) size 170x44 radius 8 fill #ffffff
        - banner-cta [text] at (980, 1044) size 170x0 text "Extend my trip" 16px weight 600 #3b2fc4
      - policy-title [text] at (180, 1144) text "Cancellation and change policy" 20px weight 600 #151515
      - p1-dot [ellipse] at (180, 1194) size 14x14 fill #2aa876
      - p1 [text] at (208, 1188) text "Change or cancel for free until Aug 22, 2026, 11:59 PM" 17px weight 600 #151515
      - p1b [text] at (208, 1214) text "Until 3 days before check-in" 16px weight 400 #555
      - p2-dot [ellipse] at (180, 1254) size 14x14 fill #151515
      - p2 [text] at (208, 1248) text "Partial or full charge after Aug 22, 2026, 11:59 PM" 17px weight 600 #151515
      - p2b [text] at (208, 1274) text "Within 3 days of check-in" 16px weight 400 #555
      - btn-secondary [rect] at (880, 1334) size 140x44 radius 8 stroke #4b3fd6 1.5px
      - btn-secondary-text [text] at (880, 1346) size 140x0 text "Change room" 16px weight 600 #4b3fd6
      - btn-primary [rect] at (1040, 1334) size 140x44 radius 8 fill #4b3fd6
      - btn-primary-text [text] at (1040, 1346) size 140x0 text "Continue" 16px weight 600 #ffffff
      - traveler [text] at (180, 1434) text "Room 1 · Traveller" 18px weight 600 #151515
    - rail [group] at (1300, 144) size 440x800 radius 12 fill #ffffff stroke #e6e6ee 1px
      - rail-title [text] at (1324, 166) text "In this trip" 20px weight 600 #151515
      - r1a [text] at (1324, 214) text "Rooms" 16px weight 400 #555
      - r1b [text] at (1600, 214) size 116x0 text "1" 16px weight 600 #151515
      - r2a [text] at (1324, 246) text "Guests" 16px weight 400 #555
      - r2b [text] at (1600, 246) size 116x0 text "1" 16px weight 600 #151515
      - r3a [text] at (1324, 278) text "Duration" 16px weight 400 #555
      - r3b [text] at (1560, 278) size 156x0 text "5 nights" 16px weight 600 #151515
      - rail-rule [line] at (1300, 144) stroke #ececf0 1px
      - total-label [text] at (1324, 348) text "Total" 18px weight 600 #151515
      - total [text] at (1500, 342) size 216x0 text "$1,186.40 USD" 26px weight 700 #151515
      - total-note [text] at (1324, 390) text "For a full price breakdown, see the / summary of charges at checkout." 16px weight 400 #666
      - timer-box [rect] at (1324, 464) size 392x130 radius 10 fill #efeafc
      - timer-label [text] at (1340, 478) text "Time left to book" 16px weight 600 #151515
      - timer54 [text] at (1500, 478) size 200x0 text "25 min : 54 sec" 16px weight 600 #151515 visible [0, 15)
      - timer53 [text] at (1500, 478) size 200x0 text "25 min : 53 sec" 16px weight 600 #151515 visible [15, 45)
      - timer52 [text] at (1500, 478) size 200x0 text "25 min : 52 sec" 16px weight 600 #151515 visible [45, 60)
      - timer-note [text] at (1340, 510) text "Book before the timer runs out to keep / this rate. If it expires, you'll need to / run your search again." 16px weight 400 #555
    - toast [group] at (1360, 84) size 400x90 radius 10 fill #ffffff stroke #e6e6ee 1px
      - toast-icon [ellipse] at (1376, 114) size 22x22 fill #4b3fd6
      - toast-title [text] at (1410, 106) text "A message from your company" 16px weight 600 #151515
      - toast-body [text] at (1410, 132) text "Review the travel policy before booking." 16px weight 400 #555
      - toast-x [path] at (1734, 108) stroke #888 2px
- orb-glow [ellipse] at (1210, 360) size 110x110 fill #7a5cff
    keyframes y: f6=360, f45=400 (out)
- orb [ellipse] at (1236, 386) size 58x58 fill #6a4df2
    keyframes y: f6=386, f45=426 (out)
- orb-hi [ellipse] at (1246, 392) size 22x22 fill #ffffff
    keyframes y: f6=392, f45=432 (out)

## Construction steps
1. Timeline 1920x1080 at 29.97 fps; Fusion composition 60 frames. Local 0 = master frame 5239.
2. Backdrop: solid #3d3fd0 with one large blurred lighter ellipse. Browser: 1680x1080 white window at 120/20 with a 40 px tab strip and 44 px URL bar; clip everything below y 84 to the page area.
3. Left column (x 180 on canvas): stay title, hotel and room blocks with 150x100 image rects, three date rows, all 16-20 px. Place the promo banner (1000x100, #4b3fd6 with a teal ellipse and white CTA) at column y 900 so it sits at the fold; below it the policy title, two bullet rows and the outlined/filled button pair at y 1040-1274.
4. Banner Blend 0 at frame 3 to 1 at frame 8. Column Y offset 0 at frame 6 to -616 at frame 45 with ease-out (fast start, gentle stop).
5. Sticky rail: 440x800 white card at page 1180/40 with totals, a lilac timer box and notes; it is outside the scrolling column and never moves. Timer text swaps by visibility: ':54' to 14, ':53' frames 15-44, ':52' from 45.
6. Toast: 400x90 white card overlapping the top of the page at 1240/-20 with a purple dot, title and body, fixed.
7. Orb: 58 px #6a4df2 ellipse at 85% with a blurred glow and a small white highlight, drifting down 40 px over the scroll.
8. Easy mistake: only the left column scrolls; if the rail or toast move with it the sticky layout is lost, and the scroll must decelerate (ease-out) rather than run linear.

## Content variants
Default copy:
- url: app.travelboard.example/trip/4a9f/checkout
- stayTitle: Stay details
- hotelName: Harbourview Lodge Opera
- hotelMeta: 4-star hotel · 8.9 Very good (291 reviews)
- roomName: Room, 1 King Bed
- roomMeta: 1 King Bed
- checkIn: Tue, Aug 25, 2026 after 2:00 pm
- checkOut: Sun, Aug 30, 2026 until 11:00 am
- nights: 5 nights
- bannerTitle: Extend your trip
- bannerSub: Add a personal hotel stay. Personal bookings are always private.
- bannerCta: Extend my trip
- policyTitle: Cancellation and change policy
- policy1: Change or cancel for free until Aug 22, 2026, 11:59 PM
- policy1b: Until 3 days before check-in
- policy2: Partial or full charge after Aug 22, 2026, 11:59 PM
- policy2b: Within 3 days of check-in
- btnSecondary: Change room
- btnPrimary: Continue
- railTitle: In this trip
- total: $1,186.40 USD
- timerLabel: Time left to book
- timer54: 25 min : 54 sec
- timer53: 25 min : 53 sec
- timer52: 25 min : 52 sec
- toastTitle: A message from your company
- toastBody: Review the travel policy before booking.
Adaptation changes:
- hotelName: Riverside Court Central
- hotelMeta: 3-star hotel · 8.4 Very good (612 reviews)
- roomName: Room, 2 Twin Beds
- roomMeta: 2 Twin Beds
- checkIn: Mon, Sep 14, 2026 after 3:00 pm
- checkOut: Thu, Sep 17, 2026 until 10:00 am
- nights: 3 nights
- bannerTitle: Stay the weekend
- bannerSub: Add leisure nights at your own cost. They stay off the expense report.
- bannerCta: Add nights
- policy1: Change or cancel for free until Sep 11, 2026, 11:59 PM
- policy2: Partial or full charge after Sep 11, 2026, 11:59 PM
- total: $642.90 USD
- timer54: 14 min : 09 sec
- timer53: 14 min : 08 sec
- timer52: 14 min : 07 sec
- toastBody: Book only within the approved rate cap.

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