sticker-explainer-video

Video Explicativo de Pegatinas (Sticker Explainer)

Convierte un guion de locución y un doblaje en un video explicativo de estilo 'panel de investigación'. El esqueleto visual: un gran tablero de fondo azul grisáceo oscuro, cada escena es una zona (panel) del tablero, la cámara se desliza de una zona a la siguiente siguiendo una línea discontinua naranja. Los personajes son pegatinas recortadas con borde blanco; los lugares y objetos son pegatinas de fotos; la información son fichas de papel y etiquetas con iconos. Al llegar a un nuevo capítulo, el video se detiene, aparece un mapa mental y se ilumina la siguiente pista.

Este skill se basa en motion-showreel (ConardLi/garden-skills): proporciona la convención de página render(t), el renderizado fotograma a fotograma, la síntesis de sonido y la comprobación de la pieza final. Primero verifica que esté instalado (npx skills add ConardLi/garden-skills, o copia a ~/.claude/skills/motion-showreel). Este skill solo agrega estilo, flujo de trabajo y herramientas para videos largos en chino; no copia su código.

Ejemplo completo: examples/huang-resignation/ (video final de 13 minutos 43 segundos, ver Release del repositorio). Los comandos de cada paso están en references/workflow.md; las funciones de escena en references/engine-api.md; las reglas visuales en references/style.md.

Preguntar antes de empezar (preguntar todo de una vez, máximo 4 preguntas)

1. Doblaje: ¿El usuario lo genera con ElevenLabs (recomendado; las etiquetas [serious] [short pause] son de la v3), o crea primero una versión sin sonido? Si hay múltiples audios, preguntar cómo unirlos (ej. 'usa el corto para el inicio, luego el largo para los subtítulos').
2. Relación de aspecto: Por defecto 16:9, 1920×1080.
3. Personajes: Por defecto solo usar fotos recortadas de dominio público o con licencia CC (las fotos oficiales de funcionarios del gobierno de EE. UU. son de dominio público). Para personas sin foto autorizada, solo tarjeta de nombre.
4. Subtítulos: Por defecto en chino, una línea, cada línea ≤ 14 caracteres.

Si el usuario dice 'pregúntame cualquier cosa que no esté segura', preguntar solo las divergencias que realmente cambien el resultado; lo que se pueda determinar a partir de la grabación, el código o el sentido común no se pregunta.

Flujo de trabajo

Se prioriza la grabación, no el guion. La grabación a menudo difiere del guion enviado (faltan oraciones, se cambian palabras, se altera el orden). Los subtítulos y las escenas siguen la grabación, y en el brief se listan las diferencias informando al usuario. Si una posición de capítulo no encuentra la oración correspondiente en el guion, se elige la posición más cercana en la grabación y se explica el ajuste.

1. Crear proyecto: export MOTION_SHOWREEL=$(realpath <directorio motion-showreel>), luego sh scripts/new_project.sh <dir>, colocar el doblaje en audio/src/, llenar video.config.json. Todos los comandos usan la ruta absoluta del proyecto.
2. Unir doblaje (si hay múltiples): Primero usar transcribe.py <dir> --take <file> para ver las oraciones y tiempos de cada segmento, elegir puntos de corte en las pausas entre oraciones, escribir en voice.splice, luego ejecutar splice.py.
3. Transcripción y alineación: transcribe.py, luego align.py. La transcripción completa de whisper.cpp puede desviarse en las marcas de tiempo después de unos minutos, así que los scripts cortan el audio en segmentos de ~40 segundos y los vuelven a transcribir para obtener precisión. Whisper a veces produce caracteres tradicionales, los scripts los convierten a simplificados con opencc. Leer timeline/segments.json y agregar nombres mal escuchados, pronombres, etc., en fixes, luego volver a ejecutar.
4. Editar ritmo: voedit.py. Las pausas de capítulo (7.5 segundos antes del primer capítulo para la vista general, 4 segundos para los demás) y los cambios de velocidad general (ej. 1.1× al inicio) se hacen aquí. Solo inserta silencios y cambia velocidad; nunca elimina ni reordena oraciones. Genera vomap.json; todos los tiempos posteriores se convierten a través de él, por lo que cambiar el ritmo no desplaza las escenas.
5. Subtítulos y línea de tiempo: timeline.py genera timeline.js. Subtítulos una pantalla por línea, ≤ 14 caracteres (letras latinas cuentan como 0.55 caracteres), cambio de pantalla solo entre palabras. Nombres de personas, instituciones, cantidades, títulos entre comillas se agregan a subtitles.protect y no se dividen.
6. Fotogramas clave: Primero hacer 3 fotogramas clave para que el usuario confirme el estilo, luego escribir el video completo.
7. Escribir escenas: En episode.js escribir PANELS, los tiempos de aparición de elementos se escriben como V(númeroDeOración, desplazamiento). Después de cada lote de escenas, generar una hoja de contacto (render.mjs --still … --sheet) para auto-verificar superposiciones.
8. Sonido: events.mjs lee los tiempos de efectos de sonido registrados en la página; usar audio.mjs build score.mjs --raw --out audio/sfx.wav de motion-showreel para sintetizar efectos de sonido; mix.py para mezclar.
9. Renderizar: build.sh realiza verificación determinista, renderizado fotograma a fotograma y verificación de la pieza final (un video de 13 minutos en 1080p tarda aproximadamente 10 minutos). Después del renderizado, revisar fotogramas para verificar que los mapas mentales, subtítulos y fotos no tengan superposiciones.

Requisitos que los usuarios han repetido (por defecto se hace así)

• Transiciones suaves: Todas las escenas están en un mismo tablero, la cámara se desliza a lo largo de una pista, las pegatinas de los personajes se mueven como actors con la cámara hacia la siguiente escena, sin cortar y empezar de nuevo.
• Mapa mental de capítulo: En los límites de los capítulos, la locución hace una pausa, el tablero se oscurece, se dibujan las conexiones, los nodos se vuelven naranjas y aparece un marco de escaneo; los ya completados tienen una marca de verificación. La primera aparición es una 'vista general': las ramas aparecen una a una, luego se ilumina el primer capítulo, y solo después aparecen los siguientes contenidos de la escena.
• Barra de progreso debajo de los subtítulos, cada segmento entre capítulos muestra el nombre del capítulo.
• Usar muchos íconos e imágenes: Las etiquetas y tarjetas tienen íconos de línea; los lugares e instituciones usan pegatinas de fotos. Las fotos ilustrativas se marcan con 'ilustrativo'.
• Los elementos no deben tapar los subtítulos ni el título del capítulo en la esquina superior izquierda: La parte inferior de la pantalla (aproximadamente 200 px) se reserva para subtítulos; la esquina superior izquierda (aproximadamente x < 700, y < 120) para el título. No colocar texto grande en estas dos áreas.
• Los efectos de sonido no deben tapar la locución ni la música. Los mapas mentales usan sonidos suaves de marimba de 'panel' (cada rama en la vista general con una nota de la escala pentatónica), y al iluminarse se escucha un solo clic. No usar efectos 'tecnológicos' como riser o glitch.
• Música: La última pista debe tener un final natural, de modo que termine exactamente en el final del video; el inicio fadea en alguna pausa de capítulo. En las pausas de capítulo, la música baja 6 dB.
• Volumen: Usar solo ganancia lineal. Por defecto: voz −15 LUFS, música −26 LUFS (voz ~11 dB más alta que la música), efectos de sonido ~12 dB más bajos que la voz, limitador de pico −1.5 dBFS, para que el video pase la verificación de sonoridad de −14 ± 1.5. Si el usuario dice 'baja la voz / sube el bgm', cambiar levels y music.lufs en dB; si el resultado final no alcanza el estándar, informar al usuario que es esperable (el video de ejemplo estaba a −19.3 / −30 por solicitud del autor).

Hechos, derechos de autor y seguridad

• Para contenido noticioso, los eventos suelen ocurrir después del límite de conocimiento del modelo: verificar en línea y escribir las fuentes en los créditos finales. Si no se encuentra el texto original, incluir los números en la lista de 'pendiente de verificar' del brief y entregarla al usuario.
• Las acusaciones no verificadas se marcan visualmente ('bajo investigación', 'negado por la entidad', 'ilustrativo'). Asociación no es evidencia. No colocar etiquetas como 'espía' junto a la foto de nadie.
• Las fotos solo se usan de dominio público o con licencia CC; la información de la licencia se registra en assets/credits.json y se incluye en los créditos finales. Las pistas de música de Pixabay etc. se pueden usar en el video final, pero no se puede redistribuir el archivo de la pista por separado.
• Disco: El renderizado, los archivos de audio intermedios y el video final ocupan aproximadamente 1 GB. Verificar espacio primero; si no hay suficiente, eliminar solo los archivos intermedios que se puedan reconstruir. Antes de eliminar archivos del usuario o modelos descargados, preguntar.

Archivos

sticker-explainer-video/
├── SKILL.md
├── scripts/
│   ├── new_project.sh       Crear proyecto (motion-showreel scaffold + esta plantilla)
│   ├── cfg.py               Funciones comunes (leer video.config.json, ffmpeg, sonoridad, detección de pausas)
│   ├── splice.py            Unir múltiples audios de doblaje
│   ├── transcribe.py        Transcripción dos pasos con whisper.cpp → texto de oraciones + marcas de tiempo + pausas
│   ├── align.py             Alinear → timeline/sentences.json
│   ├── voedit.py            Pausas de capítulo, cambios de velocidad → audio/vo-edit.wav + vomap.json
│   ├── timeline.py          Mapeo de tiempo + división de subtítulos → timeline.js
│   ├── events.mjs           Leer tiempos de efectos de sonido desde la página
│   ├── mix.py               Voz + música + efectos → audio/final.wav
│   └── cutout.swift         Recorte de retrato Apple Vision (macOS)
├── assets/template/         index.html, engine.js, episode.js (escenas de ejemplo), score.mjs, video.config.json, fonts
├── references/
│   ├── workflow.md          Comandos de cada paso y puntos de control
│   ├── engine-api.md        Funciones de dibujo de engine.js y parámetros de start()
│   └── style.md             Reglas de color, tipografía, transiciones y sonido
└── examples/huang-resignation/    Ejemplo completo (código, configuración, línea de tiempo, fotos, doblaje)