Da demo ao reel promo: reels verticais no ritmo, em código

Kinetix: reels a partir de código

Kinetix reside em um repositório (encontre-o: kinetix no PATH, $KINETIX_HOME, ou um checkout kinetix/ com runtime/kinetix.js). Todos os comandos abaixo são kinetix <cmd>; execute kinetix doctor primeiro e ./setup.sh se faltarem peças.

O modelo: cada quadro é uma função pura do tempo. Um reel é index.html com cenas em uma linha do tempo; a trilha sonora é construída por music.py na mesma grade de batidas, para que cortes, tremores e drops ocorram juntos.

1. Colete material real primeiro

• A história vem das próprias palavras do produto. Leia seu README, textos do site e strings do aplicativo, e cite-os. Nunca invente estatísticas, usuários, prêmios ou velocidades.
• Mostre a coisa real. Use capturas de tela do aplicativo, gravações de tela ou uma página web ao vivo capturada com Playwright em 2× DPI. Se a captura atingir um backend ao vivo, simule a API no navegador (page.route) em vez de criar registros reais. Rotule imagens simuladas ou de demonstração como tal.
• Escolha números uma vez. Se as fontes discordarem (1,2 s vs 1,5 s), use um valor consistentemente e diga qual na entrega.
• Voz é opcional. Para falas, use uma API de TTS para a qual o usuário tenha chave (tools/tts_sarvam.py para idiomas indianos), depois kinetix captions.

2. Planeje na grade

A 150 bpm, uma batida é 0,4 s e um compasso é 1,6 s. Cada limite de seção e cada grande impacto vai em uma batida. Um formato comprovado de 50–60 s:

seção	compassos	função
abertura fria	3	gancho relacionável em 2 s: POV + a dor
construção	6–7	escalar em cortes de compasso, depois um crescente
pausa	¼	0,4 s de quase silêncio ("até agora…")
drop 1	8	impacto do logotipo, depois o fluxo do produto, uma batida por ação
meio-tempo	4–5	a reviravolta ou a profundidade, filtrada e mais silenciosa
drop 2	8–10	demonstração rápida: imagens, estatísticas reais, provas
encerramento	3	logotipo, tagline, URL, fade

O texto deve ser legível. Entrada rápida, depois segure: cerca de 0,8 s para um rótulo e 0,3 s por palavra para uma frase. Texto sequencial vai em cada outra batida. Apenas acentos não textuais podem atingir cada batida.

3. Construa o reel

kinetix new my-reel            # vertical; adicione --landscape para 1920x1080

my-reel/index.html usa o 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">MARCA</div>`,
  (lt, q) => K.slam(q(".t"), lt, 0, { from: 3 }));
K.start({ dur: 19.2 }).then(({ timeline }) => { window.__timelines["main"] = timeline; });  // mantenha isso literal

Padrões de cena (quadros de telefone, painéis de filmagens holográficas, impactos de estatísticas, bolhas de chat, contadores, digitação) estão em references/recipes.md. Mantenha a marca: pegue cores, fontes e o logotipo do produto, e tema-os através das variáveis :root em kinetix.css.

4. Construa a trilha sonora (references/music.md)

• Base: kinetix music gen "<gênero, instrumentos, ambiente>" --bpm 150 --seconds 60 -o my-reel/assets/bed.wav. MusicGen segue o BPM no prompt, e a ferramenta estica o tempo para a grade exata e escreve bed.json. Sem uma GPU ou MusicGen, Mix(bpm=150, seconds=DUR) constrói uma mistura puramente sintetizada.
• music.py: m = Mix("assets/bed.wav", seconds=DUR), então:
  • coloque impactos pelos mesmos tempos das cenas: m.add(t, h.impact()), m.drums(...), m.sfx("impact/...")
  • modele o arranjo: m.lowpass([(t, hz), ...]), m.bed_level(...), m.gap(14.0, 14.4)
  • então execute kinetix mix my-reel.
• Verifique a dinâmica (você não pode ouvir, então meça). RMS por seção deve aumentar da construção para o drop, cair no meio-tempo e atingir o pico nos drops. Se a construção for mais alta que o drop, abaixe as camadas de sintetizador da construção. Também renderize um espectrograma (ffmpeg ... showspectrumpic) e observe-o.
• Vozes: após a mixagem, confirme se estão audíveis com Whisper no segmento mixado.

5. Legendas (opcional, precisa de voz)

captions-lines.json contém [{"clip": "assets/line1.wav", "at": 1.62, "text": "roteiro exato", "y": 600}]. Então execute kinetix captions my-reel. Whisper roda em modo inglês com o roteiro como prompt, então frases Hinglish e outras romanizadas mantêm sua grafia. As páginas são construídas por linha.

6. Verifique: olhe, depois gate

1. kinetix snap my-reel 1.5,4,9,..., um tempo por cena. Abra as folhas de contato e realmente olhe. Um quadro em branco significa um erro JS ou uma linha do tempo não registrada.
2. kinetix check my-reel amostra a cada ½ s, e deve terminar com 0 erros.
   • Corrija achados reais: texto transbordando sua caixa, sobreposições, texto oculto, contraste.
   • Marque apenas sobreposições intencionais, nunca problemas reais: data-layout-allow-overlap para um carimbo sobre um documento, data-layout-allow-occlusion para texto deliberadamente sobre um sprite, data-layout-allow-overflow para uma captura de tela cortada em um quadro, data-layout-ignore para um fundo decorativo ou emoji enorme desbotado.
   • Antes de afirmar que uma "correção" era visível, compare os quadros antes e depois. Alguns achados são falsos positivos do verificador.

7. Efeitos e renderização

kinetix fx leak --hue 200 -o overlays/leak-cyan.mov        # matiz: 0 âmbar, 70 rosa, 200 ciano, 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

• Leaks: arquivos leak-* são sobrepostos como tela como luz, então o texto permanece legível. Comece um leak ~0,4 s antes de um drop para que ele atinja o pico nele, e não deixe um pico em um impacto de logotipo.
• Stingers: comece ~0,3 s antes de um corte para que o painel o cubra.
• Poster: --poster grava o melhor quadro estabilizado como quadro 0, que é a miniatura no X, YouTube, Slack e Discord. Escolha um cartão de logotipo ou o momento chave, nunca um quadro no meio de uma animação ou em um flash.
• Verificação final: extraia quadros do mp4 final (quadro 0, cada pico de sobreposição, cada cena de filmagem) e olhe para eles.

Pegadinhas (todas ocorreram de verdade)

• A ponte retorna { timeline }, não a timeline. Uma timeline GSAP é um thenable, então retorná-la diretamente de uma função async trava para sempre e todo quadro renderiza em branco.
• Caixas de destaque em fontes de exibição precisam de line-height: 1.12 (já em kinetix.css), ou glifos saem e check sinaliza text_box_overflow.
• Filmagens devem ser <video muted data-start data-duration [data-media-start]> em um wrapper sem tempo, nunca sequências JPG. Anime o wrapper, não o vídeo.
• Trocas de imagem (tela A → B) usam KinetixBridge.stackSet(img, src), que pré-decodifica as variantes. Definir src no momento da renderização captura quadros não decodificados.
• Toda fonte nomeada precisa de @font-face. Para a fonte de emoji do sistema, declare src: local("Noto Color Emoji").
• Bases MusicGen: beat_track do librosa interpreta mal tempos de phonk e club (chamou 150 bpm de "121" e "199"), razão pela qual hypebeat usa autocorrelação de onset e limita o estiramento a ±12%. musicgen-medium precisa de ~8 GB de RAM livre para carregar; small é o padrão.
• Legendas: agrupar todas as linhas em uma chamada createTikTokStyleCaptions mescla a última palavra de uma linha na próxima, então página por linha (o runtime faz).
• Remotion: renderize com --gl=swangle (GL por software funciona em qualquer lugar) e como ProRes 4444 com alfa. O decodificador VP9 do ffmpeg descarta alfa.
• Licenças:
  • A saída do MusicGen é CC-BY-NC, boa para demos e canais pessoais, não para trabalho pago.
  • Remotion é gratuito para indivíduos e empresas de até 3 pessoas.
  • Efeitos sonoros incluídos são CC0.

Entrega

Diga ao usuário:

• onde está o mp4
• o que contém, como uma lista curta batida por batida
• o que você verificou e como (folhas de contato, resultado da verificação, volume)
• quaisquer escolhas de números ou afirmações que você fez
• o que você não pôde verificar (você não pode ouvir; peça para eles ouvirem)

Ofereça-se para postar, mas não poste sem um sim.