Bang Motion — gráficos en movimiento web que no son PPT
En la biblioteca de motion-explainer. El cuerpo a continuación es el manual del director de Bang Motion para un único index.html autónomo (HTML + CSS + GSAP). Dentro de esta biblioteca, el mismo aspecto también se distribuye como tres motores, conectados al pipeline normal, por lo que un reel puede adoptarlo como cualquier otro estilo:
style.json: el manifiesto (bang-motion, lienzo 1080x1920 a 30 fps, motoresremotion,fframesykyfram)remotion/:kit/(GlowHorizon,GrainyMeshBlob,GlassCard,KineticTitle,StatusPill,BangBanner,GlassCaptions,LivingGrain),template/,sync_kit.sh,CATALOG.md,AGENT_BRIEF.mdfframes/:Cargo.toml,src/(lib, tokens, kit, look, video, main),tools/ff.shkyfram/PRELUDE.lgv: tokens de paleta y el mobiliario de ritmo (drawBackdrop,drawBanner,drawCaptions,drawPanel,drawDot,drawFrame) para escenas.lgvdocs/style-guide.mdydocs/style-prompt.md: la hoja de estilo comprimida y el prompt portátil
Andamia un episodio con ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion (o --engine fframes|kyfram). Los skills del pipeline toman el nombre del estilo como $MOTION_STYLE, así que nada más en el flujo de trabajo cambia.
El ADN del estilo, en una sola frase: un mundo continuo, un fondo de al menos dos capas (base profunda más un horizonte brillante) que siempre se mueve, grano que se desplaza con t en lugar de ruido aleatorio, una cámara que respira en lugar de un encuadre estático, transiciones motivadas en lugar de un solo barrido repetido, y una declaración por toma en lugar de la información de una diapositiva.
v1.19.0 · por Bang Tutorial · MIT. Historial de cambios en CHANGELOG.md; instrucciones de instalación en README.md.
Este skill es para cualquier agente de IA de codificación (formato de skills de agente abierto). Su contenido son leyes y recetas para gráficos en movimiento que se mueven como video, no como presentación — acátalas antes de escribir código.
Prerrequisitos — solo navegador
El entregable (index.html) solo necesita un navegador moderno + internet para CDN
(GSAP, fuente). Python y Node son opcionales, se usan solo como herramientas de trabajo:
scripts/serve.py (servidor sin caché, solo necesario si se usa un módulo local),
puppeteer (captura/verificación automática, scripts/export-frames.mjs → MP4).
Si el usuario no tiene ninguno: (1) sigue construyendo un solo archivo, ábrelo con
doble clic; (2) verificación visual a través de ?debug=1 (panel de desplazamiento) y
captura de pantalla manual por segundo clave; (3) MP4 mediante grabación de pantalla
(OBS / grabación de pestaña del navegador) — explica que el resultado de la grabación de
pantalla puede perder fotogramas, y que el renderizado cuadro por cuadro 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 |
|---|---|---|
| Sincronizar VO (límites de oración/párrafo) | silencedetect | scripts/vo-pauses.html — ábrelo en el navegador, selecciona el audio, copia SEG/PARA; el resultado es exactamente el mismo (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 | combinar PNG de export-frames.mjs | no hay MP4 — ofrece instalar con un comando (winget install Gyan.FFmpeg / brew install ffmpeg) o grabar pantalla |
| Analizar 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 captúralo en segundos específicos |
Sin ffmpeg, el flujo del explicador sigue siendo completo hasta la sincronización de VO; solo el MP4 requiere instalación.
Reproductor — ninguno, reproducción automática, bucle
Entregable por defecto: sin panel ni reproductor en pantalla, se reproduce
directamente al abrirse y se repite desde el principio al finalizar (onComplete → play(0); si hay sonido, el audio también se repite). Controles ocultos: R reinicia,
Espacio pausa. El panel de desplazamiento/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 en el fotograma
0 y comienza en el primer clic — sin texto "toca para comenzar". Esto ya está integrado
en ambos iniciadores.
Prohibiciones estructurales — prueba 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 leyes a continuación. Antes de entregar, verifica el CÓDIGO, no las sensaciones:
-
grep -c "class=\"scene\"\|\<section" index.html— si hay ≥ 3 escenas como<section>que se encienden/apagan conautoAlpha/opacidad → es una presentación de diapositivas. Las escenas deben cambiar porque el MUNDO/CÁMARA se mueve (la cámara se mueve, gira a otro ángulo, avanza, el fondo cambia), no porque la sección se desvanezca. Excepción válida: dibujos animados de escenario (references/kartun-panggung.md) utiliza corte/desplazamiento de 96 px entre escenarios — está permitido, porque cada escenario está vivo por completo (≥10 objetos actuando), no es una imagen fija que se desvanece. -
Hay un hilo conductor visual que perdura: un solo sujeto (acción continua) O un solo mundo de collage/papel/blanco que la cámara recorre (dibujos animados, fotos, catálogo, bocetos). Fotos a página completa que cambian sin un mundo compartido → PPT. Una imagen + una oración por escena, cambiando cada escena → sigue siendo una presentación aunque la cámara se mueva: cada escena tiene 3–5 elementos que entran gradualmente por frase (explainer.md "Una escena = 3–5 elementos").
-
Por escena, cuenta los nodos de texto: ceja/impulso + título + cuerpo/crédito = 3 niveles → PPT. Máximo dos: un número/oración grande + una etiqueta del mundo. Los documentos/sellos/bloques de fecha con ≤ 3 líneas cortas se cuentan como objetos, no como niveles de texto.
-
Ken Burns (escala 1.0→1.05 en una foto) como único movimiento → PPT. El movimiento de 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, manchas 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 desplaza, Ken Burns + paralaje…). Las barras/líneas/ piezas que cruzan hacia los lados ("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 realmente velocidad/flujo, y no debe ser en dos proyectos consecutivos. -
Transiciones solo de fundido + aumento de escala + fuga de luz en todos los cortes → plantilla PPT. Giro a otro ángulo, corte a un instrumento (mapa/velocímetro/perfil), avance.
-
El explicador comienza desde el INICIADOR de su ESTILO:
starter-explainer-kartun,-jurnalisme,-katalog,-sketsa(modo collage: la cámara recorre activos fijos),starter-explainer(acción continua: el mundo fluye), ostarter-explainer-panggung(dibujos animados de escenario: un escenario por escena, rig de articulaciones, la cámara solo dentro del escenario). Los de collage tienen un rig; los de escenario tienen otro rig. NO desdeassets/starter-opener.html(opener de texto), y no desde cero. -
Las miniaturas son diapositivas. Zoom de cámara < 1.08 que hace que una casa sea del tamaño de un pulgar y el suelo vacío llene la mitad de la pantalla → PPT aunque todo se mueva. El mundo se divide en escenarios del tamaño del fotograma, no en un gran mapa que se explora (
kartun-panggung.mdLey 1). -
Estructura de plantilla (opener/promo). Verifica el esquema y el código: la primera escena es un texto que se agranda y luego sale por la izquierda; tres mosaicos/tarjetas de características alineadas; un cuadro de entrada/barra de búsqueda que se escribe; secuencia de gancho → característica → característica → promesa → logo → CTA. Dos o más sin exigencia de concepto → plantilla, aunque la piel sea nueva. Vuelve a elegir una estructura de
references/opener-konsep.md.
Falla en un solo punto → rehaz antes de mostrar 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 es diferente, no porque sea el principal.
El iniciador se nombra según su categoría: starter-opener.html para opener, promo,
bumper, intro y tipografía cinética; starter-explainer-*.html para explicador,
con el sufijo de modo/estilo (-kartun, -jurnalisme, -katalog, -sketsa = collage;
sin sufijo = acción continua; -panggung = dibujos animados de escenario). Los dibujos animados de escenario son
un modo de explicador (estilo 6), no una categoría propia: su objetivo sigue siendo explicar con
VO, lo único diferente es la forma de producción.
| Tipo | Duración habitual | 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 / logo sting | 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 igual en cada episodio | flujo de trabajo a continuación |
| Tipografía cinética / letras | 15–60 s | el texto es el sujeto; dividido 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 | elemento pequeño sobre el metraje, entrada y salida limpias, fondo transparente | techniques.md |
| Explainer / video explicativo | 30–90 s | hechos con fuente, entidades aparecen, punto de vista cambia, cinco estilos | references/explainer.md + iniciador por estilo |
Explainer y personajes: lee antes de determinar la toma
Para explicadores de dibujos animados educativos planos con personajes (sexto estilo, dibujos animados de
escenario), o revisiones que se sienten como presentación/miniatura, 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, cero subtítulos, paleta plana y brillante. Diferencia entre oración,
ritmo visual, encuadre y cambio de escenario. Para construirlo directamente en After Effects, lee
references/ae-bridge-higgsfield.md. Las pautas específicas de este explicador aclaran las
reglas del opener a continuación; el ejemplo de fuentes, número de escenas y efectos no son una receta universal.
Ley #1 — Esto es video, no una diapositiva
La enfermedad más común: el modelo organiza las escenas como diapositivas — título + subtítulo
- cuerpo de texto + fila de insignias. Eso se lee inmediatamente como "PPT" y será rechazado.
Reglas estrictas:
- Para opener: una oración corta + máximo un objeto principal por escena. No hay impulsor ("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 UI del producto que se está utilizando no están incluidos.
- Información nueva = respuesta visual nueva. En el explicador, cambia el estado/acción en el mismo mundo si aún están relacionados; el cambio de oración no obliga a cambiar la toma.
- La lista de puntos se reemplaza con visual, no automáticamente con 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 llevan la acción. Mueve la cámara para seguir o revelar algo; no confíes en el texto que se desvanece/desliza sobre un fondo fijo, o en paneos/zoom repetitivos en todos los segmentos.
- "Zoom in-out" = tamaño de toma, 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á narrando (plano medio cerrado
/ primer plano) y luego retrocede a un plano general siguiendo el ritmo del contenido; la respiración de unos
pocos porcentajes es casi imperceptible (
techniques.md§3b).
Lee references/anti-ppt.md ANTES de diseñar las escenas — contiene una lista de
infracciones reales junto con sus correcciones.
Ley #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): espectro, números que avanzan,
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 desplazamiento es preciso como la línea de tiempo de After Effects, y
el renderizado cuadro por cuadro a MP4 produce imágenes idénticas cada vez.
Ley #3 — El estilo nace del tema, no del iniciador, no de la referencia
Fallo común: un opener para otro producto sale con la piel EXACTAMENTE igual al 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 fallo: el opener es la cara del producto, y dos productos no pueden tener la misma cara.
- 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 la escena:
- tema/producto +
_
[truncado para la traducción]_