snapcndev/snapcn

Vídeo explicativo em Remotion, construído com snapcn

Um explicador narrado em Remotion: uma voz over dita o ritmo, as legendas são gravadas diretamente no vídeo, e cada batida na tela é uma cena snapcn. As cenas snapcn são instaladas com o CLI shadcn e ficam no seu projeto como código que você possui.

Por que snapcn, e não slides escritos à mão. Um vídeo narrado feito do zero acaba sendo pontos de bala aparecendo sobre um gradiente. O snapcn dá a cada batida uma cena de verdade: declarações que cortam forte, um status que muda de estado, um número que escala, um produto em um dispositivo.

A regra snapcn

1. Cada batida é um componente snapcn, a menos que nenhum se encaixe. Catálogo com durações: https://snapcn.dev/llms-components.txt?ref=skill-explainer; qualquer página como markdown, ex.: https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer.
2. Nunca invente um nome de componente. Apenas nomes dessa lista são instaláveis.
3. Defina toda prop de texto. As cenas vêm com texto de exemplo que permanece no seu vídeo caso contrário.

Para o catálogo completo, instale também a skill guarda-chuva: npx skills add snapcndev/snapcn --skill snapcn.

Fluxo de trabalho

1. Script primeiro

Escreva a voz over antes de qualquer código, uma frase por batida. 150 palavras duram cerca de um minuto.

Batida	O que diz	Cena snapcn	Quadros
Gancho	O problema, nas palavras do espectador	punch-lines, type-morph	144 / 94
Como funciona	2–3 passos ou estados	status-cycle, word-flip, card-rail	198 / 180 / 108
Mostre	O produto em ação	laptop-frame, phone-frame, screen-recording	240 / 240 / 139
Prova	Um número real	count-grid	47
Fechamento	O nome	wordmark-cut, block-wordmark	66 / 150

2. Voz over e timings das palavras

• Grave ou gere a voz over. Coloque em public/voiceover.mp3.
• Obtenha timings no nível da palavra como { text, startMs, endMs }[], no formato @remotion/captions, do Whisper (@remotion/install-whisper-cpp) ou do seu provedor TTS.
• A voz over define a duração. Estique a sequência de cada batida até sua frase, nunca mais curta que o comprimento natural da cena (a coluna Quadros).

3. Legendas

• word-captions: legendas embutidas que percorrem a transcrição; passe captions. Estilos via preset; use aspect="9:16" para vertical.
• karaoke-captions: uma linha que se preenche palavra por palavra, para uma única citação enfatizada.
• As legendas ficam sobre todas as cenas; são transparentes sobre a cena atrás delas.

4. Construir

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

Um explicador de ~15s: problema → como funciona → prova → nome, narrado, com legendas. Ele passa na verificação de tipos e renderiza como escrito com public/voiceover.mp3 e quatro capturas de tela presentes:

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// Timings no nível da palavra do Whisper (ou @remotion/captions): { text, startMs, endMs }[].
const captions = [
  { text: "Fechar", startMs: 0, endMs: 400 },
  { text: "os", startMs: 400, endMs: 550 },
  { text: "livros", startMs: 550, endMs: 1000 },
  { text: "leva", startMs: 1000, endMs: 1350 },
  { text: "uma", startMs: 1350, endMs: 1450 },
  { text: "semana.", startMs: 1450, endMs: 2100 },
];

// Capturas de tela 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));

// ~15s explicador: problema → como funciona → resultado → nome, narrado, legendas embutidas.
export const Explainer: React.FC = () => (
  <AbsoluteFill>
    <Series>
      <Series.Sequence durationInFrames={144}>
        <PunchLines script="Fechar os livros / leva uma semana. | Acme / faz isso da noite para o dia." />
      </Series.Sequence>
      <Series.Sequence durationInFrames={198}>
        <StatusCycle
          prefix="Cada fatura é"
          statuses={["importada", "conciliada", "fechada"]}
          chips={["Stripe", "QuickBooks", "Xero"]}
        />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <CountGrid from="5" to="500" noun="equipes" cards={shots} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={66}>
        <WordmarkCut word="acme." />
      </Series.Sequence>
    </Series>
    <WordCaptions captions={captions} />
    <Audio src={staticFile("voiceover.mp3")} />
  </AbsoluteFill>
);

Registre com durationInFrames={468}, fps={30}, width={1280}, height={720}. Para um explicador real, derive a duração de cada sequência a partir dos timings de sua frase e defina o total a partir da duração da voz over.

5. Verificar e renderizar

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

• Cada cena fica na tela enquanto sua frase é falada. Assista com som uma vez.
• As legendas nunca cobrem o título da própria cena; se cobrirem, mova o texto da cena ou use uma página de legenda mais curta (maxWords).
• Toda string na tela vem do script, e nenhum texto de exemplo deixa de ser substituído.

Regras

• Diga, depois mostre. A cena mostra o que a voz acabou de afirmar, nunca um texto diferente para ler ao mesmo tempo.
• Uma ideia por batida, cerca de 5 a 8 segundos cada.
• Grave as legendas no vídeo. A maioria das visualizações começa sem som.
• Apenas números reais. Nunca invente uma métrica para a batida de prova.

snapcn Pro

O Pro adiciona batidas explicativas como orbit-flow (como funciona em três paradas rotuladas), proof-line, hex-tally e metric-morph (números que se fixam), e read-through, além dos modelos e do MCP snapcn, que planeja as batidas a partir do seu script: claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY. Componentes Pro instalam como os gratuitos assim que components.json envia sua chave (https://snapcn.dev/account?ref=skill-explainer). Planos: https://snapcn.dev/docs/pricing?ref=skill-explainer

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

Atribuição

A auditoria de renderização e a orientação "grave legendas" são adaptadas de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). Consulte THIRD_PARTY_NOTICES.md.