Quando usar
Use esta habilidade sempre que estiver lidando com código Remotion para obter o conhecimento específico do domínio.
Configuração de novo projeto
Quando estiver em uma pasta vazia ou workspace sem um projeto Remotion existente, crie um usando:
npx create-video@latest --yes --blank --no-tailwind my-video
Substitua my-video por um nome de projeto adequado.
Projetando um vídeo
Anime propriedades usando useCurrentFrame() e interpolate(). Use Easing para personalizar o tempo da animação.
import { useCurrentFrame, Easing } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Hello World!</div>;
};
Transições ou animações CSS são PROIBIDAS - elas não serão renderizadas corretamente. Nomes de classes de animação do Tailwind são PROIBIDOS - eles não serão renderizados corretamente.
Coloque os assets na pasta public/ na raiz do seu projeto.
Use staticFile() para referenciar arquivos da pasta public/.
Adicione imagens usando o componente <Img>:
import { Img, staticFile } from "remotion";
export const MyComposition = () => {
return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
Adicione vídeos usando o componente <Video> de @remotion/media:
import { Video } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};
Adicione áudio usando o componente <Audio> de @remotion/media:
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
Assets também podem ser referenciados como URLs remotas:
import { Video } from "@remotion/media";
export const MyComposition = () => {
return <Video src="https://remotion.media/video.mp4" />
};
Para atrasar conteúdo, envolva-o em <Sequence> e use from.
Para limitar a duração de um elemento, use durationInFrames de <Sequence>.
<Sequence> por padrão é um preenchimento absoluto. Para conteúdo inline, use layout="none".
import { Sequence } from "remotion";
export const Title = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Title</div>;
};
export const Subtitle = () => {
return <div>Subtitle</div>;
};
const Main = () => {
const {fps} = useVideoConfig();
return (
<AbsoluteFill>
<Sequence>
<Background />
</Sequence>
<Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
<Title />
</Sequence>
<Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
<Subtitle />
</Sequence>
</AbsoluteFill>
);
}
A largura, altura, fps e duração de um vídeo são definidos em src/Root.tsx:
import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";
export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
/>
);
};
Metadados também podem ser calculados dinamicamente:
import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";
const calculateMetadata: CalculateMetadataFunction<
MyCompositionProps
> = async ({ props, abortSignal }) => {
const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
signal: abortSignal,
}).then((res) => res.json());
return {
durationInFrames: Math.ceil(data.duration * 30),
props: {
...props,
videoUrl: data.url,
},
width: 1080,
height: 1080,
};
};
export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
fps={30}
width={1080}
height={1080}
defaultProps={{ videoId: "abc123" }}
calculateMetadata={calculateMetadata}
/>
);
};
Iniciando preview
Inicie o Remotion Studio para pré-visualizar um vídeo:
npx remotion studio
Opcional: verificação de renderização de um quadro
Você pode renderizar um único quadro com a CLI para verificar o layout, cores ou tempo. Pule esta etapa para edições triviais, refatorações puras ou quando já tiver confiança suficiente do Studio ou renderizações anteriores.
npx remotion still [composition-id] --scale=0.25 --frame=30
Em 30 fps, --frame=30 é a marca de um segundo (--frame é baseado em zero).
Legendas
Ao lidar com legendas ou subtítulos, carregue o arquivo ./rules/subtitles.md para mais informações.
Usando FFmpeg
Para algumas operações de vídeo, como cortar vídeos ou detectar silêncio, o FFmpeg deve ser usado. Carregue o arquivo ./rules/ffmpeg.md para mais informações.
Detecção de silêncio
Quando precisar detectar e cortar segmentos silenciosos de arquivos de vídeo ou áudio, carregue o arquivo ./rules/silence-detection.md.
Visualização de áudio
Quando precisar visualizar áudio (barras de espectro, formas de onda, efeitos reativos a graves), carregue o arquivo ./rules/audio-visualization.md para mais informações.
Efeitos sonoros
Quando precisar usar efeitos sonoros, carregue o arquivo ./rules/sfx.md para mais informações.
Conteúdo 3D
Veja rules/3d.md para conteúdo 3D no Remotion usando Three.js e React Three Fiber.
Áudio avançado
Veja rules/audio.md para recursos avançados de áudio como corte, volume, velocidade, pitch.
Duração, dimensões e dados dinâmicos
Veja rules/calculate-metadata.md para definir dinamicamente duração, dimensões e props da composição.
Composições avançadas
Veja rules/compositions.md para como definir stills, pastas, props padrão e como aninhar composições.
Google Fonts
É a maneira recomendada de carregar fontes no Remotion. Veja rules/google-fonts.md para como carregar Google Fonts.
Fontes locais
Veja rules/local-fonts.md para como carregar fontes locais.
Obtendo duração de áudio
Veja rules/get-audio-duration.md para obter a duração de um arquivo de áudio em segundos com Mediabunny.
Obtendo dimensões de vídeo
Veja rules/get-video-dimensions.md para obter a largura e altura de um arquivo de vídeo com Mediabunny.
Obtendo duração de vídeo
Veja rules/get-video-duration.md para obter a duração de um arquivo de vídeo em segundos com Mediabunny.
GIFs
Veja rules/gifs.md para como exibir GIFs sincronizados com a timeline do Remotion.
Imagens avançadas
Veja rules/images.md para dimensionamento e posicionamento de imagens, caminhos de imagem dinâmicos e obtenção de dimensões de imagem.
Light leaks
Veja rules/light-leaks.md para efeitos de sobreposição de light leak usando @remotion/light-leaks.
Animações Lottie
Veja rules/lottie.md para incorporar animações Lottie no Remotion.
HTML em canvas
Veja rules/html-in-canvas.md se você precisar renderizar HTML em um <canvas> para aplicar efeitos 2D ou WebGL via <HtmlInCanvas>.
Medindo nós do DOM
Veja rules/measuring-dom-nodes.md para medir dimensões de elementos do DOM no Remotion.
Medindo texto
Veja rules/measuring-text.md para medir dimensões de texto, ajustar texto em contêineres e verificar estouro.
Sequenciamento avançado
Veja rules/sequencing.md para mais padrões de sequenciamento - atraso, corte, limite de duração de itens.
TailwindCSS
Veja rules/tailwind.md para usar TailwindCSS no Remotion.
Animações de texto
Veja rules/text-animations.md para padrões de tipografia e animação de texto.
Tempo avançado
Veja rules/timing.md para temporização avançada com interpolate e easing Bézier, e springs.
Transições
Veja rules/transitions.md para padrões de transição de cena.
Vídeos transparentes
Veja rules/transparent-videos.md para renderizar um vídeo com transparência.
Corte
Veja rules/trimming.md para padrões de corte - cortar o início ou o fim de animações.
Vídeos avançados
Veja rules/videos.md para conhecimento avançado sobre incorporação de vídeos - corte, volume, velocidade, loop, pitch.
Vídeos parametrizados
Veja rules/parameters.md para tornar uma composição parametrizável adicionando um esquema Zod.
Mapas
Para mapas simples com pequenas sobrevoos, considere usar imagens de mapa estáticas. Para mapas complexos com rotas animadas ou sobrevoos, carregue a regra de mapas: rules/maplibre.md
Narração
Veja rules/voiceover.md para adicionar narração gerada por IA às composições Remotion usando ElevenLabs TTS.