# Drag a popover slider to its end so the track recolours and the model tier label swaps

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 "Meet GPT-5.6" (-MPGU2a67Ls), published 2026-07-09.
Source interval [1659, 1755) on the 24000/1001 fps master: 96 frames, 4.004000 s. Local frame 0 = source frame 1659.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 96 frames long. Keep integer frames; do not round the frame rate.
Background field: #0b1020. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A settings popover sits above a chat composer showing a blue slider filled about three quarters. The pointer travels to the knob (~f0–f24), grabs it and drags right (~f24–f33). As it passes the end the fill turns purple, a tooltip appears above the knob (~f30–f39) and the tier name in the model button beneath changes (~f33). The popover holds with the new colour until it closes at ~f93, revealing the plain composer.

## Mechanism
Drag interaction with state feedback: slider fill grows and recolours, a transient tooltip flashes, and a dependent label swaps the moment the value commits.

## Phases (local frames)
- 0: Popover open, slider at 75%
- 24: Pointer grabs knob
- 33: Drag completes: fill purple, label swaps
- 30: Tooltip flashes
- 93: Popover closes

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- bg [rect] at (0, 0) size 1920x1080 fill #0b1020
- planet [ellipse] at (-300, 700) size 2500x900 fill #1d3a6e
- page [rect] at (100, 0) size 1720x860 fill #ffffff
- card-a [rect] at (560, 40) size 180x240 radius 12 fill #e6d9b8
- card-b [rect] at (760, 40) size 180x240 radius 12 fill #c9b58a
- card-c [rect] at (960, 40) size 180x240 radius 12 fill #e6d9b8
- card-d [rect] at (1160, 40) size 180x240 radius 12 fill #d6c8a0
- composer [rect] at (480, 700) size 960x120 radius 22 fill #ffffff stroke #e2e2e6 1px
- placeholder [text] at (520, 730) text "Ask for follow-up changes" 20px weight 400 #a0a0a4
- model-btn [rect] at (700, 770) size 300x36 radius 10 fill #f1f1f4
- label-a [text] at (724, 776) text "Model Q · High" 19px weight 500 #3a3a3a visible [0, 33)
- label-b [text] at (724, 776) text "Model Q · Max" 19px weight 500 #3a3a3a visible [33, 96)
- open-in [text] at (1200, 742) text "Open in  ⌄" 19px weight 500 #3a3a3a visible [93, 96)
- send [ellipse] at (1380, 742) size 36x36 fill #3a3a3a
- popover [group] at (660, 560) size 560x130 radius 16 fill #ffffff stroke #e2e2e6 1px visible [0, 93)
  - header [text] at (684, 578) text "Advanced  ›" 20px weight 500 #3a3a3a
  - track [rect] at (684, 626) size 512x40 radius 20 fill #ececf0
  - fill [rect] at (684, 626) size 384x40 radius 20 fill #2f6df6
      keyframes w: f24=384, f33=512 (out)
      keyframes fill: f26=#2f6df6, f33=#7a3df0 (out)
  - knob [ellipse] at (1046, 624) size 44x44 fill #ffffff stroke #d0d0d8 1px
      keyframes x: f24=386, f33=514 (out)
  - tip [rect] at (1054, 554) size 180x40 radius 8 fill #1c1c1e visible [30, 40)
      keyframes opacity: f30=0, f32=1 (out)
  - tip-t [text] at (1054, 563) size 180x0 text "Maximum usage" 18px weight 500 #ffffff visible [30, 40)
- pointer [cursor] at (760, 700) clicks at [24]
    keyframes tx: f0=0, f24=300 (inOut), f33=430 (out), f60=430, f90=300 (inOut)
    keyframes ty: f0=0, f24=-56 (inOut), f33=-58, f60=-58, f90=90 (inOut)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion composition 96 frames. Local 0 = master frame 1659.
2. Popover: 560x130 white card, radius 16, at (660,560) with header text; visible frames 0–92, cut off at 93.
3. Track: 512x40 grey pill; fill: same pill starting 384 wide. Keyframe fill Width 384→512 over frames 24–33 (ease out) and fill Colour #2f6df6→#7a3df0 over frames 26–33.
4. Knob: 44px white disc; keyframe X 386→514 over the same 24–33 range so it rides the fill edge.
5. Tooltip: 180x40 dark pill with 18px white label above the knob, Blend 0→1 over 30–32, cut at frame 40.
6. Tier label: two Text+ nodes in the model button; end the first at frame 33 and start the second at 33 (hard swap).
7. Pointer: travel to the knob by frame 24 (click ring), drag with the knob to frame 33, then drift down after frame 60.
8. Easy mistake: fading the tier label. The colour change eases but the label is a hard swap on the commit frame.

## Content variants
Default copy:
- header: Advanced
- tooltip: Maximum usage
- labelA: Model Q · High
- labelB: Model Q · Max
- openIn: Open in
- placeholder: Ask for follow-up changes
Adaptation changes:
- header: Reasoning
- tooltip: Deepest effort
- labelA: Atlas 3 · Fast
- labelB: Atlas 3 · Deep

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