seam-craft

Học thuyết về tính đúng đắn khi kết xuất cho các đường nối giữa các cảnh trong video khởi chạy HyperFrames — các điều kiện tiên quyết giúp các chuyển cảnh ghép nối chính xác trên dòng thời gian chính. Tải khi lắp ráp dòng thời gian chính / index.html, khi xuất hiện đèn trắng tại điểm cắt hoặc đường nối chuyển cảnh mờ (đặc biệt trên phim tối), khi suy luận về lý do độ mờ chuyển cảnh lộ ra, hoặc khi xác minh cơ chế phía kết xuất của cách các lớp bọc cảnh chồng lấn hòa trộn. Bao gồm nền sân khấu không trong suốt (#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).

Thêm skills từ 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
Tất cả kiến thức hoạt hình cho HyperFrames — quy tắc chuyển động nguyên tử, bản thiết kế cảnh đa pha, chuyển tiếp cảnh, kỹ thuật thiết kế chuyển động rộng hơn, VÀ bảy bộ điều hợp thời gian chạy (GSAP mặc định, cộng với Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Sử dụng cho bất kỳ tác vụ chuyển động hoặc hoạt hình nào: chọn 2-4 quy tắc và soạn, hoặc tải bản thiết kế, hoặc tra cứu API thời gian chạy cụ thể (ví dụ: GSAP eases / Lottie player / Three.js mixer). Gốc HyperFrames: dòng thời gian tạm dừng đơn, an toàn t
creativedevelopmentdesign
hyperframes-core
heygen-com
Hợp đồng soạn thảo HTML HyperFrames. Sử dụng cho cấu trúc soạn thảo, thuộc tính dữ liệu, clip, track, hợp đồng phụ, biến, phát lại phương tiện, quy tắc kết xuất xác định và xác thực các dự án có thể kết xuất tối thiểu.
developmentmediacreative
hyperframes-media
heygen-com
Tiền xử lý tài sản cho các bản phối HyperFrames — TTS đa nhà cung cấp (HeyGen / ElevenLabs / Kokoro local), BGM đa nhà cung cấp (Google Lyria / local MusicGen), phiên âm Whisper, xóa nền, và biên tập phụ đề. Sử dụng cho npx hyperframes tts, bgm, transcribe, remove-background, lựa chọn giọng nói/nhà cung cấp, gợi ý tâm trạng nhạc, phụ đề / chú thích / lời bài hát / karaoke / tạo kiểu theo từng từ.
mediaaudiovideo
hyperframes-registry
heygen-com
Cài đặt và kết nối các khối registry cùng thành phần vào các tổ hợp HyperFrames. Sử dụng khi chạy hyperframes add, cài đặt một khối hoặc thành phần, kết nối một mục đã cài đặt vào index.html, hoặc làm việc với hyperframes.json. Bao gồm lệnh add, vị trí cài đặt, kết nối khối phụ trong tổ hợp, hợp nhất đoạn mã thành phần, khám phá registry, và tạo một khối hoặc thành phần mới để đóng góp ngược lên (ý tưởng → tạo khung → xác thực → PR).
developmentapicode-review
general-video
heygen-com
Sử dụng làm phương án dự phòng cho việc biên soạn video HTML HyperFrames tùy chỉnh khi không có quy trình chuyên biệt nào phù hợp. Bao gồm các tác phẩm dài hoặc nhiều cảnh, video thương hiệu/sizzle reel, dựng cảnh, thẻ tiêu đề, áp phích chuyển động dài, vòng lặp tĩnh và các tác phẩm tự do ở bất kỳ độ dài hoặc định dạng nào. Không dành cho quảng cáo sản phẩm tiếp thị (product-launch-video), chụp màn hình trang web thành video tổng quát (website-to-video), video giải thích chủ đề (faceless-explainer), video GitHub PR (pr-to-video), phụ đề cho cảnh quay có sẵn...
videocreativemedia
motion-graphics
heygen-com
Sử dụng khi người dùng muốn một đồ họa chuyển động ngắn, thiên về thiết kế, nơi chuyển động là thông điệp: kiểu chữ động, đếm số liệu hoặc số, hiệu ứng biểu đồ/trực quan hóa dữ liệu, logo sting, brand lockup, lower-third, callout, lớp phủ mạng xã hội, tiêu đề/tweet/tin tức động, poster chuyển động, hoặc điểm nhấn trang đã chụp nhanh. Thường dưới 10 giây và tối đa khoảng 30 giây, không có mạch tường thuật, lồng tiếng hoặc chủ thể quay thực. Có thể xuất ra MP4 hoặc lớp phủ trong suốt. Không dành cho các tác phẩm dài hơn, nhiều cảnh,
creativevideodesign