pvsaravanan/bang-motion

Bang Motion: gráficos en movimiento web que no son PPT

v1.19.0 · por Bang Tutorial · MIT. El historial de cambios está en el archivo CHANGELOG.md del repositorio original; las instrucciones de instalación están en el README.md. Esta copia es una traducción al español del skill original.

Este skill es para cualquier agente de codificación de IA (formato abierto de Agent Skills). Contiene las leyes y recetas para gráficos en movimiento que se mueven como video, no como una presentación. Síguelas antes de escribir código.

Prerrequisitos: solo un navegador

El entregable (index.html) solo necesita un navegador moderno más internet para las CDNs (GSAP, fuentes). Python y Node son opcionales y se usan solo para herramientas de trabajo: scripts/serve.py (servidor sin caché, necesario solo cuando se usan módulos locales), puppeteer (capturas/verificación automáticas, scripts/export-frames.mjs → MP4). Si el usuario no tiene ninguno: (1) aún así construye un solo archivo y ábrelo con doble clic; (2) verifica visualmente con ?debug=1 (panel de scrub) y capturas de pantalla manuales en segundos clave; (3) obtén MP4 mediante grabación de pantalla (OBS / grabación de pestaña del navegador), y explica que una grabación de pantalla puede perder fotogramas y que el renderizado fotograma a fotograma necesita Node. Nunca hagas un entregable que necesite npm install solo para ser VISTO.

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

Necesidad	Con ffmpeg	Sin ffmpeg
Sincronización de VO (límites de oraciones/párrafos)	silencedetect	scripts/vo-pauses.html: ábrelo en el navegador, selecciona el audio, copia SEG/PARA; mismo resultado (Web Audio, sin instalación)
Duración/formato de audio	ffprobe	el número DUR de vo-pauses.html; el navegador reproduce wav/mp3/m4a/ogg directamente
Exportación a MP4	combina los PNG de export-frames.mjs	sin MP4: ofrece un comando de instalación único (winget install Gyan.FFmpeg / brew install ffmpeg) o grabación de pantalla
Estudiar un 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 segundos específicos

Sin ffmpeg el flujo del explicador sigue siendo completo hasta la sincronización de VO; solo el MP4 necesita una instalación.

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

Entregable predeterminado: sin panel/reproductor en pantalla, se reproduce inmediatamente al abrirse y se reinicia desde el principio cuando termina (onComplete → play(0); si hay sonido, el audio también se repite). Controles ocultos: R reinicia, la barra espaciadora pausa. El panel de scrub/reloj aparece solo con ?debug=1 (una herramienta de revisión), y ?clean=1 mantiene la reproducción automática para exportación. ¿Sonido? Intenta play() de inmediato; si el navegador lo bloquea, mantén el fotograma 0 y comienza con el primer clic, sin texto de "toca para empezar". Esto ya está integrado en ambos starters.

Prohibiciones estructurales: comprobaciones de PPT que puedes ejecutar mecánicamente

Otros modelos (y tú, cuando estés cansado) caerán en estos patrones incluso después de leer las leyes a continuación. Antes de entregar, verifica el CÓDIGO, no tus sentimientos:

1. grep -c "class=\"scene\"\|<section" index.html: si hay ≥ 3 escenas hechas de elementos <section> que se activan/desactivan con autoAlpha/opacidad, eso es una presentación de diapositivas. Las escenas deben cambiar porque el MUNDO/CÁMARA se mueve (la cámara se mueve, se desplaza a otra esquina, empuja, el fondo cambia), no porque una sección se desvanezca. Excepción legítima: escenario de caricatura (references/cartoon-stage.md) usa un corte/deslizamiento de 96 px entre escenarios. Eso está permitido porque cada escenario está completamente vivo (≥10 objetos en acción), no una imagen fija que se desvanece.

2. Hay un hilo visual que persiste: un sujeto (acción continua) O un collage/mundo de papel/blanco sobre el que la cámara viaja (caricatura, foto, catálogo, boceto). Fotos que ocupan toda la pantalla intercambiándose sin un mundo compartido → PPT. Una imagen + una oración por escena, intercambiando cada escena → sigue siendo una presentación de diapositivas incluso si la cámara se mueve: cada escena tiene 3–5 elementos que entran gradualmente por frase (explainer.md "Una escena = 3–5 elementos").

3. Cuenta los nodos de texto por escena: ceja/remate + título + cuerpo/credits = 3 niveles → PPT. Máximo dos: un número/oración grande + una etiqueta de mundo. Un bloque de documento/sello/fecha con ≤ 3 líneas cortas cuenta como un objeto, no como un nivel de texto.

4. Ken Burns (escala 1.0→1.05 en una foto) como único movimiento → PPT. El movimiento cada segundo debe provenir del LENGUAJE DE MOVIMIENTO DE FONDO elegido en el brief de estilo del menú de techniques.md §7c (respiración de cámara sobre un fondo texturizado, gradiente flotante, burbujas flotantes, grano en vivo, un barrido de luz por segmento, una forma grande que gira lentamente, partículas ascendentes, cuadrícula que respira, texto fantasma a la deriva, Ken Burns + paralaje…). Las barras/líneas/piezas que cruzan lateralmente ("carril", "rango", "raya", lluvia de partículas horizontal) ya han sido utilizadas por dos proyectos seguidos con diferentes nombres. No son un valor predeterminado; úsalos solo cuando el tema realmente sea velocidad/flujo, y nunca en dos proyectos seguidos.

5. Transiciones que son solo desvanecimiento + aumento de escala + fuga de luz en cada corte → plantilla PPT. Desplázate a otra esquina, corta a un instrumento (mapa/velocímetro/perfil), empuja a través.

6. Los explicadores comienzan desde el starter para su ESTILO: starter-explainer-cartoon, -journalism, -catalog, -sketch (modo collage: la cámara viaja sobre activos fijos), starter-explainer (acción continua: el mundo fluye), o starter-explainer-stage (escenario de caricatura: un escenario por escena, rig articulado, cámara solo dentro del escenario). NO desde assets/starter-opener.html (texto de apertura), y no desde cero.

7. Una miniatura es una diapositiva. La cámara se acerca < 1.08, por lo que una casa es del tamaño de un pulgar y un suelo vacío llena la mitad de la pantalla → PPT aunque todo se mueva. Divide el mundo en escenarios del tamaño de un fotograma en lugar de un gran mapa para explorar (cartoon-stage.md Ley 1).

8. Esqueleto de plantilla (opener/promo). Verifica el guion y el código: la primera escena es texto que crece y luego sale por la izquierda; tres tarjetas de características una al lado de la otra; un cuadro de entrada/barra de búsqueda en el que se escribe; el gancho de orden → característica → característica → promesa → logo → CTA. Dos o más sin demanda del concepto → plantilla, incluso con una nueva apariencia. Elige el esqueleto nuevamente de references/opener-concepts.md.

Falla incluso un punto → rehazlo antes de mostrarlo al usuario.

Tipos de trabajo cubiertos

Este skill es para gráficos en movimiento web en GENERAL. El explicador es solo un tipo; tiene su propio documento porque su estructura difiere, no porque sea el principal.

Los starters se nombran por categoría: starter-opener.html para openers, promos, bumpers, intros y tipografía cinética; starter-explainer-*.html para explicadores, con un sufijo de modo/estilo (-cartoon, -journalism, -catalog, -sketch = collage; sin sufijo = acción continua; -stage = escenario de caricatura). El escenario de caricatura es un modo de explicador (estilo 6), no una categoría propia: su objetivo sigue siendo explicar con VO, solo la forma en que se produce difiere.

Tipo	Duración habitual	Características	Receta
Opener / promo de producto	25–40 s	un concepto del menú (el esqueleto proviene del producto, no de un orden fijo), un momento especial, cierre de marca	references/opener-concepts.md + el flujo de trabajo a continuación + references/techniques.md
Bumper / ident / logo sting	3–8 s	construcción del logo, un movimiento característico, terminado 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 + el mismo movimiento característico cada episodio	flujo de trabajo a continuación
Tipografía cinética / letras	15–60 s	el texto es el sujeto; dividir por palabra/letra; el ritmo sigue al audio	techniques.md (división + desenfoque direccional, paneo 3D por palabra)
Título / tercio inferior / bumper de segmento	2–6 s	un elemento pequeño sobre el metraje, limpio de entrada y salida, fondo transparente	techniques.md
Explicador / video explicativo	30–90 s	hechos con fuentes, entidades mostradas, puntos de vista cambiantes, cinco estilos	references/explainer.md + el starter para cada estilo

Explicadores y personajes: lee antes de decidir tomas

Para un explicador de caricatura educativa plana con personajes (el sexto estilo, escenario de caricatura), o una revisión que se siente como una presentación de diapositivas/miniatura, lee references/cartoon-stage.md: un escenario por escena, zoom 1.08–1.95, continuo dentro de un escenario y un corte/deslizamiento de 96 px entre ellos, un rig articulado con transformaciones manuales, cero subtítulos, una paleta plana brillante. Distingue oración, ritmo visual, encuadre y cambio de escenario. Para construirlo directamente en After Effects, lee references/ae-bridge-higgsfield.md. Esta guía específica del explicador agudiza las reglas del opener a continuación; las fuentes de ejemplo, los recuentos de escenas y los efectos no son recetas universales.

Ley #1: Esto es video, no diapositivas

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

• cuerpo de texto + una fila de insignias. Eso se lee instantáneamente como "PPT" y será rechazado.

Las reglas estrictas:

• Para openers: una oración corta + como máximo un objeto principal por escena. Sin remate ("01 — CARACTERÍSTICAS"), subtítulo, párrafo explicativo, chip de característica/insignia, o metadatos técnicos (nombre del paquete, URL larga). Los chips, botones y etiquetas que son parte de la interfaz del producto que se está utilizando no cuentan.
• Nueva información = una nueva respuesta visual. En un explicador, cambia el estado/acción en el mismo mundo cuando todavía está relacionado; una nueva oración no tiene que cambiar la toma.
• Reemplaza las listas con viñetas con imágenes visuales, no automáticamente tres tarjetas. Elige la forma del menú de características en references/opener-concepts.md (una característica demostrada, palabras que se intercambian, un objeto que se transforma, tarjetas barajadas, una cuadrícula de tarjetas…); dos openers seguidos no usan la misma forma.
• Las escenas deben estar vivas. La cámara puede descansar mientras los objetos llevan la acción. Mueve la cámara para seguir o revelar algo; no dependas del desvanecimiento/deslizamiento del texto sobre un fondo estático, o del paneo/zoom repetido en cada segmento.
• "Acercar-aléjar" = tamaño de toma, no respiración de cámara. Cuando el video se siente estático o el usuario pide zoom, la cámara se acerca al elemento que cuenta la historia (plano medio corto / primer plano) y luego retrocede a un plano general siguiendo el ritmo del contenido; una respiración de unos pocos por ciento es casi invisible (techniques.md §3b).

Lee references/anti-ppt.md ANTES de diseñar escenas. Enumera violaciones reales junto con sus correcciones.

Ley #2: Determinista o muerta

Ni una sola línea lee el reloj del sistema. Cada visual es una función pura de tl.time() (el tiempo de la línea de tiempo de GSAP): espectro, números en movimiento, partículas, vibración de cámara (senoidal de alta frecuencia, no Math.random()), la posición de objetos que "fluyen" (interpola DISTANCIA, no acumules velocidad por fotograma). La consecuencia: el scrub es exacto como una línea de tiempo de After Effects, y el renderizado fotograma a fotograma a MP4 produce imágenes idénticas cada vez.

Ley #3: El estilo nace del tema, no del starter, no de una referencia

Un fallo común: un opener para un producto diferente sale con EXACTAMENTE la apariencia del opener del producto anterior: oscuro, acento azul, resplandor, nebulosa, la misma fuente, porque el modelo tomó su estilo del starter. La animación puede ser buena y aún así falla: un opener es la cara de un producto, y dos productos no deben compartir cara.

1. Brief de estilo primero, código después. Antes de tocar un starter, escribe estas líneas y muéstralas al usuario junto con el resumen de la escena:
   • tema/producto + tres adjetivos para la sensación que se quiere dejar;
   • huella digital del concepto y la estructura (opener/promo): tres conceptos candidatos de references/opener-concepts.md, uno elegido con una razón del producto, luego concepto · número de escenas · objeto principal por escena · apertura · cierre;
   • paleta: un color principal tomado DE la marca/tema (logo, icono de la app, sitio, empaque), un color de fondo, un acento. Indica el hex Y la fuente de cada color; un color que no es de la marca se escribe como "derivado: razón";
   • una fuente de visualización con carácter que se ajuste a esa sensación (no Poppins/Inter/Roboto/Montserrat/Arial) + una fuente complementaria; excepción: el concepto de afirmación → cómo → resultado usa la fuente de la interfaz de usuario del producto (references/opener-concepts.md);
   • énfasis de texto: sin resaltado de palabras, o una forma de resaltado (nómbralo). El resaltado de palabra es OPCIONAL, no un valor predeterminado de cada opener;
   • lenguaje de fondo por segmento: una dirección de la tabla de "Direcciones de estilo" para todo, o un plan de cambio (qué segmento cambia, a qué, por qué, desencadenado por qué);
   • movimiento característico: un tipo de movimiento repetido como identidad (barrido de objeto, giro 3D por palabra, papel volador, una línea que se dibuja, bloques de color que golpean el borde…);
   • movimiento de fondo: un lenguaje del menú de techniques.md §7c. No es lo mismo que el movimiento característico, y no automáticamente "objetos que cruzan";
   • superficie de fondo: del menú §7d (gradiente/luz/textura/gradiente granuloso, ≥ 2 capas), no plana;
   • 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 (cuando el concepto usa fotos de personas/lugares/productos): la fuente (fotos del usuario, generadas a través del MCP de Higgsfield, o de stock con licencia) se PREGUNTA al usuario, más una lista de tomas por acto (references/opener-concepts.md, "Fotos en openers");
   • transiciones: decide qué límites necesitan un efecto y cuáles pueden ser un corte simple; elige del menú §4c para que se ajuste al contexto; dos tipos o 3D no son obligatorios;
   • un momento especial (donde se usa el efecto más caro, una sola vez).
2. Un starter es arquitectura, no estilo. Los colores grises, la fuente del sistema y el fondo WebGL en assets/starter-opener.html son MARCAJES DE POSICIÓN. Si alguno de ellos todavía está visible en el resultado, el estilo no se derivó. El fondo WebGL (nebulosa, du…

…

[truncado para la traducción]