vox-style-animation

Animación estilo Vox

Crearás videos explicativos cortos con el aspecto de collage editorial: fondos de papel, tarjetas fotográficas con tinte, bordes y sombras, un resaltador amarillo sobre la frase clave, círculos y flechas de bolígrafo rojo, mapas con pines, movimiento collage en "motion on twos" y cortes físicos, todo con sonido diseñado. El kit está en kit/, el renderizador en scripts/, y las reglas de oficio en references/.

La regla por encima de todas las reglas: la imagen debe llevar el argumento. La decoración sobre un punto débil sigue siendo un video débil. La segunda regla: debe verse hecho a mano, a propósito. Cada valor predeterminado en el kit añade una pequeña imperfección física o elimina una perfección digital.

Antes de construir: lee esto

1. references/LOOK_BOOK.md: qué lo hace verse profesional, con números medidos y los 18 errores de aficionado. Léelo siempre.
2. references/SCRIPT.md: pregunta → archivo → guion → lista de tomas. Léelo cuando estés escribiendo o cronometrando.
3. references/API.md: cada llamada del kit. Léelo antes de escribir la página.
4. references/TIPS.md: consejos de videos terminados (imagen, tiempo, sonido, verdad, entrega) y un ejemplo de desmentido de 10–12 s, toma por toma. Léelo antes de un gancho corto o un desmentido.
5. references/SOUND.md (foley grabado, la mezcla documental, narración), references/ASSETS.md (¡licencias!), references/QA.md según sea necesario.

Flujo de trabajo

1. Pregunta y guion. Una pregunta respondible y sorprendente con algo que mostrar. Gancho → contexto → giro → prueba → remate (un desmentido de 10 s: afirmación → "en realidad no" → datos → concesión → remate, SCRIPT.md §7). Alrededor de 215 ppm cuando habla un creador; aproximadamente 150–165 ppm para un narrador documental, con una dirección en cada línea. Cita cada hecho en SOURCES.md, y nunca inventes números, citas o documentos; omite las afirmaciones que los datos no respalden.
2. Archivo primero. Encuentra las imágenes y grabaciones reales antes de terminar el guion: NASA, la Biblioteca del Congreso, Smithsonian Open Access, Wikimedia, Pexels (verifica cada licencia; revisa cada clip en busca de marcas de agua y texto incrustado). Las grabaciones dentro de las tarjetas se leen como documental; las imágenes fijas solas se leen como una presentación de diapositivas. Registra el archivo, la URL, la licencia y el crédito. Nunca subas archivos de Texturelabs ni fuentes comerciales. Sin logotipos ni material de Vox. Nunca dejes que el modelo adivine las imágenes (--query noimg muestra lo mal que se ve eso).
3. Lista de tomas. Una fila por frase hablada, con tiempos de una transcripción palabra por palabra de la voz en off: python3 $SKILL/scripts/words.py vo.wav --inject <page>, luego const w = V.wordmap("#words") en la página y las mismas palabras en la mezcla, para que una línea regrabada vuelva a cronometrar todo. Un movimiento principal por fila. Elige una idea visual recurrente para todo el video. Nombra el corte en cada cambio de escena (corte directo, curveCut, zoomCut, holePush, whip, paperWipe; nunca una disolución).
4. Construcción. Trabaja dentro de la carpeta de este skill (la que contiene este SKILL.md; llámala $SKILL, normalmente ~/.claude/skills/vox-style-animation). Ejecuta cd $SKILL && npm run new -- <nombre>; crea videos/<nombre>/index.html con todas las rutas configuradas. Para un proyecto en otro lugar, ejecuta node $SKILL/scripts/new.mjs <nombre> --dir <carpeta>. No copies páginas a mano: las rutas ../../kit solo funcionan dos niveles por debajo de la carpeta del skill. Pon las imágenes en videos/<nombre>/assets/ y regístralas en su SOURCES.md. Mantén los valores predeterminados a menos que haya una razón:
   • papel, no blanco; fotos con tinte; tarjetas ±1.5–3°, con bordes del 4% y sombras suaves;
   • onTwos: true (movimiento collage a 12 fps); el papel se mantiene quieto (drift: 0), pero los objetos respiran: breathe() en cada foto sostenida, float() 2–3 px en tarjetas y recortes, uno o dos scrap() fuera del encuadre, un ghost() del documento real detrás (LOOK_BOOK §10);
   • la afirmación legible en el primer fotograma; clips reales en tarjetas con footage();
   • empujes a +1–3 %/s en pausas, +4–6 %/s para énfasis;
   • anotaciones en sus palabras; tres voces tipográficas; 1–3 acentos, cada uno con un trabajo;
   • en 9:16, nada importante en el 12% superior ni en el 20% inferior (la interfaz de la plataforma lo cubre). examples/apollo/index.html muestra casi todos los helpers. Para mapas, usa node $SKILL/scripts/map.mjs …. Para pretratar una imagen fija o un clip, usa python3 $SKILL/scripts/photo_treat.py.
5. Verifica las imágenes fijas primero. Ejecuta node $SKILL/scripts/render.mjs videos/<nombre>/index.html --stills t1,t2,… en cada cambio de escena y anotación. Abre los PNGs y míralos. Revisa references/QA.md y soluciona cada problema. Si el renderizado se detiene con un error de página, el mensaje nombra el helper y el objetivo que falta.
6. Renderiza. Para borradores, node $SKILL/scripts/render.mjs videos/<nombre>/index.html --voice vo.wav [--music bed.mp3] --gif mezcla las señales sintetizadas del kit (música −22 dB y con ducking, tono de sala, −14 LUFS). Para una versión final, usa foley grabado: renderiza con --no-sfx, luego python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <page> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stems (narración como referencia, cada muestra ajustada por su pico y alineada al pico en su palabra; SOUND.md). Nunca masterices efectos por separado. Si el video se va a mostrar alguna vez en 4K, renderiza con --scale 2 (un master nativo de 3840×2160).
7. Verificación final. Extrae fotogramas del MP4 en las transiciones. Confirma la sonoridad con ffmpeg -i out.mp4 -af ebur128 -f null -. Luego informa lo que hiciste y sus fuentes y licencias.

Configuración (una vez por máquina)

npm install                      # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium  # el navegador del renderizador
# opcional, para regenerar texturas y sonidos: pip install numpy scipy pillow
# opcional, para words.py y doc_mix.py: pip install faster-whisper numpy
# opcional, para el speed-up que preserva la voz de narration.py: un ffmpeg con rubberband (macOS: brew install ffmpeg-full)

Necesitas Node 18+ y ffmpeg 4.4+ en el PATH. El kit es JavaScript plano de navegador; no hay paso de compilación. Para la vista previa en el navegador, ejecuta npm run preview, déjalo corriendo, y abre http://localhost:8080/videos/<nombre>/.

No negociables

• Solo hechos reales, con fuentes. Una tarjeta de "hoja de datos" mecanografiada está bien. Una carta, recibo o titular falsificado presentado como real no lo está.
• Se conoce la licencia de cada imagen. El material prestado lleva un letrero en pantalla ("Archivo · NASA"), o un crédito en un pie de foto donde el canal prohíbe los letreros en pantalla.
• No uses el logotipo o material de Vox. "Estilo Vox" describe un aspecto; el logotipo implica respaldo. Si el usuario quiere la palabra "Vox" en pantalla como señal de estilo (muchos reels estilo Vox lo hacen), colócala en una serifa gratuita incluida, mantén una etiqueta "Estilo Vox" en algún lugar, e infórmales del riesgo de marca registrada; es su decisión.
• Verifica las fronteras en disputa en los mapas.
• Mantén el texto fuera de las imágenes generadas por IA; añade todo el texto en la página.
• Mapas de la India (y otras áreas en disputa): las fronteras de Natural Earth son de facto, no oficiales. Consulta ASSETS.md antes de publicar.

No afiliado, respaldado o conectado con Vox Media. "Vox" es una marca registrada de Vox Media, LLC.

Cuando el video del usuario "se ve de baja calidad"

Toma fotogramas fijos y recorre los 18 errores de aficionado en LOOK_BOOK.md. Las soluciones habituales, en orden de impacto:

1. Fondo de papel y tinte de foto.
2. Movimiento en "motion on twos", con una cosa moviéndose a la vez.
3. Anotaciones sincronizadas con las palabras.
4. Rotación, borde y sombra de tarjeta.
5. Objetos completamente quietos entre entrada y salida: añade breathe, float, un scrap.
6. Sonido: foley grabado en acciones clave, alineado al pico, debajo de la voz; música 18–24 dB por debajo de la voz.
7. Reemplaza disoluciones con cortes.