# Inspect a shared attachment through staged viewer loading

One draft treatment with two original content variants. Remotion exports are
real renders; these Resolve/Fusion steps are a manual construction guide, not
an imported or executed project. Native Resolve execution and source-quality
approval remain unverified. Use the supplied original content and vector art.

## Native clock and visible gates

Source: ChatGPT Work for Marketing Teams, official film `8sUXGKDUEzI`, published
July 9, 2026. The selected source interval is **[1800, 2034)** at **30/1 fps**.
Make a **234-frame, 1920x1080** timeline/composition at exactly 30 fps. Local 0
maps to source 1800; local 233 maps to 2033. Do not use 29.97. The retained
master uses time base 1/15360 and 512 ticks/frame; the silent 960x540 research
excerpt preserves those positions after rebasing to zero.

| Local frames | Visible state |
| --- | --- |
| 0–61 | Posted thread; attachment clipped at the bottom |
| 62–107 | Authored scroll rises 308 pixels; attachment becomes fully visible |
| 108–142 | Same attachment held; pointer approaches it |
| 143–159 | Modal opens over dimmed thread; header/footer and spinner only |
| 160–161 | Modal remains, but spinner is gone and body is empty |
| 162–163 | Main cover and selected first thumbnail load; second is white |
| 164 | Second thumbnail loads; third is a white placeholder |
| 165–233 | Third and partial fourth load; selected cover never changes |

All intervals are inclusive in this table. The composition ends before local
234. The source cuts to white at 2034; that cut is excluded. Modal/load gates
are observed native state changes. Scroll, pointer, spinner rotation, opacity
and layout values below are authored approximations, not recovered settings.

## Layer stack and masks

1. Build an original desktop background from a radial color gradient and a
   faint diagonal-line grid. The source starfield photograph is deliberately
   replaced. Do not import a screenshot or the research excerpt into the build.
2. Add the rounded thread window at top-left (112,62), 1697x955. Keep its
   42-pixel title bar and 68-pixel thread header fixed. Mask everything inside
   its rounded boundary. Original chrome and text replace source branding.
3. Mask the scrolling post below window y=110. Its initial content origin is
   (0,138). Parent avatar, author, introductory line, five bullet lines, four
   decisions, two caveat lines, file label, attachment and reply composer to
   one content transform. Translate that transform vertically by -scrollY.
4. Place the attachment at window x=86 and content y=646, 578x354. Its header
   is 82 pixels high and cover 272 pixels high. The reply composer starts at
   content y=1028; it moves with the post, not with the fixed header.
5. At 143 add a dark scrim clipped to the same outer window. Over it add the
   viewer at screen (149,112), 1624x876 with rounded corners. Keep the thread
   behind it; this is not a cut to a second output application.
6. Viewer header is 87 pixels high. Its body is clipped to 718 pixels below
   that header, leaving footer space. Keep header, close control and footer
   icons visible through the spinner, empty interval and loaded states.

Top-left pixel coordinates here match React layout. Convert them to Fusion
normalized center coordinates for each actual parent plane. For a rectangle
at (x,y) of size (w,h) in a 1920x1080 plane, center is
((x+w/2)/1920, 1-(y+h/2)/1080); size is (w/1920,h/1080). Apply its parent
before feeding child-local coordinates into a full-canvas transform.

## Shared cover and later thumbnails

Build one editable cover group at 1280x662: gradient, organization at (42,40),
three title lines at (49,178) with 98-pixel line spacing, subtitle at (49,568),
audience at (49,610). Use the bundled Geist font: organization 23px, title 80px
weight 430, subtitle 22px, audience 23px. Validate every title line before
export; do not silently reduce its size. `inputs/*.json` supplies exact copy.

Reuse that group for all three appearances:

- Thread card: 578x272, beneath its 82-pixel header.
- Selected first thumbnail: 237x133, inside a 239x135 outline.
- Main viewer: 1280x662, at viewer-body (320,33).

Those explicit x/y scale ratios reproduce this authored implementation and can
distort the smaller previews slightly. They are not a source-approved aspect
measurement. Preserve the same copy and graphic identity across all instances.
Do not create three different cover designs or rasterize the full UI.

Thumbnail 1 is at body (27,33). Later thumbnails are 239x135 with 208-pixel
vertical pitch; labels sit 145 pixels below each top. At 162 show thumbnail 2
as a white rectangle; replace it with `THEME-page-2.svg` at 164. Only then
introduce thumbnail 3 as a white rectangle. At 165 fill thumbnail 3 and add
thumbnail 4. The body mask intentionally reveals only the top of thumbnail 4.
A colored underline on thumbnail 1 persists; there is no selection change.

The page-2/3/4 SVGs are original symbolic summary/table/chart artwork, not
reproductions of source slide text or values. They differ in density and detail.
The avatar is an abstract original mark, not the source person's photograph.
Four constructions have two palettes, yielding eight SVG inventory bindings.
The shipped generator records fixture geometry and regenerates the files.

## Motion controls

`docs/controls.csv` provides one row per local frame. Its scroll curve uses
clamped smoothstep p²(3−2p), with p=(frame−62)/(107−62), multiplied by 308.
The source only brackets the scroll onset after 1860 and by 1875; the exact
curve and settled timing are chosen values, not measurements.

Keep cursor motion on the shared local clock. Authored anchors are
(frame,x,y): (0,1086,512), (61,1086,512), (93,1240,436), (120,754,837),
(137,560,755), (142,560,755). Interpolate with the same smoothstep. Hide the
pointer at 143. No click halo is added. Source pointer shape and path differ.

Spinner center is screen (960,560), radius 22 inside a 54-pixel group. Draw a
full subdued ring and a short accent arc; rotate by 21 degrees per local frame
after 143. Gate the entire spinner off at 160. **Do not crossfade through the
two empty frames** or show the cover before 162. Header/footer remain fixed.

## Content API and checks

Use exactly the declared fields: theme, channel, author, organization, title
(three lines), subtitle, audience, attachmentName, introduction, bullets
(five lines), decisions (four lines), caveat (two lines). Theme is orchard or
studio. All text is original fiction. Do not use this specimen as a real Poe
demo, a claim about current OpenAI behavior or a financial/product result.

The renderer rejects unsupported fields and overwide loaded-font text instead
of shrinking or clipping it. Match those constraints manually in Resolve.
Title lines have 1160 pixels at 80px; the attachment label has 485 pixels at
21px; post lines have 1530 pixels at 21px. Preserve one-line post rows and the
supplied row counts; there is no responsive reflow API.

Before claiming a Resolve result, open the actual project, verify the timeline
rate, inspect 143/159/160/161/162/164/165 and 233, and export a silent 234-frame
1920x1080 H.264 MP4. Reprobe the exported clock and every frame count; pair the
output with its content variant. This package has not performed native Resolve
validation. There is no spoken audio or duplicated narration.

## Review limits

Static samples are not perceived moving review. No source-fidelity approval is
claimed. Font metrics, original art, post copy, chrome, continuous motion,
scrim/background treatment and small-thumbnail proportions remain authored
differences. This treatment shows read-only inspection of an already-posted
file. No share request, upload, generated deck, later slide navigation or
backend persistence is part of the selected interval.
