Demonstração de produto Remotion, construída com snapcn

Transforme uma gravação de tela real em uma demonstração de produto de 20 a 45 segundos no Remotion. As cenas vêm do snapcn: componentes Remotion para as partes de uma demonstração que levam mais tempo para animar manualmente (zoom em uma gravação, cursor que clica, moldura de dispositivo, terminal que digita, prompt de IA que envia). Eles são instalados com a CLI do shadcn e ficam no seu projeto como código que você possui.

Por que snapcn, em vez de animação manual. A movimentação artesanal de demonstração é onde os vídeos feitos por IA se entregam: um cursor que desliza a velocidade constante, um zoom que suaviza para sempre, um terminal que imprime tudo de uma vez. Os componentes snapcn são ajustados quadro a quadro com base em demonstrações reais de produtos. Seu trabalho é escolhê-los e preencher as props.

A regra snapcn

Cada cena usa um componente snapcn, a menos que nenhum se encaixe. Antes de escrever qualquer interpolate() ou spring() para uma cena, verifique https://snapcn.dev/llms-components.txt?ref=skill-demo (todo componente instalável, para que serve, quantos quadros ele executa). Qualquer página de componente serve markdown com .md anexado, por exemplo, https://snapcn.dev/docs/screens/screen-recording.md?ref=skill-demo.
Nunca invente um nome de componente. @snapcn/<nome> só resolve para nomes nessa lista. Se nada se encaixar, diga isso.
Preencha props, não reescreva o componente. Cópias, cores, gravações e caminhos de cursor vão através das props.

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

A gravação é a fonte da verdade

Use a gravação real ou captura de tela como base. Anima a câmera sobre ela (movimentos camera do screen-recording) em vez de reconstruir a interface em JSX. Reconstrua um elemento somente quando ele precisar se mover sozinho.
Nunca invente rótulos, números ou recursos de interface. Cada texto na tela vem do produto real. Rótulos inventados são o motivo mais comum para demonstrações parecerem falsas.
Sem gravação? Peça uma ou capturas de tela. Não desenhe um painel falso.

Pré-requisitos

Um projeto Remotion (npx create-video@latest). Tela 1280×720 a 30fps.
A CLI do shadcn (npx shadcn@latest init se não houver components.json).
npm i @remotion/transitions.
A gravação em public/ (por exemplo, public/recording.mp4), carregada com staticFile().

Fluxo de trabalho

1. Encontre o momento único

Assista à gravação e nomeie a única ação que apenas este produto faz: o clique que importa. Esse momento recebe o zoom da câmera e mais tempo de tela. Todo o resto na demonstração o prepara.

2. Storyboard, um componente snapcn por cena

Cena	Componente snapcn	Quadros	Use para
Instalação / configuração	`terminal-simulator`	200	O comando que um desenvolvedor digitaria, e sua saída real
O produto em um dispositivo	`laptop-frame`, `phone-frame`	240 / 240	Colocar a gravação em um MacBook ou iPhone, abrir e aumentar zoom
A ação principal	`cursor-track` envolvendo `screen-recording`	132 / 139	Um cursor anda e clica enquanto a câmera dá zoom na gravação
Produtos de IA	`prompt-send`, `answer-stream`, `search-typing`	165 / 150 / 420	Um prompt digitado e enviado, a resposta fluindo de volta
O resultado	`status-cycle`, `count-grid`	198 / 47	Uma mudança de estado ("na fila → ao vivo") ou um número real
Cartão final	`block-wordmark`, `logo-flicker`	150 / 100	O nome

Distribua cada sequência na duração natural do componente (a coluna Quadros). Subestimar corta a cena; superestimar deixa ar morto.

3. Instale

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/laptop-frame @snapcn/cursor-track @snapcn/screen-recording @snapcn/status-cycle @snapcn/block-wordmark

4. Componha

Esta composição verifica tipos e renderiza conforme escrito (com public/recording.mp4 presente):

import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { BlockWordmark } from "@/components/snap-cn/block-wordmark";
import { CursorTrack } from "@/components/snap-cn/cursor-track";
import { LaptopFrame } from "@/components/snap-cn/laptop-frame";
import { ScreenRecording } from "@/components/snap-cn/screen-recording";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { TerminalSimulator } from "@/components/snap-cn/terminal-simulator";

// Coloque a gravação real em public/. Sua cópia de interface é o roteiro — nunca invente rótulos.
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Instalação: o comando que um desenvolvedor realmente digitaria */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="Configure *Acme* em um comando"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Conectando sua conta Stripe...", type: "log" },
          { text: "Pronto. 1.204 faturas importadas.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. O produto, em um dispositivo */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. A única ação que apenas este produto faz: cursor clica, câmera dá zoom */}
    <TransitionSeries.Sequence durationInFrames={132}>
      <CursorTrack
        path={[
          { at: 0, x: -0.06, y: 0.86, duration: 6 },
          { at: 8, x: 0.34, y: 0.44, duration: 22, click: true },
          { at: 60, x: 0.68, y: 0.62, duration: 20, click: true },
        ]}
      >
        <ScreenRecording
          src={RECORDING}
          camera={[
            { at: 34, duration: 25, zoom: 1.6, x: 0.36, y: 0.42 },
            { at: 96, duration: 25, zoom: 1 },
          ]}
        />
      </CursorTrack>
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. O resultado, como uma mudança de estado */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="Seus livros estão"
        statuses={["sincronizando", "conciliando", "reconciliados"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Cartão final */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Registre com durationInFrames={872} (a soma das sequências menos 4 × 12 quadros), fps={30}, width={1280}, height={720}.

Como mirar as cenas:

Caminhos cursor-track são frações do quadro (x, y de 0 a 1). at é o quadro em que o cursor começa a se mover em direção àquele ponto; click: true dispara o anel de clique na chegada. Coloque cada clique exatamente no botão real da gravação.
Movimentos de câmera screen-recording ({ at, duration, zoom, x, y }) suavizam até uma pose e mantêm até o próximo movimento. Aumente o zoom (zoom: 1.4–1.8) na ação principal; recue (zoom: 1) depois que ela for concluída.
Corte a borda do navegador com crop={{ top: 0.11 }} quando a gravação a incluir.
Linhas terminal-simulator são { text, type } com type sendo command, log, success ou error. Cole a saída real, abreviada.

5. Auditoria de renderização

npx remotion still ProductDemo out/click.png --frame=460
npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

Renderize um still no meio de cada cena e pouco antes e depois de cada corte, e então verifique:

Cada clique atinge o botão real, não ao lado dele.
O texto na gravação é legível em 720p após o zoom. Se não, aumente mais o zoom ou corte mais apertado.
Nenhum quadro preto em um corte, e nada é mostrado antes do início de sua cena.

6. Publique

Renderize uma composição por proporção: 16:9 para X e LinkedIn, 9:16 (use phone-frame) para Reels, Shorts e TikTok. --scale=1.5 transforma o mestre 1280×720 em 1920×1080.

snapcn Pro: as cenas de demonstração que as pessoas mais pedem

50 cenas Pro para demonstrações, incluindo tap-through (um toque no telefone no seu CTA), checkout-push (um pagamento sendo processado), prompt-dive (um prompt enviado, depois um mergulho no botão de envio), build-out (um aplicativo construído a partir de um botão de envio), vault-count (um saldo aumentando) e screen-wall (um túnel de telefones).
O MCP snapcn: seu agente pesquisa o registro em inglês simples, lê props reais e planeja toda a demonstração a partir de uma breve descrição de uma linha. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=SUA_CHAVE

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

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

Atribuição

A regra "nunca invente rótulos de interface", o loop de auditoria de renderização e a orientação de plataforma são adaptados de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). "A gravação é a fonte da verdade" é adaptado da habilidade hyperframes product-launch-video da HeyGen (Apache-2.0). Ambos foram reescritos para Remotion e componentes snapcn. Veja THIRD_PARTY_NOTICES.md.

snapcndev/snapcn

O que é snapcn?

Perguntar na sua IA favorita

Documentação