# Bring the HUD back from a blur while the 3D camera eases into its new position

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 [524, 562) on the 24000/1001 fps master: 38 frames, 1.584917 s. Local frame 0 = source frame 524.
Create a 1920x1080 progressive timeline at 24000/1001 fps and a Fusion composition exactly 38 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
The low-poly city plays with no interface for the first frames (master 524-528) while the camera drifts lower toward street level. At master 530 (local 6) the bottom toolbar shows up as a soft, semi-transparent blur; by local 8 the era timeline is also ghosting in, and both are crisp by local 12. The scene keeps moving slowly under the crisp HUD until the window ends at master 562. The reverse of the earlier drop-out: chrome returns from blur once the fly-through is over.

## Mechanism
Chrome return: the interface resolves from a heavy blur to sharp over six frames while the camera decelerates, so UI and camera settle together.

## Phases (local frames)
- 0: Clean scene, camera still moving
- 6: Toolbar and timeline appear blurred and faint
- 12: HUD sharp and opaque
- 37: Camera nearly at rest, HUD idle

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- scene [group] at (0, 0) size 1920x1080
  - river [rect] at (-200, -80) size 2600x300 fill #7bb9a1
  - ground-far [rect] at (0, 640) size 1920x440 fill #cfc397
  - r1 [rect] at (40, 300) size 210x130 radius 4 fill #b6442e
  - r2 [rect] at (290, 280) size 180x150 radius 4 fill #7f8f7a
  - r3 [rect] at (520, 320) size 240x120 radius 4 fill #c2523a
  - r4 [rect] at (800, 270) size 200x160 radius 4 fill #a63f2b
  - r5 [rect] at (1050, 310) size 230x130 radius 4 fill #6f8a78
  - r6 [rect] at (1320, 260) size 210x170 radius 4 fill #b6442e
  - r7 [rect] at (1570, 300) size 240x140 radius 4 fill #c2523a
  - f1 [rect] at (100, 470) size 280x190 radius 4 fill #3a2a20
  - f1-roof [rect] at (100, 440) size 280x50 radius 4 fill #7f8f7a
  - f2 [rect] at (440, 480) size 300x180 radius 4 fill #3a2a20
  - f2-roof [rect] at (440, 446) size 300x52 radius 4 fill #b6442e
  - f3 [rect] at (1180, 470) size 320x190 radius 4 fill #3a2a20
  - f3-roof [rect] at (1180, 436) size 320x52 radius 4 fill #c2523a
  - f4 [rect] at (1560, 490) size 300x170 radius 4 fill #3a2a20
  - f4-roof [rect] at (1560, 456) size 300x52 radius 4 fill #7f8f7a
  - w1 [rect] at (130, 520) size 30x40 fill #e9d9a8
  - w2 [rect] at (200, 520) size 30x40 fill #e9d9a8
  - w3 [rect] at (480, 530) size 30x40 fill #e9d9a8
  - w4 [rect] at (560, 530) size 30x40 fill #e9d9a8
  - w5 [rect] at (1230, 520) size 30x40 fill #e9d9a8
  - w6 [rect] at (1310, 520) size 30x40 fill #e9d9a8
  - fence [rect] at (760, 600) size 400x70 fill #a09a86
- hud [group] at (0, 0) size 1920x1080 visible [6, 38)
    keyframes opacity: f6=0, f12=1 (out)
    keyframes blur: f6=16, f12=0 (out)
  - 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 400 #333
    - y4 [text] at (960, 902) size 150x0 text "1600" 30px weight 600 #b5412a
    - 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 #8a877c
    - l4 [text] at (960, 946) size 150x0 text "Tudor" 16px weight 400 #b5412a
    - 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 (1029, 886) size 12x12 fill #b5412a

## Camera (whole scene, about canvas centre)
- scale: f0=1.1, f37=1.0 (out)
- ty: f0=-50, f37=0 (out)

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion composition 38 frames. Local 0 = master frame 524.
2. Scene: tan #d9cf9f field, a teal river band across the top rotated -8 degrees, a row of red/grey roof blocks mid-frame and four dark facades with cream window squares in the foreground to read as street level.
3. Camera on the scene merge: Size 1.10 at frame 0 easing out to 1.00 at frame 37 and Y offset -50 to 0 over the same range, so the move is still decelerating when the HUD arrives.
4. HUD merge (toolbar 1104x66 at y 748 plus the #f5f2e8 timeline band at y 862 with the fourth year in #b5412a bold): visible from frame 6. Keyframe Blend 0 at 6 to 1 at 12 and Blur 16 px at 6 to 0 at 12, both ease-out.
5. Hold the crisp HUD from frame 12 to 38 with no further animation.
6. Easy mistake: keep the HUD outside the camera transform; it must not scale with the scene while it resolves, otherwise the chrome appears to move with the ground.

## Content variants
Default copy:
- timelineTitle: Across the eras
- playLabel: Grow city
- 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
- 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.
