# Switch an empty composer out, back and out again

## Delivery and limits

One 418-frame editing study, two original content variants, 1920×1080 at 60 fps.
This is a manual Resolve/Fusion construction guide plus editable Remotion code
and per-frame controls. No native project, import macro or verified Resolve execution is included.
The previews are real Remotion exports. Source-quality and independent moving
review remain open; package verification is not visual approval.

Use a 60 fps timeline before adding the composition. Set its inclusive local
range to 0..417, or an equivalent 418-frame clip. The source interval is
`NSqlZ1L81nQ` [2670,3088), using the retained source's 1/15360 time base and
256-tick frame duration. Local 0 maps to source 2670. Do not time-stretch the
motion or include the wider browser cut at source 3088. Use no audio track.

## Original inputs

Choose the entire Orchard `inputs/default.json` or Studio
`inputs/adaptation.json`. All labels, two explicit description lines and
recommendation are fictional. The six SVG inventory entries are three original
icon constructions in two palettes, not six unrelated artworks. Regenerate them
with `scripts/build-art.py` into a new directory. Do not import source frames,
partner logos, a screen recording or a flattened composer as editable artwork.

Use the bundled Geist font and retain its license. Match the loaded-font width
checks in `src/typography.ts`; character counts alone do not prove fit. Reject
overwide copy rather than shrinking type, clipping it or stretching timing.
Use Text+ elements for all copy, Background/Rectangle masks for card surfaces,
and editable shapes for plus, mic, chevron, folder, desktop and action glyphs.
If your Resolve build does not import an SVG directly, recreate its small path
construction with shape nodes; do not substitute a source-logo raster.

## Layer construction

The coordinates below are authored top-left pixel coordinates at 1920×1080.
For a Fusion center expressed with lower-left normalized axes, convert a box
`x,y,width,height` to `((x+width/2)/1920, 1-(y+height/2)/1080)` and dimensions
to `width/1920,height/1080`. Verify the axes and sizing on your actual node;
these instructions have not been executed in Resolve.

1. Create a very light off-white canvas with a subtle radial variation. Orchard
   uses green accents; Studio uses purple accents. Keep the same layout.
2. Place the rounded mode bar at 682,8 with size 394×65. Add a white selected
   thumb 210×65 at `thumbX`,8. Mode-label centers are 787 and 971; top 26,
   font 26 weight 550. Keep the labels stationary while the thumb slides.
3. Center the mode-specific heading in the 1325-pixel span beginning 218,447,
   font 42, line height 51, weight 480. Switch its text at the content gates.
4. Build the composer at 218,552, width 1325, height `cardHeight`, radius 46,
   white fill with a light border and subtle shadow. Keep its top fixed.
   The placeholder begins at local `89-58*growth`,28 inside the card,
   font 28/34. It shifts left as the card grows; it is not typed text.
5. Set bottom controls on local center y=`cardHeight-45`. Put plus at x31;
   model and chevron end 181 pixels from the right; mic begins 106 pixels
   from the right. The right action circle is 63×63, 14 pixels from the right,
   centered on the same row. Compact mode shows a voice waveform; expanded
   mode shows a pale upward arrow. Both are illustrative, not live controls.
6. Merge the rail behind the composer at 254,`552+cardHeight-3`, size 1254×78,
   lower corner radius 28. Its project label, three icon slots and desktop
   label remain separate editable elements. Apply `railOpacity` to this group.
7. Place the recommendation icon/copy at 249,`713+45*growth`, applying
   `recommendationOpacity`. During the reverse transition it briefly overlaps
   the fading outgoing rail. The card stays in front of both groups.
8. Expanded mode has an explanatory group at 435,`893+37*growth`, width 890.
   Use 32/42 weight 550 for its heading, then two 27/35 description lines after
   a 21-pixel gap. It moves downward as expansion settles. Remove the whole
   group immediately when compact mode commits.
9. Put the first hover tooltip at 780,83, size 398×51, radius 28; black fill,
   white 23-point text. It is visible only at local 83..102.
10. Place the original pointer on top using `pointerX/pointerY`; the shape
    changes to a hand over controls. This path, glyph and caret blink are
    authored approximations. Do not claim a recovered input trace.

## Timing and controls

`docs/controls.csv` has every local/source frame and numeric control. It is a
reference table, not an automatic Fusion import. Enter the selected keyframes
or expressions manually and check rendered frames against the table. Use a
step/constant change for mode content; do not fade all text together.

| Local frames | Mode content | Layout and supporting surfaces |
| --- | --- | --- |
| 0..82 | Compact | Height91; recommendation visible; thumb at682. |
| 83..102 | Compact | First hover tooltip visible; no mode commit yet. |
| 103..126 | Expanded | Content switches at103, before growth settles. Rail reveal follows. |
| 127..254 | Expanded | Height221, thumb866, full rail; empty input holds. |
| 255..270 | Compact | Content returns at 255 while card is still tall; contract and restore recommendation. |
| 271..284 | Compact | Height91, recommendation restored; no draft or typed text. |
| 285..306 | Expanded | Second immediate content commit followed by expansion and rail reveal. |
| 307..417 | Expanded | Hold the empty expanded surface; pointer travels to the tool row. |

For this authored reconstruction let `E(frame,start,end)` be
`1-(1-clamp((frame-start)/(end-start),0,1))^3`.
Before 255, growth is `E(frame,102,126)`; 255..284 uses
`1-E(frame,254,270)`; from 285 use `E(frame,284,306)`.
Height is `91+130*growth`. Thumb fraction uses corresponding intervals
101..108,253..260 reversed,284..291; `thumbX=682+184*fraction`.
Rail opacity before 255 is `E(frame,109,119)`,255..284 is
`0.08*(1-E(frame,255,260))`, and from 285 is `E(frame,289,300)`.
Recommendation opacity is 1 before 103, 0 until 255, then
`0.08+0.92*E(frame,255,270)` until 285, then 0. These curves are authored;
the observed source gates do not establish exact easing or alpha values.

The pointer anchors and caret cadence are explicit in `src/model.ts`.
Its numeric controls regenerate from that model. Use them for this adaptation,
not as an official source-motion measurement. Keep the three mode changes
together: they demonstrate one roundtrip, not three separate examples.

## Verification before export

Inspect local 82/83 and 102/103 for hover versus commit. Inspect 254/255 and
284/285 for immediate content changes while geometry remains in transit.
Check the fixed card top, moving bottom row, thumb glide, delayed rail,
recommendation restoration and final empty hold through 417. Confirm that no
typed query, generation, completed task, draft retention or plugin installation
is implied. The wider source cut must not appear in the 418-frame output.

Export a silent 1920×1080 H.264 MP4 at 60 fps with exactly 418 frames. Keep
the supplied Remotion movies and their matching manifests together. An actual
Resolve export should be checked independently for frame extent, layout,
font fit and the timing table; no such native export has been verified here.

## Open source differences

Original colors, copy, mode names and icons replace source branding and data.
Typography, shadow, subtle gradient, exact card radius, motion curves, transient
rail/recommendation opacity, pointer trajectory and caret blink differ or are
unmeasured. Source content commits were observed at 103,255,285; neighboring
samples constrain construction order, not complete visual equivalence.
The second expansion is timed separately rather than assuming identical source
easing. This historical interface study is not verified current OpenAI or Poe
behavior, and is not an all-hands product demo or a native Resolve approval.