Communitygithub.com

heygen-com/hyperframes — 字幕覆蓋原則

為「嵌入式字幕」工作流程定義的覆蓋原則——一種字幕模型(刪除/軌道/嵌入),以及一項規則:字幕是覆疊在影片上的覆蓋層,而非預留的底部區域,也不需將內容上移避開。

hyperframes — 字幕覆蓋原則 是什麼?

這個技能定義了兩個核心概念,並將其結合成一套統一的原則。首先是**字幕模型**:每個口語短語歸類為「drop」(刪除)、「rail」(軌道)或「embed」(嵌入)。其中「軌道」是承載逐字內容的預設方式,顯示為前景的乾淨低位文字;而「嵌入」是罕見且需爭取的巔峰效果——只用於真正的重點節拍,將一個大字覆蓋在**主體後方**(搭配遮罩遮蔽效果),且有精心的進出動畫。**濫用嵌入(每個單詞都嵌入)是最常見的錯誤。** 其次是**覆蓋法則**:字幕行是以覆蓋層形式疊加在完整影片之上,水平居中,垂直位於畫布底部約 5–8%,並非預留的免碰區域。因此**絕對不要為了「騰出空間」而將內容上移**;構圖應以真實垂直中心(y = H/2)為準,內容可延伸至畫布底部。此技能支援 Claude Code、Cursor、Codex 等 AI 代理平台,以及任何基於 Markdown 的代理指令系統。這套原則適用於「嵌入式字幕」技能之上,主要用於處理頭像說話影片、產品發布影片或任何包含字幕的影片構圖。它明確指出「字幕保留區檢查(keep-out gate)」已被淘汰,應以視覺判斷字幕與內容的可讀性。

相容平台~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(嵌入),其中嵌入是罕見且需爭取的巔峰,而非預設。其次,覆蓋法則 — 字幕行是以覆蓋層形式疊加在影片 ON TOP 作為覆蓋層;它不是預留區域,因此你永遠不需要將內容上移或留下死區來「騰出空間」。兩者相互強化:因為字幕以覆蓋層形式呈現(逐字軌道在前方,偶爾的嵌入在主體後方),構圖得以保持完整畫面,並以真實垂直中心為準。

字幕模型 — drop / rail / embed

每個口語短語歸屬於以下三類之一(摘錄自 embedded-captions):

內容顯示方式
drop填充詞 — 呃/嗯、結巴、自我修正不顯示
rail預設 — 一般口語內容(逐字)乾淨低位文字字幕,在前景,易於閱讀。重點字詞可在行內加上 emphasis 凸顯(強調色/動態字詞彈出)——它仍留在軌道上。
embed被提升的巔峰 — headline 節拍一個大字覆蓋在主體後方(遮罩遮蔽效果),精心設計的進場 + 退場動畫

軌道承載大部分文字;嵌入是罕見、需爭取的巔峰 — 每個節拍 ≤1 個嵌入,絕不兩個相鄰/同時可見,間隔 ≥ 一個節拍。短影片 → 通常一個嵌入;長解說 → 大約每個段落一個。將每個單詞都嵌入是常見的錯誤。

這是標準模式形狀(軌道 = 逐字低位文字;嵌入 = 覆蓋在主體後方的 climax)。電影模式會移除軌道,讓所有內容都以嵌入風格呈現——僅在純電影式要求時使用,絕對不用於解說 / 配音,因為那些場合文字必須清晰可讀。

軌道優先,嵌入稀缺(承載規則)

摘錄自 embedded-captions 的非協商條款:

  • 頭像說話 / 解說影片:軌道優先。 不要將整個逐字稿都嵌入——大部分文字應以軌道呈現;僅對巔峰做嵌入。將所有內容都嵌入是預設錯誤。
  • 嵌入稀缺且有間隔。 每個句子/節拍 ≤1 個嵌入,絕不兩個相鄰或同時可見,間隔 ≥ 一個節拍,最多一個 apex。climax = 每個節拍的巔峰,不是「整個影片的唯一高潮。」

覆蓋法則 — 字幕不是預留區域

在生成的發布影片構圖中,當啟用字幕時,finalize 會合成一個小型、精簡的逐詞字幕行,作為覆蓋層疊在 整部影片上(單行文字,底部居中,約佔畫布高度的底部 ~5-8%)。它是覆蓋層,不是預留區域(摘錄自 product-launch-video 場景代理的約束 #13):

  • 以真實垂直中心為準構圖 — y = H / 2(橫向 540,直向 960)。不要為了「騰出空間」給字幕而將內容上移;將構圖中心設在 0.42 × H 並留下底部死區是錯誤,不是修正。
  • 內容可以延伸至畫布底部。全出血的主體、軌道和背景都歡迎。
  • 一條軟性禮貌規則: 避免將_關鍵小型可讀文字_(例如 URL 行、法律聲明行、副標題)恰好放在字幕行所在的底部 ~80px 中心區域——覆蓋層會與之衝突。大尺寸圖片 / 卡片 / 環境背景內容放在字幕下方是沒問題的;字幕皮膚設計成可在內容上清晰閱讀。
  • 沒有機器保留區關卡(舊的 captions.mjs keepout 檢查已淘汰)。Finalize snapshot QA 以視覺方式判斷字幕與內容的可讀性。

當字幕停用時: 相同的定位自由——覆蓋層只是不存在。

為什麼這兩個規則是一個統一的原則

模型規定軌道位於前景,而嵌入是放在主體後方的罕見單詞——兩者都是附加在未經修改的原始影片上的圖層。覆蓋法則規定字幕行是疊在整部影片上的圖層,不是從佈局中劃出的區域。因此,無論在字幕處理流程還是發布影片流程中,字幕都是你添加的覆蓋層,而非你預留的區域:

  • 保持完整畫面;以真實中心為準;讓內容延伸至邊緣。
  • 讓軌道(或小型覆蓋字幕行)承載逐字文字。
  • 僅在真正的巔峰時將一個單詞提升為嵌入——稀少、有間隔、絕不一次兩個。
  • 不預留任何區域;以視覺方式判斷字幕與內容的可讀性,而非依靠保留區閘門。

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]

相關技能