# Worked example: new assets, two recipes, one sequence

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`:

```bash
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

| File | Complete responsibility |
| --- | --- |
| `examples/trail/assets.tsx` | Draws the fictional trail map, landmark coordinates and four materially different ridge-badge treatments as original inline SVG. |
| `examples/trail/model.ts` | Defines shared content, the camera target and each recipe's local frame boundaries; derives cumulative offsets and shot durations. |
| `examples/trail/Sequence.tsx` | Applies the existing camera and stage primitives to the new graphics, adds frame-space masks, replaces badge variants and sequences the two shots. |
| `examples/trail/index.tsx` | Loads both bundled fonts through a render gate, validates the phase props, registers `TrailSequence` and derives its total duration from the layout. |
| `examples/trail/test.mjs` | Checks the exact seam, total duration, target coordinates and protected final hold. Included in `npm test`. |

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:

```bash
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.