# Type '@', open the tool menu, filter it by typing, and commit an inline app chip

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 Build a Personalized Meal Planner with ChatGPT Work" (t64oZKCdG8Q), published 2026-08-27.
Source interval [1612, 1648) on the 24000/1001 fps master: 36 frames, 1.501500 s. Local frame 0 = source frame 1612.
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: #151a2b. Export silent H.264 yuv420p to match the intended playback container.

## Observation
In the left chat pane a composer is typed quickly: 'Can y' at ~f2, 'Can you build' at ~f6, and the moment '@' lands (~f10) a white menu card pops above the composer listing generic actions (Add, Files and folders, Goal, Plan mode, ...). Typing 'insta' (~f11-14) swaps it for a shorter, filtered list of matching apps with the first row highlighted. At ~f18 the highlighted app becomes a green inline chip in the composer and the menu vanishes; ' grocery list?' is typed after the chip by ~f30 and holds. The right pane's orange grocery checklist is static.

## Mechanism
Mention trigger: a typed '@' opens a command menu, further characters filter it, and selecting converts the typed token into a persistent inline chip.

## Phases (local frames)
- 0: Typing begins
- 10: '@' opens the generic menu
- 14: Menu filters to matching apps
- 18: Selection becomes an inline chip; menu closes
- 30: Trailing words typed
- 36: End

## Layer inventory (absolute 1920x1080 top-left pixels, back to front)
- group [group] at (8, 57) size 882x1023
  - rect [rect] at (8, 57) size 882x1023 radius 12 fill #ffffff
  - rect [rect] at (8, 57) size 882x56 fill #f1f1f1
  - ellipse [ellipse] at (22, 77) size 14x14 fill #ff5f57
  - ellipse [ellipse] at (44, 77) size 14x14 fill #febc2e
  - ellipse [ellipse] at (66, 77) size 14x14 fill #28c840
  - text [text] at (98, 72) text "Plan the weekly meals" 17px weight 400 #444444
  - text [text] at (630, 72)
  - rect [rect] at (32, 137) size 834x70 radius 12 fill #ffffff stroke #e2e2e2 1.5px
  - rect [rect] at (48, 153) size 38x38 radius 8 fill #2f5fb3
  - text [text] at (100, 149) text "Penny's Plates" 16px weight 600 #222222
  - text [text] at (100, 173) text "Only visible to you" 14px weight 400 #888888
  - rect [rect] at (708, 157) size 130x32 radius 16 fill #111111
  - text [text] at (708, 164) size 130x0 text "Share" 14px weight 600 #ffffff
  - rect [rect] at (32, 957) size 834x92 radius 20 fill #ffffff stroke #d9d9d9 1.5px
  - text [text] at (52, 977) text "Can you build the @" 20px weight 400 #222222 reveal chars frames 0-10 visible [0, 10)
  - text [text] at (52, 977) text "Can you build the @cart" 20px weight 400 #222222 reveal chars frames -3-15 visible [10, 18)
  - text [text] at (52, 977) text "Can you build the" 20px weight 400 #222222 visible [18, 36)
  - rect [rect] at (238, 975) size 24x24 radius 6 fill #2e9d3a visible [18, 36)
  - text [text] at (270, 977) text "Cartly" 20px weight 600 #2e9d3a visible [18, 36)
  - text [text] at (344, 977) text " grocery list?" 20px weight 400 #222222 reveal chars frames 18-30 visible [18, 36)
  - text [text] at (52, 1015) text "+" 22px weight 400 #555555
  - text [text] at (88, 1017) text "Custom" 15px weight 400 #777777
  - text [text] at (670, 1017) text "5.6 Sol   Medium" 15px weight 400 #777777
  - ellipse [ellipse] at (822, 1009) size 30x30 fill #111111
  - group [group] at (32, 617) size 700x330 visible [10, 14)
    - rect [rect] at (32, 617) size 700x330 radius 14 fill #ffffff stroke #e2e2e2 1px
    - text [text] at (80, 633) text "Add" 17px weight 400 #888888
    - text [text] at (80, 677) text "Files and folders" 17px weight 600 #222222
    - text [text] at (80, 721) text "Goal" 17px weight 600 #222222
    - text [text] at (80, 765) text "Plan mode" 17px weight 600 #222222
    - text [text] at (80, 809) text "Record a skill" 17px weight 600 #222222
    - text [text] at (80, 853) text "Plugins" 17px weight 600 #222222
    - text [text] at (80, 897) text "Sites" 17px weight 600 #222222
    - rect [rect] at (44, 671) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (44, 715) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (44, 759) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (44, 803) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (44, 847) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (44, 891) size 24x24 radius 6 fill #eeeeee
  - group [group] at (32, 707) size 700x240 visible [14, 18)
    - rect [rect] at (32, 707) size 700x240 radius 14 fill #ffffff stroke #e2e2e2 1px
    - rect [rect] at (40, 715) size 684x40 radius 8 fill #f1f1f1
    - rect [rect] at (52, 723) size 24x24 radius 6 fill #2e9d3a
    - text [text] at (88, 723) text "Cartly" 17px weight 600 #222222
    - text [text] at (88, 767) text "Cart Helper" 17px weight 600 #222222
    - text [text] at (88, 811) text "Card Designer" 17px weight 600 #222222
    - text [text] at (88, 855) text "Carbon Tracker" 17px weight 600 #222222
    - text [text] at (88, 899) text "Cargo Planner" 17px weight 600 #222222
    - rect [rect] at (52, 767) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (52, 811) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (52, 855) size 24x24 radius 6 fill #eeeeee
    - rect [rect] at (52, 899) size 24x24 radius 6 fill #eeeeee
    - text [text] at (242, 725) text "Groceries and more delivered" 15px weight 400 #888888
- group [group] at (1086, 57) size 720x1023
  - rect [rect] at (1086, 57) size 720x1023 radius 12 fill #ffffff
  - group [group] at (1086, 113) size 720x967
    - rect [rect] at (1086, 113) size 720x967 fill #f7efd6
    - text [text] at (1116, 143) text "This week's grocery list" 40px weight 800 #111111
    - line [line] at (1086, 113) stroke #111111 3px
    - rect [rect] at (1116, 223) size 660x900 radius 12 fill #f0803a stroke #111111 3px
    - rect [rect] at (1126, 209) size 110x32 radius 4 fill #ffffff stroke #111111 2px
    - text [text] at (1126, 216) size 110x0 text "PRODUCE" 14px weight 800 #111111
    - rect [rect] at (1146, 273) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 321) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 369) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 417) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 465) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 513) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 561) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 609) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 657) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 705) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 753) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 801) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 849) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - rect [rect] at (1146, 897) size 24x24 radius 4 fill #ffffff stroke #111111 2px
    - text [text] at (1186, 273) text "Bananas" 18px weight 600 #111111
    - text [text] at (1186, 321) text "Pears" 18px weight 600 #111111
    - text [text] at (1186, 369) text "Blueberries" 18px weight 600 #111111
    - text [text] at (1186, 417) text "Strawberries" 18px weight 600 #111111
    - text [text] at (1186, 465) text "Peaches" 18px weight 600 #111111
    - text [text] at (1186, 513) text "Avocados" 18px weight 600 #111111
    - text [text] at (1186, 561) text "Cucumbers" 18px weight 600 #111111
    - text [text] at (1186, 609) text "Zucchini" 18px weight 600 #111111
    - text [text] at (1186, 657) text "Broccoli" 18px weight 600 #111111
    - text [text] at (1186, 705) text "Sweet potatoes" 18px weight 600 #111111
    - text [text] at (1186, 753) text "Butternut squash" 18px weight 600 #111111
    - text [text] at (1186, 801) text "Cauliflower" 18px weight 600 #111111
    - text [text] at (1186, 849) text "Spinach" 18px weight 600 #111111
    - text [text] at (1186, 897) text "Lemons" 18px weight 600 #111111
  - rect [rect] at (1086, 57) size 720x56 fill #f1f1f1
  - ellipse [ellipse] at (1100, 77) size 14x14 fill #ff5f57
  - ellipse [ellipse] at (1122, 77) size 14x14 fill #febc2e
  - ellipse [ellipse] at (1144, 77) size 14x14 fill #28c840
  - text [text] at (1176, 72) text "Penny's Plates" 17px weight 400 #444444
  - text [text] at (1546, 72) text "penny-plates.site" 15px weight 400 #777777

## Construction steps
1. Timeline 1920x1080 at 23.976 fps; Fusion comp 36 frames. Local 0 = master frame 1612.
2. Layout as the split-pane example: chat window plate at (8,57) 882 wide, site window at (1086,57) 720 wide with a static orange checklist card.
3. Composer 834x92 at y=900 inside the chat pane; Text+ 20px Write On 'Can you build the @' frames 0-10, then a second Text+ 'Can you build the @cart' visible frames 10-18 whose Write On adds the last 4 characters between 11 and 15.
4. Menu A: 700x330 white card with shadow at (24,560) visible frames 10-13, seven 17px rows; Menu B: 700x240 card at (24,650) visible frames 14-17 with the first row highlighted #f1f1f1 and a green 24px app square.
5. From frame 18: static prefix text, a 24px #2e9d3a chip square at x=230 with the 20px green app label at x=262, then Write On ' grocery list?' from x=336 over frames 18-30 with caret.
6. Easy mistake: the menu must swap content instantly on filter (no crossfade) and disappear on the same frame the chip appears.

## Content variants
Default copy:
- listHead: This week's grocery list
- app: Cartly
- typedA: Can you build the @
- typedB: Can you build the @cart
- prefix: Can you build the
- typedC:  grocery list?
Adaptation changes:
- listHead: Weekend shopping list
- app: Cartly
- typedA: Please send the @
- typedB: Please send the @cart
- prefix: Please send the
- typedC:  order today?

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