Candidate construction guide · native Resolve not tested
Prompt into device context
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: Find the perfect gift by shopping with ChatGPT, publication date 2026-03-27; source frames [450,690), 60/1 fps, 240 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: An original unbranded phone, different copy and discrete text reveal cannot claim the source's exact message morph, type shaping or soft streamed-answer emphasis. No fresh rendered comparison exists.
240 consecutive retained excerpt frames decoded and statically viewed in 15 sheets at480x270 per cell; four selected frames viewed at960x540. This is not moving review or master-resolution inspection.
Source observations
- measured; local frames [37, 38]: The retained excerpt changes directly from the floating prompt on white at frame 37 to a tall pale phone against blue/lilac/pink at frame 38. No intermediate zoom is visible between these two decoded frames.
- estimate; local frames [0, 30, 37]: The opening composer stays near the center with three lines of text, a detached plus at left, and a dark send circle inside the lower right. Cursor flicker and send-button tone change are visible; their full-resolution contours have not been measured.
- estimate; local frames [38, 43, 60, 80]: The phone is top-aligned near x=330..630 in the 960-wide excerpt and extends below the canvas. After a brief blank-screen beat, a right-aligned prompt bubble enters low and travels upward beneath the header. It is nearly settled by frame 80. Coordinates and settle time are visual estimates, not fitted tracking.
- estimate; local frames [102, 103, 120, 151]: A search-status line appears below the sent prompt around frame 103. Its gray emphasis changes while the rest of the phone holds. Exact glyph antialiasing and per-word fade timing remain unmeasured.
- estimate; local frames [152, 176, 208, 239]: The status is replaced by a left-aligned answer that progressively fills several lines, with mixed emphasis and a pale leading edge. The excerpt ends while the text is still arriving, not on a completed answer hold.
Intentional differences
- Default sketching advice and second-content mapping advice use the same nodes, timing, masks and shared prompt identity.
- Original unbranded phone, flat UI primitives and radial SVG washes replace source styling. No source asset is reused.
- Old ObjectContext adds an art panel and uses change=54, four empty output frames, settle=84 at its own output timing. This native-cadence recipe instead follows the observed cut at 38 and uses a chosen five-frame blank beat, with only the message moving.
- Answer reveal uses discrete character steps with uniform weight, unlike the source soft streamed emphasis. Font fit and actual motion require parent rendering.
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 prompt-device-context --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 prompt-device-context --variant default --out out/prompt-device-context-default.mp4
node --experimental-strip-types scripts/render.mjs --recipe prompt-device-context --variant adaptation --out out/prompt-device-context-adaptation.mp4
node --experimental-strip-types scripts/verify.mjs out/prompt-device-context-default.mp4
node --experimental-strip-types scripts/verify.mjs out/prompt-device-context-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/prompt-device-context.json','utf8')); mkdirSync('inputs',{recursive:true}); writeFileSync('inputs/prompt-device-context-custom.json',JSON.stringify(recipe.defaults,null,2)+'\n',{flag:'wx'});"
cd ..
Edit project/inputs/prompt-device-context-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 prompt-device-context --content inputs/prompt-device-context-custom.json --out out/prompt-device-context-custom.mp4
cd ..
Construction steps
- Unpack core-publication-v08.zip, then active-assets.zip with overwrite enabled. The overlay installs this selected recipe and only its active SVGs. Do not fetch any legacy assets-001.zip.
- Verify recipe and every default/adaptation SVG with the unchanged handoff.py. Export native controls.csv rows before editing; local frame zero is the queued source start, not source frame zero.
- Build all native UI parts as individual rectangles, ellipses, paths and text layers. SVG files contain original vector materials only; no layer may reference source footage, screenshots or embedded raster data.
- In Fusion, create a 1920x1080, square-pixel composition at the exact recipe cadence, with local start zero. Keep the full listed node/parent order and one global clock; intersect every child gate with all ancestor gates.
- Use transparent RGBA subgroups. Multiply group alpha once after child compositing. Make overflow:hidden a true alpha intersection before the group transform, not a Transform effect mask that limits only the transform.
- Use Geist from the core with the exact pixel sizes, line heights and explicit newlines. Content length caps are not font measurements. Test both contents using the installed font; reject overflow rather than shrinking.
- Create free-composer on [0,38). Plate=(628,402,828,236), radius42; request=(658,438,672,166), font44, line55. Add its independent 24px blurred shadow at y420, plus circle and send circle. The send-disc alpha is 1 through30 then reaches0.46 at37.
- At38 cut the whole branch to device-context. Add the full-canvas original context SVG, phone-rim=(650,64,620,1232), radius96, then screen-clip=(664,78,592,1204), radius82. The phone extends below the canvas intentionally. No device zoom or fade substitutes for this cut.
- Within screen-clip, construct paper, clock, signal/battery, menu/app/utility chips and path icons from the node table. Keep them static. Hold the request absent for frames38..42; there are five frames in that blank interval.
- Create sent-request at x212,width350,height134,radius30 and gate [43,240). Animate only local y: 664@43,360@52,206@66,188@80,188@239. Each of the first three segments uses smoothstep, then hold. Its child device-request reuses the same prompt slot at (20,18,313,96), font24, line30.
- Keep search-status at (24,365,542,36), font26, gate [103,152), alpha0.75@103,0.4@130,0.75@151 with linear segments. Gate streamed-answer [152,240) at (24,365,542,650), font26, line32.5. Reveal 0 characters at152 and four more every two frames through172 characters at238; do not rebase to the layer start.
- The device and request hold their pose after80, but text continues arriving. The last frame is239 and the answer remains incomplete. Do not append a final answer hold or send action inside this source window.
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.
| Layer / tool | Parent | Local gate | x; y; width; height |
|---|---|---|---|
| free-composer / group | Canvas | [0,38) | 0; 0; 1920; 1080 |
| free-shadow / rect | free-composer | [0,38) | 628; 420; 828; 236 |
| free-plate / rect | free-composer | [0,38) | 628; 402; 828; 236 |
| free-request / text | free-composer | [0,38) | 658; 438; 672; 166 |
| free-plus-disc / ellipse | free-composer | [0,38) | 478; 526; 116; 116 |
| free-plus / path | free-composer | [0,38) | 510; 558; 52; 52 |
| free-send-disc / ellipse | free-composer | [0,38) | 1360; 542; 84; 84 |
| free-send-arrow / path | free-composer | [0,38) | 1379; 561; 46; 46 |
| device-context / group | Canvas | [38,240) | 0; 0; 1920; 1080 |
| context-background / image | device-context | [38,240) | 0; 0; 1920; 1080 |
| phone-rim / rect | device-context | [38,240) | 650; 64; 620; 1232 |
| screen-clip / group | device-context | [38,240) | 664; 78; 592; 1204 |
| screen-paper / rect | screen-clip | [38,240) | 0; 0; 592; 1204 |
| device-clock / text | screen-clip | [38,240) | 54; 40; 100; 34 |
| signal-bars / path | screen-clip | [38,240) | 428; 35; 36; 36 |
| battery-body / rect | screen-clip | [38,240) | 510; 48; 33; 15 |
| battery-tip / rect | screen-clip | [38,240) | 545; 53; 3; 6 |
| menu-chip / rect | screen-clip | [38,240) | 20; 91; 62; 62 |
| menu-icon / path | screen-clip | [38,240) | 35; 105; 34; 34 |
| app-chip / rect | screen-clip | [38,240) | 100; 92; 204; 62 |
| device-app-name / text | screen-clip | [38,240) | 127; 109; 165; 34 |
| utility-chip / rect | screen-clip | [38,240) | 422; 92; 144; 62 |
| compose-icon / path | screen-clip | [38,240) | 442; 109; 30; 30 |
| utility-dot-one / ellipse | screen-clip | [38,240) | 510; 119; 6; 6 |
| utility-dot-two / ellipse | screen-clip | [38,240) | 524; 119; 6; 6 |
| utility-dot-three / ellipse | screen-clip | [38,240) | 538; 119; 6; 6 |
| sent-request / group | screen-clip | [43,240) | 212; 43:664 smooth; 52:360 smooth; 66:206 smooth; 80:188 hold; 239:188 hold; 350; 134 |
| device-request / text | sent-request | [43,240) | 20; 18; 313; 96 |
| search-status / text | screen-clip | [103,152) | 24; 365; 542; 36 |
| streamed-answer / text | screen-clip | [152,240) | 24; 365; 542; 650 |
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 full 1920x1080 transparent domains for transforms, retaining needed offscreen material until the final canvas clip. For the phone, any material clipped below the domain is never translated back into view in this recipe. Do not reduce each layer domain to its 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 compositing. overflow:hidden plus radius clips descendants to the rounded rectangle; a radius alone only shapes the background of a group and is not an extra child clip. Keep the browser/screen/gallery clips in their local parent coordinate system.
- 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.
- The free prompt shadow is a separate black rectangle with alpha0.07 and CSS blur24px. Fusion Gaussian radius is not assumed equal to CSS blur; compare that one material at full resolution. Other geometry remains sharp and motion blur is disabled.
- 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.
| Active SVG path under project/public | SHA-256 |
|---|---|
| art/prompt-device-context/context-adaptation.svg | 653faf1c4e557eba02151d886db0fd8dc5cb29b626aba3c499c00dc6ee2cb62f |
| art/prompt-device-context/context-default.svg | 55078cd539be2c5c1fbf2e3c8b1afbd770e31ae3b1fb96fe17e637866e1bdc17 |
Checkpoints and regression gates
| Local / source frame | Expected implementation state |
|---|---|
| 0 / 450 | Free composer; complete shared request. |
| 30 / 480 | Send opacity still1; no context background. |
| 37 / 487 | Last free composer; send alpha0.46. |
| 38 / 488 | First device-only frame; no request yet. |
| 42 / 492 | Last blank-device frame. |
| 43 / 493 | Request gate opens at y664. |
| 52 / 502 | Request y360. |
| 66 / 516 | Request y206. |
| 80 / 530 | Request reaches held y188. |
| 102 / 552 | No status yet. |
| 103 / 553 | Status on; answer off. |
| 120 / 570 | Status active; device and message held. |
| 151 / 601 | Last status frame. |
| 152 / 602 | Status off; answer gate on with zero characters. |
| 180 / 630 | 56 answer characters; not a finished response. |
| 220 / 670 | 136 answer characters; device remains fixed. |
| 239 / 689 | 172 answer characters; partial response, exclusive end240. |
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
- An original unbranded phone, different copy and discrete text reveal cannot claim the source's exact message morph, type shaping or soft streamed-answer emphasis. No fresh rendered comparison exists.
- 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.