motion-video

Vídeo de gráficos animados desde un guion

Flujo de trabajo general para vídeos de gráficos animados (texto animado, gráficos, capturas de pantalla, grabaciones web en vivo, iconos, mapas) renderizados desde HTML. La marca, el tono, los colores, el jingle y la música de un proyecto residen en el perfil del proyecto VIDEO.md, no aquí. Guiones y plantillas: repositorio C:\Mydrive\Claude Projects\motion-video\ (scripts/, templates/).

Idioma: habla con Petr en checo. Todos los archivos que creemos (código, comentarios, documentación, perfiles, README) están en inglés (inglés sencillo, frases cortas). El texto que aparece en el vídeo (títulos, subtítulos) está en el idioma del vídeo indicado en la configuración, normalmente checo. El storyboard y la interfaz del reproductor se pueden localizar con labels en storyboard.json.

0. Perfil del proyecto

• Primero, busca y lee el perfil del proyecto: VIDEO.md o brand/video-profil.md en la carpeta del proyecto, o su copia de texto en el proyecto de claude.ai (claude/video-profil.md).
• El perfil anula los valores predeterminados de esta habilidad (colores, fuente, logotipo, jingle, música, tono, audiencia, redacción, hashtags, zonas seguras, ubicaciones de ejemplo).
• Sin perfil: pregunta sobre la marca y la audiencia y crea uno a partir de templates/VIDEO.md.

1. Configuración (fuente única de verdad)

Un bloque fijo al inicio del guion. La duración de las escenas se deriva de él.

Elemento	Ejemplo
Tema	MultiModel en Meteoblue
Preajuste	reel / vídeo / feed 4:5 / cuadrado
Formato y resolución de diseño	9:16 1080×1920 / 16:9 1920×1080 / 4:5 1080×1350 / 1:1 1080×1080
Renderizado final	1080p, o 4K (--scale 2 para 16:9)
Duración	60–75 s / 8 min / …
Idioma del vídeo	cs
Locución	no / grabación propia (sincronización de palabras)
Subtítulos	incrustados / palabra por palabra / SRT
Jingle, música	del perfil (archivo + licencia)
Efectos de sonido	sí / no
Grabaciones web en vivo	no / sí (qué sitios y pasos)

Preajustes de formato

Preajuste	Formato	Duración	El contenido se adapta
reel / short	9:16, 1080×1920	hasta 3 min (Reels, Shorts); verificar FB Reels (a menudo se cita 90 s)	una idea, subtítulos grandes incrustados, contenido dentro de la zona segura (interfaz de la app arriba y abajo), ritmo rápido
vídeo	16:9, diseño 1920×1080, renderizado hasta 4K	cualquier	capítulos (guion y storyboard por capítulo, marcas de tiempo en la descripción de YouTube: primer 0:00, al menos 3 capítulos), probablemente locución, más espacio para detalles, ritmo más pausado
feed 4:5	4:5, 1080×1350	~1–2 min	Publicación de feed de Instagram (y LinkedIn), más alta que cuadrada
cuadrado	1:1, 1080×1080	~1 min	Publicación de feed (FB, IG), subtítulos en el centro

"Reel" es solo un preajuste: cuando Petr dice "reel", se aplican la duración, el formato y el ritmo de reel.

2. Flujo de trabajo: guion → storyboard → aprobación → renderizado

La salida es siempre un par guion + storyboard, mantenidos sincronizados después de cada cambio. Renderizado final solo bajo petición explícita ("vygeneruj video"). Hasta entonces, solo guion, storyboard y una previsualización de baja resolución.

1. Esquema en el chat: una lista numerada breve de secciones (capítulos para un vídeo). Mantenlo breve.
2. Desarrollar sección por sección: tiempo, encabezado, subtítulos exactamente como en pantalla, imagen, qué aprendemos, movimiento y transición, sonido. Para preguntas sobre redacción, ofrece 3–4 opciones cortas y recomienda una. Solo corrige la redacción del usuario en cuanto a gramática y di qué cambió.
3. Guion en <proyecto>/<salida>/scenar.md y la misma copia en el proyecto de claude.ai. Encabezado = configuración + último renderizado + enlace al storyboard + estado.
4. Storyboard = artefacto HTML (un enlace, siempre republicar en el mismo artefacto):
   • proyecto/video.html con escenas y seek(t) (ver Técnica), incluso antes de cualquier renderizado,
   • proyecto/storyboard.json: secciones con name, time, learn, motion, sound, items, changed (insignia CHANGED solo para cambios desde la última versión), 1–6 fotogramas [time, caption] en los momentos más concurridos, labels y lang opcionales para el idioma de la interfaz,
   • scripts/storyboard.py proyecto/video.html proyecto/storyboard.json sb/,
   • scripts/player.py proyecto/video.html sb/ --chapters proyecto/storyboard.json [--audio mix.mp3]: una previsualización reproducible en la parte superior del storyboard, con una línea de tiempo de capítulos (como YouTube) y comentarios: Botón Comentar → haz clic en un elemento → se copia una nota con la hora, el capítulo y el elemento en el chat. El audio debe ser MP3 (el artefacto no sirve .m4a),
   • scripts/check.py proyecto/video.html (ver Verificaciones); corrige o informa los hallazgos,
   • publicar con publish_files (modo replace) incluyendo capturas de pantalla, clips y MP3; pon el enlace en el guion,
   • termina con: "Storyboard je aktualizovaný. Napiš ‚vygeneruj video', nebo co změnit."
5. Después de cada comentario: actualizar video.html → storyboard.json → storyboard + reproductor → republicar → actualizar el guion en ambas copias. Responde brevemente con lo que cambió.
6. Renderizar solo a petición, en la resolución de configuración. Cambiar una escena = re-renderizar solo esa escena. Nombre de salida sin diacríticos, con versión (reel1_multimodel_v5.mp4); anótalo en el guion.
7. Después de que el vídeo sea aprobado, pregunta si generar textos de publicación y miniaturas (ver Publicación).

3. Contenido y ritmo

• Una salida = una idea principal; en un vídeo largo, una idea por capítulo.
• Densidad: aproximadamente 4–6 puntos de aprendizaje y 12–18 cambios visuales por minuto; sin silencio mayor a ~3 s, pero tiempo suficiente para leer un subtítulo (aproximadamente 2–3 palabras por segundo).
• Muestra, no enumeres: gráfico, comparación, causa y efecto, los pasos reales en un sitio web.
• Verifica las afirmaciones sobre sitios web, aplicaciones y funciones en el sitio en vivo, no de memoria. No inventes estadísticas.
• Datos ilustrativos: anótalos en el guion; si etiquetarlos en pantalla lo decide el perfil (formatos cortos: la menor cantidad posible de ruido visual).
• Transiciones: fundido cruzado por defecto; cuando sea posible, conecta escenas (un gráfico se transforma en el siguiente, una tarjeta se expande en una escena).
• Marcas y logotipos reales solo auténticos y sin distorsión; nunca pongas un logotipo de terceros en datos ilustrativos.

4. Verificaciones

• scripts/check.py proyecto/video.html [--step 0.5] [--safe t,r,b,l]: texto fuera de la zona segura o del fotograma, texto desbordado, bajo contraste (WCAG), silencio mayor a 3 s. Zonas predeterminadas por formato (9:16, 4:5, 1:1, 16:9); el perfil puede anularlas.
• scripts/keys.py proyecto/video.html out t1 t2 …: fotogramas en momentos dados + hoja de contactos; míralos.
• Después del renderizado: algunos fotogramas del MP4 (ffmpeg -ss t -frames:v 1), duración, sonoridad.

5. Audio

• Jingle y música del perfil; escribe la licencia (autor, título, ID, fuente) en el guion.
• scripts/mix_audio.py out/video_only.mp4 music.mp3 jingle.mp3 output.mp4 [--music-start s] [--jingle-len s] [--voice f] [--voice-start s] [--sfx f] [--target -14] (sin jingle o sin música: - en lugar del archivo): la música se atenúa bajo el jingle, luego sube, se atenúa automáticamente bajo la locución, se desvanece al final; loudnorm de dos pasos a −14 LUFS y pico verdadero −1.5 dBTP; el vídeo no se recodifica.
• Saltar una introducción silenciosa de la pista (RMS por segundo) para que no haya una caída después del jingle.
• Efectos de sonido que se ajusten al contenido, solo en cambios importantes y mucho más suaves que la música: scripts/sfx.py cues.json sfx.wav --dur <duración> genera en código: whoosh (transición de escena), click (fotograma), pop (aparición de tarjeta), tick (etiqueta), swell (resalte), riser (crescendo), thud (veredicto). Toma los tiempos (cues.json) de la línea de tiempo T y el campo "sound" en el storyboard. No se almacenan archivos de audio; los efectos son código. Opcional en Claude Code: earshot (MCP; 252 sonidos como código, escucha y comprobaciones de sincronización), si Petr lo instala (~1.1 GB de modelos).
• Locución con sincronización de palabras: scripts/align_voice.py voiceover.wav proyecto/ [--text script.txt] (Whisper, checo) crea vo.json, vo.js y vo.srt. En video.html carga <script src="vo.js"> y temporiza los gráficos con las palabras: voAt('palabra') devuelve el tiempo de una palabra; subtítulos palabra por palabra con wordCaption(el, t) (bueno para 9:16, 4:5, 1:1). La grabación es el reloj maestro: toma la duración y los tiempos de escena de ella, nunca estires nada. La precisión de Whisper es de aproximadamente una décima de segundo; verifica escuchando. --text compara el texto real con lo escuchado.
• La música de archivo puede activar Content ID; presenta una Disputa con la licencia, no "Escalar a apelación".

6. Técnica

1. Página proyecto/video.html (comenzar desde templates/start.html): window.FORMAT={w,h} (resolución de diseño), escenas como <div class="scene">, línea de tiempo T={s1:[0,3.5],…}, seek(t) determinista (sin animaciones CSS, temporizadores o Math.random(); aleatorio con semilla), al final window.seek=seek; window.T=T;. Fuente local mediante npm i @fontsource/<fuente> (el reproductor cambia a Google Fonts). Pon logotipos en línea como SVG.
2. Grabaciones web en vivo (en lugar de capturas de pantalla estáticas, cuando el recorrido por un sitio importa): scripts/record_web.py steps.json out/ [--width 1280 --height 800 --scale 2]: Playwright recorre el sitio según los pasos (click, type, hover, spot = fotograma con entorno atenuado, zoom/unzoom, scroll, wait, mark) con un cursor deslizante y una ondulación al hacer clic; salida web.mp4 + marks.json con los tiempos de los pasos. Ejecutar en el PC de Petr (Claude Code); el sandbox en la nube no puede acceder a sitios web normales. Rechazar banners de cookies. En video.html añadir <video src="web.mp4" muted preload="auto"> y moverlo con vseek(video, time) (plantilla); el renderizado, las comprobaciones y el storyboard esperan hasta que el seek termine.
3. Capturas de pantalla de sitios web con Claude en Chrome: document.documentElement.style.transform='scale(2)' (origen 0 0), alejar el cursor, save_to_disk; luego hacer zoom y encuadrar en el vídeo.
4. Renderizado scripts/render.py proyecto/video.html out/ [--scale S] [--only s3 s6] [--workers 4]: un MP4 por escena en paralelo, CRF 18, concat -c copy. Previsualización --scale 0.5, 4K desde 1920×1080 --scale 2.
5. Audio scripts/mix_audio.py (ver arriba).

Requiere: Python con playwright, pillow, numpy, Chrome/Chromium, ffmpeg, Node (fuentes); para locución faster-whisper.

7. Publicación (después de la aprobación y el consentimiento)

• Textos para redes sociales desde el perfil (Instagram, Facebook, YouTube): IG 3–5 líneas cortas + una pregunta al final; FB subir por separado (no compartir desde IG), texto más corto; título de YouTube hasta ~60 caracteres con palabras clave primero, descripción (qué, dónde, regla principal, vídeo relacionado, música), marcas de tiempo de capítulos para vídeos largos. Hashtags solo del conjunto del perfil. Guardar en el guion (sección "Texty k publikaci").
• Subtítulos de YouTube: subir vo.srt (cuando haya locución).
• Miniaturas: reel 1080×1920 + 1280×720, vídeo 1280×720 (YouTube); texto grande, motivo principal, estilo del perfil. Es posible que YouTube no permita una miniatura personalizada para Shorts.