seam-craft

作者: heygen-com

HyperFrames启动视频中场景到场景接缝的渲染正确性原则——使转场在主时间线上正确合成的先决条件。当组装主时间线/index.html时、当剪切或交叉溶解接缝处出现白色闪光时(尤其是在暗色影片上)、当推理转场不透明度下陷为何透出时,或当验证重叠场景包装器混合的渲染端机制时,加载此技能。涵盖不透明舞台背景(#root...

npx skills add https://github.com/heygen-com/hyperframes --skill seam-craft

Seam Craft — render prerequisites for scene-to-scene transitions

This is the render-correctness doctrine for PLV scene-to-scene seams: the prerequisites and master-timeline mechanics that make any transition composite correctly, independent of which specific transition is chosen. The per-transition catalog (crossfade, push-slide, zoom-through, cut-the-curve, …) lives in the transition registry — this page is the doctrine that sits underneath all of them.

The transitions this doctrine governs are Tier-B-ready: pure transform / opacity / filter on the two scene clip wrappers (#el-<sid>), no injected overlay DOM, no per-scene cooperation. Overlay families (staggered blocks, blinds, light leak, grid dissolve, page burn) and shader transitions are deferred to later phases.

Stage ground prerequisite (white-flash guard)

Several templates open a window where the two wrappers' summed opacity < 1 (the cut-the-curve mid-window cut, zoom-through's 0.15 floor, plain crossfade's power-curve dip). Whatever is BEHIND the wrappers shows through during that window. If the assembled index.html #root has no opaque background, the renderer composites the dip over its default white page → a white flash at every seam, glaring on dark films (observed on two Spotify runs before the fix). The assembler must paint the stage: #root { background: var(--canvas-deep, var(--canvas, #000)) }assemble-index.mjs now emits this; any other consumer of these templates owns the same guarantee.

How the injector applies a transition

At a break boundary between scene i (from) and scene i+1 (to), the injector:

  1. Extends #el-<from> wrapper data-duration by duration_s (holds its final frame — verified: core/src/runtime/init.ts:1393-1410 external-slot branch).
  2. Pulls #el-<to> wrapper data-start earlier by duration_s (creates the overlap window).
  3. Reassigns all clip data-track-index as a 0/1 ping-pong so the two overlapping wrappers never share a track (same-track overlap is illegal — core/src/lint/rules/composition.ts). Higher track composites on top.
  4. Stamps the gsap_template into window.__timelines["main"] at T = overlap-start.

Verified by prototype render (2026-05-31): the master-timeline wrapper tween is seeked and rendered (no double-seek with the sub-comp's own paused timeline — the runtime drives them independently), the extended wrapper holds scene i's final frame, and the higher-track incoming wrapper composites over + blends with the outgoing one.

Template placeholders

The injector substitutes these tokens in each gsap_template line:

TokenMeaning
__OLD__"#el-<from>" — outgoing clip wrapper selector (quoted)
__NEW__"#el-<to>" — incoming clip wrapper selector (quoted)
__T__overlap-start time in seconds (master clock)
__DUR__duration_s for this boundary
__DX__horizontal travel for directional types: -1920 (LEFT) / 1920 (RIGHT)
__DY__vertical travel: -1080 (UP) / 1080 (DOWN)
__ORIGIN_OUT__ / __ORIGIN_IN__transformOrigin pair for squeeze

filter / scaleX / transformOrigin are lint-clean on the master timeline (verified: core/src/lint/rules/gsap.ts has no per-property whitelist and scopes its checks to data-composition-id ranges; the x/y/scale/rotation/opacity whitelist is a scene-worker prompt rule only — it does not bind index.html).

来自 heygen-com 的更多技能

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-cli
heygen-com
HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
developmenttestingapi
hyperframes-animation
heygen-com
HyperFrames的所有动画知识——原子运动规则、多阶段场景蓝图、场景过渡、更广泛的动态设计技术,以及七种运行时适配器(默认GSAP,外加Lottie、Three.js、Anime.js、CSS关键帧、Web Animations API、TypeGPU)。适用于任何运动或动画任务:选取2-4条规则进行组合,或加载蓝图,或查询特定运行时的API(例如GSAP缓动函数/Lottie播放器/Three.js混合器)。HyperFrames原生特性:单一暂停时间线,安全跳帧,...
creativedevelopmentdesign
hyperframes-core
heygen-com
HyperFrames HTML 组合合约。用于组合结构、数据属性、剪辑、轨道、子组合、变量、媒体播放、确定性渲染规则以及最小可渲染项目的验证。
developmentmediacreative
hyperframes-media
heygen-com
为HyperFrames合成提供资产预处理——多供应商TTS(HeyGen / ElevenLabs / Kokoro本地)、多供应商BGM(Google Lyria / 本地MusicGen)、Whisper转录、背景移除及字幕编写。用于npx hyperframes tts、bgm、transcribe、remove-background、语音/供应商选择、音乐情绪提示、字幕/副标题/歌词/卡拉OK/逐词样式。
mediaaudiovideo
hyperframes-registry
heygen-com
安装并将注册表块和组件接入HyperFrames组合中。在运行hyperframes add、安装块或组件、将已安装项接入index.html或处理hyperframes.json时使用。涵盖add命令、安装位置、块子组合接入、组件片段合并、注册表发现,以及编写新块或组件以向上游贡献(构思→脚手架→验证→PR)。
developmentapicode-review
general-video
heygen-com
用作自定义HyperFrames HTML视频合成创作的后备方案,适用于无专门工作流程的场景。涵盖较长或多场景作品、品牌/宣传片、蒙太奇、标题卡、动态海报、静态循环以及任意长度或格式的自由创作。不适用于营销产品推广(product-launch-video)、通用网站转视频(website-to-video)、主题解说(faceless-explainer)、GitHub PR视频(pr-to-video)、为现有素材添加字幕等场景。
videocreativemedia
motion-graphics
heygen-com
当用户需要一段简短、以设计为主导的动态图形,且动态本身即为信息时使用:动态文字排版、数字或统计计数、图表/数据可视化效果、标志片头、品牌组合、底部三分之一、标注、社交覆盖层、动画标题/推文/新闻条目、动态海报或快速捕捉页面高亮。通常时长在10秒以内,最长约30秒,无叙事弧线、画外音或真人实拍主体。可渲染为MP4或透明叠加层。不适用于较长、多场景、带旁白或品牌宣传片的作品……
creativevideodesign