Communitygithub.com

heygen-com/hyperframes

字幕覆盖层原则——嵌入式字幕工作流程中的字幕模型(丢弃/轨道/嵌入)以及覆盖层法则:字幕永远是叠加在影片之上的覆盖层,而非需要上移内容以留出的底部保留区域。

hyperframes 是什么?

该技能定义了嵌入式字幕工作流中的**字幕模型**(丢弃/轨道/嵌入三种分类)与**覆盖层法则**(字幕是叠加在完整画面之上的覆盖层,而非必须预留的底部禁区)。它覆盖了spoken-phrase的三种状态:丢弃(填充词),轨道(默认的逐字文本,位于前景),以及嵌入(稀缺的、提升后的高潮词,位于主体后方)。同时,该技能强制要求在合成时以画面真实垂直中心为基准,无需为了“留出字幕空间”而上移内容或保留死区。此技能应用于HeyGen的产品发布视频场景智能体和嵌入式字幕技能之上,适用于需要添加字幕的发言人视频、启动视频,以及需要在true frame center下居中构图的场景。它有助于避免常见错误:将所有词语过度嵌入,并确保字幕始终是视觉上可读的叠加层,而非布局中的物理预留区。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/captions-overlay

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

字幕覆盖层原则

覆盖层原则——补充上游 embedded-captions 技能。在其之上应用;不要期望它已合并到上游技能中。

这里结合了两个概念。首先,字幕模型——每个口语短语分为 drop(丢弃),rail(轨道),或 embed(嵌入),嵌入是稀缺的、挣得的高潮点,而非默认值。其次,覆盖层法则——字幕行作为覆盖层叠加在影片之上;它不是预留区域,因此你永远不需要上移内容或留下死区来“腾出空间”放置它。两者相互强化:因为字幕作为覆盖层呈现(在前景的逐字轨道,偶尔在主体后方的嵌入),构图保持完整画面,并以真实垂直中心为基准。

字幕模型——丢弃 / 轨道 / 嵌入

每个口语短语属于以下三类之一(直接引自 embedded-captions):

含义显示方式
drop填充词——嗯/呃、口吃、自我修正不显示
rail默认状态——普通口语内容(逐字)整洁的底部三分之一字幕,在前景,可读。重点词可以内联 emphasis 高亮(强调色/活动词弹出)——它仍保留在轨道上。
embed提升后的高潮——头条节拍一个大的词在主体后方合成(遮罩遮挡),设计有进场+退场效果

轨道承载大部分文本;嵌入是稀缺的、挣得的高潮点——每个节拍 ≤1 个,不能相邻或同时可见,间隔 ≥ 一个节拍。短片段 → 通常一个嵌入;长解释 → 大约每部分一个。嵌入每个词是常见错误。

这是标准模式形状(轨道 = 逐字底部三分之一字幕;嵌入 = 在主体后方合成的合成高潮)。电影模式移除轨道,所有内容变为嵌入风格——仅用于纯电影请求,切勿用于解释/画外音等必须清晰阅读文字的场景。

轨道优先、嵌入稀缺(负载规则)

引自 embedded-captions 的不可协商点:

  • 发言人/解释类内容轨道优先。 不要嵌入整个转录文本——大部分文本属于轨道;仅嵌入高潮点。嵌入所有内容是默认错误。
  • 嵌入稀缺且间隔。 每个句子/节拍 ≤1 个嵌入,不能两个相邻或同时可见,间隔 ≥ 一个节拍,最多一个 apex。高潮 = 每个节拍的高潮点,不是“整个片段的唯一亮点”。

覆盖层法则——字幕不是保留区域

在生成的启动构图中,当启用字幕时,合成器最终会生成一个小的、最小的逐字字幕行,作为覆盖层叠加在整个影片之上(单行文本,底部居中,约占画布高度的底部 5-8%)。它是覆盖层,不是保留区域(直接引自产品发布视频场景智能体的约束 #13):

  • 以真实垂直中心为基准——y = H / 2(横屏 540,竖屏 960)。不要为了“腾出空间”放置字幕而上移内容;以 0.42 × H 为中心并留下底部死区的构图是问题,不是解决方案。
  • 内容可以延伸到画布底部。全出血主体、轨道和背景均允许。
  • 一条软性礼节规则: 避免将_关键的小字可读文本_(如 URL 行、法律声明行、副字幕)正好停在字幕行所在的底部 ~80px 中心区域——覆盖层会与之冲突。字幕下方的大型图像/卡片/环境内容没问题;字幕皮肤设计为覆盖内容可读。
  • 没有机械的保留区门控(旧的 captions.mjs keepout 检查已淘汰)。最终合成快照 QA 通过视觉判断字幕-内容可读性。

当字幕禁用时: 相同的定位自由度——覆盖层 simply 不存在。

为什么这两个规则是一个原则

该模型指出轨道位于前景,嵌入是在主体后方合成的罕见词语——两者都是添加到未经修改的原始素材上的层。覆盖层法则指出字幕行是叠加在整个影片之上的层,不是从布局中挖出的区域。因此,在字幕处理流程和启动视频流程中,字幕是你添加的覆盖层,而不是你预留的区域:

  • 保持完整画幅;以真实中心为基准;让内容延伸到边缘。
  • 让轨道(或小覆盖层字幕行)承载逐字文本。
  • 仅在真正的高潮点将词语提升为嵌入——稀缺、有间隔、绝不同时出现。
  • 什么都不预留;通过视觉而非保留区门控来判断字幕-内容可读性。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

相关技能