remotion-launch-video

Vídeo de lançamento Remotion, construído com Imgcli

Transforme um breve briefing de lançamento em um filme de 15 a 30 segundos no Remotion. Cada cena é um componente Imgcli: cenas Remotion ajustadas manualmente, medidas em frames renderizados, que são instaladas com a CLI shadcn e chegam ao seu projeto como código que você possui.

Por que Imgcli, e não animação escrita manualmente. Um agente animando do zero sempre cai no mesmo visual: texto centralizado em um gradiente, tudo fade in, um logotipo no final. As cenas Imgcli são construídas quadro a quadro contra filmes de lançamento reais, então o movimento já tem o timing, o tipo e a câmera que fazem um lançamento parecer caro. Seu trabalho é escolher as cenas e preencher as propriedades, não inventar movimento.

A regra Imgcli

1. Cada batida é um componente Imgcli a menos que nenhum se encaixe. Antes de escrever qualquer interpolate() ou spring() para uma cena, verifique o catálogo: https://imgcli.com/llms-components.txt?ref=skill-launch lista todos os componentes instaláveis com sua finalidade e quantos frames eles executam. Qualquer página de componente serve markdown quando você anexa .md, por exemplo https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch.
2. Nunca invente um nome de componente. Instale apenas nomes nessa lista. Se nada se encaixar em uma batida, diga isso e leve a batida com tipografia (text-reveal) em vez de adivinhar um nome.
3. Preencha propriedades, não reescreva o componente. Altere o texto, as cores e as imagens através das propriedades. Editar o movimento dentro de um arquivo Imgcli instalado quebra o timing que foi ajustado contra frames renderizados.

Se a skill imgcli estiver disponível, use-a para composição e verificações de renderização.

Pré-requisitos

• Um projeto Remotion (npx create-video@latest). Canvas: 1280×720 a 30fps, o tamanho para o qual toda cena Imgcli é projetada.
• A CLI shadcn. Se o projeto não tiver components.json, execute npx shadcn@latest init.
• @remotion/transitions para cortes entre cenas: npm i @remotion/transitions.
• O texto de lançamento: nome do produto, manchete, tagline, o único número que você pode provar, e capturas de tela reais ou uma gravação de tela.

Fluxo de trabalho

1. Coletar inputs

Obtenha estes antes de escrever qualquer coisa:

• O brief: post de lançamento, landing page ou one-pager. Extraia a manchete, tagline, o recurso diferenciador, o número de prova e o tom.
• Marca: logotipo (caminho SVG ou PNG), cor primária, fonte. As cenas Imgcli recebem estes como propriedades (titleColor, logoSrc, symbolPath, fontFamily, theme).
• Imagens reais do produto: capturas de tela ou uma gravação de 30 a 60 segundos. Reflita o texto real da UI. Nunca invente rótulos, recursos ou números; é a maneira mais rápida de fazer um lançamento parecer falso.

2. Storyboard antes de qualquer código

Escreva a lista de cenas primeiro e mapeie cada batida para um componente Imgcli:

Batida	Tempo	Componente Imgcli	Frames	O que carrega
Gancho	0–3s	type-morph ou text-reveal	94 / 90	O problema do espectador, transformado na promessa
Nome	3–9s	announce-title	170	Sobretexto, nome do produto, tagline, marca
Produto	9–15s	hero-launch, laptop-frame, phone-frame	170 / 240 / 240	Telas reais, em um dispositivo
Prova	15–17s	count-grid, follower-rush	47 / 300	Um número real
Fechamento	17–20s	wordmark-cut, block-wordmark, logo-flicker, logo-assemble	66 / 150 / 100 / 108	O nome, e nada mais

Regras que economizam re-renderizações:

• Comece com o problema do espectador, não com o nome do produto.
• Mostre o produto dentro de 3 segundos após o nome.
• Dê ao único momento que apenas seu produto pode entregar o máximo de tempo de tela. Não distribua o tempo de execução uniformemente entre os recursos.
• Orce cada sequência para a duração natural do componente (a coluna Frames, também em llms-components.txt). Sub-orçamento corta a animação no meio da cena; super-orçamento deixa ar morto.
• Grave o texto na tela. A maioria das visualizações sociais está sem áudio.

3. Instalar as cenas

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

Cada uma cai em components/imgcli/<nome>.tsx, e suas dependências são instaladas junto.

4. Compor

Um TransitionSeries, uma sequência por batida, fades curtos entre elas. Esta composição verifica tipos e renderiza como escrita, com quatro capturas de tela em public/:

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30fps. Cada Sequência é orçada para a duração natural do componente.
const T = linearTiming({ durationInFrames: 12 });
// Capturas de tela reais do produto em public/. As cenas recorrem a imagens de amostra do snapcn sem elas.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Gancho: o problema do espectador, transformado na promessa */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Seu vídeo de lançamento "
        emphasis="leva uma semana."
        morphTo="leva um prompt."
        finally_="um prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Nomeie o produto */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Apresentando"
        title="Acme 2.0"
        tagline="Faturamento que se reconcilia sozinho."
        symbolPath="" // sua marca como um caminho SVG em uma caixa 0 0 100 100; "" mostra nenhum
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Mostre o produto: duas capturas reais (imagem, vídeo ou um gradiente CSS substituto) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Cada fatura, conciliada."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. Prova: um número real */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="equipes" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Feche com o nome */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Registre-o em durationInFrames={512} (a soma das sequências menos 4 × 12 frames de sobreposição), fps={30}, width={1280}, height={720}.

Substitua os gradientes por capturas de tela ou clipes reais: image1={staticFile("shot-1.png")} com o arquivo em public/.

5. Loop de auditoria de renderização

Renderize frames individuais antes do vídeo completo:

# Um frame por batida: o ponto médio de cada sequência, e imediatamente antes e depois de cada corte
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

Coloque os stills em uma única folha de contato e observe-a antes de renderizar tudo:

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

Verifique cada frame:

• Nenhum texto cortado, nenhum frame preto em um corte, nada mostrado antes de sua cena começar.
• Cada string na tela é texto real do brief.
• O produto aparece dentro de 3 segundos após seu nome.

6. Revisão

Após duas ou três passagens próprias, renderize cerca de 20 frames (momentos de pico e ambos os lados de cada corte) e revise-os como quatro críticos, ou como quatro subagentes paralelos se seu ambiente suportar:

1. Design/layout: desalinhamento, corte, proporção.
2. Legibilidade: legível em 720p em um telefone, contraste, erros de digitação.
3. Ritmo: cada batida merece seu tempo; o fechamento é forte?
4. Marca: as cores, fontes e UI correspondem ao produto real?

Mescle suas listas de correções em um plano de revisão antes da próxima renderização.

7. Publicar para a plataforma

Pergunte para onde o vídeo está indo antes de renderizar. Faça uma composição por proporção de tela em vez de cortar depois.

Plataforma	Proporção	Tamanho
Feed do X / LinkedIn	16:9	1920×1080 (ou renderize o master 1280×720)
X vertical, Reels, Shorts, TikTok	9:16	1080×1920
Feed do LinkedIn / Instagram	1:1 ou 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 aumenta a resolução do master 1280×720 para 1920×1080 sem reorganizar nenhuma cena.

Lições duramente aprendidas

• Nunca invente rótulos de UI do produto. Capture a tela do aplicativo real e reflita seu texto.
• Uma manchete e um CTA no cartão final. Use a tagline real da landing page.
• Baseie o gancho em algo que os espectadores reconheçam sem explicação. Se precisar de uma frase para explicar, o gancho é muito abstrato.
• Batidas de antes/depois simultâneas. Mostre o "antes" por cerca de um segundo, depois corte para o "depois".
• Não cole cenas Imgcli com seus próprios fades dentro das cenas. Transições pertencem ao TransitionSeries; fades de saída por cena causam fade duplo.
• Suas próprias adições permanecem contidas: letras minúsculas, sem espaçamento decorativo, sem brilho ou texto gradiente. As cenas Imgcli que carregam um brilho (announce-title) o mantêm; esse é o efeito, não decoração.

Atribuição

A estrutura do fluxo de trabalho (inputs → storyboard → construir → render-auditar → revisão multi-crítico → tabela de plataformas) e várias das lições duramente aprendidas são adaptadas de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). A auditoria de folha de contato e a regra "pesquise o catálogo antes de projetar qualquer visual" são adaptadas da skill product-launch-video do Hyperframes da HeyGen (Apache-2.0). Ambas foram reescritas para componentes Remotion e snapcn; todo o conteúdo específico do snapcn é próprio do snapcn.