seam-craft

tarafından heygen-com

HyperFrames başlatma videolarındaki sahne-geçiş dikişleri için render-doğruluğu doktrini — geçişlerin ana zaman çizelgesinde doğru şekilde birleşmesini sağlayan ön koşullar. Ana zaman çizelgesini / index.html dosyasını birleştirirken, bir kesme veya çapraz geçiş dikişinde beyaz bir flaş göründüğünde (özellikle karanlık filmlerde), bir geçiş opaklık düşüşünün neden göründüğünü anlamaya çalışırken veya örtüşen sahne sarmalayıcılarının nasıl harmanlandığının render tarafı mekaniğini doğrularken yükleyin. Opak sahne zeminini (#root... kapsar.

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 tarafından daha fazla skill

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 için tüm animasyon bilgisi — atomik hareket kuralları, çok aşamalı sahne şablonları, sahne geçişleri, geniş kapsamlı hareket tasarımı teknikleri VE yedi çalışma zamanı bağdaştırıcısı (varsayılan GSAP, ayrıca Lottie, Three.js, Anime.js, CSS anahtar kareleri, Web Animasyonları API'si, TypeGPU). Herhangi bir hareket veya animasyon görevi için kullanın: 2-4 kural seçip birleştirin, bir şablon yükleyin veya çalışma zamanına özgü API'yi (ör. GSAP yumuşatmaları / Lottie oynatıcı / Three.js miksajcı) sorgulayın. HyperFrames-native: tek duraklatılmış zaman çiz
creativedevelopmentdesign
hyperframes-core
heygen-com
HyperFrames HTML kompozisyon sözleşmesi. Kompozisyon yapısı, veri nitelikleri, klipler, parçalar, alt kompozisyonlar, değişkenler, medya oynatımı, deterministik render kuralları ve minimum render edilebilir projelerin doğrulaması için kullanılır.
developmentmediacreative
hyperframes-media
heygen-com
HyperFrames kompozisyonları için varlık ön işleme — çoklu sağlayıcılı TTS (HeyGen / ElevenLabs / Kokoro yerel), çoklu sağlayıcılı BGM (Google Lyria / yerel MusicGen), Whisper transkripsiyonu, arka plan kaldırma ve altyazı yazarlığı. npx hyperframes tts, bgm, transcribe, remove-background, voice/provider seçimi, music-mood yönlendirmesi, captions / subtitles / lyrics / karaoke / per-word styling için kullanın.
mediaaudiovideo
hyperframes-registry
heygen-com
HyperFrames kompozisyonlarına kayıt blokları ve bileşenleri kurup bağlayın. hyperframes add çalıştırırken, bir blok veya bileşen kurarken, kurulu bir öğeyi index.html'e bağlarken veya hyperframes.json ile çalışırken kullanın. add komutunu, kurulum konumlarını, blok alt kompozisyon bağlantısını, bileşen snippet birleştirmeyi, kayıt keşfini ve yukarı akışa katkıda bulunmak için yeni bir blok veya bileşen yazmayı (fikir → iskelet → doğrulama → PR) kapsar.
developmentapicode-review
general-video
heygen-com
Hi̇çbir özelleşmiş iş akışı uymadığında, özel HyperFrames HTML video kompozisyonu oluşturma için yedek olarak kullanın. Daha uzun veya çok sahneli parçaları, marka/tanıtım reellerini, montajları, başlık kartlarını, uzun hareketli posterleri, statik döngüleri ve herhangi bir uzunluk veya formatta serbest kompozisyonları kapsar. Pazarlanan ürün tanıtımları (product-launch-video), genel web sitesinden videoya çekim (website-to-video), konu anlatımları (faceless-explainer), GitHub PR videoları (pr-to-video), mevcut görüntüleri altyazılama... için değildir.
videocreativemedia
motion-graphics
heygen-com
Kullanıcının kısa, tasarım odaklı ve hareketin mesajı ilettiği bir motion grafik istediğinde kullanılır: kinetik tipografi, istatistik veya sayı sayacı, grafik/veri görselleştirme vurgusu, logo animasyonu, marka birleşimi, alt üçlük, çağrı, sosyal katman, animasyonlu başlık/tweet/haber ögesi, hareketli poster veya hızlı yakalanmış sayfa vurgusu. Genellikle 10 saniyenin altında ve en fazla ~30 saniye olup, anlatı akışı, seslendirme veya canlı aksiyon öznesi içermez. MP4 veya şeffaf katman olarak işlenebilir. Daha uzun, çok sahneli, seslendirmeli veya marka
creativevideodesign