carousel-mp4

Carrusel → MP4 animado

Esta skill reutiliza la skill instagram-carousel (debe estar instalada en ~/.claude/skills/instagram-carousel; llamada <ic> a continuación). El resultado final es un MP4, no los PNGs.

Flujo de trabajo

1. Haz el carrusel como siempre: sigue los pasos 1 a 4 de <ic>/SKILL.md (brief, arquetipo, sistema visual, guión y HTML). Se aplican todas las reglas: continuidad entre diapositivas, nuevas fuentes, paleta 2+1 y revisión de diseño.

   • Pregunta siempre la orientación antes de diseñar, incluso si la solicitud no la menciona (pregunta de opción múltiple):

     • Vertical: Reels/Historias 9:16 (1080×1920, --reels) o feed 4:5 (1080×1350, sin flag);
     • Horizontal: 16:9 (1920×1080, --landscape), para YouTube, un sitio web o pantallas.

     La orientación cambia toda la composición (cuadrícula, tamaños, zona segura), así que nunca la elijas por defecto. Horizontal solo funciona en modo gráficos animados.

   • Pregunta también el estilo: diapositivas (la coreografía automática: movimiento de cámara entre diapositivas) o gráficos animados (tipografía cinética y transiciones variadas, para que no parezca diapositivas). Si el usuario dice que el resultado "parece diapositivas" o pide algo más dinámico, usa gráficos animados. Ver references/motion.md.

   • Y el sonido: efectos integrados (por defecto), efectos de Openverse, música de Openverse, archivos del usuario, o sin sonido.

2. Lee <ic>/references/video.md: coreografía, control de la animación con data-anim/data-delay, sonido y comprobaciones.
3. Ajusta la coreografía en el HTML si es necesario. La animación es automática, pero data-anim y data-delay te permiten afinar los momentos clave.
4. Comprueba con fotogramas fijos antes del video completo (rápido):

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6
   

   Abre los JPEGs en <output>/carousel-stills/ y confirma que nada esté cortado, superpuesto o invisible al final de cada entrada.
5. Sonido (opcional, ver video.md › Sonido):
   • Openverse: node <ic>/scripts/sounds.mjs search "whoosh" --type=sfx. Muestra las opciones al usuario y, con su permiso, ejecuta node <ic>/scripts/sounds.mjs download <id> <output>/sounds/whoosh-1.mp3.
   • Los nombres de archivo determinan el uso: whoosh* (transiciones), pop* (stickers/píldoras), hit* (títulos). Usa varios por tipo (whoosh-1.mp3, whoosh-2.mp3…) para que las transiciones no suenen siempre igual; rotan sin repeticiones consecutivas. La música va por separado.
   • Sin archivos, los efectos integrados ya varían por sí solos (5 whooshes, 3 pops, 3 hits, con tono y duración aleatorios).
6. Renderiza el MP4:

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3]
   

   No necesita ffmpeg: usa Chrome (GSAP + WebCodecs). Aproximadamente 30–60 s para 20–30 s de video. Ejecútalo en segundo plano si es largo.
7. Entrega:
   • carousel.mp4 (H.264 + AAC, listo para Instagram/Reels)
   • caption.txt (descripción, hashtags, palabras clave)
   • una nota: duración, formato, sonidos usados (y de dónde vienen, de sounds/sound-sources.txt) y marcadores de posición aún por reemplazar

No entregues los PNGs a menos que el usuario los solicite. Si lo hace, usa render.mjs como en la skill base.