Candidate construction guide · native Resolve not tested

A payment action becomes a receipt

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: Buy it in ChatGPT: Instant Checkout and the Agentic Commerce Protocol, publication date 2025-09-29; source frames [1080,1560), 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 planter/notebook products replace the source photograph; materiality and exact drifting light field differ. Chosen spinner, ripple and receipt text cadence need parent output review; no rendered readability or native Resolve calibration is established.

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

Source observations

• interface; local frames [0, 31, 32, 36, 48, 70, 76]: A cropped vertical product page with a photographic hero sits over a changing pastel field. A dim veil begins near32 and a white checkout drawer enters from the right near36, settling around70..76. Product identity persists as a thumbnail, not a separate new object.
• hold-detail; local frames [76, 90, 111, 120, 132]: The populated checkout is not a freeze: its contents drift upward, most visibly late in this range. Product, quantity, card, address, delivery, cost breakdown and pay button remain separate regions. Source personal/demo details are not reusable assets.
• cut; local frames [132, 133, 150, 171, 175, 176]: A hard cut at133 isolates the large black pay pill on the pastel field. It settles then compresses slightly before the state label switches at176; this is not a continuous zoom from the whole checkout UI.
• state; local frames [176, 188, 210, 243, 244, 261, 262]: The working label brightens into view beside an animated segmented spinner. The apparently held processing interval contains changing spinner spokes. From about244 the pill narrows and clips the label rather than shrinking its type. Frame262 cuts to a white success column.
• state; local frames [262, 270, 272, 280, 288, 294, 327, 343]: A central dot and black ring grow, a green outer ripple follows, then a green disc fills and a white check draws. The completed check holds around294..327; the column shifts upward slightly before the next cut. Ring, disc and check are distinct layers.
• receipt; local frames [343, 344, 360, 376, 400, 430, 479]: At344 the view cuts to a complete smaller rounded phone with a populated receipt card. Confirmation copy streams beneath it later in the shot, then holds through479. The source field and phone continue subtle movement; no outgoing fade or extra ending hold is present.

Intentional differences

• Both contents are original: default is a fern planter from fictional Mossworks; adaptation is a notebook/pencil kit from fictional Paperwell. Product artwork, title, options, merchant, prices, totals and receipt prose change together.
• Source photography becomes editable original SVG geometry. Source branding, card/address data and confirmation promises are removed. No source-derived screenshot, live account or purchase is used.
• The exact60fps480-frame window and observed state/cut order are retained. All dimensions, colors, smoothstep curves, spinner speed and text-prefix steps are chosen implementation values, not recovered official controls.
• Processing is represented by rotating eight fixed-opacity SVG spokes; source spoke cadence is not measured. Success uses separate dot, ring, green ripple, disc and dashed check stroke. The moving vector gradient is not source optical material.
• The final receipt keeps the same productArt slot as the hero and checkout thumb. This is illustrative state continuity, not evidence of a successful transaction.

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 payment-state-sequence --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 payment-state-sequence --variant default --out out/payment-state-sequence-default.mp4
node --experimental-strip-types scripts/render.mjs --recipe payment-state-sequence --variant adaptation --out out/payment-state-sequence-adaptation.mp4
node --experimental-strip-types scripts/verify.mjs out/payment-state-sequence-default.mp4
node --experimental-strip-types scripts/verify.mjs out/payment-state-sequence-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/payment-state-sequence.json','utf8')); mkdirSync('inputs',{recursive:true}); writeFileSync('inputs/payment-state-sequence-custom.json',JSON.stringify(recipe.defaults,null,2)+'\n',{flag:'wx'});"
cd ..

Edit project/inputs/payment-state-sequence-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 payment-state-sequence --content inputs/payment-state-sequence-custom.json --out out/payment-state-sequence-custom.mp4
cd ..

Construction steps

1. Start in the downloaded kit root. Verify core-publication-v08.zip and active-assets.zip against the pinned SHA-256 values, then unpack core first and the selected active overlay second with overwrite enabled. Both have project/... member paths. No legacy assets archive, inspection image or private preparation file is needed.
2. Run unchanged handoff.py verify and frames from the kit root before editing. This checks the recipe and both SVG variants and exports native-frame numerical controls, not visual quality. The complete editable recipe is installed at project/recipes/.json.
3. In Fusion create a1920x1080 square-pixel composition at60fps with inclusive range0..479. Global local frame0 maps to the source start specified in guide.json. Do not add handles, transition frames, retiming or an ending hold.
4. Build every group as a transparent local RGBA domain, merge children in listed order, intersect local clipping masks, then transform and apply group alpha once before Over compositing into the parent. Every child key uses the same global frame f; layer start is a gate, not a new clock.
5. Rebuild the original SVGs from svgConstruction: all element attributes, paths, viewBoxes, gradient stops and alpha are preserved. Use native filled Polygon/Bezier/Ellipse subgroups, not a rasterized interface or source photo. Original source imagery is research only.
6. Use the core Geist font and the stated pixel boxes, weight, lineHeight and explicit newlines. No auto-shrink or line wrapping is supported. Text+ Size/baseline and native blur need application calibration; nothing here claims a tested .comp/.drp or pixel-equivalent native result.
7. Select one complete content object. Default depicts a fern planter from fictional Mossworks:48.00 subtotal+4.00 delivery+0.00 tax=52.00 demo total. Adaptation depicts a notebook/pencil kit from fictional Paperwell:32.00+4.00+0.00=36.00. Merchant, productShort, productTitle, productArt, receiptValues and confirmation must change together. No card number, address, delivery promise or live payment exists.
8. Place context-field behind every state,2048x1152. Its x moves-64→-24 and y-36→-12 over0..479 using smoothstep. The SVG has one linear base and three transparent radial ellipse layers. This chosen material drifts even during apparent UI holds; it is not the source optical field.
9. Create detail-rim=(550,-32,820,1200), alpha.36, and detail-clip=(574,-32,772,1180), white fill, overflow hidden, gate[0,133). Build product-hero at(0,0,772,515) from productArt, title at(30,548), option controls at690, merchant/price at844/880 and Buy at(654,864,88,64). Keep the entire detail group vertically cropped by the canvas; do not resize it to fit.
10. Draw detail-dim over the product but below checkout-drawer, gate[32,133), black alpha0 at32→.18 at43 linearly. The drawer is its own white772x1180 child: x772 at36→0 at76 smoothstep; y0 through92→-48 at132 smoothstep. It enters under the fixed detail clip. Do not animate product geometry together with the drawer.
11. Inside checkout-drawer use the SAME productArt at(30,42,240,160), title at(306,42), quantity plate at(306,164,210,68), and three rows with tops290/410/530. Each row has its exact path icon, primary label and muted secondary label. Summary columns begin684; demo total begins830; black action box=(30,936,712,94), radius47. All exact label/line limits and icons are enumerated in fusionNodes.
12. At133 switch the whole detail branch off and action-pill on. This is a stepped branch switch, not a dissolve or a zoom. action-pill=(526,y,868,224), radius112, dark fill, local origin(434,112); y436 at133→432 at145 smoothstep. Keep child alpha inside the rounded clipping mask.
13. Hold the pay label through175. The whole pill scale is1 through172, .985 at175,1 at180 with smoothstep segments; origin is its original center. At176 switch to working-spinner and working-label. Working-label opacity.12 at176→1 at188 linearly. Do not interpolate the label strings or crossfade both labels together.
14. working-spinner uses its original80x80 SVG at(170,72), origin(40,40); rotation0 degrees at176→1290 at262 linearly, i.e.15 degrees/native frame. The eight spokes have fixed descending opacities1,.9,...,.3. For Fusion rebuild on a local80x80 transparent square, rotate around its center using Angle=-rotation, then place in the pill; do not rotate a full-canvas image about the default canvas pivot.
15. From244 to261 narrow the pill width868→188 and move x526→866 with smoothstep, preserving center960. The label and spinner retain their fixed local dimensions and are cropped by the shrinking rounded alpha mask. This is NOT scaling the type down or keying its font size. The branch ends at262 before its last rotation key is rendered.
16. At262 hard-switch to success-rim=(534,0,852,1120), alpha.34, and success-column=(566,0,788,1120), white. The merchant stays at(56,12), centered. Column y holds0 through328 and reaches-32 at343 smoothstep. The isolated pay branch must be absent.
17. Create the black64px dot at(362,508), centered origin(32,32), scale.22 at262→1 at270; gate[262,280). Black ring is164px at(312,458),14px inside stroke, scale.65 at266→1 at271, gate[266,272). These are separate local layers, not a recolored shared circle.
18. Green ripple is176px at(306,452),9px inside stroke,#32b94b, gate[272,290), center pivot, scale.92→1.5 over272..289 smoothstep and alpha1→0 linearly. Green disc is188px at(300,446),#2abd46, gate[280,344), scale.30 at280→1 at290 smoothstep. Apply each alpha before Over, no Screen blend or dark matte.
19. For success-check use the exact path M12 34 L26 48 L54 14 in viewBox0 0 64 64, box(346,492,96,96), white stroke7 viewBox units, unfilled, default SVG butt caps and miter joins. Gate[284,344), dashArray80 and dashOffset80 at284→0 at294 linearly. Fusion fallback trims the same64-unit path by arc length, not a rectangular left-to-right wipe. The two segment lengths are sqrt(392) and sqrt(1940); visible path length is clamp(80-dashOffset,0,totalLength). Hold the completed check through343.
20. At344 hard-switch success off and receipt-phone on. Phone x742,width436,height882,radius70, overflow hidden. Its y is116 at344→108 at375, holds through400, then96 at479, smoothstep on moving segments. The separate translucent rim is16px larger on every side, x726,width468,height914,radius86,alpha.52, y exactly phoneY-16. Do not retain a floating success check over the receipt.
21. Build receipt-phone children in the listed order: time/signal/app header; receipt plate(28,126,380,390); state dot/label; SAME productArt at(46,190,136,91); productShort at(198,190); quantity/merchant/total columns at322; details button at452. Receipt plate exists fully at344; the product is not replaced by another icon.
22. Keep confirmation at(30,548,378,112),18px Geist, lineHeight1.45, explicit four lines. Gate[376,480). Character-prefix steps are0 at376,22 at383,48 at394,80 at405,112 at417,180 at430; slices beyond actual text length simply show the complete string. Bake held StyledText prefixes if Text+ Write On counts differently. Small action symbols start435; composer and home bar already exist from344.
23. Check cuts133/262/344 on both sides, working onset176, width clip244..261, distinct ring/disc/check stages, receipt identity and late streamed copy. Final479 stays on the phone. Treat these chosen controls as an editable source-informed fixture, never measured checkout latency or a successful transaction.

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. For the payment spinner rotate its local80x80 domain about(40,40), Angle=-rotation for CSS clockwise motion, then place the rotated result; do not rotate around the full canvas center.
• 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 document reframing 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 planter/notebook products replace the source photograph; materiality and exact drifting light field differ. Chosen spinner, ripple and receipt text cadence need parent output review; no rendered readability or native Resolve calibration is established.
• 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.