cdeistopened/skill-stack

Criador de Vídeos Remotion

Crie vídeos programáticos usando Remotion - componentes React que renderizam para vídeo. Esta skill codifica o estilo visual do Skill Stack e lições aprendidas ao criar conteúdo explicativo.

Propósito

Crie conteúdo de vídeo curto (10-60 segundos) que explique conceitos do Skill Stack com uma estética distinta inspirada em risografia. Vídeos são código, portanto são versionados, reproduzíveis e infinitamente editáveis.

Quando Usar Esta Skill

• Criando vídeos explicativos para conceitos do Skill Stack
• Construindo conteúdo animado para redes sociais (vertical 9:16, quadrado 1:1, paisagem 16:9)
• Visualizando fluxos de trabalho técnicos ou divulgação progressiva
• Qualquer vídeo onde timing preciso e tipografia importam

Não para:

• Edição de filmagens ao vivo (use ferramentas de vídeo tradicionais)
• Gráficos 3D complexos (Remotion é focado em 2D)
• Gráficos rápidos únicos (use Figma ou Canva)

---

Configuração do Projeto

Início Rápido

# Crie um novo projeto Remotion
npx create-video@latest meu-video

# Instale as dependências
cd meu-video && npm install

# Adicione Google Fonts
npm install @remotion/google-fonts

# Inicie o estúdio
npm run start  # Abre http://localhost:3000

Estrutura de Arquivos

meu-video/
├── src/
│   ├── Root.tsx           # Definições de composição
│   ├── Main.tsx           # Componente de vídeo principal
│   └── components/        # Elementos reutilizáveis
├── package.json
├── remotion.config.ts
└── out/                   # Vídeos renderizados

Configuração de Composição (Root.tsx)

Sempre crie múltiplas proporções para cada vídeo:

import { Composition, Folder } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (
  <>
    <Folder name="MyVideo">
      <Composition
        id="MyVideo-Vertical"
        component={MyVideo}
        durationInFrames={600}  // 20 segundos a 30fps
        fps={30}
        width={1080}
        height={1920}  // 9:16
      />
      <Composition
        id="MyVideo-Square"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1080}
        height={1080}  // 1:1
      />
      <Composition
        id="MyVideo-Landscape"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1920}
        height={1080}  // 16:9
      />
    </Folder>
  </>
);

---

Estilo Visual: Skill Stack Risograph

Paleta de Cores

const C = {
  paper: "#FAF8F5",    // Fundo branco-quente
  coral: "#D4694A",    // Destaque, CTAs, ênfases
  teal: "#1E4D4D",     // Cabeçalhos, estados selecionados
  ink: "#1C1C1C",      // Texto do corpo
  muted: "#666666",    // Texto secundário
  dimmed: "#AAAAAA",   // Terciário, desabilitado
  white: "#FFFFFF",    // Cartões, contêineres
};

Tipografia

import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
import { loadFont as loadPlayfair } from "@remotion/google-fonts/PlayfairDisplay";
import { loadFont as loadJetBrains } from "@remotion/google-fonts/JetBrainsMono";

// Texto do corpo, rótulos da UI
const { fontFamily: inter } = loadInter("normal", {
  weights: ["400", "500", "600"],
  subsets: ["latin"],
});

// Títulos, citações, texto emocional
const { fontFamily: playfair } = loadPlayfair("normal", {
  weights: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

// Código, conteúdo técnico, nomes de skills
const { fontFamily: mono } = loadJetBrains("normal", {
  weights: ["400", "500"],
  subsets: ["latin"],
});

Diretrizes de Tamanho de Fonte

Tamanhos mínimos legíveis para vídeo:

Elemento	Quadrado (1080)	Vertical (1080w)	Paisagem (1920w)
Títulos	64-84px	64-84px	72-96px
Nomes de skills	36-40px	36-40px	40-48px
Texto do corpo	28-32px	28-32px	32-36px
Rótulos	24-28px	24-28px	28-32px
Anotações	22-24px	22-24px	24-28px

Lição chave: Sempre maior do que você pensa. Vídeo comprime detalhes.

Sobreposição de Grão

const GrainOverlay: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        pointerEvents: "none",
        opacity: 0.04,
        mixBlendMode: "multiply",
      }}
    >
      <svg width="100%" height="100%">
        <defs>
          <filter id="grain">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.8"
              numOctaves="4"
              seed={Math.floor(frame / 4)}  // Anima o grão
            />
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#grain)" />
      </svg>
    </AbsoluteFill>
  );
};

---

Padrões de Animação

Ferramentas Principais

import {
  useCurrentFrame,
  useVideoConfig,
  AbsoluteFill,
  interpolate,
  spring,
  Sequence,
} from "remotion";

Fade In/Out

const fadeIn = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

const fadeOut = interpolate(frame, [150, 180], [1, 0], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

// Combine para opacidade da cena
<div style={{ opacity: fadeIn * fadeOut }}>

Animações com Mola (Spring)

const { fps } = useVideoConfig();

// Entrada suave
const entrance = spring({
  frame: frame - 20,  // Atrasa em 20 quadros
  fps,
  config: { damping: 100 },  // Suave, sem quique
});

// Seleção saltitante
const selectPulse = spring({
  frame: frame - 15,
  fps,
  config: { damping: 12, stiffness: 100 },  // Saltitante
});

// Aplique ao transform
<div style={{
  opacity: interpolate(entrance, [0, 1], [0, 1]),
  transform: `translateY(${interpolate(entrance, [0, 1], [20, 0])}px)`,
}}>

Efeito de Máquina de Escrever

const ScenePrompt: React.FC<{ frame: number }> = ({ frame }) => {
  const text = "Seu texto de prompt aqui";
  const charsToShow = Math.floor(frame / 2);  // 15 caracteres/s a 30fps
  const visibleText = text.slice(0, charsToShow);
  const isTyping = charsToShow < text.length;
  const cursorBlink = Math.floor(frame / 18) % 2 === 0;

  return (
    <div>
      "{visibleText}
      {(isTyping || cursorBlink) && (
        <span style={{
          backgroundColor: C.coral,
          marginLeft: 4,
          opacity: cursorBlink ? 1 : 0,
        }}>
          {"\u00A0"}
        </span>
      )}
      {!isTyping && '"'}
    </div>
  );
};

Animação de Lista Escalonada

const ITEMS = ["item-1", "item-2", "item-3"];

{ITEMS.map((item, i) => {
  const delay = i * 25;  // 25 quadros entre cada
  const s = spring({
    frame: Math.max(0, frame - delay - 20),
    fps,
    config: { damping: 100 },
  });

  return (
    <div
      key={item}
      style={{
        opacity: interpolate(s, [0, 1], [0, 1]),
        transform: `translateY(${interpolate(s, [0, 1], [20, 0])}px)`,
      }}
    >
      {item}
    </div>
  );
})}

---

Diretrizes de Tempo de Cena

Matemática de Duração

• 30 fps = 30 quadros por segundo
• 10 segundos = 300 quadros
• 20 segundos = 600 quadros

Lições Aprendidas com Ritmo

Muito rápido é o erro #1. Os espectadores precisam de tempo para:

1. Perceber uma mudança de cena
2. Ler o texto
3. Processar o significado
4. Se preparar para a próxima mudança

Durações mínimas de cena:

Tipo de Cena	Mínimo	Confortável
Texto de máquina de escrever	3-4 s	5-6 s
Lista aparecendo	4-5 s	6-8 s
Seleção/destaque	3-4 s	5 s
Diagrama técnico	4-5 s	6-8 s
Climax/CTA	2-3 s	3-4 s

Padrão de Sobreposição de Cenas

As cenas devem fazer cross-fade, não corte seco:

// Tempo de cena para vídeo de 20 segundos (600 quadros)
{frame < 200 && <ScenePrompt frame={frame} />}
{frame >= 160 && frame < 340 && <SceneScan frame={frame - 160} />}
{frame >= 300 && frame < 460 && <SceneSelect frame={frame - 300} />}
{frame >= 420 && frame < 560 && <SceneLoad frame={frame - 420} />}
{frame >= 520 && <ScenePunchline frame={frame - 520} />}

A sobreposição de 40 quadros (1,3 segundos) cria cross-fades suaves quando combinada com interpolações fadeIn/fadeOut.

---

Fluxo de Trabalho

Fase 1: Storyboard

Antes de codificar, defina:

1. Mensagem central - Qual é a única coisa que os espectadores devem aprender?
2. Divisão de cenas - 4-6 cenas, cada uma com uma ideia
3. Duração total - 10-20 segundos para redes sociais, 30-60 para explicativos
4. Conteúdo textual - Palavras exatas para cada cena

Fase 2: Estrutura

1. Crie a composição com duração adequada
2. Construa componentes de cena com conteúdo placeholder
3. Configure o tempo básico (intervalos de cena)
4. Teste se todas as cenas aparecem

Fase 3: Estilo

1. Aplique a paleta de cores e fontes
2. Adicione a sobreposição de grão
3. Garanta que os tamanhos de fonte sejam legíveis
4. Teste no celular (vertical) e desktop (paisagem)

Fase 4: Animação

1. Adicione fadeIn/fadeOut para cada cena
2. Adicione animações spring para entradas
3. Ajuste fino do tempo - quase sempre precisa ser mais lento
4. Teste a reprodução completa várias vezes

Fase 5: Renderização

# Renderize composição específica
npx remotion render MyVideo-Square out/quadrado.mp4

# Renderize todos os formatos
npx remotion render MyVideo-Vertical out/vertical.mp4
npx remotion render MyVideo-Square out/quadrado.mp4
npx remotion render MyVideo-Landscape out/paisagem.mp4

---

Erros Comuns

❌ Problemas de Centralização

Problema: O conteúdo aparece no canto superior esquerdo.

Correção: Use AbsoluteFill com flexbox, não position: absolute.

// ✅ Correto
<AbsoluteFill style={{
  justifyContent: "center",
  alignItems: "center",
}}>

// ❌ Errado
<div style={{ position: "absolute", left: "50%", top: "50%" }}>

❌ Fontes Minúsculas

Problema: Texto legível no estúdio, ilegível no celular.

Correção: Mínimo de 28px para texto do corpo, 64px para títulos.

❌ Muito Rápido

Problema: Não é possível ler o texto antes que ele desapareça.

Correção: Dobre sua estimativa inicial de duração. Cada cena precisa de no mínimo 4-8 segundos.

❌ Cortes Secos

Problema: Transições bruscas entre cenas.

Correção: Sobreponha as cenas em 30-50 quadros com fadeIn/fadeOut.

❌ Sem Suporte a Proporção

Problema: O vídeo parece errado em diferentes plataformas.

Correção: Crie todas as três composições (vertical, quadrado, paisagem) desde o início.

---

Integração de Legendas

Remotion tem suporte de primeira classe para legendas. Três opções por custo:

Opção 1: Whisper Nativo (Recomendado - Grátis)

npm install @remotion/captions @remotion/install-whisper-cpp
npx @remotion/install-whisper-cpp --model large-v3-turbo

import { transcribe } from "@remotion/captions";

const result = await transcribe({
  inputPath: "/caminho/para/audio.mp3",
  model: "large-v3-turbo",
  language: "pt",
});
// result.captions = [{ text: "Olá", startTime: 0, endTime: 0.5 }, ...]

Opção 2: API ZapCap ($0,10/min)

Para processamento em lote sem configuração de modelo local.

Opção 3: API Submagic ($0,69/min)

Modelos de legenda "viral" pré-estilizados, mas caro.

Detalhes completos do fluxo de trabalho: Veja references/caption-workflow.md

---

Recursos da Comunidade

Discord

Remotion Discord - Mais de 6.000 membros. Canais #help e #showcase ativos. O criador (Jonny Burger) responde diretamente.

Principais Modelos para Estudar

Modelo	Caso de Uso	Link
TikTok	Vídeo social vertical	remotion-dev/template-tiktok
Audiogram	Clipes de podcast	remotion-dev/template-audiogram
GitHub Unwrapped	Vídeo baseado em dados	remotion-dev/github-unwrapped
claude-remotion-kickstart	Fluxo assistido por IA	Iniciador da comunidade para Claude + Remotion

Pacotes Essenciais

# Legendas
npm install @remotion/captions @remotion/install-whisper-cpp

# Gráficos
npm install @remotion/skia  # Gráficos 2D vetoriais
npm install @remotion/three # 3D com Three.js
npm install @remotion/lottie # Animações Lottie

# Renderização
npm install @remotion/lambda  # Renderização serverless AWS
npm install @remotion/player  # Incorporar em aplicações web

Lista completa de recursos: Veja references/community-resources.md

---

Recursos Anexados

• references/what-is-a-skill.tsx - Exemplo de componente completo do vídeo "O Que É Uma Skill"
• references/caption-workflow.md - Guia completo de integração de legendas (Whisper, ZapCap, Submagic)
• references/community-resources.md - Modelos, pacotes, caminho de aprendizado

---

Skills Relacionadas

• video-caption-creation - Legendas e hashtags para o vídeo renderizado
• youtube-scriptwriting - Para roteiros de vídeos explicativos mais longos
• social-content-creation - Reaproveitar conceitos de vídeo para postagens estáticas

---

Histórico de Versões

• v1.1 (2026-01-22): Integração de legendas e comunidade

  • Adicionado fluxo de trabalho nativo de legendas Whisper via @remotion/captions
  • Adicionados predefinições de estilo de legenda (minimalista, negrito, karaokê, marca)
  • Adicionados recursos da comunidade (Discord, modelos, pacotes)
  • Novos arquivos de referência: caption-workflow.md, community-resources.md
  • Comparação de custos: Whisper (grátis) vs ZapCap ($0,10/min) vs Submagic ($0,69/min)

• v1.0 (2026-01-21): Criação inicial da skill

  • Estilo visual Risograph
  • Padrões de animação (spring, interpolate, máquina de escrever)
  • Diretrizes de tempo (aprendidas com iteração "muito rápida")
  • Padrão de sobreposição de cenas

---

Vídeos são código. Versionamento, itere e construa uma biblioteca de componentes reutilizáveis.