Communitygithub.com

heygen-com/hyperframes

场景过渡渲染正确性规范,确保HyperFrames发布视频中场景切换无缝合成,防止白色闪光和透明度穿透问题。

hyperframes 是什么?

此技能(seam-craft)定义了PLV场景间过渡的渲染正确性规范,适用于在组装主时间线时加载,或在遇到过渡处出现白色闪光、透明度穿透等问题时使用。它描述了如何通过舞台背景防护(为#root设置不透明背景)防止白色闪光,以及注入器如何通过延长离开场景的包装器、提前进入场景的包装器、使用ping-pong轨道避免重叠冲突,并将GSAP模板注入主时间线来应用过渡。支持Tier-B就绪的变换/透明度/滤镜过渡,不包含具体过渡类型的目录(如交叉淡入淡出、滑动等),后者位于过渡注册表中。此技能适用于Claude Code等AI代理,帮助开发者理解和解决场景合成中的渲染问题。

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

在你喜欢的 AI 中提问

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

文档

Seam Craft — 场景过渡的渲染前提条件

这是 PLV 场景间过渡的渲染正确性规范:使得任何过渡都能正确合成的前提条件和主时间线机制,与具体选择哪种过渡无关。具体过渡的目录(交叉淡入淡出、推拉滑动、缩放通过、切曲线等)位于过渡注册表中——此页面是支撑所有过渡的底层规范。

本规范所涵盖的过渡均为 Tier-B 就绪:仅在两个场景剪辑包装器(#el-<sid>)上进行纯变换/透明度/滤镜操作,不注入额外的覆盖层 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 ping-pong,以便两个重叠的包装器永远不会共享同一个轨道(同一轨道重叠是非法的 — core/src/lint/rules/composition.ts)。较高的轨道合成在顶部。
  4. 在 T = overlap-start 处将 gsap_template 注入 window.__timelines["main"]。

由原型渲染验证(2026-05-31):主时间线包装器补间被查找并渲染(不会与子合成的暂停时间线双查找——运行时独立驱动它们),扩展的包装器保持场景 i 的最后一帧,较高轨道的进入包装器合成在上方并与离开包装器混合。

模板占位符

注入器会在每条 gsap_template 行中替换以下标记:

标记含义
__OLD__"#el-<from>" — 离开剪辑包装器选择器(带引号)
__NEW__"#el-<to>" — 进入剪辑包装器选择器(带引号)
__T__重叠开始时间(秒,主时钟)
__DUR__此边界的 duration_s
__DX__方向类型的水平移动:-1920(向左)/ 1920(向右)
__DY__垂直移动:-1080(向上)/ 1080(向下)
__ORIGIN_OUT__ / __ORIGIN_IN__squeeze 的 transformOrigin 对

filter / scaleX / transformOrigin 在主时间线上符合 lint 规范(已验证:core/src/lint/rules/gsap.ts 没有按属性白名单,并将其检查限定在 data-composition-id 范围内; x/y/scale/rotation/opacity 白名单仅是一个 scene-worker 提示规则——它不绑定 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.

相关技能