thatrebeccarae/claude-marketing

Produção de Vídeo com Remotion

Melhores práticas para construir vídeos programáticos com Remotion — animações, transições, gráficos e renderização.

Instalação

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

Capacidades Principais

• Presets de animação spring (saltitante, suave, nítido, escalonado)
• Padrões de interpolação (zoom de câmera, paralaxe, simulação de rolagem)
• Animações de desenho SVG (traçado de caminho, revelação de traço)
• Transições de cena via TransitionSeries
• Camadas AbsoluteFill para composição
• Animações de gráficos (crescimento de barras, desenho de linhas, revelação de pizza, números crescentes)
• Integração e sincronização de áudio
• Configuração de renderização

Presets Spring

Use spring() do Remotion para animações baseadas em física:

Preset	Configuração	Caso de Uso
Saltitante	mass: 0.5, damping: 8, stiffness: 120	Revelações divertidas, saltos de logotipo
Suave	mass: 1, damping: 15, stiffness: 80	Transições de UI, deslizamentos
Nítido	mass: 0.8, damping: 20, stiffness: 200	Interações rápidas, alternâncias
Escalonado	Qualquer preset com deslocamento de quadro por item	Revelações de listas, animações de grade

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});

Padrões de Interpolação

Zoom de Câmera

import { interpolate } from "remotion";

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

Camadas de Paralaxe

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

Simulação de Rolagem

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

Desenho SVG

Anime strokeDashoffset para revelar caminhos SVG:

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

Padrões de Animação de Gráficos

Padrão	Técnica
Crescimento de barra	Animar altura de 0 até o alvo, escalonar cada barra em 3-5 quadros
Desenho de linha	Caminho SVG com animação de strokeDashoffset
Revelação de pizza/rosquinha	Animar parada de conic-gradient ou arco SVG
Números crescentes	Interpolar de 0 até o alvo, Math.round() para exibição

Transições de Cena

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <CenaUm />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 15 })}
    presentation={fade()}
  />
  <TransitionSeries.Sequence durationInFrames={90}>
    <CenaDois />
  </TransitionSeries.Sequence>
</TransitionSeries>

Regras de Desempenho

1. Nada de useEffect para animações. Use useCurrentFrame() + interpolate().
2. Memorize componentes estáticos. React.memo para tudo que não depende do quadro.
3. Pré-carregue assets. staticFile() para locais, prefetch() para URLs remotas.
4. Mantenha composições abaixo de 30s para iteração rápida de renderização durante o desenvolvimento.
5. Teste na resolução alvo (1920x1080 ou 1080x1080) antes da renderização final.

Anti-Padrões

• Nada de CSS transition ou animation — use interpolate() e spring() do Remotion
• Nada de setTimeout ou setInterval — temporização baseada apenas em quadros
• Nada de posicionamento absoluto em pixels para layouts responsivos — use AbsoluteFill + flex
• Nada de objetos style inline recriados a cada quadro — extraia para constantes ou useMemo
• Nada de áudio não controlado — sempre defina volume e startFrom explícitos

Para exemplos completos de código e modelos de composição, consulte REFERENCE.md.