david-d2c2/motion-promo-reels

Reels promocionales con gráficos animados generados por código

Vídeos de 15 a 30 segundos generados completamente por código: canvas 2D → fotogramas → ffmpeg, con audio sintetizado en numpy. Sin plantillas de vídeo, sin After Effects, sin música de terceros. Cubre tres casos:

• una persona o marca personal (16:9);
• un puñado de productos (9:16);
• el catálogo completo de una tienda (9:16, docenas o cientos de vídeos).

Principio rector: nada inventado. Cada cifra, precio, color o característica mostrada en el vídeo proviene de una fuente verificada: sitio web, API de la tienda, página de producto o documentos del proyecto. Si algo no se puede confirmar, márcalo como pendiente y dilo.

Este paquete incluye tres plantillas completas en ${CLAUDE_SKILL_DIR}/templates/ (en el chat de claude.ai: templates/, junto a este archivo). Copia la más cercana al proyecto del usuario y adáptala en lugar de reconstruir el motor (consulta la sección 4). templates/README.md enumera qué cambiar en cada una.

Escribe todo el texto en pantalla en el idioma de la audiencia de la marca, y responde al usuario en su idioma. Las cadenas de la interfaz fija ("de", "colores", "NO ÉL"…) se sobrescriben mediante el bloque textos de la plantilla, nunca editando el motor. Haz coincidir el género de la persona en no_es.

0. Elegir el caso

Caso	Plantilla	Formato	Duración	Unidad de gag
Persona o marca personal	persona-16x9	1920×1080	27 s	Una, escrita a mano
Sitio web o servicio	persona-16x9, adaptada	16:9 o 9:16	20–30 s	Una, escrita a mano
Pocos productos (≤10)	producto-9x16	1080×1920	15,5 s	Una por producto, escrita a mano
Catálogo (decenas a cientos)	catalogo-9x16	1080×1920	15,5 s	Una por categoría, con frases plantilla rellenadas con los datos de cada producto

Si el usuario no lo especifica, usa 9:16 para productos y menciónalo en una línea.

1. Investigación (antes de escribir una sola línea de guión)

Fuentes, en orden:

1. La carpeta del proyecto, si existe. Lee CLAUDE.md, AGENTS.md, registros de decisiones, informes y planes de redes sociales. Allí es donde residen las reglas de marca y copy (p. ej., "sin nombres de marcas de terceros", "tono informal", "sin superlativos vacíos"), junto con los tokens de diseño, las reglas de moderación y los avisos legales (etiquetado de IA). Estas reglas anulan cualquier idea creativa.
2. El sitio web oficial. Hero, servicios, estadísticas, método, stack, credenciales. En un sitio con mucho JavaScript, usa un navegador y lee document.body.innerText sección por sección.
3. Tiendas online:
   • WooCommerce: /wp-json/wc/store/v1/products?per_page=100&page=N y /products/<id>. Los precios están en céntimos. prices.price_range con min ≠ max → "desde"; on_sale + regular_price → precio tachado; attributes (colores, tallas, medidas); description (a menudo con listas con viñetas estructuradas); permalink.
   • Shopify: /products.json y /products/<handle>.json.
   • Nunca adivines slugs o URLs: léelos de permalink.
4. Búsqueda en la web. Útil para personas, pero los nombres comunes pueden tener homónimos. Si eso ocurre, conviértelo en material de guión (consulta la sección 2) en lugar de ocultarlo.
5. Fotos: primero los archivos locales del proyecto. Los sandboxes en la nube a menudo no pueden descargar desde la tienda; no sigas intentándolo. O usa fotos locales o dibuja el producto en código (rayas, ondas de raso y formas simples quedan mejor de lo que esperas).

Anota la fecha en que leíste los datos: los precios se vuelven obsoletos.

2. Concepto: el gag

Un gag es una propiedad real del producto o la persona, convertida en algo que el propio vídeo hace. No es un chiste superpuesto. Mecánicas de ejemplo, todas implementadas en las plantillas (los ids de los gags están en español en el código):

Mecánica	Propiedad real	Lo que hace el vídeo
invisible	Transparente, oculto, discreto	Un fotograma vacío: "Aquí hay una funda. ¿No la ves? Claro, es transparente." La pantalla se abre como una cremallera.
contador	Una gran cantidad (metros, horas, unidades)	"Este reel dura 15 s. Este rollo, 50 m. No tendrás tiempo de gastarlo." Un contador corre.
diagonal	Corte al bies, rayas o un diseño diagonal	El texto se inclina 45° y las rayas cruzan la pantalla.
brillo	Acabado satinado o brillante	"Este texto es mate. / Este brilla." (con un destello)
cortar	Sin cordones, sin cables, sin ataduras	Dos hilos sostienen el texto, se cortan y el texto se queda.
elevar	Plataforma, push-up, altura	El texto se eleva sobre un "cojín".
secuencia	Muchas tallas, anchos o variantes	Las variantes reales se muestran una a una: "Aquí, de la E a la H."
quitar	"Sin X"	Se dibujan dos anillos y salen volando: "Fuera."
ritmo	Deporte, movimiento	Las palabras caen a ritmo.
reordenar	Multiuso, convertible	Dos líneas intercambian posición: paralelas, cruzadas, en V.
patron	Bordado, estampado, encaje	Un patrón decorativo se dibuja solo.
calma	Categorías sensibles (salud, postoperatorio, maternidad…)	Sin gag, sin golpes de sonido, sin percusión: un tono sereno.
homonimos (persona)	Un nombre común en Google	investigar("Nombre") muestra los homónimos tachados con "NO ELLOS", luego "FUENTE ENCONTRADA".

Reglas:

1. Una propiedad real y verificable.
2. Tres líneas: planteamiento, giro, remate (el remate en cursiva o en el color de acento).
3. El remate no debe ser falso. Si la página del producto no lo dice, no lo afirmes. Las frases condicionales (si/sino en la configuración) permiten que un remate aparezca solo cuando la descripción lo respalde.
4. Un elemento autorreferencial fijo en todo el vídeo, vinculado a la industria: un HUD con código de tiempo y contador de fotogramas (tecnología), una línea de costura con un contador de puntadas (manualidades, textiles), una cinta métrica que "mide" el reel (moda, tallas). Que tenga su recompensa en el outro ("Este reel mide 15,5 s. Una talla única.").
5. Nunca bromees sobre cuerpos. Las categorías sensibles usan calma. Verifica también que ningún dibujo abstracto pueda leerse como una silueta corporal.
6. Sin superlativos vacíos, sin comparaciones con competidores.

3. Estructura

9:16 producto (15,5 s a 30 fps = 465 fotogramas)

Escena	Tiempo	Contenido
Gancho	0–3,0	El gag
Producto	3,0–5,6/5,8	Nombre + foto con rebote (o un dibujo procedural, o una tarjeta de marcador de posición)
Gama	~2,8 s	Recuento de colores real, o gama (tallas), variantes y colores con sus nombres
Datos	~2,6 s	Tres datos de la página del producto, con marcas de verificación animadas
Precio	~1,8 s	Precio real, "desde" u oferta, nota de impuestos si aplica
Outro	13,2–15,5	Logotipo o marca, sitio web en una píldora, envío o CTA, y el guiño final

16:9 persona o marca (27 s): terminal → homónimos tachados con un glitch → caída (fuente encontrada + titular) → estadísticas con contadores → método en fases → marquesina del stack tecnológico (se congela en un elemento autorreferencial: "↑ ese soy yo") → "ESTE VÍDEO: 0 plantillas · N líneas de código" (recuento real) → cita de la persona → outro con monograma, nombre y CTA.

4. Motor

<proyecto>/<carpeta-reels>/
├── METODO.md        método, reglas y lista de verificación (para humanos)
├── CLAUDE.md        estado y tareas pendientes (para la próxima sesión)
├── config.json      (catálogo) tienda, atributos, etiquetas, paleta y categorías → gag + frases
├── productos.json   marca + un bloque por producto
├── motor.html       canvas 1080×1920 o 1920×1080; window.renderFrame(f) es DETERMINISTA
├── render.js        puppeteer-core → un JPEG por fotograma → ffmpeg image2pipe; luego audio y mux
├── audio.py         síntesis con numpy/scipy usando la MISMA tabla de señales que motor.html
├── catalogo.js      (catálogo) API → hoja de producto: gag, frases, datos, eliminación de marca
├── extraer.js       (catálogo) descarga el catálogo y las fotos con un UA de navegador y pausas; REVISAR.md
├── fonts/           woff2 locales + su licencia (fontsource: `npm pack @fontsource/<familia>@<versión>`)
├── img/             fotos locales
└── out/             vídeos finales

Claves técnicas:

• Determinismo: cada fotograma se calcula a partir de t = f/FPS. Sin requestAnimationFrame, sin aleatoriedad sin semilla (usa hash(n)).
• Funciones auxiliares: clamp, P(t,a,b) (progreso), easing (eOC, eIOC, eOX, eIX, eOB con rebote), T_() para texto con letterSpacing y alfa, fit() para reducir texto hasta que quepa, rr() para rectángulos redondeados.
• Las escenas son funciones que reciben el tiempo local u = t - T.escena. Las transiciones son un barrido de color de fondo de ±0,16 s en cada corte.
• render.js: page.evaluateOnNewDocument(spec => window.SPEC = spec), espera window.READY (fuentes e imágenes cargadas), luego canvas.toDataURL('image/jpeg', .93) → stdin de ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p.
  • Inicia Chrome con --allow-file-access-from-files; de lo contrario, las imágenes locales contaminan el canvas.
  • Busca Chrome o Edge en sus rutas estándar, o en CHROME_PATH.
  • Mantén un modo --stills t1,t2,… para revisión.
• Mux: -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest.
• Audio: una progresión de 4 acordes que coincida con el tono de la marca (tecnología: 128 BPM con bombo, bajo y púa; artesanía: 112 BPM pizzicato y marimba; elegante: 96 BPM piano y cuerdas).
  • Efectos por gag: cremallera = una ráfaga acelerada de clics; máquina = un tren de clics + zumbido; tijeras = dos chasquidos; brillo = un arpegio agudo.
  • Efectos compartidos: whoosh en los cortes, tics en los contadores, campanilla en el precio.
  • Sidechain ligero bajo el bombo, tanh para limitar, luego normalizar.
• En Windows los scripts llaman a python; en Linux y macOS, python3.

5. Datos del catálogo sin inventar nada (catalogo.js + config.json)

• Nombre mostrado: el nombre del producto sin marcas_a_quitar (marcas a eliminar, si las reglas de copy lo requieren) y sin palabras_tipo (palabras de tipo genérico como "Zapatilla" o "Bota"). Si solo queda un código, usa el nombre sin la marca.
• Datos: las viñetas bajo titulo_datos en la descripción, excluyendo la composición. Si no las hay, toma frases de la descripción corta divididas por "." y ":". El tercer dato es la composición del atributo de material, manteniendo acrónimos como EVA.
• Recorte: corta las frases a ~54 caracteres. Corta primero por una coma; de lo contrario, antes de la última cláusula subordinada ("con", "para", "que", "y"). Nunca termines en una preposición o artículo.
• Colores: tabla nombre → hex en motor.html. Los colores bicolor ("Negro/Blanco") obtienen una muestra dividida. Los colores desconocidos se renderizan en gris neutro con su nombre real.
• Ediciones manuales: "manual": true en un producto lo protege de ser sobrescrito en la próxima extracción.
• REVISAR.md (lista de revisión): tono sensible, páginas sin viñetas, productos sin foto o atributos.
• Prueba la transformación contra el catálogo real pegando la función en la consola del navegador de la tienda antes de confiar en el extractor. Si no se pudo probar el paso de descarga, dilo.

6. Control de calidad (obligatorio antes de la entrega)

1. Renderiza fotogramas fijos para cada escena, crea una hoja de contactos con PIL (no con xstack con muchas entradas: ffmpeg puede fallar) y mírala. Comprueba si hay:
   • texto superpuesto o frases truncadas;
   • acentos en titulares grandes que chocan con la línea superior;
   • elementos que invaden otra línea;
   • letras que desaparecen bajo un brillo demasiado blanco;
   • bloques vacíos "—" cuando falta un atributo;
   • mitades inferiores vacías en formato vertical.
2. Zonas seguras 9:16: nada importante por encima de ~250 px (UI de Reels) ni en los últimos ~320 px (subtítulos). Solo el elemento decorativo baja allí.
3. Datos: precios de hoy, "desde" cuando hay un rango, ofertas que pueden caducar, unidades no confirmadas (márcalas), URLs verificadas.
4. Legal y moderación:
   • Fotos con personas generadas o modificadas por IA → una etiqueta visible en el vídeo (Ley de IA de la UE, art. 50; ia.mostrar_si_foto en la configuración). Divúlgalo también al publicar.
   • Productos mostrados en el cuerpo: foto completa, estilo catálogo, sin recortes agresivos, poco tiempo en pantalla.
   • Nunca prometas devoluciones o garantías que no apliquen.
5. Audio: ffmpeg -af ebur128 → aproximadamente −14 LUFS. Comprueba la duración y la resolución con ffprobe.

7. Entrega

• Cuando trabajes en la máquina del usuario, escribe todo en una subcarpeta de su proyecto y mantén los finales de línea de cualquier archivo que edites. No toques los archivos CLAUDE.md o documentos existentes: crea los tuyos dentro de la subcarpeta.
• METODO.md: qué hay, cómo ejecutarlo, de dónde viene cada dato, reglas de marca aplicadas, cómo añadir un producto o un gag, una lista de verificación previa a la publicación y limitaciones conocidas.
• CLAUDE.md de la subcarpeta: estado, tareas pendientes y reglas no negociables, en pocas líneas.
• Muestra los vídeos y resume: los gags (uno por línea), dónde está todo, el comando para regenerar y cualquier dato aún por confirmar.

Errores comunes (evítalos)

• Adivinar slugs de productos. Léelos de permalink.
• Un gag de texto rotado que se superpone a las líneas siguientes: recoloca las líneas cuando el texto rote.
• Un brillo satinado demasiado blanco se come las letras. Usa un tono de marca claro, no blanco puro.
• Los degradados de muestra cuyos puntos de color colapsan dejan bandas diagonales. Usa una capa de brillo separada y recortada.
• Un precio tachado en un producto con un rango de precios: usa "desde" + una insignia de oferta, sin el tachado.
• Unidades que faltan en la página del producto (p. ej., medidas sin "cm"): omítelas o márcalas para confirmación.
• Formas abstractas que juntas sugieren una silueta corporal: sustitúyelas por figuras inequívocas.