Vídeo de Lançamento
Crie um filme de lançamento premium e de alta energia de 15 a 60 segundos que pare a rolagem e converta. Construa o arco clássico — gancho → teaser → revelação → montagem de funcionalidades → cartão final com CTA — cortado ao som da música, e exporte para cada aspecto de plataforma.
Quando usar
- Lançamentos de produtos, anúncios de funcionalidades, trailers, reels de hype (15–60s).
- Vídeos hero "sizzle" para uma página de destino.
- Revelações sincronizadas com a batida onde o momento da marca cai no drop.
O arco
| Batida | Função | Parcela típica (de 30s) |
|---|---|---|
| Gancho (0–3s) | Um quadro/movimento impressionante que pare a rolagem | 0–3s |
| Teaser | Insinue o produto; construa curiosidade, sincronizado com a batida | 3–9s |
| Revelação | Produto/logo acerta no drop da música | 9–13s |
| Montagem de funcionalidades | Rápida, cinética, um benefício por cena | 13–25s |
| Cartão final | Logo + tagline + CTA, parada limpa | 25–30s |
Escalone as mesmas proporções para 15s (mais enxuto) ou 60s (montagem mais longa, nunca um gancho maior).
Duas regras inegociáveis
- 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.
- Qualidade sobre quantidade. Poucas 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 depois cronometre a revelação para que a marca da marca se encaixe totalmente naquele quadro, com um micro-exagero para impacto.
import gsap from "gsap";
const DROP = 9.0; // segundos, medido a partir da faixa
const tl = gsap.timeline({ paused: true });
// o teaser constrói tensão até o drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// revelação TRAVA 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 transientes, não em uma grade fixa: os cortes mais fortes vão em batidas de kick/caixa; acelere (time-remap) até o drop, depois corte seco para fora dele.
Montagem cinética de funcionalidades
Um benefício por cena, ~0.6–1.0s cada, cortes secos na batida. Cada cena = uma palavra-chave em negrito + um único visual de suporte.
.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 } }
// acione as cenas a partir das marcas de batida medidas na faixa
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // segundos
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
Mantenha uma única linguagem de movimento em toda a montagem (mesma curva de entrada, mesma saída) para que a velocidade seja lida como confiança, não caos.
Cartão final
Segure o logo + tagline + CTA parados e limpos por ≥2s. Sem movimento ocupado competindo com o CTA; deixe a marca se estabelecer. Coloque o momento da marca na batida mais forte restante, depois um botão/URL nítido.
Exportação multi-aspecto
Componha com uma zona segura central para que um mestre seja cortado limpo para todos os aspectos.
| Aspecto | Uso | Resolução | Zona segura |
|---|---|---|---|
| 16:9 | YouTube, hero de landing, X | 1920×1080 | mantenha o conteúdo principal dentro dos 90% centrais |
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | texto dentro dos 80% centrais da altura; evite 12% superior / 18% inferior (UI) |
| 1:1 | Posts do feed | 1080×1080 | quadrado central do quadro 16:9 |
Projete o hero/logo/CTA dentro do quadrado central 1:1 para que ele sobreviva a qualquer corte. Renderize o mestre 16:9, depois reenquadre (não apenas coloque letterbox) o 9:16 e o 1:1 a partir do mesmo projeto.
Lista de verificação de saída
- Faixa travada primeiro; revelação cai exatamente no drop.
- Gancho ganha os primeiros 3 segundos.
- Montagem: um benefício por cena, cortes secos nas batidas, linguagem de movimento consistente.
- Cartão final segura por ≥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)
Helper empacotado (
scripts/): organize seus stills comscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois afirme a codificação comscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Vejascripts/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), dirija cada valor com useCurrentFrame() — sem timelines GSAP / callbacks de áudio / Date.now() / Math.random() no momento da renderização (grave os timecodes de batida + drop nas props). Entregável = o out/*.mp4 renderizado por aspecto (mais o projeto).
Loop de verificação — renderize stills → inspecione → codifique. Amostre o arco, com as props enviadas (headline/tagline/CTA reais), não apenas defaultProps.
# Stills frame-exatos no gancho → revelação → cartão final
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # gancho ganha os primeiros 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # logo TRAVA no quadro do drop
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # cartão final: logo+tagline+CTA, parada limpa
# inspecione cada: fidelidade (produto/logo, tagline, texto do CTA exato, cores da marca corretas, revelação no quadro do drop)
# E artefatos (estouro de texto, fora da tela, CTA no terço inferior do 9:16, fonte faltando, quadro de flash travado)
Multi-aspecto — verifique o mestre em CADA aspecto antes de codificar todos eles. Um bug de reenquadramento (hero empurrado para fora da zona segura) se repete em todos os aspectos; pegue-o uma vez.
for ar in 16x9 9x16 1x1; do # verifique revelação + cartão final por aspecto
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# stills limpos em todos os aspectos? → depois codifique cada:
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 # demo do README
Antes de terminar:
npx remotion stillrenderiza limpo no gancho / revelação / cartão final — sem erros, sem fontes/ativos faltando.- Texto do logo/tagline/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 do 9:16.
- Somente orientado a frame — sem temporização GSAP/callback de áudio,
Date.now()ouMath.random()(batidas/drop colocados nas props). - Props enviadas renderizam corretamente (não apenas
defaultProps); o cartão final segura por ≥2s com um CTA. - Mestre verificado em 16:9 + 9:16 + 1:1 antes da codificação; MP4s tocam; (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 multi-aspecto para 16:9 / 9:16 / 1:1.