# Drag a file over the window to tint it with a drop hint, then drop to attach and grow the composer

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 "Build and share interactive prototypes in Codex" (_9ImjmzAyus), published 2026-06-04.
Source interval [578, 628) on the 30/1 fps master: 50 frames, 1.666667 s. Local frame 0 = source frame 578.
Create a 1920x1080 progressive timeline at 30/1 fps and a Fusion composition exactly 50 frames long. Keep integer frames; do not round the frame rate.
Background field: #3f3fd0. Export silent H.264 yuv420p to match the intended playback container.

## Observation
A desktop app window on a purple-blue gradient shows a drafted brief above a composer that already holds a three-line prompt. From about local frame 6 a small blue file chip is dragged in from the lower right; at ~9 (master 587) the entire window content tints pale blue and a white 'Drop to attach' pill appears at its centre. The chip continues toward the composer and is released at ~19 (master 597): the tint and pill vanish in one frame, a thumbnail tile appears at the top of the composer and the prompt text shifts down as the composer grows taller. Everything holds to the end.

## Mechanism
Drag-and-drop attach: drag-enter swaps the whole surface into a tinted drop-target state with a centred hint, and the drop reverts it in one frame while the composer reflows upward to make room for the new attachment tile.

## Phases (local frames)
- 0: Composer holds a prompt
- 6: File chip dragged in
- 9: Window tints, 'Drop to attach' pill
- 19: Drop: tint off, tile inserted, composer grows
- 35: Hold

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- blob-a [ellipse] at (-300, -200) size 1300x1000 fill #7d6ff2
- blob-b [ellipse] at (1200, 500) size 1200x900 fill #2a2a9a
- blob-c [ellipse] at (500, 700) size 1000x600 fill #b6a7f8
- window [group] at (120, 50) size 1680x980 radius 14 fill #ffffff
  - chrome [rect] at (120, 50) size 1680x48 radius 14 fill #f5f5f7
  - chrome-flat [rect] at (120, 74) size 1680x24 fill #f5f5f7
  - tl-r [ellipse] at (136, 67) size 12x12 fill #ff5f57
  - tl-y [ellipse] at (156, 67) size 12x12 fill #febc2e
  - tl-g [ellipse] at (176, 67) size 12x12 fill #28c840
  - win-title [text] at (120, 65) size 1680x0 text "Design a calendar feature" 13px weight 400 #4a4a48
  - content [group] at (500, 140) size 920x600
    - worked [text] at (500, 140) text "Worked for 13s" 13px weight 400 #8a8a88
    - lead [text] at (500, 166) text "Before I design it, the product workflow needs a quick brief." 15px weight 400 #2a2a2a
    - h-brief [text] at (500, 192) text "Draft brief" 15px weight 700 #1a1a1a
    - brief [text] at (500, 216) size 900x0 text "Design a native calendar feature for the web app that feels like part of the assistant: users can ask about their schedule, inspect upcoming events, create or adjust meetings, and get meeting prep from the same chat-first interface." 14px weight 400 #2a2a2a
    - decide [text] at (500, 290) text "A few decisions to confirm:" 14px weight 400 #2a2a2a
    - q1 [text] at (500, 320) size 900x0 text "1.  What should the calendar feature do?
     Examples: view agenda, create or edit events, schedule with others, resolve conflicts, meeting prep, time blocking." 14px weight 400 #2a2a2a
    - q2 [text] at (500, 380) size 900x0 text "2.  Do you have a design system, screenshot, or existing surface you want me to match?
     If not, I'll use the current web patterns as the visual baseline." 14px weight 400 #2a2a2a
    - q3 [text] at (500, 440) size 900x0 text "3.  What level of interactivity do you want?
     Static concept for speed, or a full clickable prototype with working controls and states?" 14px weight 400 #2a2a2a
    - actions [text] at (500, 496) text "⟳    ♡    ⧉" 13px weight 400 #9a9a98
  - composer [group] at (500, 810) size 920x150 radius 16 fill #ffffff stroke #e2e2e0 1px
      keyframes h: f19=150, f20=206 (hold)
      keyframes y: f19=760, f20=704 (hold)
    - tile [rect] at (520, 828) size 72x44 radius 8 fill #f0f0f0 stroke #e1e1e1 1px visible [19, 50)
    - tile-dot [ellipse] at (542, 840) size 14x14 fill #1a1a1a visible [19, 50)
    - prompt [text] at (520, 828) size 860x0 text "1. Sync calendars, show events, plan tasks, and provide preparation for meetings.
2. I want this to match the web app design system. You can use the attached screenshot for additional reference.
3. Full working controls and states." 14px weight 400 #1f1f1f
        keyframes y: f19=18, f20=74 (hold)
    - plus [text] at (520, 922) text "+" 18px weight 400 #5c5c5a
        keyframes y: f19=112, f20=168 (hold)
    - review [rect] at (546, 920) size 110x26 radius 8 stroke #e1e1e1 1px
        keyframes y: f19=110, f20=166 (hold)
    - review-t [text] at (546, 926) size 110x0 text "Auto-review" 12px weight 400 #4a4a48
        keyframes y: f19=116, f20=172 (hold)
    - model [text] at (1220, 926) text "Model · Extra high" 12px weight 400 #6f6f6d
        keyframes y: f19=116, f20=172 (hold)
    - send [ellipse] at (1370, 916) size 34x34 fill #1a1a1a
        keyframes y: f19=106, f20=162 (hold)
  - tint [rect] at (120, 98) size 1680x932 fill #dbe7f7 visible [9, 19)
  - drop-pill [rect] at (870, 520) size 180x40 radius 10 fill #ffffff visible [9, 19)
  - drop-pill-t [text] at (870, 530) size 180x0 text "Drop to attach" 15px weight 600 #1a1a1a visible [9, 19)
  - drag-chip [group] at (1240, 690) size 150x28 visible [5, 19)
      keyframes x: f5=1120, f18=940 (inOut)
      keyframes y: f5=640, f18=790 (inOut)
    - chip-bg [rect] at (1240, 690) size 150x28 radius 6 fill #2b6fd6
    - chip-t [text] at (1240, 696) size 150x0 text "home-screen.png" 12px weight 400 #ffffff
- pointer [cursor] at (1250, 690)
    keyframes tx: f5=0, f18=-180 (inOut)
    keyframes ty: f5=0, f18=150 (inOut)

## Construction steps
1. Timeline 1920x1080 at 30 fps; Fusion composition 50 frames. Local 0 = master frame 578.
2. Window 1680x980 at (120,50) with a 48 px title bar; brief text column 920 px wide at window-local (380,90); composer 920x150 at (380,760).
3. Drop state (frames 9-18): a #dbe7f7 rectangle at 78% opacity over the window body plus a 180x40 white 'Drop to attach' pill with shadow at the window centre. Cut both in at 9 and out at 19.
4. Drag chip: 150x28 blue pill with the file name, moving from (1120,640) to (940,790) window-local over frames 5-18 with ease in-out; pointer follows with the same offset.
5. Drop at 19: composer Height 150 to 206 and Y 760 to 704 as step keys; prompt text Y 18 to 74 and every toolbar node (+, Auto-review, model label, send) Y +56 as step keys so they keep their absolute positions; 72x44 attachment tile cut in at (20,18).
6. Easy mistake: fading the tint out; the source drops it in one frame together with the composer reflow.

## Content variants
Default copy:
- windowTitle: Design a calendar feature
- lead: Before I design it, the product workflow needs a quick brief.
- brief: Design a native calendar feature for the web app that feels like part of the assistant: users can ask about their schedule, inspect upcoming events, create or adjust meetings, and get meeting prep from the same chat-first interface.
- q1: 1.  What should the calendar feature do?
     Examples: view agenda, create or edit events, schedule with others, resolve conflicts, meeting prep, time blocking.
- q2: 2.  Do you have a design system, screenshot, or existing surface you want me to match?
     If not, I'll use the current web patterns as the visual baseline.
- q3: 3.  What level of interactivity do you want?
     Static concept for speed, or a full clickable prototype with working controls and states?
- prompt: 1. Sync calendars, show events, plan tasks, and provide preparation for meetings.
2. I want this to match the web app design system. You can use the attached screenshot for additional reference.
3. Full working controls and states.
- fileName: home-screen.png
Adaptation changes:
- windowTitle: Design an inbox triage view
- lead: Before I build it, the support workflow needs a short brief.
- brief: Design a triage view for incoming tickets that feels native to the assistant: agents can ask what is urgent, group similar tickets, assign owners, and draft replies from one chat-first surface.
- q1: 1.  What should the triage view do?
     Examples: rank by urgency, cluster duplicates, assign owners, draft replies, escalate.
- q2: 2.  Is there a design system or screenshot I should match?
     If not, I'll use the current support console as the baseline.
- q3: 3.  How interactive should the first version be?
     Static concept for speed, or a clickable prototype with working filters?
- prompt: 1. Rank tickets by urgency, cluster duplicates, and suggest owners.
2. Match the support console. The attached screenshot shows the current list view.
3. Working filters and assignment controls.
- fileName: console-list.png

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