Generar animaciones de logotipos
Esta habilidad convierte una imagen de logotipo en animaciones de presentación de 5 segundos. Cada estilo es una escena de canvas que Chrome headless renderiza fotograma a fotograma. ffmpeg codifica los fotogramas y el sonido se sintetiza a partir de eventos que la escena reporta (aterrizajes, estallidos, parpadeos). No hay servicios de IA de imágenes, metraje de archivo ni muestras. Los últimos fotogramas de cada estilo son los píxeles propios del archivo del logotipo, por lo que la animación nunca "redibuja" la marca.
Requisitos: Node 22+, ffmpeg (libx264, libvpx-vp9, prores_ks) y Chrome o Chromium. Si Chrome no está en una ubicación estándar, establece CHROME_PATH.
Flujo de trabajo
1. Encontrar y examinar el logotipo
Localiza el archivo que el usuario quiere decir: comprueba el directorio de trabajo, ~/Downloads y ~/Desktop, o pregunta. Lee la imagen antes de renderizar. Observa si tiene un fondo transparente o plano, cuántas formas separadas tiene, si ya incluye una marca denominativa y sus colores. Esto decide qué estilos brillarán. Tenlo en cuenta cuando revises la vista previa.
2. Acordar el resumen, usando valores predeterminados en lugar de preguntas
Los valores predeterminados son los cinco estilos, 1920×1080 a 60 fps, fondo automático y MP4 más WebM transparente. Pregunta solo cuando la respuesta cambie la salida y no puedas inferirla. Por ejemplo, si el usuario quiere añadir un nombre pero no sabes la ortografía exacta ni dónde va la división de color.
| El usuario quiere | Opción |
|---|---|
| estilos específicos | --styles liquid,neon |
| Instagram / cuadrado, TikTok / Reels / vertical | --size square, --size vertical (o --size 1280x720) |
| un nombre de marca junto al símbolo | `--text "Pharm |
| página oscura o clara | --bg dark, --bg light, --bg "#0b1e2d" (neón siempre es oscuro) |
| archivos para Premiere / Final Cut | --prores (agrega un gran ProRes 4444 .mov con canal alfa) |
3. Vista previa primero (segundos, no minutos)
<skill>/scripts/animate.sh "<logotipo>" --preview --out "<directorio-salida>" [opciones]
Esto escribe <nombre>-5s-<estilo>-preview.png (10 fotogramas por estilo), más <nombre>-5s-overview.png cuando hay dos o más estilos, y un -info.json por estilo. Lee la vista general y comprueba:
- Recorte: un borde limpio, y sin color de fondo ni motas dentro del logotipo.
keyedBackgrounden info.json se establece cuando el fondo se extrajo por clave (no hay transparencia en el archivo). - Agrupación:
partses el número de formas separadas ytextPartsel número de letras que encontró. Las letras deben detectarse como texto para que el parpadeo de neón, las cuentas líquidas y las gotas de rebote las traten como una palabra. - Encuadre: nada está recortado y el tamaño se ve correcto.
Si algo falla, consulta "Solucionar problemas de análisis" más abajo. Muestra la vista general al usuario si quiere opinar antes del renderizado completo.
4. Renderizar
<skill>/scripts/animate.sh "<logotipo>" --styles <lista> --out "<directorio-salida>" [opciones]
Cada estilo tarda unos 60–70 s (las pasadas opaca y transparente más la codificación). Para cuatro o más estilos, ejecútalo en segundo plano. Las salidas por estilo van en la carpeta de salida:
<nombre>-5s-<estilo>.mp4 (con sonido), -alpha.webm, -alpha.mov (con --prores), -sfx.wav, -keyframes.png y -info.json.
5. Comprobar antes de entregar
- Lee cada
-keyframes.png. El último fotograma debe ser el logotipo limpio y completo. - Usa
ffprobepara confirmar 5.000 s de duración y el tamaño. Los picos de sonido se normalizan a −3 dB. - Envía los MP4 y la vista general al usuario (SendUserFile cuando esté disponible) y enumera cada archivo como un enlace. Menciona las versiones transparentes y qué hace cada estilo en una línea cada una.
6. Iterar
El tiempo vive en el objeto T de cada estilo en scripts/styles/<estilo>.mjs. Todo el resto de tiempos cuelga de ahí, y el sonido lo sigue automáticamente, así que cámbialo allí. Para un aspecto que los cinco estilos no puedan dar, o un logotipo cuyas formas deban hacer algo específico, escribe un nuevo estilo. Consulta references/custom-style.md.
Los estilos
Los detalles completos están en references/styles.md; léelo al elegir para un usuario o al explicar qué hace cada uno.
- liquid: una gota del color principal del logotipo cae sobre la página y se extiende hasta convertirse en la forma más grande. Las otras formas y letras se exprimen como cuentas. Mejor para logotipos redondeados y orgánicos.
- neon: sobre una página oscura, tubos brillantes trazan cada forma, el logotipo se ilumina con un destello y las letras parpadean como un letrero. Las formas muy oscuras se vuelven blancas.
- bounce: las formas grandes caen o ruedan y rebotan como plástico, seguidas de un estallido de confeti, luego las letras caen. Juguetón.
- lens: una lupa se desliza por una página vacía y el logotipo se ve solo a través de su cristal. Luego se aleja desde la forma principal. Adecuado para marcas de búsqueda, salud o conocimiento.
- rise: una línea fina del color de la marca se abre en una banda y las formas se elevan hacia ella. Tranquilo y corporativo, y funciona con todo.
Solucionar problemas de análisis
- Halos o fondo alrededor de un logotipo JPG: el fondo se extrae por clave según su color de borde. Si el logotipo toca el borde de la imagen, o está sobre un degradado o foto, recórtalo primero (exporta un PNG transparente) y vuelve a ejecutar.
- Los detalles blancos desaparecen (una forma blanca sobre fondo blanco): es la extracción por clave correcta. Usa un PNG transparente si esas partes blancas deben mostrarse.
- Las letras no se detectan como texto: necesitan 3+ letras separadas de altura similar en una fila al lado o debajo de la forma principal. Una escritura unida o una marca denominativa de una sola forma se trata como una parte, que aún se anima bien en ascenso y lente.
- Marca denominativa con la fuente incorrecta:
--fontdebe estar instalada en la máquina. Compruebafc-list, o busca en/System/Library/Fontsen macOS.
Crear un estilo personalizado
Cuando el usuario quiera algo específico, como "las píldoras deben caer en su lugar" o "la lupa debe escanear", lee references/custom-style.md. Cubre la API de estilos, los ayudantes del motor, la lista de eventos de sonido y las técnicas que hicieron que las animaciones de logotipos personalizadas anteriores funcionaran bien. Estas incluyen reconstruir la marca como formas vectoriales, verificar esa reconstrucción contra el PNG y pasar a los píxeles reales al final.