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

Transforme um briefing de lançamento em um filme de 15 a 30 segundos no Remotion. Cada toma é um componente snapcn: cenas Remotion ajustadas manualmente, medidas em quadros renderizados, que instalam com a CLI do shadcn e chegam ao seu projeto como código que você possui.

Por que snapcn, e não animação escrita à mão. Um agente animando do zero cai no mesmo visual toda vez: texto centralizado em um gradiente, tudo fade in, um logo no final. As cenas snapcn 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 props, não inventar movimento.

A regra snapcn

Cada batida é um componente snapcn, a menos que nenhum se encaixe. Antes de escrever qualquer interpolate() ou spring() para uma toma, consulte o catálogo: https://snapcn.dev/llms-components.txt?ref=skill-launch lista cada componente instalável com sua finalidade e quantos quadros ele executa. Qualquer página de componente serve markdown quando você anexa .md, por exemplo https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch.
Nunca invente um nome de componente. @snapcn/<nome> resolve apenas para nomes nessa lista. Se nada se encaixar em uma batida, diga isso e leve a batida com tipografia (@snapcn/text-reveal) em vez de adivinhar um nome.
Preencha props, não reescreva o componente. Altere o texto, cores e imagens através das props. Editar o movimento dentro de um arquivo snapcn instalado quebra o timing que foi ajustado contra quadros renderizados.

Para o catálogo completo, as regras de composição e o padrão de qualidade, instale também o skill abrangente: npx skills add snapcndev/snapcn --skill snapcn.

Pré-requisitos

Um projeto Remotion (npx create-video@latest). Canvas: 1280×720 a 30fps, o tamanho para o qual cada cena snapcn está disposta.
A CLI do 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 do lançamento: nome do produto, manchete, slogan, o único número que você pode provar e capturas de tela reais ou uma gravação de tela.

Fluxo de trabalho

1. Coletar entradas

Extraia estes antes de escrever qualquer coisa:

O briefing: post de lançamento, landing page ou one-pager. Extraia a manchete, slogan, a funcionalidade que diferencia, o número de prova e o tom.
Marca: logo (caminho SVG ou PNG), cor primária, fonte. As cenas snapcn recebem estes como props (titleColor, logoSrc, symbolPath, fontFamily, theme).
Capturas reais do produto: screenshots ou uma gravação de 30 a 60 segundos. Espelhe o texto real da interface. Nunca invente labels, funcionalidades 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 tomas primeiro e mapeie cada batida para um componente snapcn:

Batida	Tempo	Componente snapcn	Quadros	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	Sobrancelha, nome do produto, slogan, 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 evitam re-renderizações:

Comece com o problema do espectador, não o nome do produto.
Mostre o produto dentro de 3 segundos do nome.
Dê ao único momento que só seu produto pode entregar o maior tempo de tela. Não distribua o tempo de execução igualmente entre funcionalidades.
Orce cada sequência para a duração natural do componente (a coluna Quadros, também em llms-components.txt). Sub-orçar corta a animação no meio da toma; super-orçar deixa ar morto.
Queime o texto. A maioria das visualizações sociais está sem som.

3. Instalar as cenas

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

Cada uma vai para components/snap-cn/<nome>.tsx, e suas dependências instalam junto.

4. Compor

Uma TransitionSeries, uma sequência por batida, fades curtos entre elas. Esta composição verifica tipos e renderiza conforme escrita, com quatro screenshots em public/:

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

// 1280×720 @ 30fps. Cada Sequence é orçada para a duração natural do componente.
const T = linearTiming({ durationInFrames: 12 });
// Screenshots reais do produto em public/. As cenas usam imagens de exemplo 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"
        slogan="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 tomas reais (imagem, vídeo ou um gradiente CSS substituto) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Cada nota, 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 com durationInFrames={512} (a soma das sequências menos 4 × 12 quadros de sobreposição), fps={30}, width={1280}, height={720}.

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

5. Loop de renderização-auditoria

Renderize quadros individuais antes do vídeo completo:

# Um quadro por batida: o ponto médio de cada sequência, e logo 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

Monte os stills em uma única folha de contatos e olhe antes de renderizar tudo:

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

Verifique cada quadro:

Nenhum texto cortado, nenhum quadro preto em um corte, nada mostrado antes de sua cena começar.
Cada texto na tela é cópia real do briefing.
O produto aparece dentro de 3 segundos do seu nome.

6. Revisão

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

Design/layout: desalinhamento, corte, proporção.
Legibilidade: legível em 720p num telefone, contraste, erros de digitação.
Ritmo: cada batida ganha seu tempo; o fechamento é forte?
Marca: as cores, fontes e interface 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 vai antes de renderizar. Faça uma composição por proporção de aspecto em vez de cortar depois.

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

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 aumenta a escala do master 1280×720 para 1920×1080 sem re-layout de nenhuma cena.

Lições duramente aprendidas

Nunca invente labels de interface do produto. Faça screenshot do app real e espelhe seu texto.
Uma manchete e uma CTA no cartão final. Use o slogan real da landing page.
Aterre o gancho em algo que os espectadores reconheçam sem explicação. Se precisar de uma frase para explicar, o gancho é abstrato demais.
Batidas antes/depois simultâneas. Mostre o "antes" por cerca de um segundo, depois corte para o "depois".
Não cole cenas snapcn com seus próprios fades dentro das cenas. Transições pertencem ao TransitionSeries; fades de saída por cena geram duplo fade.
Suas próprias adições permanecem contidas: frase em minúsculas, sem espaçamento decorativo entre letras, sem brilho ou texto gradiente. Cenas snapcn que carregam um brilho (announce-title) o mantêm; isso é o efeito, não decoração.

snapcn Pro: filmes finalizados e um agente que conhece cada prop

Para lançamentos que precisam de mais do que as cenas gratuitas:

50 cenas Pro construídas para lançamentos, incluindo version-drop (um número de versão) , library-flight, app-reveal, gallery-push (uma parede de changelog), screen-wall, checkout-push, tally-rise, ticker-climb e thank-you-swarm.
Templates (a partir de 20 de outubro de 2026): filmes de lançamento finalizados, walkthroughs de funcionalidades e clipes de changelog. Coloque seu texto e renderize: https://snapcn.dev/docs/templates?ref=skill-launch
O MCP snapcn: seu agente pesquisa o registro em linguagem natural, lê as props reais de cada componente e transforma um briefing de uma linha em um plano batida por batida com um esqueleto TransitionSeries. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=SUA_CHAVE

Componentes Pro instalam exatamente como os gratuitos assim que components.json envia sua chave (as três linhas estão em https://snapcn.dev/account?ref=skill-launch). Planos: https://snapcn.dev/docs/pricing?ref=skill-launch

Não está pronto para o Pro? Um componente Pro, Manifesto, é gratuito para um email confirmado: https://snapcn.dev/docs/pricing?ref=skill-launch#free

Atribuição

A estrutura do fluxo de trabalho (entradas → storyboard → construir → renderizar-auditar → revisão multi-crítica → 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 contatos e a regra "pesquise o catálogo antes de projetar qualquer visual" são adaptadas do skill hyperframes product-launch-video da HeyGen (Apache-2.0). Ambos foram reescritos para Remotion e componentes snapcn; todo o conteúdo específico do snapcn é próprio do snapcn.

snapcndev/snapcn

O que é snapcn?

Perguntar na sua IA favorita

Documentação