---
name: format-relay
description: Show how identical information changes when a browsing layout becomes a timed presentation, using editable HTML, SVG, GSAP and HyperFrames.
version: 1.0.2
---
# Format Relay

Create a 30-second film from one information record. The first treatment is a usable catalogue or register; the second presents the same title, note and three entries in sequence. Choose a real audience change, such as individual reading to a shared room briefing. Avoid deliberately degrading the browsing layout.

This is a parameterized renderer with two browsing modes and a directed sequence. It does not invent arbitrary scene code from a prompt. Author the input JSON, review its claims and text budgets, then run the commands below.

## Input

Supply identity, sourceFile, targetFile, mode (`catalog` or `sheet`), colors (background, text, accent, panel), context (title, heading, uses, destination), two diagnosis lines, two comparison lines, action, and payload. Payload contains title, note and exactly three items, each with heading and detail. Optional language defaults to en. Use fictional brands or material you may distribute. Keep headings short enough for a large screen; the builder rejects fields exceeding 80 characters. For CJK, set language and keep the bundled Noto Sans SC CSS.

The JSON may live outside the package. The generator writes a complete editable project with index.html, motion.js, design.css, brief.json, ledger.json and STORYBOARD.md. Both composition builders receive the identical payload; window.RENDER_INPUTS exposes the records for verification.

## Run

Requires Node.js 22+, Python 3, FFmpeg and a compatible Chromium installation. Install pinned packages through the public npm registry.

```sh
npm ci --ignore-scripts --no-audit --no-fund
node build.mjs /absolute/brief.json /absolute/project
python3 score.py /absolute/project
node node_modules/hyperframes/dist/cli.js lint /absolute/project
node node_modules/hyperframes/dist/cli.js check /absolute/project
node node_modules/hyperframes/dist/cli.js render /absolute/project --fps 30 --quality high --workers 1 --output /absolute/film.mp4
ffprobe -v error -show_streams /absolute/film.mp4
```

The score is an original procedural music bed with synthesized cue tones. Edit score.py and the input to change it; audio-timeline.json records the cue timing and ducking. Every audio element has a stable id. No paid models or external music services are needed.

## Review

Inspect both layouts for identical content and readable text. Verify that the browsing layout remains still after entry while the directed treatment gives each item time. Check fresh time zero, return to zero, backward seeks and one frame on either side of each cut. Decode the actual MP4 and inspect native-resolution frames. Test normal-speed playback and record dropped frames without repeating to erase failures. Treat audio stream presence, mix levels and actual listening as separate checks. Report any pending verification honestly.

Keep generated projects, posters, films and per-client data outside this reusable package. Preserve dependency licenses with any distributed project. This package does not publish or upload outputs.