---
name: hub-relay
description: Animate multiple sources through a central intermediary into destination groups, with deterministic editable HTML/SVG and GSAP motion rendered by HyperFrames.
version: 1.0.2
category: video
delivery: download-only
---

# Hub Relay · 中枢路由动画

Create one complete 6.4-second, 1920×1080, 30 fps silent explanatory shot. Use it for triage, dispatch, mediation, intent routing or resource allocation. This is a parameterized diagram renderer with agent-authored briefs, not a free-form movie generator.

Read [direction](references/direction.md), [schema](references/schema.md) and [provenance](references/runtime.md). Derive all subject labels, identity, outcomes, node counts, glyphs and imagery from the user's brief. Keep a real outgoing relation: inputs → hub → outputs. Avoid suggesting direct one-to-one source/destination correspondence; the shared hub expresses routing through an intermediary.

1. Author `brief.json` using 1–5 inputs, one hub and 1–4 outputs. Use concise English labels by default. For Chinese, the bundled Smiley Sans is selected automatically. Keep labels to 1–4 short words, details to one concise phrase; shorten wrapping text after review.
2. Select `paper-sea`, `ink-copper`, `rose-graphite` or neutral `plum-lilac`. All styles use the same geometry and timeline. `reverseOrder` changes which side resolves first, not physical direction of flow.
3. Supply local raster images only where needed through `--images images.json`; paths resolve beside that file. Supported slots are `hub-image`, `output-1`…`output-4`. PNG/JPEG/WebP bytes are checked and SHA-256 is recorded. Explicit missing/invalid inputs fail. Semantic diagrams may use editable vector glyphs by default. Photos, avatars and product covers require real authorized raster material; never pretend a vector drawing is a photo. No reference demo media is bundled, and no paid generation is automatic.
4. Run:

```sh
node scripts/create.mjs --data /absolute/brief.json --out /absolute/project
# optionally: --images /absolute/images.json --style ink-copper
npx --yes hyperframes@0.8.30 inspect /absolute/project --json
node scripts/render.mjs /absolute/project /absolute/video.mp4
```

Node >=22, npm and FFmpeg are required. HyperFrames is version-pinned and can be fetched from npm on the first render (`npm install` preinstalls it locally). Fonts and GSAP are local. No API keys or other Skills are required.

5. Inspect actual MP4 at native resolution and normal speed. Check 0.16, 0.45, 1.1, 1.8, 2.4, 3.4 and 6.3 seconds. Resolve text overlap, cropped rasters and connector endpoints. Play the complete shot. Confirm with FFprobe that there is no audio stream. This module is intentionally silent; no soundtrack, ChatCut edit, music quality or listening claim is implied.

The output `index.html` is editable; `window.__timelines['hub-relay']` is a paused GSAP timeline. `window.seek(seconds)` clamps to 0…6.4, rejects nonfinite values, and supports reverse seeking. Serve the project over localhost for preview. HyperFrames drives the same timeline when encoding.

Optional presenter: `presenter:true` requires `--media /absolute/presenter.mp4`. Supply at least 6.4 seconds of authorized footage; review its actual duration, crop, corner clearance and full playback. It is muted. Presenter rendering is implemented but was not exercised in the delivered samples; no alpha matte workflow is provided.

中文：这是参数化关系动画工具，由 Agent 编写场景输入。保留中心先出现、第一侧绘线、第二侧展开、稳定阅读四阶段。`reverseOrder` 用于先解释需求侧。新主题须改变信息结构，不能仅改颜色与名字。产品照片和人物素材要使用有权使用的真实栅格文件。示例视频与产品素材放在 Skill 包外。