saas-promo

Promo SaaS (plantilla: "skill 1")

Esta skill genera un video promocional completo a partir de un único archivo de configuración, promo.json: el corte clásico de ~11 s, o un corte largo de ~50 s cuando promo.json tiene chapters. Una escena de lienzo dibuja cada fotograma en Chrome headless. No se utiliza metraje de stock, video con IA ni servicio de plantillas:

• Imagen: capturas de pantalla propias del usuario, UI de la app, diseños o fotogramas de video. Las tarjetas de interfaz integradas cubren cualquier vacío.
• Palabras: los textos propios del usuario.
• Sonido: un efecto en cada indicación, más una base ambiental sintetizada original o la pista propia del usuario.

La estructura es fija y copia el ritmo del reel de referencia skill 1 .MP4 (un reel de agencia SaaS de TikTok). Solo se copian las técnicas, nunca su metraje, palabras, marca o marca de agua.

Tiempo	Escena
0-0.5 s	Grandes glifos (# < @ ! ?) parpadean en el centro; barras neón púrpura y lima y destellos de 4 puntas estroboscopian sobre un campo de glifos de matriz de puntos tenue
0.5-3.3 s	text.typed se escribe con un cursor; 26 tarjetas vuelan desde lejos y orbitan la palabra como un anillo 3D (primero puntos de semitono, luego la imagen real); el anillo acelera, pasa rápidamente junto a la cámara y se desenfoca
3.3-6.45 s	Un prado pintado con nubes, pájaros y mariposas, lavado en tonos pastel y luego saturado; tres tarjetas se deslizan desde la derecha, luego el resto vuela hacia una pared bento de 12 tarjetas. bento[0] se escribe en la tarjeta principal, bento[1] se escribe verticalmente en una tarjeta de vidrio alta, dos tarjetas intercambian imágenes, y bento[2] se escribe en una tarjeta blanca. Luego la cámara hace zoom en esa tarjeta
6.45-~8.8 s	Campo de ondas de puntos oscuros; un orbe degradado brillante aparece y se desliza a la izquierda; headline aparece palabra por palabra (de borroso a nítido), luego sub aparece con un barrido; todo se desenfoca
~8.8-11.1 s	Glitch (con desplazamiento de tono, dividido) hacia el héroe: una flor azul/blanca de larga exposición sobre un cielo azul a naranja, símbolos voladores ! @ # $ % * y lluvia digital. from aparece y desaparece borroso, luego to aterriza con un golpe y el logotipo opcional aparece debajo. Termina con un fundido a negro

La duración es de aproximadamente 11.1 s. Crece ligeramente con un titular largo, porque el subtítulo siempre tiene unos 0.85 s en pantalla.

Corte largo (~50 s): chapters

Agrega "chapters" (uno por producto, proyecto o tema) y las mismas cuatro escenas se repiten como tiempos de 1.5 compases cada uno, con el final ocupando 2 compases:

Tiempos	Qué se reproduce
intro	apertura (typed + torbellino de todo) → pared (todas las imágenes, bento) → orbe (headline / sub)
cada capítulo	apertura (el typed del capítulo, sus imágenes en el torbellino; se omite si no hay typed) → pared (sus imágenes primero, su bento, su aspecto wall) → orbe (su headline / sub / colores orb)
final	final (from / to / url / logotipo), 2 compases

Cuatro capítulos con tres aperturas escritas dan 23 compases, lo que son ~50 s a 109 BPM.

• Imágenes: etiqueta cada una con "tag" para archivarla bajo su capítulo.
• Aspectos de pared: "meadow" (día), "dusk" (atardecer) o "dark" (el campo de ondas de puntos con brillos en los colores del orbe del capítulo). Alternarlos mantiene los capítulos separados.
• Sincronización musical:
  • Con music, assets.py mide el tempo de la canción y su drop (el mayor aumento de energía, sincronizado con un bombo). El video comienza de modo que el primer corte, después del torbellino de introducción, caiga en el drop, y cada corte posterior esté en la cuadrícula de compases.
  • Verifica la línea impresa music: … bpm, drop at … s. Si es incorrecta, proporciona tú mismo bpm y musicDrop (segundos de la canción).
  • Usa sfxLevel (por ejemplo -4) para situar los efectos por debajo de la canción.
• Copyright: una canción comercial puede hacer que el video sea silenciado o reclamado al publicarlo. Menciónalo y sugiere usar la biblioteca de sonidos propia de la plataforma para publicaciones públicas.

Requisitos: ffmpeg, Node 22+, Google Chrome o Chromium (CHROME_PATH), y Python con numpy y scipy (PROMO_PY; promo.sh lo encuentra por sí solo).

Flujo de trabajo

1. Reúne lo que necesita la promo

• Tarjetas (8-20 imágenes): capturas de pantalla del producto, sitio web, aplicación o panel de control; trabajos de diseño; o fotogramas de los videos del usuario. Tanto imágenes como videos funcionan. Un video proporciona un fotograma fijo, en "at" segundos o al 30 % de su duración. Las imágenes apaisadas van a las ranuras anchas y las verticales a las ranuras altas. Con menos de 8, las tarjetas de interfaz integradas completan el resto (barra de búsqueda, formulario, gráfico, orbe degradado, píldora, etc., etiquetadas con text.labels). Observa primero las imágenes y descarta las que estén mayormente vacías.
• Textos: mantenlos cortos, porque la escena los escribe y revela a velocidades fijas.
  • typed: una palabra o nombre con puntuación, de aproximadamente 4 a 8 letras ("SaaS.", "KumNit.").
  • bento: tres frases cortas (1, 2-4 y 2-3 palabras).
  • headline: de 5 a 8 palabras. sub: una línea de hasta aproximadamente 90 caracteres.
  • from / to: el par final "De … / A …".
  • Para khmer ("lang": "km"), escribe khmer natural. Pon un espacio entre los fragmentos de headline, from y to que deben aparecer uno a la vez. Kantumruy Pro está incluido.
• Opcional:
  • logo: se muestra debajo de la última línea. Un logotipo opaco se convierte en un ícono de aplicación redondeado.
  • text.url: una línea de sitio web en la tarjeta final.
  • hero: la imagen final propia del usuario en lugar de la flor.
  • backdrop: una imagen en lugar del prado pintado.
  • music: su propia pista. En el corte largo, su drop cae en el primer corte; establece musicStart para anularlo.
  • chapters: el corte largo de ~50 s, con tag, typed, bento, headline, sub, wall y orb de cada capítulo.
  • sfxDir: una carpeta con sus propios efectos de sonido.
  • colors: colores de marca para el neón, el orbe, el cielo y los símbolos.

2. Escribe el proyecto

Crea una carpeta de proyecto y copia examples/kumnit-saas.json (o -km.json) en ella como promo.json, luego edítalo. Cada clave está descrita en references/config.md. Las rutas son relativas a la carpeta del proyecto.

3. Vista previa (aproximadamente 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Esto prepara las imágenes (y mide la música) y renderiza 12 fotogramas (uno por tiempo en el corte largo) en out/<name>-preview.png. Léelo y verifica:

• La palabra escrita no tapa las tarjetas.
• Ningún texto está apretado: los textos largos se reducen para encajar, pero se leen peor.
• La tarjeta principal (grande, izquierda) muestra una buena imagen: toma la primera imagen apaisada en cards.
• El texto final es legible sobre la flor o el héroe.

4. Renderizar (menos de un minuto; aproximadamente 4 minutos para el corte largo, así que ejecútalo en segundo plano)

<skill>/scripts/promo.sh <project>/promo.json

Las etapas se ejecutan en este orden: assets, plan (línea de tiempo e indicaciones de sonido de la escena), render (3 renderizadores de Chrome, --jobs N), mezcla, codificación.

• --from mix re-mezcla el sonido y re-codifica sin renderizar los fotogramas nuevamente.
• --from render redibuja la imagen.

Salida: out/<name>-1080p60.mp4 y out/<name>-contact.png (aproximadamente 30 fotogramas a lo largo del video).

5. Verifica antes de entregarlo

• Lee la hoja de contacto.
• ffprobe debería mostrar aproximadamente 11.1 s (clásico) o el total de los tiempos (largo; build/cues.json enumera cada tiempo). La mezcla está normalizada a -14 LUFS / -1 dBTP: mídela con ffmpeg -i out.mp4 -af ebur128 -f null -.
• La etapa de mezcla imprime cuántos efectos provinieron de sfxDir y cuántos se sintetizaron.
• No puedes escuchar el resultado, así que informa al usuario lo que verificaste y pídele que escuche. Los clics de introducción y el impacto del prado son los momentos más fuertes.

Ajuste

• Tiempo:
  • plan() al inicio de scripts/scene.mjs contiene los tiempos de la escena clásica.
  • beatSpecs() distribuye los tiempos: mapT() mueve y estira esos tiempos dentro de cada tiempo.
  • Las indicaciones de sonido en cuesFor() siguen automáticamente, porque audio.py las lee de build/cues.json.
• Aspecto:
  • Los colores provienen de colors.
  • El diseño bento es la tabla SLOTS en scene.mjs.
  • El prado, la flor y el orbe se dibujan en buildMeadow, drawFlower y drawOrb.
• Sonido: los nombres de archivo que se intentan en sfxDir son la tabla SFX en scripts/audio.py, con variantes elegidas por indicación. Los acordes y secciones de la base están en make_bed().
• Tamaño: solo 1920×1080, como en la plantilla. Una versión vertical 9:16 necesitaría sus propios diseños.