# Push into a settings page's last card with a blur kick, then click its toggle on

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 "Debug web apps with browser use in Codex" (bhgYFRZLyKI), published 2026-06-11.
Source interval [756, 848) on the 30/1 fps master: 92 frames, 3.066667 s. Local frame 0 = source frame 756.
Create a 1920x1080 progressive timeline at 30/1 fps and a Fusion composition exactly 92 frames long. Keep integer frames; do not round the frame rate.
Background field: #3d43c9. Export silent H.264 yuv420p to match the intended playback container.

## Observation
After a hard cut, a white settings page fills a window on a blue-violet desktop: a left nav list and a long right column of section rows ending in a 'Developer mode' card with an orange 'Elevated risk' label, a title, two lines of body copy and an off toggle. The pointer drifts toward the card (~f0-20). Between ~f22 and ~f34 the picture blurs and the camera pushes in about 1.9x so the card fills the frame. The pointer sits on the toggle and clicks (~f55); the toggle knob slides right and the track turns blue (~f55-60). The pointer moves away and fades (~f76-80) and the on state holds.

## Mechanism
Eased camera push-in with a blur kick onto one settings card, followed by a pointer click that flips a toggle's knob and track colour.

## Phases (local frames)
- 0: Full settings page, pointer drifting
- 22: Blur ramps, push-in starts
- 34: Card fills frame at 1.9x
- 55: Click; knob slides, track turns blue
- 80: Pointer gone; hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- desk-glow [ellipse] at (300, 100) size 1400x900 fill #8a7cf0
- window [group] at (100, 30) size 1720x1020 radius 12 fill #ffffff
  - wd1 [ellipse] at (116, 44) size 12x12 fill #f25f58
  - wd2 [ellipse] at (134, 44) size 12x12 fill #fbbe3c
  - wd3 [ellipse] at (152, 44) size 12x12 fill #58c951
  - nav [rect] at (100, 30) size 260x1020 fill #f7f7f8
  - nav-back [text] at (120, 78) text "‹ Back to app" 12px weight 400 #555555
  - nav-search [rect] at (120, 104) size 220x24 radius 6 fill #ececee
  - n1 [text] at (120, 148) text "General" 12px weight 400 #333333
  - n2 [text] at (120, 172) text "Profile" 12px weight 400 #333333
  - n3 [text] at (120, 196) text "Appearance" 12px weight 400 #333333
  - n4 [text] at (120, 220) text "Configuration" 12px weight 400 #333333
  - n5 [text] at (120, 244) text "Keyboard shortcuts" 12px weight 400 #333333
  - n-active [rect] at (110, 300) size 240x24 radius 6 fill #e6e6ea
  - n6 [text] at (120, 304) text "Browser" 12px weight 400 #111111
  - n7 [text] at (120, 332) text "Desk mode" 12px weight 400 #333333
  - page-title [text] at (420, 78) text "Browser settings" 20px weight 600 #111111
  - s1 [text] at (420, 130) text "Autofill" 13px weight 600 #111111
  - s1r1 [rect] at (420, 154) size 380x7 radius 3 fill #e3e3e6
  - s1r2 [rect] at (420, 170) size 300x7 radius 3 fill #eeeef0
  - s1b [rect] at (1260, 150) size 90x26 radius 6 fill #f1f1f3
  - s2 [text] at (420, 220) text "Extensions" 13px weight 600 #111111
  - s2r1 [rect] at (420, 244) size 420x7 radius 3 fill #e3e3e6
  - s2r2 [rect] at (420, 260) size 260x7 radius 3 fill #eeeef0
  - s2b [rect] at (1260, 240) size 90x26 radius 6 fill #f1f1f3
  - s3 [text] at (420, 310) text "Data" 13px weight 600 #111111
  - s3r1 [rect] at (420, 334) size 360x7 radius 3 fill #e3e3e6
  - s3r2 [rect] at (420, 350) size 330x7 radius 3 fill #eeeef0
  - s3b [rect] at (1200, 330) size 150x26 radius 6 fill #f1f1f3
  - s3r3 [rect] at (420, 376) size 400x7 radius 3 fill #e3e3e6
  - s3b2 [rect] at (1200, 370) size 150x26 radius 6 fill #f1f1f3
  - s4 [text] at (420, 430) text "Permissions" 13px weight 600 #111111
  - s4r1 [rect] at (420, 454) size 380x7 radius 3 fill #e3e3e6
  - s4b [rect] at (1260, 450) size 90x26 radius 6 fill #f1f1f3
  - s4r2 [rect] at (420, 496) size 340x7 radius 3 fill #e3e3e6
  - s4b2 [rect] at (1200, 490) size 150x26 radius 6 fill #f1f1f3
  - s4learn [text] at (420, 522) text "Learn more" 11px weight 400 #2f6feb
  - s5 [text] at (420, 570) text "Site permissions" 13px weight 600 #111111
  - s5sub [text] at (420, 590) text "Override the defaults above for specific sites" 11px weight 400 #777777
  - s5add [rect] at (1270, 568) size 80x26 radius 6 fill #ffffff stroke #dcdce0 1px
  - s5add-t [text] at (1270, 574) size 80x0 text "+ Add" 11px weight 600 #111111
  - s5empty [rect] at (420, 616) size 930x36 radius 6 fill #ffffff stroke #e3e3e6 1px
  - s5empty-t [text] at (420, 626) size 930x0 text "No site-specific permissions yet" 11px weight 400 #777777
  - devH [text] at (420, 690) text "Developer mode" 13px weight 600 #111111
  - card [rect] at (420, 720) size 930x118 radius 8 fill #ffffff stroke #e3e3e6 1px
  - risk-icon [ellipse] at (440, 738) size 11x11 stroke #e2611f 1.5px
  - risk [text] at (456, 734) text "Elevated risk" 12px weight 600 #e2611f
  - card-title [text] at (440, 754) text "Enable full debugger access" 14px weight 600 #111111
  - card-body [text] at (440, 776) text "Allow the agent to use the full debugging protocol in connected browser sessions. Full access lets it / inspect and control sensitive browser internals that may put your data at risk." 12px weight 400 #555555
  - toggle-track [rect] at (1296, 768) size 34x20 radius 10 fill #d5d5da
      keyframes fill: f55=#d5d5da, f60=#2f6feb (out)
  - toggle-knob [ellipse] at (1298, 770) size 16x16 fill #ffffff
      keyframes x: f55=1198, f60=1212 (out)
- pointer [cursor] at (1180, 640) clicks at [55]
    keyframes tx: f0=0, f20=130 (inOut), f50=134 (inOut), f62=134, f76=150 (inOut)
    keyframes ty: f0=0, f20=134 (inOut), f50=140 (inOut), f62=140, f76=160 (inOut)
    keyframes opacity: f76=1, f80=0

## Camera (whole scene, about canvas centre)
- scale: f22=1, f34=1.9 (inOut)
- tx: f22=0, f34=142 (inOut)
- ty: f22=0, f34=-454 (inOut)
- blur: f22=0, f27=6 (out), f34=0 (in)

## Construction steps
1. Timeline 1920x1080 at 30 fps; Fusion composition 92 frames. Local 0 = master frame 756.
2. Desktop #3d43c9 with a large blurred violet ellipse; window plate 1720x1020 white at 100,30 with a 260px #f7f7f8 nav. Base type is small (11-13px) because the page is later magnified 1.9x.
3. Developer card: 930x118 white rounded rectangle at 320,690 (window space) with orange 12px risk label, 14px bold title, two 12px body lines and a 34x20 toggle at 1196,738.
4. Camera Transform (centre pivot): Size 1 -> 1.9 and Center offset (0,0) -> (142,-454) px over frames 22-34 ease in/out; add a Gaussian blur 0 -> 6 -> 0 across 22-27-34 for the smear.
5. Pointer (half size): glide to the toggle over frames 0-20, click ring at 55, drift away 62-76 and fade out 76-80. Toggle: track colour #d5d5da -> #2f6feb and knob X +14 px over frames 55-60, ease-out.
6. Easy mistake: flipping the toggle during the push. The click comes about 20 frames after the camera has settled.

## Content variants
Default copy:
- pageTitle: Browser settings
- sec1: Autofill
- sec2: Extensions
- sec3: Data
- sec4: Permissions
- sec5: Site permissions
- sec5sub: Override the defaults above for specific sites
- sec5empty: No site-specific permissions yet
- devH: Developer mode
- risk: Elevated risk
- cardTitle: Enable full debugger access
- cardBody: Allow the agent to use the full debugging protocol in connected browser sessions. Full access lets it / inspect and control sensitive browser internals that may put your data at risk.
Adaptation changes:
- pageTitle: Agent settings
- devH: Advanced
- risk: Use with care
- cardTitle: Allow unattended sessions
- cardBody: Let the agent keep working while this window is closed. Unattended sessions can change files and / submit forms without a review step, so limit them to trusted projects.

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