# Show a tooltip, then blur and fade the whole HUD as the 3D camera starts flying

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 "First impressions of GPT-6 Astra from developers" (-TTyyY3VWh8), published 2026-09-03.
Source interval [200, 236) on the 24000/1001 fps master: 36 frames, 1.501500 s. Local frame 0 = source frame 200.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 36 frames long. Keep integer frames; do not round the frame rate.
Background field: #d9cf9f. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A low-poly aerial city scene fills the frame with a view-mode toolbar and an era timeline along the bottom and a small picture-in-picture inset top right (master 200-210). At master 206 (local 6) a dark tooltip pops in under the timeline. At local 11-14 the toolbar and timeline blur and fade out together while the whole scene motion-blurs; by local 14 the view has changed to a dense riverside town and by local 16 it is sharp again. The inset stays put throughout.

## Mechanism
Chrome drop-out: UI overlays blur and fade as one unit at the instant the camera begins a fast move, so the fly-through plays clean while a persistent inset survives.

## Phases (local frames)
- 0: Idle: scene, toolbar, timeline, inset
- 6: Tooltip pops in under the timeline
- 11: HUD blurs and fades; scene motion blur begins
- 14: New view under the blur
- 17: Scene sharp, HUD gone, inset remains

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- scene-a [group] at (0, 0) size 1920x1080 visible [0, 14)
  - river-a [rect] at (-300, 260) size 2600x420 fill #7bb9a1
  - tree-a1 [ellipse] at (660, 330) size 44x44 fill #4f8a3c
  - tree-a2 [ellipse] at (1010, 860) size 40x40 fill #4f8a3c
  - tree-a3 [ellipse] at (300, 120) size 36x36 fill #4f8a3c
  - boat-a [rect] at (880, 540) size 34x12 radius 4 fill #8a5a2b
- scene-b [group] at (0, 0) size 1920x1080 visible [14, 36)
  - river-b [rect] at (-200, 520) size 2600x560 fill #7bb9a1
  - b1 [rect] at (60, 80) size 150x90 radius 4 fill #b6442e
  - b2 [rect] at (240, 60) size 130x100 radius 4 fill #7f8f7a
  - b3 [rect] at (400, 110) size 170x80 radius 4 fill #c2523a
  - b4 [rect] at (600, 70) size 140x110 radius 4 fill #a63f2b
  - b5 [rect] at (780, 130) size 160x90 radius 4 fill #6f8a78
  - b6 [rect] at (980, 60) size 150x120 radius 4 fill #b6442e
  - b7 [rect] at (1160, 120) size 130x90 radius 4 fill #c2523a
  - b8 [rect] at (120, 240) size 180x110 radius 4 fill #7f8f7a
  - b9 [rect] at (340, 260) size 150x100 radius 4 fill #b6442e
  - b10 [rect] at (540, 250) size 170x120 radius 4 fill #a63f2b
  - b11 [rect] at (760, 280) size 140x100 radius 4 fill #6f8a78
  - b12 [rect] at (940, 240) size 180x110 radius 4 fill #c2523a
  - b13 [rect] at (200, 420) size 200x120 radius 4 fill #b6442e
  - b14 [rect] at (460, 430) size 160x110 radius 4 fill #7f8f7a
  - b15 [rect] at (680, 440) size 190x100 radius 4 fill #a63f2b
  - b16 [rect] at (1420, 700) size 200x120 radius 4 fill #b6442e
  - b17 [rect] at (1660, 760) size 180x130 radius 4 fill #c2523a
  - boat-b1 [rect] at (700, 820) size 40x14 radius 4 fill #8a5a2b
  - boat-b2 [rect] at (1180, 900) size 40x14 radius 4 fill #8a5a2b
- hud [group] at (0, 0) size 1920x1080
    keyframes opacity: f10=1, f14=0 (in)
    keyframes blur: f10=0, f14=14 (in)
  - toolbar [group] at (408, 748) size 1104x66 radius 12 fill #ffffff stroke #e1ddd0 1px
    - mode1-pill [rect] at (420, 758) size 176x46 radius 9 fill #2f5d4a
    - mode1-icon [ellipse] at (438, 772) size 18x18 fill #ffffff
    - mode1-text [text] at (468, 770) text "Sky" 20px weight 600 #ffffff
    - mode1-key [rect] at (558, 770) size 24x24 radius 5 fill #ffffff
    - mode2-icon [ellipse] at (634, 772) size 18x18 stroke #444 2px
    - mode2-text [text] at (664, 770) text "Eye" 20px weight 400 #333
    - mode2-key [rect] at (744, 770) size 24x24 radius 5 stroke #cfcbbf 1px
    - mode3-icon [ellipse] at (824, 772) size 18x18 stroke #444 2px
    - mode3-text [text] at (854, 770) text "Walk" 20px weight 400 #333
    - mode3-key [rect] at (944, 770) size 24x24 radius 5 stroke #cfcbbf 1px
    - mode4-icon [ellipse] at (1024, 772) size 18x18 stroke #444 2px
    - mode4-text [text] at (1054, 770) text "Top" 20px weight 400 #333
    - mode4-key [rect] at (1144, 770) size 24x24 radius 5 stroke #cfcbbf 1px
    - mode5-icon [rect] at (1224, 772) size 18x18 radius 3 stroke #444 2px
    - mode5-text [text] at (1254, 770) text "Plan" 20px weight 400 #333
    - mode5-key [rect] at (1344, 770) size 24x24 radius 5 stroke #cfcbbf 1px
  - timeline [group] at (0, 862) size 1920x218 fill #f5f2e8
    - tl-title [text] at (40, 888) text "Across the eras" 30px weight 500 #2a2a2a
    - tl-play [path] at (52, 958) fill #b5412a
    - tl-play-text [text] at (78, 944) text "Grow city" 20px weight 400 #444
    - tl-speed [rect] at (200, 946) size 44x26 radius 5 stroke #cfcbbf 1px
    - tl-speed-text [text] at (200, 949) size 44x0 text "1x" 16px weight 400 #666
    - tl-sep [line] at (0, 862) stroke #d8d3c3 1px
    - y1 [text] at (480, 902) size 150x0 text "AD 100" 30px weight 400 #333
    - y2 [text] at (640, 902) size 150x0 text "900" 30px weight 400 #333
    - y3 [text] at (800, 902) size 150x0 text "1200" 30px weight 600 #b5412a
    - y4 [text] at (960, 902) size 150x0 text "1600" 30px weight 400 #333
    - y5 [text] at (1120, 902) size 150x0 text "1660" 30px weight 400 #333
    - y6 [text] at (1280, 902) size 150x0 text "1720" 30px weight 400 #333
    - y7 [text] at (1440, 902) size 150x0 text "1850" 30px weight 400 #333
    - y8 [text] at (1600, 902) size 150x0 text "1940" 30px weight 400 #333
    - l1 [text] at (480, 946) size 150x0 text "Roman" 16px weight 400 #8a877c
    - l2 [text] at (640, 946) size 150x0 text "Saxon" 16px weight 400 #8a877c
    - l3 [text] at (800, 946) size 150x0 text "Medieval" 16px weight 400 #b5412a
    - l4 [text] at (960, 946) size 150x0 text "Tudor" 16px weight 400 #8a877c
    - l5 [text] at (1120, 946) size 150x0 text "Great Fire" 16px weight 400 #8a877c
    - l6 [text] at (1280, 946) size 150x0 text "Georgian" 16px weight 400 #8a877c
    - l7 [text] at (1440, 946) size 150x0 text "Victorian" 16px weight 400 #8a877c
    - l8 [text] at (1600, 946) size 150x0 text "Wartime" 16px weight 400 #8a877c
    - tick-row [line] at (0, 862) stroke #d8d3c3 1px
    - tick-active [ellipse] at (869, 886) size 12x12 fill #b5412a
    - tooltip [group] at (1010, 994) size 560x44 radius 8 fill #2b2b2b visible [6, 36)
        keyframes opacity: f6=0, f8=1 (out)
      - tooltip-text [text] at (1010, 1005) size 560x0 text "Switch era with [ and ]  ·  Space plays or pauses" 18px weight 400 #ffffff
- inset [group] at (1476, 108) size 380x500 radius 16 fill #5a6670 stroke #ffffff 3px
  - inset-window [rect] at (1476, 108) size 380x300 radius 16 fill #8f9aa3
  - inset-desk [rect] at (1476, 488) size 380x120 fill #3f474d
  - inset-plant [ellipse] at (1496, 128) size 120x200 fill #3f6b4d

## Camera (whole scene, about canvas centre)
- blur: f10=0, f13=16 (in), f17=0 (out)
- scale: f10=1, f16=1.06 (in), f35=1.08

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion composition 36 frames. Local 0 = master frame 200.
2. Scene A (frames 0-13): tan #d9cf9f background, one teal band (#7bb9a1) rotated -14 degrees as the river, a few green dots for trees. Scene B (frames 14-35): a second teal band and a grid of red/grey blocks for the riverside town. Hard swap at frame 14 under the blur.
3. HUD merge: white 1104x66 toolbar at y 748 (one dark-green active pill plus four outlined modes with key squares) and a full-width #f5f2e8 timeline band at y 862 with a 30 px title, eight years (the third in #b5412a bold) and 16 px grey era labels beneath.
4. Tooltip: 560x44 #2b2b2b rounded rect under the timeline, white 18 px centred label, Blend 0 to 1 over frames 6-8 with ease-out.
5. Put toolbar, timeline and tooltip under one merge and keyframe Blend 1 at frame 10 to 0 at frame 14 with Blur 0 to 14 px over the same frames (ease-in).
6. Camera: Blur on the whole scene 0 at frame 10, 16 px at 13, back to 0 at 17; Size 1.00 at 10 to 1.06 at 16 then drifting to 1.08 by 35 to sell forward motion.
7. Inset: 380x500 rounded card top right with 3 px white border and drop shadow; it sits above the camera blur and is never faded.
8. Easy mistake: the HUD must go out with both blur and fade in the same four frames; a plain fade reads as a UI glitch rather than a camera move.

## Content variants
Default copy:
- timelineTitle: Across the eras
- playLabel: Grow city
- tooltip: Switch era with [ and ]  ·  Space plays or pauses
- mode1: Sky
- mode2: Eye
- mode3: Walk
- mode4: Top
- mode5: Plan
- y1: AD 100
- y2: 900
- y3: 1200
- y4: 1600
- y5: 1660
- y6: 1720
- y7: 1850
- y8: 1940
- l1: Roman
- l2: Saxon
- l3: Medieval
- l4: Tudor
- l5: Great Fire
- l6: Georgian
- l7: Victorian
- l8: Wartime
Adaptation changes:
- timelineTitle: Through the centuries
- playLabel: Play growth
- tooltip: Step eras with ← and →  ·  Enter toggles playback
- mode1: Drone
- mode2: Street
- mode3: Stroll
- mode4: Above
- mode5: Chart
- y1: AD 50
- y2: 800
- y3: 1100
- y4: 1500
- y5: 1700
- y6: 1780
- y7: 1880
- y8: 1960
- l1: Outpost
- l2: Village
- l3: Market
- l4: Port
- l5: Rebuild
- l6: Terraces
- l7: Railway
- l8: Modern

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