Communitygithub.com

heygen-com/hyperframes 場景銜接渲染前置技能

HyperFrames 啟動影片中場景過渡的渲染正確性原則,確保轉場在主時間軸上正確合成。用於組裝主時間軸 / index.html、遇到剪輯處或交叉淡變處出現白色閃爍時(特別是在暗色影片上)、推理轉場不透明度穿透原因、或驗證重疊場景包裝器的渲染端機制。涵蓋不透明舞台背景(#root 背景)的白色閃爍防護、注入器如何重疊包裝器、保持最終影格、乒乓式切換軌道,以及將無 lint 錯誤的模板代碼印刻到主時間軸。不包括各別轉場目錄——請參閱轉場註冊表以取得個別轉場條目。

hyperframes 場景銜接渲染前置技能 是什麼?

此技能定義了 PLV 場景過渡的渲染正確性原則,是確保任何轉場在主時間軸上能正確合成的基礎機制。它獨立於特定轉場類型(如交叉淡變、推滑、縮放穿越等),適用於第二級就緒的轉場:僅對兩個場景的剪輯包裝器(`#el-<sid>`)進行 transform / opacity / filter 操作,無需注入額外 DOM 或場景間協作。技能的核心功能包括:白色閃爍防護,透過設定 `#root` 背景為不透明顏色(如 `#000`)來防止轉場中不透明度小於 1 的視窗露出白色頁面;以及注入器如何透過延長舊場景包裝器的持續時間、提前新場景包裝器的開始時間、並以 0/1 乒乓方式重新分配所有剪輯的 `data-track-index` 來建立重疊視窗,同時將 GSAP 模板印刻到主時間軸。此技能支援 HyperFrames 啟動影片的組裝流程,主要用於主時間軸組裝時、遇到白色閃爍問題、或驗證渲染端機制的場景。它不包含各別轉場的目錄,那些資訊位於轉場註冊表中。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

場景銜接工藝——場景過渡的渲染前置條件

這是 PLV 場景之間過渡的渲染正確性原則: 無論選擇哪個特定轉場,都能正確實作合成所需的 前置條件與主時間軸機制。各別轉場目錄(交叉淡變、推滑、縮放穿越、切曲線……) 位於轉場註冊表——本頁面是作為所有轉場基礎的原則。

此原則所管轄的轉場屬於第二級就緒:僅對兩個場景的剪輯包裝器(#el-<sid>) 進行 pure transform / opacity / filter 操作,無需注入重疊 DOM,無需 場景間協作。重疊家族(交錯區塊、百葉窗、漏光、網格溶解、頁面燃燒) 以及著色器轉場將延至後續階段處理。

舞台背景前置條件(白色閃爍防護)

多個模板會開啟一個視窗,其中兩個包裝器的累加不透明度 < 1( 切曲線的中視窗切割、縮放穿越的 0.15 下限、普通交叉淡變的 功率曲線低谷)。在該視窗期間,包裝器背後的任何內容都會 顯現。如果組裝後的 index.html #root 沒有不透明背景,渲染器會 將該低谷合成在其預設的白色頁面上→每個接縫處出現白色閃爍, 在暗色影片上尤為刺眼(在修復前於兩個 Spotify 執行中觀察到)。 組裝器必須為舞台著色: #root { background: var(--canvas-deep, var(--canvas, #000)) }——assemble-index.mjs 現在會發出此設定; 任何其他使用這些模板的消費者都負有同樣的責任。

注入器如何應用轉場

在場景 i(from)與場景 i+1(to)之間的 break 邊界處, 注入器會:

  1. 將 #el-<from> 包裝器的 data-duration 延長 duration_s(保持其最終 影格——已驗證:core/src/runtime/init.ts:1393-1410 外部插槽分支)。
  2. 將 #el-<to> 包裝器的 data-start 提前 duration_s(建立 重疊視窗)。
  3. 將所有剪輯的 data-track-index 重新分配為 0/1 乒乓模式,使兩個 重疊的包裝器永遠不會共用同一條軌道(相同軌道重疊是非法的—— core/src/lint/rules/composition.ts)。較高的軌道會合成在上方。
  4. 將 gsap_template 印刻到 window.__timelines["main"] 中,時間點為 T = overlap-start。

已通過原型渲染驗證(2026-05-31):主時間軸包裝器的 tween 被 搜尋並渲染(不會與子合成的暫停時間軸發生雙重搜尋—— 執行時間軸獨立驅動它們),延長的包裝器保持場景 i 的 最終影格,而較高軌道的傳入包裝器則覆蓋 + 混合在 傳出包裝器之上。

模板佔位符

注入器會在每個 gsap_template 行中替換這些代號:

代號含義
__OLD__"#el-<from>"——傳出剪輯包裝器選擇器(帶引號)
__NEW__"#el-<to>"——傳入剪輯包裝器選擇器(帶引號)
__T__重疊開始時間(秒,主時鐘)
__DUR__此邊界的 duration_s
__DX__方向類型的水平移動:-1920(LEFT)/ 1920(RIGHT)
__DY__垂直移動:-1080(UP)/ 1080(DOWN)
__ORIGIN_OUT__ / __ORIGIN_IN__squeeze 的 transformOrigin 配對

filter / scaleX / transformOrigin 在主時間軸上是無 lint 錯誤的 (已驗證:core/src/lint/rules/gsap.ts 沒有按屬性白名單,並將其 檢查範圍限定在 data-composition-id 範圍內;x/y/scale/rotation/opacity 白名單僅是場景工作器的提示規則——它不綁定 index.html)。

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

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]

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

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

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

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

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相關技能