A map, a push, four badges.

The examples/trail/ directory is a complete 13-second adaptation of CameraPush and MotifMontage. A fresh-context agent built the original map and badge from the guide and project, then rendered them together. This packaged example makes the asset replacement and sequence wiring explicit; it does not change any of the fourteen default compositions.

Run the complete example

From the project root, after npm ci and npx remotion browser ensure:

npm run typecheck
npm test
npx remotion studio examples/trail/index.tsx
npx remotion render examples/trail/index.tsx TrailSequence out/trail-sequence.mp4 --codec=h264 --pixel-format=yuv420p --muted

The example has its own entry point. npm run render is intentionally not used here because that script fixes the default entry to src/index.ts. Expected output: 390 frames, 13 seconds, 1280 × 720, 30 fps, silent H.264 MP4. The root remotion.config.ts supplies the same PNG/BT.709 settings as the primary studies. No private browser path, API key or asset service is required.

Follow the files, in order

The example keeps its assets and composition separate instead of replacing Artwork globally. Choose this scoped pattern when the other study examples must remain unchanged. Replace a shared component only when every use should receive the new artwork. No hidden patch or omitted external design package is needed: every source file is in the download and source viewer.

Geometry and timing decisions

The first shot lasts 180 frames. It establishes the map for 30 frames, travels during frames 30–66, then leaves 18 settled frames before the annotation appears at 84. The complete target holds until frame 180. Landmark (790,355) is in the full 1280 × 720 design frame, so its normalized focus is (790/1280,355/720). At the chosen scale 1.65, the shared camera formula centers that landmark.

The map, badge and target annotation are camera children. The 1280-pixel-wide header and footer masks, title and footer are camera siblings. A first-pass footer leak was caught during the fresh-context frame review and fixed with those full-width masks. Merely placing opaque text boxes behind the captions did not mask the whole traveling map.

The second shot begins at outer frame 180; its child clock starts at zero. It lasts 210 frames and cuts among four badge treatments at local frames 0, 30, 60 and 90. The final treatment remains visible through local frame 209. The declared protected final hold starts at 120. This custom four-treatment example differs deliberately from the base study's three palette variants; its text, cut count and tests agree with its own four treatments.

The two half-open intervals are [0,180) and [180,390). Sequence supplies local frame clocks, and cumulative durations determine the cut at six seconds. Changing a shot duration changes the next offset through trailLayout; there is no second manually maintained outer start time.

Substitute your own permitted asset

Change TrailMap or RouteBadge while retaining the identity needed across the edit. These are actual new SVG assets, not just string/color overrides. For a licensed bitmap, use Img and staticFile with explicit dimensions and objectFit; put the file under public/ and retain its license. Keep that image inside the camera only if it should move with the workspace. The complete font gate in index.tsx is required by the bundled typography and must not be removed just because a preview happened to load quickly.

After replacement, update the target from the real asset's design coordinates, check the mask extents at maximum scale, and inspect the last frame before and first frame after every cut. Play the export at 640 × 360 as well as full size. Keep enough hold for the new content; a longer label does not inherit a valid reading budget from the shorter example.

Host preflight and a failure observed in the test

Check the project separately from its browser host:

node --version
node -e "require('node:os').networkInterfaces(); console.log('Interface enumeration OK')"
npx remotion browser ensure
npm run typecheck
npm test

One restricted executor failed in Node's os.networkInterfaces() with uv_interface_addresses errno 97 before Remotion evaluated any composition. That is distinct from missing Linux Chrome libraries or a missing image/font. Use a supported host where Node can enumerate interfaces and Chrome can run; then rerun the ordinary commands. Do not modify your footage or dependency source to hide a host error. The acceptance experiment separately disclosed an opt-in, process-only loopback fallback; it is not required by the scenes and is not silently installed or shipped as a default project setting.

The fresh test's original unassisted failure and assisted render are reported separately. Successful assisted rendering does not mean that the host restriction vanished. No recording synchronization or final presentation approval is implied by this silent, fictional research example.

Fresh-context asset adaptation

On September 5, 2026, a separate agent received only the downloadable project and its guide, without repository or private product context. It replaced the fixtures in CameraPush and MotifMontage with an original fictional trail map and four distinct route-badge treatments, then rendered a new 13-second sequence. The map is an illustration, not geographic or navigation data.

The trial exposed three gaps: a concrete asset-replacement example; complete two-recipe registration, font loading and local clocks; and diagnosis of a restricted-host failure. The project now includes ASSET_ADAPTATION.md and five complete files under examples/trail/. The example has a separate entry point and does not change the fourteen default compositions.

A fresh extraction of the revised 26-file ZIP passed npm ci, typechecking and all tests. The agent rendered the documented TrailSequence entry without editing any archived source file. Its final export has 390 frames, 13 seconds, 1280 × 720, 30 fps, H.264/yuv420p/BT.709 and no audio; full decoding completed without errors. The original thirteen recipe exports and 50-second sequence retain their previously inspected source and rendered bytes.

Host-qualified rendering result

On the restricted test executor, the documented Node interface-enumeration preflight and unassisted render both failed with os.networkInterfaces() / errno 97 before evaluating a composition. The successful retest used an explicitly disclosed, external process-only loopback-interface adapter. No project or Remotion dependency was patched; the adapter is not included in the download. This is not an unassisted render success on that host. The guide distinguishes that restriction from missing Chrome libraries and directs users to a supported host. The earlier default-project clean render and browser-install checks remain separate evidence.

Rendered comparison

The first adaptation exposed a map layer leaking behind a fixed footer during the push. Full-width frame-space masks fixed it before acceptance. The complete corrected sequence was played at 1×; the final packaged-example render was then compared with that accepted export across all 390 decoded frames and 21 selected boundary, motion and hold frames.

All 210 montage frames match exactly. The camera shot has small raster differences: whole-sequence SSIM is 0.999557 and frame 84's mean absolute channel difference is 0.2824 on a 0–255 scale. Side-by-side and amplified differences show no material timing, geometry, text, mask or continuity regression in the inspected frames. The precise cause of the raster differences was not established. The exports are not pixel-identical. The failed strict-equality check is retained in the local evidence; it is not reported as a pass.

These checks resolve the three guidance gaps. They do not prove that arbitrary replacement assets will fit, that every host can render, or that an actual talking-head recording has been synchronized. The separate-video workflow, real-recording timing and storyboard approval boundary still apply.

Verification data / JSON · Verification / Markdown