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).

Skills เพิ่มเติมจาก 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 keyframes, Web Animations API, TypeGPU) ใช้สำหรับงานเคลื่อนไหวหรือแอนิเมชันใดๆ: เลือก 2-4 กฎแล้วประกอบ, หรือโหลดบลูพริ้นท์, หรือค้นหา API เฉพาะรันไทม์ (เช่น GSAP eases / Lottie player / Three.js mixer) HyperFrames-native: ไทม์ไลน์ที่หยุดชั่วคราวเส้นเดียว, ปลอดภัยต่อการค้นหา,...
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, การเลือกเสียง/ผู้ให้บริการ, การกระตุ้นอารมณ์ดนตรี, คำบรรยาย / คำอธิบายใต้ภาพ / เนื้อเพลง / คาราโอเกะ / การจัดรูปแบบต่อคำ
mediaaudiovideo
hyperframes-registry
heygen-com
ติดตั้งและเชื่อมต่อบล็อกและคอมโพเนนต์ของ registry เข้ากับองค์ประกอบ HyperFrames ใช้เมื่อรันคำสั่ง hyperframes add, ติดตั้งบล็อกหรือคอมโพเนนต์, เชื่อมต่อรายการที่ติดตั้งแล้วเข้ากับ index.html, หรือทำงานกับ hyperframes.json ครอบคลุมคำสั่ง add, ตำแหน่งการติดตั้ง, การเชื่อมต่อบล็อกย่อย, การรวมคอมโพเนนต์ snippet, การค้นพบ registry, และการสร้างบล็อกหรือคอมโพเนนต์ใหม่เพื่อส่งกลับต้นทาง (แนวคิด → โครงร่าง → ตรวจสอบ → 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
ใช้เมื่อผู้ใช้ต้องการโมชั่นกราฟิกที่เน้นการออกแบบและให้การเคลื่อนไหวเป็นสาระสำคัญ เช่น kinetic typography, การนับตัวเลขหรือสถิติ, การแสดงข้อมูล/แผนภูมิ, logo sting, brand lockup, lower-third, callout, social overlay, หัวข้อ/ทวีต/ข่าวแบบเคลื่อนไหว, โปสเตอร์เคลื่อนไหว, หรือการเน้นส่วนของหน้าที่จับภาพอย่างรวดเร็ว โดยทั่วไปมีความยาวต่ำกว่า 10 วินาทีถึงประมาณ 30 วินาที ไม่มีโครงสร้างการเล่าเรื่อง เสียงพากย์ หรือตัวแสดงจริง สามารถเรนเดอร์เป็น MP4 หรือโอเวอร์เลย์โปร่งใส ไม่เหมาะสำหรับชิ้นงานที่ยาว มีหลายฉาก มีการเล่าเรื่อง หรือเป็นรีลของแบรนด์...
creativevideodesign