De demo a reel promo: reels verticales a ritmo, en código

Kinetix: reels desde código

Kinetix vive en un repositorio (búscalo: kinetix en PATH, $KINETIX_HOME, o un checkout kinetix/ con runtime/kinetix.js). Todos los comandos siguientes son kinetix <comando>; ejecuta kinetix doctor primero y ./setup.sh si faltan piezas.

El modelo: cada fotograma es una función pura del tiempo. Un reel es index.html con escenas en una línea de tiempo; la banda sonora la construye music.py en la misma cuadrícula de pulsos, para que cortes, sacudidas y drops coincidan.

1. Reúne material real primero

• La historia proviene de las propias palabras del producto. Lee su README, texto del sitio y cadenas de la app, y cítalos. Nunca inventes estadísticas, usuarios, premios o velocidades.
• Muestra lo real. Usa capturas de pantalla de la app, grabaciones de pantalla o una página web en vivo capturada con Playwright a 2× DPI. Si la captura impactara un backend en vivo, simula la API en el navegador (page.route) en lugar de crear registros reales. Etiqueta el material simulado o de demostración como tal.
• Elige los números una vez. Si las fuentes discrepan (1,2 s vs 1,5 s), usa un valor de forma consistente y di cuál en la entrega.
• La voz es opcional. Para líneas de voz, usa una API TTS para la que el usuario tenga clave (tools/tts_sarvam.py para idiomas indios), luego kinetix captions.

2. Planifica en la cuadrícula

A 150 bpm, un pulso es 0,4 s y un compás es 1,6 s. Cada límite de sección y cada gran golpe va en un pulso. Una forma probada de 50–60 s:

sección	compases	trabajo
apertura en frío	3	gancho relatable en 2 s: POV + el dolor
construcción	6–7	escalar en cortes de compás, luego un ascensor
pausa	¼	0,4 s de casi silencio ("hasta ahora…")
drop 1	8	golpe de logo, luego el flujo del producto, un pulso por acción
medio tiempo	4–5	el giro o la profundidad, filtrado y más silencioso
drop 2	8–10	flex rápido: material, estadísticas reales, prueba
outro	3	logo, eslogan, URL, fundido

El texto debe ser legible. Entrada rápida, luego mantener: aproximadamente 0,8 s para una etiqueta y 0,3 s por palabra para una oración. El texto secuencial va en cada otro pulso. Solo los acentos que no sean texto pueden golpear cada pulso.

3. Construye el reel

kinetix new my-reel            # vertical; añade --landscape para 1920x1080

my-reel/index.html usa el runtime (references/runtime.md):

const K = Kinetix.init({ width: 1080, height: 1920, bpm: 150, build: [[3.2, 9.2]], drops: [[9.6, 16]], glitches: [9.6], fonts: [...] });
K.scene(9.6, 12.8, `<div class="c big t" style="left:540px;top:800px;font-size:230px">BRAND</div>`,
  (lt, q) => K.slam(q(".t"), lt, 0, { from: 3 }));
K.start({ dur: 19.2 }).then(({ timeline }) => { window.__timelines["main"] = timeline; });  // mantén esto literal

Los patrones de escena (marcos de teléfono, paneles de metraje holográfico, golpes de estadísticas, burbujas de chat, contadores, escritura) están en references/recipes.md. Mantente fiel a la marca: toma colores, fuentes y el logo del producto, y temátizalos a través de las variables :root en kinetix.css.

4. Construye la banda sonora (references/music.md)

• Base: kinetix music gen "<género, instrumentos, estado de ánimo>" --bpm 150 --seconds 60 -o my-reel/assets/bed.wav. MusicGen sigue el BPM en el prompt, y la herramienta estira el tiempo hasta la cuadrícula exacta y escribe bed.json. Sin GPU o MusicGen, Mix(bpm=150, seconds=DUR) construye una mezcla de puro sintetizador.
• music.py: m = Mix("assets/bed.wav", seconds=DUR), luego:
  • coloca los golpes por los mismos tiempos que las escenas: m.add(t, h.impact()), m.drums(...), m.sfx("impact/...")
  • da forma al arreglo: m.lowpass([(t, hz), ...]), m.bed_level(...), m.gap(14.0, 14.4)
  • luego ejecuta kinetix mix my-reel.
• Verifica la dinámica (no puedes escuchar, así que mide). El RMS por sección debe aumentar desde la construcción hasta el drop, bajar en el medio tiempo y alcanzar su punto máximo en los drops. Si la construcción suena más fuerte que el drop, baja las capas de sintetizador de la construcción. También renderiza un espectrograma (ffmpeg ... showspectrumpic) y míralo.
• Voces: después de mezclar, confirma que sean audibles con Whisper en el segmento mezclado.

5. Subtítulos (opcional, necesita voz)

captions-lines.json contiene [{"clip": "assets/line1.wav", "at": 1.62, "text": "guion exacto", "y": 600}]. Luego ejecuta kinetix captions my-reel. Whisper se ejecuta en modo inglés con el guion como su prompt, por lo que las líneas en hinglish y otras romanizadas mantienen su ortografía. Las páginas se construyen por línea.

6. Verifica: mira, luego comprueba

1. kinetix snap my-reel 1.5,4,9,..., una vez por escena. Abre las hojas de contactos y mira realmente. Un fotograma en blanco significa un error de JS o una línea de tiempo no registrada.
2. kinetix check my-reel muestrea cada ½ s, y debe terminar con 0 errores.
   • Corrige hallazgos reales: texto que desborda su caja, superposiciones, texto oculto, contraste.
   • Marca solo las capas intencionales, nunca problemas reales: data-layout-allow-overlap para un sello sobre un documento, data-layout-allow-occlusion para texto deliberadamente sobre un sprite, data-layout-allow-overflow para una captura de pantalla recortada en un marco, data-layout-ignore para un fondo decorativo o un emoji grande desvanecido.
   • Antes de afirmar que una "corrección" era visible, compara los fotogramas antes y después. Algunos hallazgos son falsos positivos del verificador.

7. Efectos y renderizado

kinetix fx leak --hue 200 -o overlays/leak-cyan.mov        # hue: 0 ámbar, 70 rosa, 200 cian, 290 lima
kinetix fx stinger --colors "#c8ff3d,#5a45c9" -o overlays/stinger.mov
kinetix render my-reel -o out.mp4 --overlay overlays/[email protected]:0.8 --overlay overlays/[email protected] --poster 18.3

• Fugas: los archivos leak-* se proyectan como luz, por lo que el texto sigue siendo legible. Inicia una fuga ~0,4 s antes de un drop para que alcance su punto máximo en él, y no dejes que alcance su punto máximo en un golpe de logo.
• Stingers: inicia ~0,3 s antes de un corte para que el panel lo cubra.
• Póster: --poster hornea el mejor fotograma establecido como fotograma 0, que es la miniatura en X, YouTube, Slack y Discord. Elige una tarjeta de logo o la toma estrella, nunca un fotograma a medio camino de una animación o en un destello.
• Verificación final: extrae fotogramas del mp4 final (fotograma 0, cada pico de superposición, cada escena de material) y míralos.

Errores comunes (todos ocurren de verdad)

• El puente devuelve { timeline }, no la timeline. Una timeline de GSAP es un "thenable", por lo que devolverla directamente desde una función asíncrona se cuelga para siempre y cada fotograma se renderiza en blanco.
• Los cuadros de resaltado en fuentes de exhibición necesitan line-height: 1.12 (ya está en kinetix.css), o los glifos sobresalen y check marca text_box_overflow.
• El material debe ser <video muted data-start data-duration [data-media-start]> en un contenedor sin temporización, nunca secuencias JPG. Anima el contenedor, no el video.
• Los intercambios de imágenes (pantalla A → B) usan KinetixBridge.stackSet(img, src), que precodifica las variantes. Establecer src en tiempo de renderizado captura fotogramas no decodificados.
• Cada fuente nombrada necesita @font-face. Para la fuente de emoji del sistema, declara src: local("Noto Color Emoji").
• Bases de MusicGen: librosa's beat_track malinterpreta los tempos de phonk y club (llamó 150 bpm "121" y "199"), por eso hypebeat usa autocorrelación de onset y limita el estiramiento a ±12%. musicgen-medium necesita ~8 GB de RAM libre para cargar; small es el predeterminado.
• Subtítulos: agrupar todas las líneas en una sola llamada createTikTokStyleCaptions fusiona la última palabra de una línea con la siguiente, por lo que página por línea (el runtime lo hace).
• Remotion: renderiza con --gl=swangle (GL por software funciona en todas partes) y como ProRes 4444 con alfa. El decodificador VP9 de ffmpeg descarta el alfa.
• Licencias:
  • La salida de MusicGen es CC-BY-NC, válida para demostraciones y canales personales, no para trabajo remunerado.
  • Remotion es gratuito para individuos y empresas de hasta 3 personas.
  • Los SFX incluidos son CC0.

Entrega

Informa al usuario:

• dónde está el mp4
• qué contiene, como una lista breve golpe por golpe
• qué verificaste y cómo (hojas de contactos, resultado de verificación, sonoridad)
• cualquier elección de número o afirmación que hayas hecho
• qué no pudiste verificar (no puedes oírlo; pídele que escuche)

Ofrécete a publicar, pero no publiques sin un sí.