Candidate construction guide · native Resolve not tested

Editorial callouts over a stable sidebar

Concrete original SVG/code kit; mechanically testable, unrendered by this builder. Parent renders and independent source-first critique are separate. Source quality remains unresolved; no completed-example or variant-as-example credit.

Source and adaptation

Exact source: Bring your work into Codex in a few clicks, publication date 2026-05-01; source frames [2640,3120), 60/1 fps, 480 frames, 1920x1080 design canvas.

Publication metadata, source-master hash and source frame mapping are inherited from the pinned queue, not a new online metadata or master verification. The retained source excerpt is research only; it is not an active dependency or part of the overlay.

Largest known gap: Original vector backdrop and chosen push/edge-wipe controls will not reproduce the source's moving light field, exact rounded stroke rasterization, pointer path or native UI metrics.

480 consecutive retained excerpt frames decoded and statically viewed in 20 indexed sheets at320x180 per cell; 10 selected frames viewed at960x540. This is not moving review or master-resolution inspection.

Source observations

• camera; local frames [0, 40, 80]: A floating app window keeps its outer bounds while its interior grows toward a sidebar close-up. The right-hand prompt/composer is cropped by the fixed outer window. Growth is nearly settled by frame40 and stable by80; this is not a full-canvas zoom.
• interface; local frames [0, 40, 80, 120]: Pointer and row-hover feedback traverse the upper sidebar before the pointer rests in the main pane. These samples do not show a navigation action replacing the app content.
• overlay; local frames [129, 130, 138, 140, 300]: The first heavy black editorial rectangle starts drawing around the upper four navigation rows near130 and is complete by about140. It then holds. The outline has an empty transparent interior; it is not a dark filled panel.
• overlay; local frames [307, 308, 312, 320, 323, 324]: A lower projects outline begins near308 while the upper outline wipes away toward its right edge. By about323 the lower rectangle is closed and the upper one is absent. This is a brief overlapping handoff between two different boxes, not one box simply translating down.
• hold; local frames [324, 360, 420, 479]: The larger projects callout remains on the fixed close-up through the final included frame; there is no outgoing fade within the selected excerpt. The abstract blue/lilac outer field continues to change subtly.

Intentional differences

• All labels, project names, icon geometry, palettes and SVG light fields are original illustrative content. The source product is not recreated or claimed as functioning software.
• Source observations: fixed window with initial internal push; upper callout near130..140; overlapping lower draw/upper wipe near308..323; lower hold to479. These estimates come from retained static frames, not film-production settings.
• Chosen implementation:1920x1080; window(212,56,1496,968); UI scale1→1.485@40→1.5@50;14px inside borders; linear horizontal inset wipes; original pointer path and hover gates. No camera fitting or exact alpha equivalence is claimed.
• Two fixed-coordinate callouts are siblings of ui-camera inside window-clip, not children of its scale. This makes editorial emphasis independent of simulated pointer feedback.
• Default garden notes and adaptation studio notes share the same timing, geometry and line limits; palette and code-generated light assets differ. They are two contents of one kit, not two new examples.

Run from the download

Start in a fresh extracted kit root with exactly these runtime files:

guide.json
README.md
handoff.py
controls.csv
overlay-manifest.json
core-publication-v08.zip
active-assets.zip

Use Python3.11+, Node22.18+, npm, unzip, FFmpeg/FFprobe and an existing supported Chromium. The core pins Remotion4.0.520 and the runtime lockfile. Set REMOTION_BROWSER_EXECUTABLE to your local Chromium if discovery fails. No private checkout, preparation script, authoring generator or inspection archive is required.

The core and active overlay both contain project/... members. Apply the selected overlay AFTER the core. The legacy assets-001.zip archives are not this kit; do not install them. The core font and its license remain required even though all active image/video media is SVG/code.

set -eu
test ! -e project
python3 -c "import hashlib,pathlib; assert hashlib.sha256(pathlib.Path('core-publication-v08.zip').read_bytes()).hexdigest() == '307fb6b927e35e6d73779652873d994f5c3e36cb7deba65f22fa64748057a0de', 'Core checksum mismatch'"
python3 -c "import hashlib,json,pathlib; manifest=json.loads(pathlib.Path('overlay-manifest.json').read_text()); assert hashlib.sha256(pathlib.Path('active-assets.zip').read_bytes()).hexdigest() == manifest['archiveSha256'], 'Overlay checksum mismatch'"
unzip core-publication-v08.zip
unzip -o active-assets.zip
python3 handoff.py verify --guide guide.json --project project
python3 handoff.py frames --guide guide.json --project project > controls-regenerated.csv
(cd project && npm ci)

Run the exact archived CLIs from project/. These are user-run commands, not a claim that the author rendered. No --fps, --duration or --output option is supported; cadence and duration come from the recipe.

cd project
node --experimental-strip-types scripts/catalog.mjs show sidebar-editorial-callouts --contract
node --experimental-strip-types scripts/render.mjs --help
node --experimental-strip-types scripts/verify.mjs --help
node --experimental-strip-types scripts/render.mjs --recipe sidebar-editorial-callouts --variant default --out out/sidebar-editorial-callouts-default.mp4
node --experimental-strip-types scripts/render.mjs --recipe sidebar-editorial-callouts --variant adaptation --out out/sidebar-editorial-callouts-adaptation.mp4
node --experimental-strip-types scripts/verify.mjs out/sidebar-editorial-callouts-default.mp4
node --experimental-strip-types scripts/verify.mjs out/sidebar-editorial-callouts-adaptation.mp4
cd ..

Keep each output manifest next to its movie. The CLI refuses to overwrite an output or sibling manifest. Verification is provenance/technical checking, not source-fidelity approval. New editorial holds would change the requested bounded example and are not part of this kit.

Edit the complete Content object

Create the file from the installed recipe, never from a stale example or a partial object. This refuses to overwrite an existing custom file:

cd project
node --input-type=module -e "import {readFileSync,mkdirSync,writeFileSync} from 'node:fs'; const recipe=JSON.parse(readFileSync('recipes/sidebar-editorial-callouts.json','utf8')); mkdirSync('inputs',{recursive:true}); writeFileSync('inputs/sidebar-editorial-callouts-custom.json',JSON.stringify(recipe.defaults,null,2)+'\n',{flag:'wx'});"
cd ..

Edit project/inputs/sidebar-editorial-callouts-custom.json, respecting every field and the limits in guide.json. Both variants are original illustrative content, not real product behavior. For image slots, keep the declared viewBox/aspect and SVG-only dependency rules. Then:

cd project
node --experimental-strip-types scripts/render.mjs --recipe sidebar-editorial-callouts --content inputs/sidebar-editorial-callouts-custom.json --out out/sidebar-editorial-callouts-custom.mp4
cd ..

Construction steps

1. Start in the downloaded kit root. Unpack core-publication-v08.zip and then active-assets.zip with overwrite enabled. Both use project/... member paths; no legacy asset archive, private preparation script or inspection file is required.
2. Verify the selected recipe and both variants of every active SVG using unchanged handoff.py, and export its native-frame controls.csv before editing. Local frame zero is the queued source start, not absolute source frame zero.
3. Keep all UI components as native rectangles, paths and text. Build the supplied SVG materials from their exact element/gradient tree when reproducing them in Fusion. Never use a source screenshot, footage, embedded bitmap or rasterized whole-interface substitute.
4. Make a1920x1080 square-pixel Fusion composition at60fps, range0..lastIncludedFrame. Use one global frame clock for every child; parent gates intersect child gates but do not rebase keyframe time.
5. Build groups on transparent RGBA working domains, merge their children in listed order, intersect local rounded/inset masks, then apply the parent transform and opacity once. Mask the composite, not just the Transform effect.
6. Set bundled Geist with explicit line breaks, listed weight, pixel size, line height and box width. No automatic shrink/wrap is supported. Calibrate Text+ size/baseline with the installed font and test both complete contents before accepting an output.
7. Create context-field at0,0,1920,1080. Above it put light-field at2048x1152, alpha0.72; move(-64,-36) at0 to(-24,-12) at479 with smoothstep. Keep these behind the app and outside its camera. SVG gradient stops supply alpha; no black backing or Screen blend.
8. Add window-shadow at(212,78,1496,968), radius16, alpha0.22, CSS blur32px. Above it create window-clip=(212,56,1496,968), radius12, overflow hidden. It is fixed for all480frames. Fusion Gaussian size is not numerically interchangeable with CSS blur.
9. Inside window-clip, ui-camera uses top-left origin(0,0), x0,y0; scale1 at0,1.485 at40,1.5 at50, held through479. Each of the first two segments is smoothstep. Its subtree contains all UI labels, sidebar/main paper, icons, hover strip, composer and pointer. Keep the editorial rectangles outside this subtree.
10. For a full1920x1080 transparent transform domain and centered Fusion Pivot(.5,.5), ui-camera Center is(scale/2,1-scale/2), Size=scale. At the final1.5 scale use Center(.75,.25), not(.5,.5). The outer translation is separately212px,56px with Size1. Changing Size with a centered default pivot would move the wrong target.
11. Sidebar local width424; navigation labels begin(56,64+44*i), font20,line25, i0..3. Project label is(24,266), font19; project names begin(56,314/414/458),font20; detail at(56,362),font17. Main heading starts(810,326),font40; composer plate=(512,432,1100,140),radius30. All remaining exact nodes and paths are in fusionNodes; the fixed outer clip intentionally crops the right-hand page after the push.
12. Keep hover-strip alpha0.035 on[0,98), its top y54 on[0,74),98 on[74,86),142 on[86,98). All changes are held, not eased. Pointer follows the independent chosen x/y tracks in guide.json and rests from120. This illustrative hover is not the editorial callout and does not navigate.
13. Create navigation-callout as a transparent inside-border rectangle at(0,76,556,284) in window coordinates, radius10, stroke14px,#151515, gate[130,321). Subtract the inset rounded rectangle from the outer one to form the ring. Local clip.right is550 at130,0 at140 then held. Clip.left is0 through308,556 at321. Wipes are linear; no retiming, opacity fade or box translation.
14. Create projects-callout separately at(0,380,636,388), radius10,14px inside border, gate[308,480). Clip.right=630 at308,0 at323 then held; other insets zero. Merge it after the upper ring. The two branches overlap during[308,321); this is a rightward draw/wipe handoff, not a morph between rectangle bounds.
15. In Fusion, implement each wipe as a rectangular alpha intersection in the ring local domain: visible bounds(leftInset,topInset,width-leftInset-rightInset,height-topInset-bottomInset). Width0 gives no pixels. Do not stretch the outline to imitate a reveal; stroke thickness and target positions must remain fixed.
16. Hold the lower projects callout through479. Do not add an outgoing fade, expand the source interval, select a real project or call the entire image frozen while the original vector light field still drifts.

Fusion hierarchy and controls

This is an application-unverified construction map, not a .comp or .drp import. No native Resolve output exists from this worker. The full controls, exact paths, materials and text are in guide.json; the per-frame numeric sampler is controls.csv.

Use Background_Canvas -> the ordered root Merge chain -> MediaOut1. Build every group on transparent RGBA before its parent transform. A group fill is behind all of its children. Each row identifies the exact recipe node, parent, half-open local gate and local pixel box. Do not flatten the whole interface into an image.

Coordinates, easing and alpha

• Local x/y are pixels from the top-left of the parent, not the composition. All keys use the same native local frame f. For absolute source time use sourceStart+f, and for nominal seconds multiply by fpsDenominator/fpsNumerator. These are not measured master PTS.
• Use full1920x1080 transparent domains for local transforms, retaining offscreen material until the parent clipping stage. For these recipes any content permanently outside that local domain never returns into the visible window. Do not resize a group to its changing visible bounding box before parenting.
• For zero-rotation local origin(ox,oy), sx=scalescaleX and sy=scalescaleY: bx=x+ox-sxox, by=y+oy-syoy. Output pixels=(bx+sxinputX,by+syinputY). Full-frame Fusion centered Pivot=(0.5,0.5) then uses CenterX=bx/1920+sx/2; CenterY=1-by/1080-sy/2. Use independent X/Y Size if scales differ. All authored rotations are zero; Angle sign would invert for CSS clockwise rotation.
• For a local rectangle center use ((x+w/2)/1920,1-(y+h/2)/1080), Width=w/1920, Height=h/1080. For rounded corners preserve the radius in pixel geometry; reconstruct a Bezier rounded rectangle rather than treating the Fusion Corner Radius knob as pixels. Every SVG path/viewBox and native icon path is preserved in the guide.
• Left-key hold means the left value persists strictly before the next key, and the right value begins exactly at that key. Smooth means uu(3-2*u), not Resolve default Auto or the older cubic Bezier(.16,1,.3,1). Bake controls.csv values as native-frame keys when an analytic expression is inconvenient.
• Masks change alpha before Over compositing. overflow:hidden plus radius intersects the children with a local rounded rectangle; radius alone does not clip children. All clip.top/right/bottom/left values are local pixels, not percentages or a time offset. Visible inset bounds=(left,top,width-left-right,height-top-bottom). Intersect masks; do not use an effect mask that merely limits Transform influence.
• CSS rect borders lie inside their stated box. Native fallback uses an outer rounded mask minus an inset rounded mask of border thickness; do not expand the box with a centered outline. Whole-group opacity is applied once after child Over merges.
• Keep premultiplied RGBA consistent for Over. If a color operation needs straight alpha, unpremultiply then premultiply immediately around it. No arbitrary opacity compensation, Screen blend or black backing. The original SVG radial/linear gradients use local alpha stops.
• All blur controls are CSS pixel values. Fusion Gaussian radius/quality is not assumed equivalent; calibrate the separate shadow branches and soft table cells at full output resolution. Transparent SVG gradient stops are not blur nodes. Disable motion blur; no exposure sampling is authored.
• Geist text uses explicit line breaks and listed pixel boxes. Resolve Text+ font size/baseline and SVG gradient appearance need actual application calibration. Do not claim identical rasterization from a numerical sampler pass. Use held StyledText strings for the exact character prefix schedule if Write On counts differently.
• Use no optical flow, dynamic zoom, retiming, transition handles or synthesized audio. No extra frames precede or follow the source window. Final output is clipped to1920x1080, not scaled to fit it.

Editable SVG materials

Every SVG is generated from scratch by generate_assets.py. That optional source file can reproduce assets byte-for-byte when supplied; it is not a runtime prerequisite. The active archive already contains the required SVGs. No tracing, bitmap conversion, source master, remote resource, SVG image node or embedded font is present.

Rebuild each SVG as a vector subgroup using svgConstruction in guide.json: all viewBoxes, element attributes, paths, gradient coordinates, stop colors and opacities are explicit. Resolve SVG imports may lose paint/gradient semantics; do not assume a successful import is equivalent. Native Background/Polygon/Ellipse material layers are the fallback, not a screenshot export.

Checkpoints and regression gates

The focused test_guide.py is an authoring regression suite, not a required download step. It checks exact recipe/source/SVG pins, archive whitelist, deterministic SVG generation, hierarchy and masks, native/quarter-frame sampler agreement, all handoff rows, half-open cuts, content rejection and actual archived CLI options without rendering.

A human still needs to review parent-rendered default and adaptation outputs at native cadence, compare the source and validate the Fusion reconstruction. A contact sheet is not moving review.

Limits

• Original vector backdrop and chosen push/edge-wipe controls will not reproduce the source's moving light field, exact rounded stroke rasterization, pointer path or native UI metrics.
• No output render/encode, npm dependency installation, moving-source review, audio assessment, blind test or native Resolve execution was performed by this builder.
• Full native source masters were unavailable. Retained excerpts have960x540 pixels; 1920x1080 source dimensions and master hashes are inherited queue metadata.
• All historical source-quality status remains unresolved. Mechanical readiness does not approve material, typography, motion, source fidelity or production use.
• The core includes a licensed Geist font. This is SVG/code-only active imagery, not an assertion that the entire runtime contains no binary files.
• Only selected recipe and active SVG files belong in the overlay. No old asset pack, source master, private worker, dependency tree or critic output belongs in it.
• Text fit requires the actual loaded browser font; field length caps and numeric tracks alone cannot establish readability.
• Both content variants demonstrate one treatment, not two new examples. No shared counts, catalog entries or publication state are modified.

Historical inputs and source masters are provenance only. The downloadable run steps use only the listed kit files and installed tools. The source-only builder pass precedes any fresh critic findings; it does not accept its own visual quality.