ASD

Seam Craft

Doctrina de corrección de render para los seams de escena a escena en videos de lanzamiento HyperFrames: los prerrequisitos para que las transiciones compongan bien en el master timeline.

Estrellas
40.6k

en todo el repo

Actividad
57

0–100, la ruta de este skill

Actualizado
hace 28 días

último commit aquí

Commits
1

últimos 90 días

Contexto
1.2k tok

194 tok en reposo

Paquete
1 archivo

5 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add heygen-com/hyperframes --skill seam-craft --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Aplica la doctrina de correcta composición de renders para las transiciones de escena a escena en el master timeline de HyperFrames
  • Explica el guard de fondo opaco (#root background) que evita el flash blanco en los cortes
  • Describe cómo el injector solapa wrappers, sostiene el frame final, hace ping-pong de tracks y estampa el gsap_template

Úsalo cuando

  • Al ensamblar el master timeline / index.html
  • Cuando aparece un flash blanco en un corte o crossfade seam (especialmente en films oscuros)
  • Al razonar sobre por qué se ve un dip de opacidad en una transición
  • Al verificar la mecánica de render de cómo se mezclan los wrappers de escena solapados

No lo uses cuando

  • No contiene el catálogo por transición individual (crossfade, push-slide, zoom-through, cut-the-curve, etc.) — eso está en el transition registry

Qué lo activa

Di cualquiera de estas frases y el agente debería cargar este skill.

  • ¿Por qué aparece un flash blanco en el corte entre escenas?
  • Necesito ensamblar el master timeline index.html sin errores de composición
  • ¿Cómo solapa el injector los wrappers de escena en las transiciones?
  • Revisa por qué se ve el dip de opacidad detrás de las wrappers

SKILL.md

En inglés

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:

Token Meaning
__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).

Reproducido de heygen-com/hyperframes bajo licencia Apache-2.0. Leer esta página en markdown.

Archivos

1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

Antes de instalar

Asume familiaridad con assemble-index.mjs, los wrappers #el-<sid> y el runtime de core/src (init.ts, lint rules).

Detalles

Creador
heygen-com
Licencia
Apache-2.0
Recursos incluidos
Solo SKILL.md
Código fuente
Ver SKILL.md

Etiquetas

Más de heygen-com/hyperframes

Este repo incluye 25 skills. Si instalas uno, normalmente ya tienes los demás.

Agent Media OS: resuelve BGM, SFX, imágenes, iconos, logos, voz, gradación de color o LUTs en un archivo local o bloque listo para usar; genera, opera y reutiliza assets en proyectos HyperFrames.

Costo de contexto al activarse
2k tok
Tamaño del paquete
152 archivos
Última actualización
hace 4 días
herramientas desarrollo

Convierte un pull request de GitHub (URL, owner/repo#N o 'este PR') en un video explicativo del cambio de código —changelog, feature, fix o refactor— construido a partir del diff, commits y archivos.

Costo de contexto al activarse
7.9k tok
Tamaño del paquete
30 archivos
Última actualización
hace 10 días
redaccion contenido

Punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames, así como para inspeccionar, validar o publicar proyectos existentes.

Costo de contexto al activarse
3.2k tok
Tamaño del paquete
17 archivos
Última actualización
hace 15 días
diseno ui

Convierte una URL de producto o marketing, un guion pegado o un brief en un video de lanzamiento/promoción — promos SaaS, revelaciones de funciones, demos, lanzamientos de apps y empresas.

Costo de contexto al activarse
7.9k tok
Tamaño del paquete
28 archivos
Última actualización
hace 10 días
redaccion contenido

Usa el flujo de desarrollo de la CLI de HyperFrames: init, add, catalog, capture, lint, check, snapshot, compare, preview, render, publish, cloud, lambda, feedback, doctor y más; también para diagnosticar fallos de build o render.

Costo de contexto al activarse
3.9k tok
Tamaño del paquete
11 archivos
Última actualización
hace 3 días
herramientas desarrollo

Convierte texto (artículo, notas, tema o brief) en un video explicativo faceless: sin sitio ni material que capturar, los visuales se inventan por escena (tipografía, gráficos abstractos, diagramas, data-viz).

Costo de contexto al activarse
7.1k tok
Tamaño del paquete
24 archivos
Última actualización
hace 10 días
redaccion contenido

Skills relacionados

Porta el código de una composición Remotion (React) existente a HTML de HyperFrames. Solo para pedidos explícitos de portar/convertir/migrar una fuente Remotion, en un único sentido.

Costo de contexto al activarse
2.4k tok
Tamaño del paquete
70 archivos
Última actualización
hace 10 días
herramientas desarrollo

Empaqueta un video de talking-head/entrevista/podcast existente con tarjetas gráficas superpuestas (títulos, lower-thirds, callouts, citas, PiP) sincronizadas con la transcripción, en 16:9, 9:16 o 4:5; el clip se reproduce intacto debajo.

Costo de contexto al activarse
16.3k tok
Tamaño del paquete
28 archivos
Última actualización
hace 24 días
diseno ui

Úsalo cuando el usuario o el agente necesite leer, buscar o consultar la documentación o la referencia de la API de Stripe, en vez de usar curl o WebFetch para docs.stripe.com.

Costo de contexto al activarse
225 tok
Tamaño del paquete
1 archivo
Última actualización
hace 24 días
Oficialdesarrollo apis