# Accumulate selections out of view, then attach their context

This is a manual DaVinci Resolve/Fusion construction guide, not a tested .drp.
The accompanying Remotion project has editable original artwork and frame-state
code. Neither tool's successful construction establishes source fidelity.

## Source and clock

The reference is OpenAI's *Create campaign concepts and assets with Codex*,
published June10,2026. The retained complete1920×1080 rendition is60/1fps with
time base1/15360 and256 ticks per frame. Use source interval[2760,3376),616
frames, local0–615 inclusive. The duration is616/60 seconds. The separately
provided960×540 research excerpt preserves every native position and has no
audio. It is not an input to the original builds.

Create a1920×1080, square-pixel, progressive60fps timeline before adding media.
Use a Fusion composition exactly616 frames long. Local0 is source2760. Keep
integer frames; do not substitute59.94 or stretch the selection to a round
duration. Use docs/source-timing.json to check integer PTS. A silent H.264,
yuv420p export at60fps matches the intended playback container, not a claim
about an unexecuted Resolve export. Disable audio tracks. Do not add narration.

## Ownership and node order

Use these separate groups, back to front:

1. DesktopField, an original full-frame vector field.
2. WindowPlate and WindowHeader, fixed in output space.
3. ConversationContent transformed only by chatOffset, then ConversationMask.
4. ComposerPlate, SourceContextChip and SinglePreview, independent of gallery.
5. GalleryHeader, fixed in output space.
6. GalleryContent with20 cards and their selection outlines, transformed only
   by minus scrollY, then clipped through GalleryMask.
7. GalleryScrollbar, ActionBar, ConfirmationOverlay and close glyph.
8. Pointer, in output coordinates above all groups.

The camera is fixed at identity in this authored construction. Never move the
header, action bar or composer with GalleryContent. Do not derive selection
state from whichever cards happen to intersect GalleryMask. Bind all outline
Blend controls and the visible count to the same persistent selected-ID set.

## Coordinate conventions

Coordinates below are1920×1080 top-left pixels. For a rectangle(left,top,w,h),
Fusion center is((left+w/2)/1920,1-(top+h/2)/1080), width=w/1920 and
height=h/1080. Verify a test rectangle's four corners before building masks.
For any rasterized SVG use its full intrinsic viewport and avoid an extra
automatic fit. SVG input support differs by installation; primitive recreation
from docs/asset-construction.json is the portable manual path. No native SVG
import or node graph has been executed here.

WindowPlate is(110,62,1700,956), white, radius25, with a soft dark lower shadow.
The header is60px high. The left conversation is470px wide; the split isx580.
The source's rounded window, photographic field and exact shadows are not
recovered production settings. These are declared construction dimensions.

Header controls, relative to the window: three19px circles at(20,21),
(51,21),(82,21); navigation text(156,17),25px; studio label(298,20),20px;
reference tab(480,11,240,38),radius13; tab label14px inside,20px type; add
glyph(740,18),25px; view glyphs(1585,18),24px. Match the live Scene.tsx glyphs
with Text+ or drawn primitives; do not substitute source-brand icons.

## Original assets

scripts/build-art.py generates42 SVGs: clay-00 through clay-19, ink-00 through
ink-19 and one desktop field per theme. Each card is400×500 before fitting.
Five families use vases, layered sheets, an arch, a bowl and a branching form;
index offsets distinguish individual studies. The two palettes and geometry
are in that generator, while asset-construction.json includes every parsed
path, rectangle, ellipse, circle, gradient, transform, opacity and fill.

For each card, merge primitives in the recorded order over its base rectangle.
For a path, preserve SVG winding and coordinate scale. The material shadow is
an alpha ellipse, not a photograph. The desktop has one gradient rectangle and
two broad paths. Keep the artwork static inside its card; no generative video
or hidden movement is required. Do not use the source photos or screenshots.

## Gallery geometry

GalleryMask is(596,220,1194,798). Each card is226px wide with16px gaps. Five
column offsets are0,242,484,726,968. The per-column heights are:

| Column | Four heights | IDs |
| --- | --- | --- |
| 0 |270,224,250,210|0,1,2,3|
| 1 |260,292,210,240|4,5,6,7|
| 2 |212,270,220,230|8,9,10,11|
| 3 |241,260,291,210|12,13,14,15|
| 4 |295,224,239,235|16,17,18,19|

Each column starts aty0; the next top is previous top+height+16. Use radius14
card masks. Fit each400×500 SVG with cover: scale=max(226/400,height/500),
center the result and clip overflow. A selected card has an inset1.5px,
3px blue #278fd6 outline, radius13, dashed6px on/4px off. The outline travels
with the card and shares its aperture clipping. This dashed stroke can be
constructed as a vector stroke with dash settings or short repeated segments;
pixel identity with the browser's stroke rasterization is not certified.

Selected IDs are0,5,19,15 in that order. Bind both count and outlines to their
gates, not to four separately animated decorative borders. Atlocal270 only
card5 of the two selected members intersects the aperture. At405 cards5,15,19
intersect, but the count is4. After return at435, cards0 and5 intersect while
the other two selected identities remain below the aperture. Card19 starts at
y806, outside the798px upper aperture; this avoids a stray selected sliver.

The fixed title is(596,144),24px/550,1140px width. The description is(596,178),
18px/400,1140px width. Scrollbar is(1798,450,7,500),radius5,visible only while
scrollY>0. Its position is an authored cue, not a recovered scroll metric.

## Conversation and composer

ConversationMask starts(110,122),width470,height=composerTop-122. Move its
content by chatOffset before clipping. Relative to that mask's origin:

| Layer | Position and metrics |
| --- | --- |
| Earlier image |(20,-70,212,182),card19,cover,radius10|
| Lead |(20,158),four21px/29px lines,width425|
| First task label |(22,292),20px,#a4a9a5|
| Second task label |(22,342),20px,#a4a9a5|
| Response |(20,390),ten21px/29px lines,width425|
| Feedback glyphs |(22,682),21px,#a4a9a5|

ComposerPlate left130,width426,bottom996,radius26,1px #dce0db border. It starts
aty868,height128. At515 it jumps to760,height236, preserving the bottom. The
conversation simultaneously moves up108px; it is not deleted or replaced.

Context is one chip at composer-local(12,28,339,86),radius15,1px #e8ebe6 border.
The icon panel is(14,21,48,48) within that chip, with a29px document glyph.
The label is(82,29),20px/500,width247; the22px close circle is(306,9). One
preview of card0 is at composer-local(364,10,72,105),cover,radius10, clipped
by the composer's right edge. Do not make four separate composer thumbnails.

Placeholder is(16,20) initially or(16,128) after context,19px #c5c9c3. Bottom
controls remain bottom anchored: plus/shield(19,height-43),23px; model label
(285,height-38),18px; send circle(376,height-48,38,38),28px arrow. The
placeholder remains empty; do not type a request or animate a send action.

## Action bar and confirmation

ActionBar is(925,928,536,60),radius23,white with slight alpha and a1px light
border. It appears with the first selection at45. Its labels are bar-local
(27,18) Attach(count), (180,18) Delete, and(306,18) Open In, all18px. The close
control is(477,9,44,42),27px glyph. The count reads the selected set, including
offscreen members. The bar does not follow the gallery's vertical transform.

At513 fade the action labels immediately to12% opacity and show a white
confirmation plate at(56,10,416,42),radius8,with16px centered text:
Attached 4 board images as image context. Keep the close control visible.
The confirmation remains through615. Context does not appear until515, two
native frames later. The selected source gallery is still visible afterward.

## Native controls and interpolation

docs/controls.csv has616 rows. Each row names the local/source frame, selection
flags, count, scroll, confirmation/context flags, composer dimensions, chat
offset and pointer coordinates. Use a key at every integer frame, with linear
interpolation between sampled values. Hold binary gates at0 or1; no smoothing
through a gate. If scripting keyframe import, first verify0,45,135,270,405,
435,512,513,514,515,615 against the CSV. No import script is certified here.

| Event | Local frame | Evidence basis |
| --- | --- | --- |
| First selection |45|Authored within source2790–2805 bracket|
| Second selection |135|Authored within2880–2895 bracket|
| Gallery scroll down |165–235|Authored curve,0→325px|
| Third selection |345|Authored within3090–3105 bracket|
| Fourth selection |405|Authored within3150–3165 bracket|
| Upper return |407–435|Authored curve,325→0px|
| Confirmation |513|Observed adjacent source3272/3273|
| Composer context |515|Observed adjacent source3274/3275|
| End |615|Source3375, before downstream typing|

Scroll uses smoothstep t²(3−2t) within each named interval. Pointer uses the
same interpolation between its explicit keys in src/model.ts. It is a77×100
white/black hand path with4px stroke above the page. Recreate the Scene.tsx
path or use the documented path coordinates, then place its top-left at the
CSV pointer position. Do not interpret the pointer path as measured mouse
input, and do not invent click pulses, a drag ghost or audio.

## Typography and adaptation

Use the supplied OFL-licensed variable Geist font. Browser font weights are
numeric400,500,550. Match these in Text+ if available, and calibrate a line
against the supplied actual outputs; Resolve may expose different named
weights and line-spacing units. Type sizes above are intended output pixels,
not universal Text+ Size values. Disable auto-fit, wrapping and tracking.
If text exceeds the specified width, edit the copy or explicit scene layout.

The API fields are theme(clay/ink),title,description,contextLabel,lead,response.
The last two are fixed4- and10-line arrays. src/model.ts declares character
limits, and src/typography.ts checks actual browser font widths before render.
Original input records and scripts/build-inputs.py are included. Changing copy
and art creates another adaptation, not another counted mechanism.

## Review boundary

Compare the actual movie at native cadence to the source before production
reuse. Verify selection persistence, offscreen membership, upper return,
confirmation-first/context-second timing, clipped single preview and ending
hold. Also review font metrics, pointer form/path, geometry, scrolling pace,
photography-versus-vector differences and readability. Mechanical checks and
sampled still inspection cannot approve these visual differences.

There is no independent moving-source approval or native Resolve validation.
The reference research and two original outputs remain separate files. This
kit is not a final all-hands presentation or permission to skip its storyboard
review, recording-derived timing, OBS cue or ending-buffer requirements.