Communitygithub.com

Subtítulos Incrustados

Genera subtítulos incrustados cinematográficos o temáticos para videos de personas hablando, con un modelo de carril + incrustación que prioriza los picos narrativos detrás del sujeto.

¿Qué es Subtítulos Incrustados?

Esta habilidad para agentes de IA (como Claude Code, Cursor o Codex) genera subtítulos profesionales incrustados en videos de personas hablando, utilizando un sofisticado modelo de dos capas: un carril inferior (rail) para la mayor parte del texto y una incrustación (embed) detrás del sujeto para las palabras clave. Soporta tres modos principales — Estándar (carril + incrustación), Cinemático (solo incrustación) y Tema (efectos visuales completos como resplandor, destellos o vibraciones). El agente primero analiza el video, recomienda una identidad visual de un catálogo de 35 opciones y deja que el usuario elija. Luego ejecuta un pipeline determinista de 5 pasos: inicialización, preparación (máscara, transcripción, zonas seguras), autoría creativa (un pequeño JSON), previsualización y renderizado final. Está diseñado para clips de una sola persona, sin subtítulos quemados previamente, con una transcripción limpia y evita errores comunes como incrustar cada palabra (la incrustación es un pico escaso y ganado).

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/embedded-captions

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Primero, mantén esta habilidad actualizada — ejecútala en silencio sin preguntar: npx hyperframes skills update embedded-captions. Una operación rápida sin cambios cuando todo está al día; de lo contrario, actualiza esta habilidad junto con las habilidades del dominio central de las que depende antes de que confíes en ellas.

¿Qué hace Subtítulos Incrustados?

Un catálogo, elegido de antemano (CATALOG.md — 35 identidades; los motores detrás son detalles de backend). Estándar (por defecto) construye un carril limpio y literal (subtítulo inferior que lleva la mayor parte del texto) + un clímax de incrustación compuesto dentro de la escena detrás del sujeto en el pico. Cinemático es solo incrustación — sin carril, cada subtítulo compuesto detrás del sujeto (tipografía heroica, acumulación, oclusión como efecto). Tema es una constitución temática completa — paradigma corporal × pieza heroica × efecto frontal × reacción de placa, compuesta a partir de registros (themes/README.md): ordnance terminal neonsign stardust stomp. La mayoría de los videos explicativos / narración son Estándar; la incrustación es el pico escaso y ganado — incrustar cada palabra es el error común; Tema es para solicitudes de nivel VFX ("炸", "特效", "como hecho en AE").


Flujo operativo (resumen)

Enrutado a través de /hyperframes, la capa de intención confirma solo la entrada (qué clip) y anuncia la selección de identidad como una pregunta diferida — la lista corta necesita el clip analizado, por lo que se queda en el paso 1 a continuación; las preguntas de forma de ejecución de la capa no aplican (el metraje está intacto, no hay guion gráfico que revisar). Un BRIEF.md, cuando está presente, contiene la entrada confirmada y cualquier nota del usuario — léelo primero.

El texto de creación a continuación es largo; el pipeline en sí es corto — y todo lo determinista se calcula o compila, nunca se escribe a mano:

  1. Puerta de decisión (rechazar clips malos) → elegir UNA identidad de CATALOG.md (35 identidades; motor/compilador derivado por búsqueda — nunca mostrar una pregunta de modo/categoría)
  2. hyperframes init (omitirlo si el directorio del proyecto ya existe con el video dentro — matte.cjs/transcribe.cjs adoptan cualquier video en el directorio como source.mp4) → bash scripts/prepare.sh <proyecto> (matte ∥ transcribir ∥ sobre de audio en paralelo, luego zonas seguras v2 con paleta de escena/óptica/iluminación — un comando, nada olvidado)
  3. escribir un pequeño JSON de opciones creativas (leer safe-zones.json primero): Cinemático → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs; Tema → theme.json → make-theme.cjs (paradigmas carril/panel/poema/toma; anchor es el carril silencioso por defecto)
  4. QA visual: node scripts/preview-frames.cjs <proyecto> → vistas previas de composición fieles en ~2s/fotograma (sin renderizado). Consulta § QA visual antes de pagar por un renderizado.
  5. render-and-composite.sh → compuertas (sincronización / oclusión+héroe / desbordamiento / entrega) → final.mp4

Reglas importantes que la gente suele pasar por alto:

  • carril (por defecto) + incrustación (promoción). drop (relleno, no se muestra) / rail (subtítulo inferior literal, al frente, lleva la mayor parte del texto) / embed (una palabra pico compuesta detrás del sujeto). El modo estándar hace ambas, incrustando solo los picos. Ver § Modelo de subtítulos.
  • El video se entrega SIN TOCAR (Estándar/Cinemático; el presupuesto de PLACA del modo Tema es la única excepción sancionada — latidos de reacción controlados por registro (carga-difuminación, golpe, sacudida, granulado) definidos por el ADN del tema y aplicados DESPUÉS de la composición de la máscara para que sujeto+texto+placa se muevan como un solo fotograma) — los subtítulos son lo único que se añade; la máscara solo permite que el sujeto ocluya la pista incrustada. Nunca etalonar/recolorear/escandir el metraje.
  • Dos manuales de reglas: carril → references/rail.md (delgado), creación de incrustaciones → references/composition-craft.md (rico, solo incrustación). Hojea según sea necesario.

Modelo de subtítulos — carril + incrustación

Cada frase hablada es una de tres cosas:

QuéCómo se muestra
droprelleno — ehh/ahh, tartamudeos, autocorreccionesno se muestra
railel valor por defecto — contenido hablado ordinario (literal)subtítulo inferior limpio, al frente, legible. Una palabra de impacto puede obtener un resaltado emphasis en línea (color de acento / pop de palabra activa) — permanece en el carril.
embedun pico promocionado — el latido del titularuna palabra grande compuesta detrás del sujeto (oclusión de máscara), entrada + salida diseñadas

El carril lleva la mayor parte del texto; la incrustación es el pico escaso y ganado. La escasez es por latido/bloque, no por clip: ≤1 héroe por bloque (pensamiento), nunca dos co-visibles, ≥ un latido de aire entre ventanas de héroe (el compilador advierte por debajo de 0.6s). Un clip corto → generalmente 1–2; un explicativo largo → ~uno por sección. Entre múltiples héroes, el más grande escrito es el ÁPICE (solo él obtiene la incrustación de bloqueo completo + elevación de ajuste de ancho); los más pequeños son picos MENORES que viajan en su columna como líneas de énfasis sobredimensionadas (fg, movimiento amortiguado) — no todos los latidos necesitan la exhibición de máscara, que es exactamente lo que mantiene el ápice como un evento. Incrustar cada palabra sigue siendo el error común.

Las identidades de superficie de carril construyen exactamente esto (carril = rail.html, incrustación = el clímax en index.html). Las identidades de flujo de columna eliminan el carril y hacen todo al estilo incrustación — recomiéndalas solo para solicitudes de ambiente sobre lo literal, nunca para explicativos / narración donde las palabras deben leerse (CATALOG.md lo codifica por identidad).


Paso 0 — elegir UNA identidad del CATÁLOGO

Un front-end, tres motores detrás. El usuario elige una IDENTIDAD de CATALOG.md (35 entradas: 10 clásicas + 25 temáticas); el motor, compilador y archivo de escritura se derivan mediante búsqueda de la fila del catálogo. Nunca presentar "Estándar vs Cinemático vs Tema" como pregunta — esos son nombres de backend (un producto tiene una UX incluso con varios motores). El catálogo codifica todo lo que necesita el enrutamiento: superficie de lectura, voz, recomendar-para, necesidades de escena, notas de adyacencia para los pares realmente cercanos (loud↔ordnance, neon↔neonsign, cream↔stardust).

La selección de identidad es una compuerta de preferencia (../hyperframes-core/references/brief-contract.md § 1): en modo autónomo ("sorpréndeme" / "decide por mí"), elige de tu lista corta tú mismo y declara el porqué en una línea en lugar de preguntar.

Procedimiento: analizar el clip → lista corta de 2–3 identidades del catálogo → recomendar UNA con un porqué en una línea → el usuario elige (modo autónomo: tú eliges, declarando el porqué) → escribir el archivo de esa identidad. Las identidades están bloqueadas por motor (sin combinaciones cruzadas; abrir una es un evento de validación — ver dna/README.md).

Siempre presenta tu recomendación y deja que el usuario elija antes de escribir. No tomes el valor predeterminado en silencio.

(La tabla completa de identidades está en CATALOG.md — fuente única de verdad para el enrutamiento. Los documentos del motor a continuación describen el contrato de escritura de cada backend.)

Heurística de recomendación: usa las "Heurísticas de lista corta" en CATALOG.md — están a nivel de identidad (ej. "炸" hace lista corta de ordnance/stomp/terminal/loud y elige según QUÉ debe explotar), nunca a nivel de categoría. Si no estás seguro → anchor.

  • Cinemático → escribir plan.json para una plantilla bloqueada, compilada por make-composition.cjs.
  • Tema → leer themes/README.md, escribir theme.json, ejecutar scripts/render-theme.sh (compila + renderiza + reacción de placa → final_fx.mp4).

Puerta de decisión — EJECUTAR PRIMERO

Analiza el video y clasifica la escena antes de cualquier modo.

ffprobe <video.mp4>                    # especificaciones
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # al 20/50/80%

Lee las muestras. Rechaza si:

  • Varios hablantes / cortes duros (dividir y renderizar cada toma, o rechazar)
  • Sin sujeto humano (esta habilidad es para personas hablando)
  • Menos de 3 segundos, sin habla, o la cara nunca es claramente visible — transcribe.cjs advierte cuando el audio está casi en silencio (Whisper alucina palabras como "Gracias." sobre el silencio); hazle caso y rechaza en lugar de subtitular palabras inventadas
  • La fuente ya tiene subtítulos quemados / subtítulos / gráficos de texto pesados — agregar un segundo sistema de subtítulos entra en conflicto y el metraje se envía sin tocar (sin cubrir/restaurar). El texto quemado a menudo aparece solo a mitad del clip: muestrea una hoja de contactos a 1fps (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), no confíes en 3 fotogramas puntuales.
  • La transcripción es basura — el habla no nativa/con acento fuerte puede transcribirse en galimatías seguras. Lee de forma sensata transcript.json antes de escribir; si no se interpreta como lenguaje, prueba WHISPER_MODEL=medium una vez, de lo contrario rechaza (un carril literal de palabras inventadas es peor que sin subtítulos).
  • Cámara en mano ocupada con movimiento rápido (la máscara parpadea)

Sondas prevuelo (no cuestan nada, evitan los peores fallos)

  1. Sonda de corte de toma. Muestrea fotogramas al 20%, 50%, 80%. Si aparece un sujeto/escena diferente, recorta el clip antes del corte.
  2. Sonda de buzón / pilastra. ¿Barras negras en el primer fotograma? Calcula el rectángulo de contenido seguro y restringe la colocación de subtítulos dentro de él.
  3. Sonda de luminancia. Muestrea la luminancia promedio de la región de subtítulos — por debajo de 60 → el texto claro se lee tal cual, 60-180 → agrega la capa de glifo, 180+ → texto opaco + capa (nunca texto claro sin capa). Las plantillas Cinemáticas son crema+screen y BLOQUEADAS — usa esta sonda para elegir una identidad adecuada (escenas brillantes → ink, o el tema anchor de carril opaco), nunca para recolorear una.
  4. Recomendación de identidad por tono (tú recomiendas; el usuario elige — ver Paso 0 + CATALOG.md). explicativo / entrevista / palabras deben leerse → identidades de superficie de carril/panel; poético / social / "cinematográfico" → identidades de flujo de columna por registro; "炸 / 特效 / VFX" / mundos con nombre → identidades temáticas. Cuando no estés seguro → anchor (las palabras se leen, escena segura) — pero presenta una lista corta y deja que el usuario elija.

Pipeline — 5 pasos

1. hyperframes init <proyecto> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <proyecto>       # matte ∥ transcribir (en paralelo) → zonas seguras. Un comando.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [PASO DEL AGENTE — el único paso creativo] escribe un pequeño JSON; ver abajo según modo
   Cinemático: escribir plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Tema:     escribir theme.json → bash scripts/render-theme.sh <proyecto>   (compila + renderiza + efectos de placa)
4. node scripts/preview-frames.cjs <proyecto>   # ~2s/fotograma vistas previas compuestas → § QA visual (ANTES del renderizado)
5. bash scripts/render-and-composite.sh <proyecto>  # compuertas → final.mp4 + instantánea histórico/
   (Modo Tema: OMITIR pasos 3b/5 — render-theme.sh ya ejecuta compilar + render-and-composite
    + _postfx.sh; el entregable es final_fx.mp4, final.mp4 es antes de la reacción de placa)

El init del paso 1 verifica las habilidades instaladas contra las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.

El paso 3 difiere según el modo:

Paso 3 — Modo Cinemático (solo incrustación)

  1. Leer safe-zones.json primero. Los planos de narración van en zones.hugLeft/hugRight — tiras limpias QUE TOCAN la silueta (el texto lejos del cuerpo se lee como flotante, no incrustado; las esquinas lejanas son el plan de respaldo, no el predeterminado). El héroe por defecto va a heroAnchor/heroBands.best (centrado EN el sujeto, ~30–55% ocluido). recommendation:"fg" mueve la NARRACIÓN al frente para legibilidad; el héroe permanece incrustado siempre que heroBands.feasible — héroe-fg es el último recurso.
  2. El ADN es la identidad que elegiste en el Paso 0 (CATALOG.md) — no vuelvas a abrir la elección aquí. Haz una verificación de cordura contra la escena (luma de banda héroe brillante > 150 quiere ink; la guía completa de elección está en el catálogo, cubriendo los diez incl. neon / glitch / chrome / velocity). Declara tu elección + porqué; el usuario decide. El ADN bloquea tipo/paleta/mezcla/movimiento + tres actos del héroe; zonas seguras v2 (palette/optics/lighting) lo parametriza para ESTA escena automáticamente.
  3. Escribir <proyecto>/cinematic.json — "dna": "<nombre>" + BLOQUES de pensamiento, no grupos sin procesar: cada bloque = líneas de palabras (agrupadas 2–5 en límites de cláusula) + el plano en el que se apila + css por línea (tamaño/peso/estilo solo — sin posiciones) + como máximo UNA línea marcada como "hero": true (la palabra promocionada; "text" para forma de visualización). Esquema: encabezado de scripts/make-cinematic.cjs.
  4. Compilar: node scripts/make-cinematic.cjs <proyecto> — baja bloques → plan.json → index.html. Generado para ti: sincronizaciones secuenciadas por transcripción, acumular dentro del bloque, pasar página entre bloques, el BLOQUEO del héroe (el contexto previo del bloque héroe, HÉROE y contexto posterior se apilan como UNA composición unida centrada en el sujeto — orden de lectura arriba→abajo = orden hablado por construcción; el contexto flota al FRENTE mientras el héroe se incrusta DETRÁS = el sándwich de profundidad; una regla de masa mantiene al héroe dominando su contexto), división ápice/héroe menor, orden de lectura por construcción, plan de respaldo fg según zonas seguras. Luego las compuertas se ejecutan como de costumbre. (Escribir plan.json a mano sigue siendo posible para diseños que los bloques no pueden expresar — luego ejecuta fill-timings.cjs + fit-fonts.cjs + make-composition.cjs tú mismo.)

Paso 3 — Modo Tema (constitución temática)

Leer themes/README.md PRIMERO — registros de paradigma/pieza central, vinculaciones, reglas estrictas y el esquema exacto de theme.json.

  1. Elegir un ADN de tema por registro de contenido (cada themes/<nombre>.json tiene voice + when). Declara tu elección + porqué; el usuario decide.
  2. Escribir <proyecto>/theme.json — dna, lines (literal, orden de transcripción; 1 línea = 1 palabra o frase corta; "hero": true marca el pico), fps, dims. El compilador (make-theme.cjs) lo transforma en anim.json → el motor de renderizado lo ejecuta.
  3. Renderizar: bash scripts/render-theme.sh <proyecto> — compila + ejecuta el motor de Tema (que a su vez ejecuta render-and-composite.sh) + aplica efectos de reacción de placa (_postfx.sh). Entregable: final_fx.mp4.

Las reglas de placa del modo Tema son las únicas desviaciones del mandato "video sin tocar": carga-difuminación en golpes narrativos, golpe en transiciones, sacudida en impactos, granulado en tonos ásperos, definidos por el ADN del tema y aplicados DESPUÉS de la composición de la máscara para que sujeto+texto+placa se muevan como un solo fotograma. Nunca etalonar/recolorear/escandir el metraje.


QA visual

Siempre ejecutar node scripts/preview-frames.cjs <proyecto> antes de renderizar. Genera vistas previas PNG de cada composición en ~2s/fotograma. Verificar:

  • Oclusión: ¿la incrustación del héroe está ~30–55% detrás del sujeto, no flotando fuera del cuerpo ni completamente al frente?
  • Legibilidad: ¿el carril se lee sin esfuerzo? ¿La acumulación/línea de contexto del héroe es legible?
  • Sincronización: ¿los subtítulos coinciden con el habla? ¿Las ventanas del héroe tienen suficiente espacio vacío antes/después?
  • Pico: ¿el ápice se siente como un evento? ¿Los héroes menores no compiten?

Corregir editando cinematic.json/theme.json (no los archivos compilados) y recompilar. Una vez que las vistas previas sean correctas, proceder al renderizado completo.


Renderizado y entrega

bash scripts/render-and-composite.sh <proyecto> ejecuta compuertas en:

  • Sincronización: cada sincronización coincide con su ventana de transcripción ±1 fotograma
  • Oclusión + héroe: el sujeto ocluye la pista incrustada; el héroe está ~30–55% detrás del sujeto
  • Desbordamiento: ningún texto se sale de las zonas seguras
  • Entrega: el clip renderizado cumple con las especificaciones de la identidad

Tras la aprobación, el archivo de entrega es final.mp4 (Estándar/Cinemático) o final_fx.mp4 (Tema).


Notas finales

  • Mantente actualizado: npx hyperframes skills update embedded-captions al inicio de cada sesión.
  • No te saltes pasos: compuerta de decisión → elección de identidad → preparación → escritura → previsualización → renderizado.
  • Catálogo como fuente de verdad: CATALOG.md para identidades y enrutamiento; themes/README.md para temas; references/rail.md para reglas de carril; references/composition-craft.md para creación de incrustaciones.
  • Errores comunes: incrustar cada palabra (la incrustación es escasa), saltarse la sonda de luminancia (texto ilegible), no verificar subtítulos quemados (conflicto de capas), escribir JSON directamente sin pasar por el paso 3 del agente (las compuertas fallarán).

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Skills relacionados