# Hover a tooltip with a shortcut, click, cross-dissolve into a timeline macro, then blur-pull back to the editor

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 "How to storyboard with Sora" (6PXWAvUG8Sg), published 2024-12-09.
Source interval [700, 800) on the 60/1 fps master: 100 frames, 1.666667 s. Local frame 0 = source frame 700.
Create a 1920x1080 progressive timeline at 60/1 fps and a Fusion composition exactly 100 frames long. Keep integer frames; do not round the frame rate.
Background field: #0b0b0b. Export silent H.264 yuv420p to match the intended playback container.

## Observation
Macro on a dark composer bar under a video: duration and version pills at left, a 'Storyboard' button and send circle at right, and a dark tooltip reading 'New storyboard' with a keyboard-shortcut chip above the button. The pointer sits on the button; the tooltip fades out around local frame 20 (master 720) and the button lights on the click at ~22. From ~33 to 37 (master 733-737) the frame cross-dissolves into a different macro: a dark storyboard timeline with a ruler (06-10), a wide clip block and a bottom toolbar. That holds until ~78, then blurs and shrinks (master 778-795) into the storyboard editor: a tall empty scene card centred over a timeline strip, which settles by ~96.

## Mechanism
Tooltip-to-mode change in two transitions: a short cross-dissolve carries the click into a detail view, then a blur-and-scale dissolve resolves that detail into the full new screen, each transition timed to a different UI beat.

## Phases (local frames)
- 0: Tooltip with shortcut over the button
- 20: Tooltip fades
- 22: Click
- 33: Cross-dissolve to timeline macro
- 78: Blur and shrink
- 92: Editor with scene card settles

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- state-a [group] at (0, 0) size 1920x1080 visible [0, 38)
    keyframes opacity: f33=1, f37=0 (inOut)
  - vid-l [rect] at (0, 0) size 940x470 fill #3b4652
  - vid-r [rect] at (960, 0) size 960x470 fill #1f262d
  - vid-cliff [rect] at (700, 0) size 260x470 fill #7d7264
  - vid-fig [ellipse] at (1040, 40) size 300x460 fill #0f1216
  - vid-crowd [ellipse] at (1350, 120) size 560x340 fill #151a20
  - band [rect] at (0, 470) size 1920x610 fill #0b0b0b
  - band-blue [rect] at (0, 1000) size 1920x80 fill #2b4a8a
  - band-orange [rect] at (900, 1000) size 1020x80 fill #d8783a
  - bar [rect] at (-200, 780) size 1560x150 radius 40 fill #1c1c1c
  - pill-1 [rect] at (40, 830) size 130x56 radius 28 fill #2a2a2a
  - pill-1-t [text] at (40, 844) size 130x0 text "⏱  10s" 22px weight 400 #e8e8e8
  - pill-2 [rect] at (190, 830) size 130x56 radius 28 fill #2a2a2a
  - pill-2-t [text] at (190, 844) size 130x0 text "▤  4v" 22px weight 400 #e8e8e8
  - help [text] at (360, 842) text "?" 24px weight 400 #9a9a98
  - sb-btn [rect] at (1030, 830) size 234x56 radius 28 fill #3a3a3a
      keyframes fill: f21=#3a3a3a, f23=#5a5a5a (out)
  - sb-btn-t [text] at (1030, 844) size 234x0 text "Storyboard" 22px weight 500 #ffffff
  - send [ellipse] at (1284, 830) size 56x56 fill #2a2a2a
  - send-arrow [path] at (1312, 858) stroke #e8e8e8 3px
  - tooltip [group] at (930, 730) size 400x62 radius 12 fill #262626 visible [0, 22)
      keyframes opacity: f19=1, f21=0 (out)
    - tt [text] at (954, 748) text "New storyboard" 22px weight 400 #ffffff
    - kbd [rect] at (1236, 746) size 72x30 radius 6 fill #3d3d3d
    - kbd-t [text] at (1236, 751) size 72x0 text "⌘ ↩" 16px weight 400 #e8e8e8
- state-b [group] at (0, 0) size 1920x1080 visible [33, 92)
    keyframes opacity: f33=0, f37=1 (inOut), f84=1, f91=0 (in)
    keyframes blur: f78=0, f88=16 (in)
    keyframes scale: f78=1, f92=0.72 (in)
  - tl-bg [rect] at (0, 0) size 1920x1080 fill #141414
  - card [rect] at (-160, -120) size 900x480 radius 24 fill #0a0a0a
  - card-plus [text] at (560, 300) text "+" 30px weight 400 #c9c9c9
  - card-trash [text] at (610, 306) text "🗑" 22px weight 400 #c9c9c9
  - ruler [rect] at (0, 500) size 1920x1 fill #2a2a2a
  - ruler-t [text] at (250, 470) text "06                                                     07                                                     08                                                     09                                                     10" 22px weight 400 #7a7a78
  - grid-a [rect] at (280, 500) size 1x300 fill #242424
  - grid-b [rect] at (620, 500) size 1x300 fill #242424
  - grid-c [rect] at (960, 500) size 1x300 fill #242424
  - grid-d [rect] at (1300, 500) size 1x300 fill #242424
  - grid-e [rect] at (1640, 500) size 1x300 fill #242424
  - clip [rect] at (0, 560) size 1620x190 radius 4 fill #3a2b2b
  - clip-tail [rect] at (1280, 560) size 340x190 radius 4 fill #3a2f3a
  - toolbar [rect] at (0, 900) size 1920x100 fill #101010
  - tb-1 [rect] at (40, 920) size 90x56 radius 12 fill #1e1e1e
  - tb-1-t [text] at (40, 936) size 90x0 text "4v" 18px weight 400 #e8e8e8
  - tb-2 [rect] at (150, 920) size 110x56 radius 12 fill #1e1e1e
  - tb-2-t [text] at (150, 936) size 110x0 text "None" 18px weight 400 #e8e8e8
  - tb-3 [rect] at (280, 920) size 100x56 radius 12 fill #1e1e1e
  - tb-3-t [text] at (280, 936) size 100x0 text "Help" 18px weight 400 #e8e8e8
  - tb-4 [rect] at (400, 920) size 120x56 radius 12 fill #2a2a2a
  - tb-4-t [text] at (400, 936) size 120x0 text "Create" 18px weight 400 #8a8a88
- state-c [group] at (0, 0) size 1920x1080 visible [84, 100)
    keyframes opacity: f84=0, f92=1 (out)
    keyframes blur: f84=14, f96=0 (out)
  - ed-bg [rect] at (0, 0) size 1920x1080 fill #0d0d0d
  - ed-title [text] at (0, 20) size 1920x0 text "Storyboard" 16px weight 400 #c9c9c9
  - ed-tools [text] at (1740, 18) text "↶  ↷  ⊙  ◔  ●" 16px weight 400 #9a9a98
  - ed-card [rect] at (740, 120) size 440x760 radius 24 fill #0b0b0b stroke #262626 1px
  - ed-card-n [text] at (766, 142) text "1" 18px weight 400 #e8e8e8
  - ed-card-ph [text] at (760, 440) size 400x0 text "Describe this scene or add an image or video" 14px weight 400 #6f6f6d
  - ed-card-time [text] at (766, 840) text "00.00" 13px weight 400 #9a9a98
  - ed-card-icons [text] at (1110, 836) text "+   🗑" 16px weight 400 #c9c9c9
  - ed-strip [rect] at (60, 920) size 1800x80 radius 6 fill #2b2323
  - ed-thumb [rect] at (66, 926) size 80x68 radius 4 fill #1a1a1a stroke #3a3a3a 1px
  - ed-ruler [text] at (80, 1010) text "00        01        02        03        04        05        06        07        08        09        10" 12px weight 400 #5a5a58
  - ed-toolbar [text] at (0, 1040) size 1920x0 text "▤ 1:1     ▭ 480p     ⏱ 10s     ▤ 4v     None     ?     ↑" 14px weight 400 #8a8a88
- pointer [cursor] at (1120, 880) clicks at [22]
    keyframes tx: f26=0, f40=40 (inOut)
    keyframes ty: f26=0, f40=100 (inOut)

## Construction steps
1. Timeline 1920x1080 at 60 fps; Fusion composition 100 frames. Local 0 = master frame 700.
2. State A (frames 0-37): video plate top 470 px, dark band below, composer bar with two 130x56 pills, a 234x56 'Storyboard' button at (1030,830) and a 56 px send circle; tooltip 400x62 at (930,730) with a shortcut chip, Blend 1 to 0 over 19-21.
3. Click at 22: button fill #3a3a3a to #5a5a5a over 2 frames; click ring on the pointer.
4. Transition 1: Dissolve A to B over frames 33-37 (Blend keyframes, ease in-out). State B is the timeline macro: 900x480 card off the top-left, ruler labels 06-10 at 340 px pitch, 1620x190 clip block, bottom toolbar pills.
5. Transition 2: on State B keyframe Size 1 to 0.72 and Blur 0 to 16 px over 78-92 with Blend to 0 by 91; State C (editor: centred 440x760 scene card, timeline strip, toolbar) fades in over 84-92 with its own blur 14 to 0 by 96.
6. Easy mistake: using one long dissolve; the source has a crisp 4-frame dissolve first and only the second move carries blur and scale.

## Content variants
Default copy:
- button: Storyboard
- tooltip: New storyboard
- editorTitle: Storyboard
- cardHint: Describe this scene or add an image or video
Adaptation changes:
- button: Sequence
- tooltip: New sequence
- editorTitle: Sequence
- cardHint: Write what happens in this shot or drop a clip

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