2233admin/design-pipeline

Vídeo de Lançamento

Crie um filme de lançamento premium e de alta energia, com 15 a 60 segundos, que pare a rolagem e converta. Construa o arco clássico — gancho → provocação → revelação → montagem de recursos → cartão final com CTA — cortado para a música e exportado para todos os formatos de plataforma.

Quando usar

• Lançamentos de produtos, anúncios de funcionalidades, trailers, vídeos de hype (15–60s).
• Vídeos heróis "sizzle" para página de destino.
• Revelações sincronizadas com a batida, onde o momento da marca cai no drop.

O arco

Batida	Função	Duração típica (de 30s)
Gancho (0–3s)	Um quadro/movimento impressionante que para a rolagem	0–3s
Provocação	Sugerir o produto; construir curiosidade, sincronizado com a batida	3–9s
Revelação	Produto/logotipo atinge o drop musical	9–13s
Montagem de recursos	Rápida, cinética, um benefício por cena	13–25s
Cartão final	Logotipo + slogan + CTA, limpo e estático	25–30s

Escala as mesmas proporções para 15s (mais enxuto) ou 60s (montagem mais longa, nunca um gancho mais longo).

Duas regras inegociáveis

1. O design de som lidera a imagem. Trave a faixa primeiro, marque as batidas e o drop, depois corte os visuais para essas marcas. Nunca pontue um corte finalizado — a revelação cai no drop, não perto dele.
2. Qualidade sobre quantidade. Algumas cenas impecáveis vencem muitas medíocres. Corte qualquer cena que não seja premium.

Revelação sincronizada com a batida no drop

Encontre o timecode exato do drop no áudio e, em seguida, temporalize a revelação para que a marca se encaixe totalmente naquele quadro, com um micro overshoot para impacto.

import gsap from "gsap";
const DROP = 9.0; // segundos, medidos a partir da faixa
const tl = gsap.timeline({ paused: true });
// provocação constrói tensão até o drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// revelação ESTALA no quadro do drop
  .set(".logo", { opacity: 1 }, DROP)
  .fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
  .fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // flash branco
audio.addEventListener("play", () => tl.play());

Corte em transitórios, não em uma grade fixa: os cortes mais fortes vão em batidas de kick/snare; aumente a velocidade (time-remap) até o drop, depois corte abruptamente.

Montagem de recursos cinética

Um benefício por cena, ~0.6–1.0s cada, cortes duros na batida. Cada cena = uma palavra-chave ousada + um único visual de apoio.

.feature { opacity:0; }
.feature.in .kw   { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }

// conduz as cenas com base nas marcas de batida medidas da faixa
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // segundos
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));

Mantenha uma linguagem de movimento em toda a montagem (mesma curva de entrada, mesma saída) para que a velocidade pareça confiança, não caos.

Cartão final

Segure o logotipo + slogan + CTA parado e limpo por ≥2s. Nenhum movimento agitado competindo com o CTA; deixe a marca se acomodar. Coloque o momento da marca na batida mais forte restante, depois um botão/URL nítido.

Exportação em múltiplos formatos

Componha com uma zona segura central para que um mestre seja cortado limpo em todos os formatos.

Formato	Uso	Resolução	Zona segura
16:9	YouTube, herói de página, X	1920×1080	mantenha o conteúdo principal no centro 90%
9:16	Reels, TikTok, Shorts, Stories	1080×1920	texto dentro do centro 80% h; evite topo 12% / fundo 18% (UI)
1:1	Posts de feed	1080×1080	quadrado central do quadro 16:9

Projete o herói/logotipo/CTA dentro do quadrado central 1:1 para que sobreviva a qualquer corte. Renderize o mestre 16:9, depois reenquadre (não apenas letterbox) 9:16 e 1:1 a partir do mesmo projeto.

Checklist de saída

• Faixa travada primeiro; revelação cai exatamente no drop.
• Gancho conquista os primeiros 3 segundos.
• Montagem: um benefício por cena, cortes duros nas batidas, linguagem de movimento consistente.
• Cartão final segura ≥2s com um CTA claro.
• Exportações 16:9 + 9:16 + 1:1, conteúdo principal na zona segura central.
• Apenas cenas premium — nada medíocre sobrevive ao corte.

Entregar e verificar (stills renderizados → MP4)

Ajudante empacotado (scripts/): organize seus stills com scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois afirme a codificação com scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Veja scripts/README.md.

Se o filme de lançamento for construído/renderizado no Remotion, trate-o como o nível pesado: registre um <Composition> (+ zod schema + defaultProps), conduza cada valor com useCurrentFrame() — sem linhas do tempo GSAP / callbacks de evento de áudio / Date.now() / Math.random() no momento da renderização (grave timecodes de batida + drop nas props). Entregável = o out/*.mp4 renderizado por formato (mais o projeto).

Laço de verificação — renderizar stills → inspecionar → codificar. Amostre o arco, com as props enviadas (título/slogan/CTA reais), não apenas defaultProps.

# Stills exatos do quadro em todo o gancho → revelação → cartão final
npx remotion still Launch out/f-hook.png   --frame=24  --props=props/launch.json   # gancho conquista os primeiros 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json   # logotipo ESTALA no quadro do drop
npx remotion still Launch out/f-end.png    --frame=899 --props=props/launch.json   # cartão final: logotipo+slogan+CTA, limpo
# inspecione cada um: fidelidade (produto/logotipo, slogan, texto do CTA exato, cores da marca corretas, revelação no quadro do drop)
#   E artefatos (transbordamento de texto, fora da tela, CTA no terço inferior 9:16, fonte ausente, quadro de flash travado)

Múltiplos formatos — verifique o mestre em CADA formato antes de codificar todos eles. Um bug de reenquadramento (herói empurrado para fora da zona segura) se repete em todos os formatos; pegue-o uma vez.

for ar in 16x9 9x16 1x1; do                                 # verifique revelação + cartão final por formato
  npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
    --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# stills limpos em todos os formatos? → então codifique cada um:
for ar in 16x9 9x16 1x1; do
  npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json   # demonstração do README

Antes de terminar:

1. npx remotion still renderiza limpo no gancho / revelação / cartão final — sem erros, sem fontes/assets ausentes.
2. Texto do logotipo/slogan/CTA exato, cores da marca corretas; revelação cai no quadro do drop; conteúdo principal dentro da zona segura central, limpo do terço inferior 9:16.
3. Apenas orientado por quadro — sem temporização GSAP/callback de áudio, Date.now() ou Math.random() (batidas/drop gravados nas props).
4. Props enviadas renderizam corretamente (não apenas defaultProps); o cartão final segura ≥2s com um CTA.
5. Mestre verificado em 16:9 + 9:16 + 1:1 antes da codificação; MP4s reproduzem; (opcional) GIF para o README.

Arquivos de referência

• references/launch-structure.md — um modelo completo cena por cena com timecodes para um filme de 30s (escalável para 15–60s), temporização de revelação sincronizada com a batida, receitas de cena para montagem cinética, o fluxo de trabalho de design de som liderando a imagem e mapas detalhados de zona segura para múltiplos formatos 16:9 / 9:16 / 1:1.