---
name: chat-layers
description: Turn a concise conversation into a seven-second editorial chat stack using an editable HyperFrames and GSAP timeline, fixed input, and copy-driven balloons.
version: 1.0.3
category: video
delivery: download-only
---
# Chat Layers · 对话堆叠动画

Create a short silent B-roll insert when a conversation explains a decision. This is a parameterized renderer plus an Agent copy-authoring workflow, not an arbitrary prompt-to-film model. Derive topic, title, messages and outcome from each brief. Default output copy is English. 请根据每次输入编写内容，不固定品牌或故事。

Read `references/direction.md` and `references/input.md`. Write 3 concise messages: a specific question/problem, a useful response/change, and a concrete next step/result. Match this causal pattern to the subject rather than repeating example wording. The final message should wrap; allow a stable reading hold. The default duration is 7 seconds; extend to 9–12 seconds via `duration` if copy needs more time.

## Build
Requires Node 20+, FFmpeg, a HyperFrames-supported local Chrome, and HyperFrames 0.8.30. The first npx invocation may need network access. No paid APIs or credentials.

```sh
node scripts/create.mjs --data /absolute/path/input.json --out /absolute/path/project
node scripts/render.mjs --project /absolute/path/project --output /absolute/path/video.mp4
```
A preinstalled CLI can be selected with `--cli /absolute/path/hyperframes.mjs`. Assets and fonts are local; generated project is editable HTML with `window.__timelines['chat-layers']`. HyperFrames performs the encoding. Use a loopback server or HyperFrames preview for review. Ordinary HTML stays paused for deterministic capture; `window.seek(seconds)` is the authoring seek API.

## Required review
Check real rendered 1920×1080 frames at 0, .50, .60, .72, 1.55, 1.65, 1.77, 2.60, 2.70, 2.82 and 6.8 seconds. Ensure earlier balloons, avatar and input never shift. Seek end→start→middle→end to check determinism. After local fonts load, inspect `window.layoutAudit()`; `fits` must be true. Shorten text if it fails. Review the encoded video at normal speed; do not infer motion from a poster. Check all intended palettes. This module is intentionally silent: no music, ChatCut stage or synthetic cues are needed. Confirm the MP4 has no audio stream.

## Material and scope
Use the bundled fictional generated raster avatar or a rights-cleared local raster via `avatar`. No remote URL input. Review portrait crop before delivery. Do not present the illustrative avatar as a real speaker testimonial. See `references/runtime.md` for runtime requirements. Generic distribution excludes per-topic demo images and videos.