Back to Details

vox-explainer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Plain-Sight Explainer (Gateway Workflow)

日常事物解释视频（网关工作流）

Build against the HyperFrames composition contract (clips, 
data-*
timing, and the 
#root
schema). Install the upstream HyperFrames skills with 
npx skills add heygen-com/hyperframes
, or scaffold with 
npx hyperframes init
, and read the generated project documentation first.
Make a 60–90s explainer about something the viewer sees daily but has never looked at. The film manufactures recognition first, then pays it off with a causal history. Grammar measured from Vox's Cooper Black film; motion from the same frame-by-frame calibration process.
This is a Vox-inspired design vocabulary, not an affiliation or endorsement. Do not use Vox logos or imply that Vox produced the result.
需遵循HyperFrames合成协议（片段、
data-*
时序以及
#root
schema）。通过
npx skills add heygen-com/hyperframes
安装上游HyperFrames技能，或使用
npx hyperframes init
搭建项目框架，并先阅读生成的项目文档。
制作一段60-90秒的解释视频，主题聚焦于观众日常所见却从未留意的事物。视频需先引导观众建立认知，再通过因果历史展开内容。语法参考Vox的Cooper Black风格视频；动效采用相同的逐帧校准流程。
本设计风格受Vox启发，并非与Vox存在关联或获得其授权。请勿使用Vox标识，或暗示视频由Vox制作。

Trust boundary and requirements

信任边界与要求

  • Require Node.js 22 or newer for the bundled seam scripts. When they start a preview server, 
    npx
    may download the exact HyperFrames version pinned in 
    scripts/seam-gate.mjs
    from the npm registry.
  • Read only the files and URLs the user supplies. Source mode may fetch public citations and public-domain or openly licensed assets from declared sources. Never send private documents, credentials, or private URLs to another service.
  • Ask before using any TTS or transcription API. State the provider, data sent, required credential, and possible cost before the call.
  • Write project source, downloaded assets, audio, contact sheets, and renders only inside the user's chosen project directory. Do not publish or upload the result automatically.
  • The seam verifier starts a local preview server and an isolated Chrome profile. Its 
    --url
    and 
    --comp-url
    inputs accept localhost only. A preview may still load remote assets declared by the user's composition.
  • 捆绑的seam脚本要求Node.js 22或更高版本。启动预览服务器时，
    npx
    可能会从npm注册表下载
    scripts/seam-gate.mjs
    中固定的特定HyperFrames版本。
  • 仅读取用户提供的文件与URL。源模式可从声明的来源获取公开引用内容，以及公有领域或开源许可的资源。切勿将私有文档、凭证或私有URL发送至其他服务。
  • 使用任何TTS（文本转语音）或转录API前需征得用户同意。调用前需说明服务提供商、发送的数据、所需凭证及可能产生的费用。
  • 仅在用户选定的项目目录内写入项目源码、下载的资源、音频、样稿及渲染文件。不得自动发布或上传结果。
  • seam验证器会启动本地预览服务器和独立Chrome配置文件。其
    --url
    和
    --comp-url
    输入仅接受localhost地址。预览仍可加载用户合成内容中声明的远程资源。

Reference map

参考文档映射

Read only the references needed for the current stage:
  • Topic selection: plain-sight-topics.md
  • Script and captions: plain-sight-script.md
  • Layout and assets: vox-collage-layout.md
  • Text and highlights: vox-text-overlays.md
  • Collage motion: vox-collage-motion.md
  • Motion law and seam gate: motion-continuity.md
  • Transition catalog and code: velocity-matched-transitions.md and velocity-matched-transitions-gsap.md
  • Multi-stage element motion: animation-overlap.md
  • Render-safe seam mechanics: render-safe-seams.md
  • Seam ledger and script usage: seam-gate.md
仅读取当前阶段所需的参考文档：
  • 主题选择：plain-sight-topics.md
  • 脚本与字幕：plain-sight-script.md
  • 布局与资源：vox-collage-layout.md
  • 文本与高亮：vox-text-overlays.md
  • 拼贴动效：vox-collage-motion.md
  • 动效规则与seam校验：motion-continuity.md
  • 转场目录与代码：velocity-matched-transitions.md 和 velocity-matched-transitions-gsap.md
  • 多阶段元素动效：animation-overlap.md
  • 渲染安全seam机制：render-safe-seams.md
  • Seam记录与脚本使用：seam-gate.md

Pipeline (run in order; each gate blocks the next)

工作流（按顺序执行；每个校验环节会阻断后续步骤）

  1. Entry router — two modes, one gate. Read plain-sight-topics.md.
    • Topic mode (the user names a subject, or asks for ideas): the four-part filter governs IDEATION and tie-breaking only. If a user-chosen topic fails it, name which part fails and what the film loses, offer passing alternatives — then build the film they asked for if they confirm. The filter never refuses a chosen subject.
    • Source mode (the user supplies material — documents: a memo, strategy doc, report, paper, deck, transcript, PDF, or a folder of them; or links: an article, docs page, repo, announcement): the filter does not apply at all. After confirming the allowed network scope, read every supplied file, fetch every supplied URL, and follow at most one public citation hop when needed for a claim. When a citation is dead or truncated (common in exported PDFs), do not guess the source — verify the claim independently on the open web before it becomes a receipt, or cut it. Then run the storyline mine. Person+date and PD-archive requirements are waived; the mechanism beat is not. The audience is the source's INTENDED audience, not "any viewer" — the FAMILIAR beat calibrates to what they see daily. The VO never mentions the source — see plain-sight-script.md.
    The storyline mine (source mode). The source is ore, not an outline — never film it section by section. Extract five things:
    • The on-ramp — the recognition the intended audience already has, in the source's own world (a habit, a number they see weekly, a thing on their screen right now).
    • The tension — the sharpest claim in the source that contradicts what that audience assumes.
    • The turn — the DIG's landing point: a person+date when the source has one, otherwise the decision, number, or moment the story pivots on.
    • The mechanism — the one claim the viewer can verify on screen unaided. If the source only asserts, BUILD the demonstration (two-panel compare, dots redistributed two ways, before/after at equal scale).
    • The receipts — real artifacts from the source plus the open web (charts, screenshots, filings, on-screen attributed quotes). Real-assets rule still holds.
    Map those onto the structural spine; beats the source can't fill honestly get cut, not faked. Multiple sources — or ONE source carrying several candidate storylines — mine each, then pick ONE spine: a film gets one storyline; everything else demotes to receipts. Deliver the beat map for approval before drafting script.
  2. Script — read plain-sight-script.md. Draft VO + beat map. GATE: every line passes the deletion test; opener/closer rules hold. If ghost-writing for a specific person, their voice skill outranks this one.
  3. Design pass — read vox-collage-layout.md. Build a contact sheet (one frame per beat, 960×540 tiles, HTML → headless-Chrome screenshot) from REAL assets. Deliver the sheet BEFORE building any comp. Iterate here — it is 10x cheaper than comp notes.
    LOOK GATE — check before delivering the sheet. Use this collage grammar without implying Vox affiliation. Verify, don't assume:
    • Palette is the measured set — ink #1a1a1a, yellow #FFE619, process blue #66CFFF, specimen blue #58BCEC, greys #F2F2F2 / #8d9399, ground #fbfaf8. Treat bright blues as fills and accents. Use #3E87A8 or darker for small text on white, and pass the renderer's contrast checks.
    • Headlines are Archivo Black.
    • Every frame is a named recipe from the layout reference (evidence stack, zoom-isolation, two-panel compare, specimen grid, lower-third, newsprint layering, circle reveal). Label each frame with its recipe on the sheet.
    • The yellow circle appears as the recurring visual carrier.
    The trap: when the source document belongs to a company with its own design system — or the project folder already holds a brand capture, 
    frame.md
    , or an earlier build in that brand — the pull is to inherit those tokens. Do not. 
    brand-faithful
    is a DIFFERENT workflow for product-launch films. A brand skin here is an explicit user decision, never a default. Ask; don't substitute.
  4. VO — record or TTS. The TTS input file is a PRONUNCIATION script: numbers written out ("eighteen thirty-nine"), names spelled as spoken. Transcribe the result for word timestamps — audio is the clock; every cut, pop, and highlight keys to a word time. A replacement VO = a full retime. Captions transcribe the PERFORMED read verbatim, not the script doc. TTS playbook: 
    npx hyperframes tts
    first; if its bundled speech stack fails (old Python, espeakng-loader abort), install espeak-ng and call the Kokoro model directly with the CLI's cached model files. Use a TTS API only after the user approves its provider, data sharing, credentials, and cost. Then transcribe whatever produced the audio; the timestamps are the clock regardless of the engine.
  5. Build — one HyperFrames comp, one clip group per beat, quiet caption rail (suppress cues wherever promoted on-screen text carries the words). Read vox-text-overlays.md and vox-collage-motion.md before writing timelines.
  6. QC gates (all numeric, all mandatory)
    • lint/check: 0 errors.
    • Dead-time sweep: MAD every consecutive frame pair of the RENDER; any still run >3s is a planning bug — add a staged reveal, not wobble.
    • Seam measurement: for any zoom-isolation cut, render the last pre-swap and first post-swap frames, detect the carrier in both, verify centers within ~30px and sizes within ~10%. Fix by measuring, not eyeballing.
    • Event-density: per beat, largest gap between authored timeline events ≤3.0s (the motion reference explains why the MAD sweep cannot see creep-only holds).
    • Composition integrity: audit the final keyframe sheet against the layout reference's hard rules, item by item, logged.
    • Keyframe sheet: screenshot one frame per beat; look at it.
  1. 入口路由——两种模式，一个校验环节。阅读plain-sight-topics.md。
    • 主题模式（用户指定主题或寻求创意）：四部分筛选规则仅用于构思和抉择。若用户选定的主题不符合规则，需说明不符合的部分及视频会缺失的内容，提供符合要求的替代选项——若用户确认，仍按其要求制作视频。筛选规则不会拒绝用户选定的主题。
    • 源模式（用户提供素材——文档：备忘录、战略文档、报告、论文、演示文稿、转录稿、PDF或文件夹；或链接：文章、文档页、代码库、公告）：筛选规则完全不适用。确认允许的网络范围后，读取所有提供的文件，获取所有提供的URL，必要时最多跳转一次公开引用链接以验证某项主张。若引用链接失效或内容截断（导出PDF中常见），请勿猜测来源——需在主张纳入视频前通过公开网络独立验证，或删除该主张。随后执行故事线挖掘。人物+日期及PD档案要求可豁免，但机制环节不可省略。受众为素材的目标受众，而非“所有观众”——熟悉环节需校准为他们日常所见的内容。旁白不得提及素材来源——详见plain-sight-script.md。
    故事线挖掘（源模式）。素材是待挖掘的“矿石”，而非大纲——切勿按章节逐段制作视频。需提取五项内容：
    • 切入点——目标受众已有的认知，以素材语境呈现（一种习惯、他们每周看到的数字、当前屏幕上的事物）。
    • 冲突点——素材中与受众假设最相悖的尖锐主张。
    • 转折点——深度挖掘的落脚点：若素材中有明确的人物+日期，则以此为准；否则以故事转向的决策、数字或时刻为准。
    • 验证机制——观众无需辅助即可在屏幕上验证的一项主张。若素材仅作断言，则需构建演示内容（双面板对比、两种方式重新分布的点、等比例前后对比）。
    • 佐证素材——来自素材及公开网络的真实 artifacts（图表、截图、文件、屏幕上标注来源的引语）。仍需遵循“真实资源优先”规则。
    将上述内容映射至结构框架；素材无法如实填充的环节需删除，而非伪造。若有多个素材——或单个素材包含多个候选故事线——需分别挖掘，然后选择一个框架：一个视频仅对应一条故事线；其余内容降为佐证素材。起草脚本前需提交环节映射图供用户审批。
  2. 脚本创作——阅读plain-sight-script.md。 撰写旁白+环节映射图。校验环节：每一行内容都需通过删除测试；开场/结尾规则需遵守。若为特定人物代笔，其语言风格优先级高于本规则。
  3. 设计环节——阅读vox-collage-layout.md。使用真实资源制作样稿（每个环节对应一帧，960×540尺寸，通过HTML→无头Chrome截图生成）。制作合成内容前需提交样稿。在此阶段迭代修改——成本仅为合成内容修改的1/10。
    视觉风格校验——提交样稿前需检查。使用此拼贴语法，但不得暗示与Vox存在关联。需验证而非假设：
    • 调色板为指定色系：墨色#1a1a1a、黄色#FFE619、印刷蓝#66CFFF、样本蓝#58BCEC、灰色#F2F2F2 / #8d9399、底色#fbfaf8。亮蓝色用作填充和强调色。白色背景上的小字需使用#3E87A8或更深颜色，并通过渲染器的对比度检查。
    • 标题使用Archivo Black字体。
    • 每一帧都采用布局参考文档中的命名模板（证据堆叠、缩放隔离、双面板对比、样本网格、下部标题、新闻纸分层、圆形揭示）。在样稿上标注每帧使用的模板。
    • 黄色圆形作为重复出现的视觉载体。
    误区：若素材文档所属公司有自己的设计系统——或项目文件夹中已有品牌捕获文件
    frame.md
    ，或该品牌的早期版本——容易倾向于继承这些设计标记。请勿这样做。“忠实于品牌”是产品发布视频的另一种工作流。在此处使用品牌皮肤需用户明确决策，而非默认行为。需询问用户，不得擅自替换。
  4. 配音——录制或使用TTS生成。TTS输入文件为发音脚本：数字需拼写完整（如“eighteen thirty-nine”），名称按发音拼写。转录结果以获取单词时间戳——音频为基准时钟；每一次剪辑、弹出效果及高亮都与单词时间戳关联。更换配音需重新调整全部时序。字幕需如实转录实际录制的内容，而非脚本文档。 TTS操作指南：先使用
    npx hyperframes tts
    ；若其捆绑的语音栈失败（Python版本过旧、espeakng-loader终止），则安装espeak-ng并通过CLI的缓存模型文件直接调用Kokoro模型。仅在用户同意服务提供商、数据共享、凭证及费用后，方可使用TTS API。随后转录生成的音频；无论使用何种引擎，时间戳均为基准时钟。
  5. 视频制作——创建一个HyperFrames合成内容，每个环节对应一个片段组，字幕栏保持简洁（若屏幕上的突出文字已包含对应内容，则隐藏字幕提示）。制作时间线前需阅读vox-text-overlays.md和vox-collage-motion.md。
  6. 质量校验环节（全部量化，均为必填项）
    • 代码检查：0错误。
    • 静止帧扫描：渲染视频中每连续两帧的平均绝对偏差（MAD）；任何超过3秒的静止片段均为规划失误——需添加分阶段揭示效果，而非晃动画面。
    • Seam测量：对于任何缩放隔离剪辑，渲染切换前的最后一帧和切换后的第一帧，检测两帧中的载体，验证中心偏差≤约30px，尺寸偏差≤约10%。需通过测量修正，而非目测。
    • 事件密度：每个环节中，已编辑时间线事件的最大间隔≤3.0秒（动效参考文档解释了为何MAD扫描无法检测缓慢移动的静止画面）。
    • 合成完整性：对照布局参考文档的硬性规则，逐项审核最终关键帧表并记录。
    • 关键帧表：每个环节截取一帧截图；人工检查。

Technique floor (anti-slideshow gate — declare at beat-map time)

技术底线（反幻灯片风格校验——环节映射阶段需声明）

Passing the defect gates does not make a film. A build that resolves every beat to cards, side-by-sides, and lower-third text passes lint, seams, and dead-time and still reads as a slideshow — the collage idiom lives in techniques a cautious agent will never volunteer. So techniques are DECLARED in the beat map, not improvised at build time: every beat names its layout recipe AND its motion treatment from the motion reference's catalog, and the film's distribution must clear this floor:
  • ≥1 zoom-isolation swap — the camera pushes INTO a photograph, isolates the carrier, and cuts through it (numerically aligned per the motion reference).
  • ≥1 inverse zoom-through arrival, spent on a payoff beat.
  • ≥2 drive-pasts or scale traversals that exit at/through frame-fill.
  • ≥1 background-dropped cutout (subject lifted off its plate) doing motion a flat card cannot — docking into a grid, riding a drive-past, anchoring an iso swap.
  • ≥1 newsprint layering moment; the circle reveal (the brand carrier).
  • CAPS: static-card / side-by-side layouts ≤ one third of beats; no two consecutive beats share the same layout recipe or the same treatment.
  • When a photograph with interior depth is on frame, the camera enters it rather than drifting over the card row — flat drift over cards is the slideshow tell. Entering is governed by the zoom-in contract below.
The zoom-in contract. Pushing into a photograph promises the viewer the payoff is INSIDE the image. Exactly two legal continuations:
  1. Background dropout — the subject lifts off its plate and becomes the carrier (iso swap, dock, drive-past);
  2. Full-frame hold + callouts — the image holds at/near full-bleed while annotations draw ON it (labels, arrows, attention windows). A push into a photo that then cuts to an unrelated composition is banned — that is a transition wearing a technique's clothes. If neither payoff serves the beat, do not enter the photo.
Contract boundaries (what counts as "entering"): a sustained push whose origin sits inside the image and that reaches near-full-bleed. Seam-scale zooms (~0.2s whole-scene mechanics) and sub-10% camera creeps are different categories and are not entries. An element driving AT the camera is the mirror of an entry and obeys the same contract (it must already be a dropped-out carrier, never a flat card flying at the lens). A traversal may exit through frame-fill only into the same image or into the beat its own motion caused — never into an unrelated composition.
QC: the beat map logs the treatment distribution table; the final keyframe audit verifies each declared treatment actually appears on screen (the seam verifier already measures the zoom-isolation numerically). A film that cannot clear the floor honestly is a planning bug: re-plan the beats, do not pad with decoration. When the floor's minimums and the zoom-in contract conflict, the contract wins and the technique is cut — a missing technique is a smaller defect than an unmotivated one.
通过缺陷校验并不代表视频合格。若每个环节仅使用卡片、并排布局和下部标题文本，虽能通过代码检查、seam校验和静止帧扫描，但仍会显得像幻灯片——拼贴风格的精髓在于谨慎的工具不会主动使用的技术。因此，技术需在环节映射阶段明确声明，而非在制作阶段即兴发挥：每个环节需从布局参考文档中指定布局模板，并从动效参考文档的目录中指定动效处理方式，且视频的呈现必须达到以下底线：
  • ≥1次缩放隔离切换——镜头推入照片，隔离载体，然后穿过载体切换画面（从动效参考文档的数值对齐规则）。
  • ≥1次反向缩放进入效果，用于收尾环节。
  • ≥2次平移或缩放遍历，最终填满/穿过画面。
  • ≥1次背景移除的抠图元素（主体从背景中分离），实现平面卡片无法完成的动效——嵌入网格、跟随平移、锚定缩放隔离切换。
  • ≥1次新闻纸分层效果；圆形揭示（品牌载体）。
  • 限制：静态卡片/并排布局占比≤环节总数的1/3；不得有连续两个环节使用相同的布局模板或动效处理方式。
  • 当包含内部深度的照片出现在画面中时，镜头需进入照片内部，而非在卡片行上漂移——卡片上的平缓漂移是幻灯片的典型特征。进入操作需遵循以下推入照片协议。
推入照片协议。镜头推入照片意味着向观众承诺回报在画面内部。仅有两种合法的后续操作：
  1. 背景移除——主体从背景中分离并成为载体（缩放隔离切换、嵌入、平移）；
  2. 全屏停留+标注——画面接近全屏时停留，同时在图像上添加注释（标签、箭头、注意力窗口）。 禁止推入照片后切换至无关画面——这是披着技术外衣的无效转场。若两种回报方式均不适用于当前环节，则请勿推入照片。
协议边界（何为“进入”）：镜头持续推入，起点在图像内部，最终接近全屏。Seam级缩放（约0.2秒全场景动效）和小于10%的镜头缓慢移动属于不同类别，不属于进入操作。元素向镜头移动是进入操作的镜像，需遵循相同协议（元素必须是已分离的载体，而非飞向镜头的平面卡片）。平移遍历仅能切换至同一图像或自身动效引发的环节——不得切换至无关画面。
质量校验：环节映射图需记录动效处理分布表；最终关键帧审核需验证每个声明的动效处理实际出现在画面中（seam验证器已通过数值方式测量缩放隔离效果）。若无法如实达到技术底线，则属于规划失误：需重新规划环节，而非添加装饰性内容。当底线要求与推入照片协议冲突时，协议优先，相关技术需删除——缺失技术比无动机的技术缺陷更小。

Structural spine (weights of a 60s cut)

结构框架（60秒视频的权重分配）

This weighted spine is authoritative. THE FAMILY (see the script reference) is the back half of FAMILIAR — more instances of the recognition, not a new beat. THE ARTIFACT BEAT sits between STORY and MECHANISM in the script reference's spine too; when the two references seem to disagree, this list wins. In source mode, spine beats the source cannot fill honestly (SECOND WIND, the person in DIG) are CUT and their weight redistributed — the cut-don't-fake rule outranks the spine's completeness.
FAMILIAR 15% → DIG (person + date named) 5% → STORY 15% → THE ARTIFACT BEAT 10% → MECHANISM the viewer verifies on screen 20% → SECOND WIND (a technology removes a constraint) 15% → THESIS in the yellow circle 10% → CLOSE mirrors the open 10%.
此加权框架具有权威性。“同类事物”（详见脚本参考文档）是“熟悉”环节的后半部分——更多认知实例，而非新环节。“Artifact环节”在脚本参考文档的框架中位于“故事”与“机制”之间；当两份参考文档看似存在分歧时，以此列表为准。在源模式下，素材无法如实填充的框架环节（“二次突破”、深度挖掘中的人物）需删除，其权重重新分配——“删除而非伪造”规则优先于框架的完整性。
熟悉环节15% → 深度挖掘（明确人物+日期）5% → 故事环节15% → Artifact环节10% → 观众可在屏幕上验证的机制环节20% → 二次突破（技术消除限制）15% → 黄色圆形中的核心观点10% → 结尾呼应开场10%。

Non-negotiables inherited from the motion layer

从动效层继承的不可协商规则

  • motion-continuity.md governs seams. Make hard-looking swaps land inside a verified continuation seam; a literal static-to-static cut is not exempt from the seam gate.
  • Real assets only — PD archives (Wikimedia Commons API, LOC), flagged recreations when a scan is missing. Recreating artifacts with shapes reads as slop.
  • Highlights always animate on per the text-overlay reference.
  • Elements step at 12fps over smooth eases; camera moves stay smooth per the collage-motion reference.
  • motion-continuity.md 管控seam效果。需确保硬朗的切换画面落在经过验证的连贯seam内；即使是静态到静态的直接剪辑，也不能豁免seam校验。
  • 仅使用真实资源——公有领域档案（Wikimedia Commons API、LOC），若缺少扫描件则使用标注的复刻内容。用形状复刻artifacts会显得粗糙。
  • 高亮效果需始终遵循文本叠加参考文档的动画规则。
  • 元素在平滑缓动效果上以12fps步进；镜头移动需遵循拼贴动效参考文档保持平滑。