TaherZiad/montage-crew

Bang Motion — motion graphic web que no es PPT

v1.19.0 · por Bang Tutorial · MIT. Historial de cambios en CHANGELOG.md; cómo instalar en README.md.

Este skill es para cualquier agente de codificación de IA (formato Agent Skills abierto). Contiene reglas y recetas para motion graphics que se mueven como video, no como presentaciones — debe cumplirse antes de escribir código.

Prerrequisitos — solo navegador

El entregable (index.html) solo necesita un navegador moderno + conexión a Internet para CDN (GSAP, fuentes). Python y Node son opcionales, solo se usan como herramientas de trabajo: scripts/serve.py (servidor sin caché, solo necesario con módulos locales), Puppeteer (instantáneas/verificación automática, scripts/export-frames.mjs → MP4). Si el usuario no tiene ninguno: (1) sigue creando un solo archivo, ábrelo con doble clic; (2) verificación visual mediante ?debug=1 (panel de avance) y capturas de pantalla manuales en segundos clave; (3) MP4 mediante grabación de pantalla (OBS / grabación de pestaña del navegador) — explica que la grabación de pantalla puede perder fotogramas, y el renderizado fotograma a fotograma necesita Node. Nunca crees un entregable que requiera npm install para ser VISTO.

ffmpeg también es opcional. Verifica primero (ffmpeg -version); si no está:

Necesidad	Con ffmpeg	Sin ffmpeg
Sincronización de VO (límite de oraciones/párrafos)	silencedetect	scripts/vo-pauses.html — ábrelo en el navegador, selecciona el audio, copia SEG/PARA; el resultado es idéntico (Web Audio, sin instalación)
Duración/formato de audio	ffprobe	número DUR de vo-pauses.html; el navegador reproduce wav/mp3/m4a/ogg directamente
Exportar MP4	combina PNG de export-frames.mjs	no hay MP4 — ofrece instalar con un comando (winget install Gyan.FFmpeg / brew install ffmpeg) o grabar pantalla
Aprender de video de referencia (extraer fotogramas)	fps= + tile=	pide al usuario que envíe capturas de pantalla en segundos clave, o abre el video en el navegador y captura en momentos específicos

Sin ffmpeg, el flujo de trabajo del explicativo sigue completo hasta la sincronización de VO; solo el MP4 requiere instalación.

Reproductor — ninguno, reproducción automática, bucle

Entregable predeterminado: sin panel/reproductor en pantalla, se reproduce directamente al abrirlo y se repite desde el principio al finalizar (onComplete → play(0); si hay sonido, el audio también se repite). Controles ocultos: R reinicia, Space pausa. El panel de avance/reloj solo aparece con ?debug=1 (herramienta de revisión), y ?clean=1 detiene la reproducción automática para exportación. ¿Hay sonido? Intenta play() directamente; si el navegador lo bloquea, mantén el fotograma 0 e inicia al primer clic — sin texto "toca para comenzar". Esto ya está integrado en ambos iniciadores.

Prohibiciones estructurales — prueba de PPT que se puede verificar mecánicamente

Otros modelos (y tú, cuando estés cansado) caerán en estos patrones aunque hayan leído las reglas a continuación. Antes de entregar, verifica el CÓDIGO, no las sensaciones:

1. grep -c "class=\"scene\"\|<section" index.html — si hay ≥ 3 escenas como <section> que se encienden/apagan con autoAlpha/opacidad → es una presentación de diapositivas. Las escenas deben cambiar porque el MUNDO/CÁMARA se mueve (la cámara se mueve, giro a otra esquina, empuje, cambio de fondo), no porque la sección se desvanece. Excepción válida: dibujos animados de teatro (references/kartun-panggung.md) usa corte/desplazamiento de 96 px entre escenarios — está bien, porque cada escenario está vivo (≥10 objetos en acción), no imágenes fijas que se desvanecen.

2. Hay un hilo conductor visual que perdura: un sujeto (acción continua) O un mundo de collage/papel/blanco que la cámara recorre (dibujos animados, fotos, catálogo, bocetos). Fotos a toda página que cambian sin un mundo compartido → PPT. Una imagen + una oración por escena, cambiando cada escena → sigue siendo presentación aunque la cámara se mueva: cada escena 3–5 elementos que entran gradualmente por frase (explainer.md "Una escena = 3–5 elementos").

3. Por escena, cuenta los nodos de texto: encabezado/kicker + título + cuerpo/crédito = 3 niveles → PPT. Máximo dos: un número/oración grande + una etiqueta del mundo. Documentos/sellos/bloques de fecha con ≤ 3 líneas cortas se cuentan como objetos, no como niveles de texto.

4. Ken Burns (escala 1.0→1.05 en una foto) como único movimiento → PPT. El movimiento en cada segundo debe provenir del LENGUAJE DE MOVIMIENTO DE FONDO elegido en el brief de estilo del menú techniques.md §7c (cámara que respira en un fondo texturizado, gradiente que se desplaza, burbujas flotantes, grano vivo, barrido de luz por segmento, formas grandes que giran lentamente, partículas que suben, cuadrícula que respira, texto fantasma que se desliza, Ken Burns + paralaje…). Barras/líneas/ fragmentos que se mueven lateralmente ("carril", "rango", "raya", lluvia de partículas horizontal) YA SE USARON en dos proyectos consecutivos con nombres diferentes — eso no es un valor predeterminado; solo si el tema es velocidad/flujo, y no debe usarse en dos proyectos consecutivos.

5. Transiciones solo fundido + aumento de escala + fuga de luz en todos los cortes → plantilla PPT. Giro a otra esquina, corte a instrumento (mapa/speedometer/perfil), empuje.

6. El explicativo comienza desde un iniciador de su ESTILO: starter-explainer-kartun, -jurnalisme, -katalog, -sketsa (modo collage: la cámara recorre activos estáticos), starter-explainer (acción continua: el mundo fluye), o starter-explainer-panggung (dibujos animados de teatro: un escenario por escena, rig de articulaciones, cámara solo dentro del escenario). El de collage usa un rig; el de teatro usa otro. NO desde assets/starter-opener.html (opener de texto), ni desde cero.

7. Miniatura es diapositiva. Zoom de cámara < 1,08, haciendo que una casa sea del tamaño de un pulgar y el suelo vacío ocupe la mitad de la pantalla → PPT aunque todo se mueva. El mundo se divide en escenarios del tamaño del fotograma, no un mapa grande que se explora (kartun-panggung.md Regla 1).

8. Estructura de plantilla (opener/promo). Verifica el esquema y el código: la primera escena es texto que se agranda y luego sale hacia la izquierda; tres mosaicos/tarjetas de características alineadas; cuadro de entrada/barra de búsqueda que se escribe; secuencia gancho → característica → característica → promesa → logo → CTA. Dos o más sin demanda de concepto → plantilla, aunque la apariencia sea nueva. Vuelve a elegir la estructura de references/opener-konsep.md.

Falla en un solo punto → reelabora antes de mostrárselo al usuario.

Tipos de trabajo cubiertos

Este skill es para motion graphics web en GENERAL. El explicativo es solo un tipo — tiene su propio documento porque su estructura es diferente, no porque sea el principal.

Los iniciadores se nombran según su categoría: starter-opener.html para openers, promos, bumpers, intros y tipografía cinética; starter-explainer-*.html para explicativos, con un sufijo de modo/estilo (-kartun, -jurnalisme, -katalog, -sketsa = collage; sin sufijo = acción continua; -panggung = dibujos animados de teatro). El dibujo animado de teatro es un modo de explicativo (estilo 6), no una categoría propia: su objetivo sigue siendo explicar con VO, lo único que cambia es el método de producción.

Tipo	Duración típica	Característica	Receta
Opener / promo de producto	25–40 s	un concepto del menú (la estructura nace del producto, no de una secuencia estándar), un momento especial, cierre de marca	references/opener-konsep.md + flujo de trabajo a continuación + references/techniques.md
Bumper / ident / sting de logo	3–8 s	construcción del logo, un movimiento característico, termina antes de que el espectador se dé cuenta	techniques.md (construcción de logo, fuga de luz)
Intro / outro de canal	5–12 s	nombre del canal + movimiento característico que se repite en cada episodio	flujo de trabajo a continuación
Tipografía cinética / letra de canción	15–60 s	el texto es el sujeto; división por palabra/letra; ritmo que sigue al audio	techniques.md (división + desenfoque direccional, panorámica 3D por palabra)
Título / tercio inferior / bumper de segmento	2–6 s	elemento pequeño sobre el metraje, entra y sale limpio, fondo transparente	techniques.md
Explainer / video explicativo	30–90 s	hechos con fuente, entidades visibles, cambio de perspectiva, cinco estilos	references/explainer.md + iniciador por estilo

Explainer y personajes: lee antes de definir el plano

Para explicativos de dibujos animados educativos planos con personajes (sexto estilo, dibujos animados de teatro), o revisiones que parecen presentaciones/miniaturas, lee references/kartun-panggung.md: un escenario por escena, zoom 1,08–1,95, continuo dentro del escenario y corte/desplazamiento de 96 px entre ellos, rig de articulaciones con transformación manual, sin subtítulos, paleta plana brillante. Diferencia oraciones, ritmo visual, encuadre y cambio de escenario. Para construirlo directamente en After Effects, lee references/ae-bridge-higgsfield.md. Las pautas específicas de explicativos aclaran las reglas del opener a continuación; los ejemplos de fuentes, número de escenas y efectos no son recetas universales.

Regla #1 — Esto es video, no diapositiva

La enfermedad más común: el modelo organiza las escenas como diapositivas — título + subtítulo

• cuerpo del texto + fila de insignias. Eso se lee inmediatamente como "PPT" y será rechazado.

Las reglas estrictas:

• Para opener: una oración corta + máximo un objeto principal por escena. No hay kicker ("01 — CARACTERÍSTICA"), subtítulo, párrafo de descripción, chip/insignia de característica, o metadatos técnicos (nombre del paquete, URL larga). Los chips, botones y etiquetas que son parte de la interfaz de usuario del producto que se está usando no cuentan.
• Información nueva = respuesta visual nueva. En un explicativo, cambia el estado/acción en el mismo mundo si aún está relacionado; el cambio de oración no obliga a cambiar el plano.
• Lista de puntos se reemplaza con imágenes, no automáticamente tres mosaicos. Elige una forma del menú de características en references/opener-konsep.md (una característica demostrada, palabra que cambia, objeto que se transforma, tarjeta que se baraja, cuadrícula de mosaicos…); dos openers consecutivos no usan la misma forma.
• Las escenas deben estar vivas. La cámara puede quedarse quieta mientras los objetos realizan la acción. Mueve la cámara para seguir o revelar algo; no confíes en texto que se desvanece/desliza sobre un fondo estático, o en paneo/zoom repetitivo en todos los segmentos.
• "Zoom in-out" = tamaño de plano, no respiración de cámara. Si el video se siente estático o el usuario pide zoom, la cámara se acerca al elemento que está contando la historia (primer plano medio / primer plano) y luego se aleja a un plano general siguiendo el ritmo del contenido; la respiración de unos pocos por ciento es casi invisible (techniques.md §3b).

Lee references/anti-ppt.md ANTES de diseñar escenas — contiene una lista de infracciones reales con sus correcciones.

Regla #2 — Determinista o muerto

No hay ni una sola línea que lea la hora del sistema. Todos los visuales son funciones puras de tl.time() (tiempo de la línea de tiempo de GSAP): espectros, números en movimiento, partículas, vibración de cámara (seno de alta frecuencia, no Math.random()), posición de objetos que "fluyen" (interpolación de DISTANCIA, no acumulación de velocidad por fotograma). Consecuencias: el avance es preciso como una línea de tiempo de After Effects, y el renderizado fotograma a fotograma a MP4 produce imágenes idénticas cada vez.

Regla #3 — El estilo nace del tema, no del iniciador, no de la referencia

Un fracaso común: un opener para un producto diferente sale con la apariencia EXACTA del opener del producto anterior — oscuro, acento azul, resplandor, nebulosa, la misma fuente — porque el modelo tomó el estilo del iniciador. La animación puede ser buena, pero sigue siendo un fracaso: el opener es la cara del producto, y dos productos no pueden tener la misma cara.

1. Primero el brief de estilo, luego el código. Antes de tocar el iniciador, escribe estas seis líneas y muéstraselas al usuario junto con el esquema de escena:
   • tema/producto + tres adjetivos de la sensación que se quiere dejar;
   • concepto y huella estructural (opener/promo): tres candidatos de concepto de references/opener-konsep.md, uno elegido con una razón del producto, luego concepto · número de escenas · objeto principal de cada escena · apertura · cierre;
   • paleta: un color principal DE la marca/tema (logo, icono de aplicación, sitio, empaque), un color de fondo, un acento — menciona el hex Y la fuente de cada color; los colores que no son de la marca se escriben "derivado: razón";
   • fuente display que tenga carácter según esa sensación (no Poppins/Inter/Roboto/Montserrat/Arial) + fuente complementaria; excepción: concepto afirmación → forma → resultado usando la fuente de interfaz de usuario del producto (references/opener-konsep.md);
   • énfasis del texto: sin resaltado de palabras, o una forma de resaltado (menciónala) — el resaltado de palabras es OPCIONAL, no estándar en cada opener;
   • lenguaje de fondo por segmento: una dirección de la tabla "Dirección de estilo" para todos, o plan de cambio (qué segmento cambia, a qué, por qué, qué lo desencadena);
   • movimiento característico: un tipo de movimiento que se repite como identidad (barrido de objetos, giro 3D por palabra, papel volador, líneas que dibujan, bloques de color que chocan contra el borde…);
   • movimiento de fondo: un lenguaje del menú techniques.md §7c — no es lo mismo que el movimiento característico, y no es automáticamente "objetos que cruzan";
   • superficie de fondo: del menú §7d (gradiente/luz/textura/gradiente granulado, ≥ 2 capas) — no plano;
   • estilo de renderizado de objetos: una familia del menú techniques.md §7e (plano, arcilla, brillante, vidrio, isométrico, realista, línea de neón…);
   • activos fotográficos (si el concepto usa fotos de personas/lugares/productos): su fuente — fotos del usuario, generadas a través de MCP Higgsfield, o stock con licencia — se PREGUNTA al usuario, más una lista de planos por acto (references/opener-konsep.md "Fotos en el opener");
   • transiciones: determina qué límites necesitan un efecto y cuáles son suficientes con un corte; elige del menú §4c según el contexto, no es obligatorio dos tipos ni obligatorio 3D;
   • un momento especial (donde se usa el efecto más caro, una vez).
2. El iniciador es arquitectura, no estilo. El color gris, las fuentes del sistema y el fondo WebGL en assets/starter-opener.html son MARCADORES DE POSICIÓN. Si alguno de ellos sigue siendo visible en el resultado, el estilo aún no se ha aplicado. El fondo WebGL (nebulosa, polvo, cuadrícula, floración) es solo un lenguaje de fondo de ocho; desactívalo si la dirección del estilo es otra.
3. Referencia = ritmo, no apariencia. Del video de referencia toma: duración por plano, tipo de transición, jerarquía de atención, energía, lenguaje de movimiento. NO TOMES: paleta, fuente, textura, diseño, forma decorativa, oraciones, secuencia de escenas y momentos únicos (apertura/cierre característicos, gimmick único). "Hazlo como esto" significa "tan enérgico como esto", no "copia el estilo visual".