anaydhawan/openvidstudio

Este é um guia para escrever Marcação React do Remotion. Se isso não for relevante, carregue as Melhores Práticas do Remotion em vez disso.

Preservar alterações do usuário

Os usuários podem fazer edições no código fora da conversa.

Se você detectar uma mudança surpreendente feita nesse meio tempo, não a sobrescreva, assuma que foi intencional ou peça confirmação.

Regras gerais

Conduza animações usando useCurrentFrame() e interpolate(). transition ou animation do CSS não serão renderizados corretamente, eles precisam ser refatorados. Classes de animação do Tailwind não serão renderizadas corretamente, elas precisam ser refatoradas.

Use Easing.bezier() e Easing.spring() para personalizar o tempo.

Estruture sua marcação de acordo com as Melhores Práticas de Interatividade do Remotion

import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};

Mantenha a chamada interpolate() inline na prop style. Use as propriedades CSS scale, translate, rotate em vez de transform.

// 👍 Keyframes editáveis inline e shorthand para transform
style={{
  scale: interpolate(frame, [0, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
    output: 'perceptual-scale' // Para animações `scale`, use "output: 'perceptual-scale'"
  }),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
}}

// 👎 Valores não inline e strings transform ficam mais difíceis de editar no Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}

Ativos

Coloque os ativos na pasta public/ na raiz do seu projeto. Use staticFile() para referenciar arquivos da pasta public/.

Componentes de mídia

Adicione vídeo e áudio usando <Video> e <Audio> de @remotion/media. Adicione imagens usando o componente <CanvasImage>. Adicione GIFs animados, APNG, WebP ou imagens AVIF usando <AnimatedImage>, use @remotion/gif se não estiver usando Chrome. Use staticFile() para arquivos em public/ ou passe uma URL remota diretamente:

import { Audio, Video } from "@remotion/media";
import { staticFile, CanvasImage, AnimatedImage } from "remotion";

export const MyComposition = () => {
  return (
    <>
      <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
      <Audio src={staticFile("audio.mp3")} />
      <CanvasImage
        src={staticFile("logo.png")}
        style={{ width: 100, height: 100 }}
      />
      <Video src="https://remotion.media/video.mp4" />
      <AnimatedImage src={staticFile('nyancat.gif')} />
    </>
  );
};

Exemplo de cena

import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
  useVideoConfig
} from "remotion";

export const Empty = () => {
  const {fps} = useVideoConfig();
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      name="Scene"
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
      }}
    >
      <Interactive.Div
        name="Title"
        style={{
          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {
            extrapolateRight: "clamp",
            extrapolateLeft: "clamp",
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          fontSize: 88
        }}
      >
        Title
      </Interactive.Div>
      <Interactive.Div
        name="Subtitle"
        style={{
          opacity: interpolate(frame, [2 * fps, 3 * fps, 8 * fps, 10 * fps], [0, 1, 1, 0], {
            extrapolateRight: "clamp",
            extrapolateLeft: "clamp",
            easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.bezier(0.16, 1, 0.3, 1)],
          }),
          fontSize: 32
        }}
      >
        Subtitle
      </Interactive.Div>
    </AbsoluteFill>
  );
};

Atraso, corte

A maioria dos componentes (<AbsoluteFill>, <Interactive.*> <Img>, <AnimatedImage>, <CanvasImage>, <HtmlInCanvas>, <Solid>, <Sequence> de remotion, <Video> e <Audio> de @remotion/media, <Gif>, e mais) suportam as seguintes props:

from

<Img from={1 * fps} {/* ... */}/>
<Video from={1 * fps} {/* ... */}/>
<Interactive.Div from={1 * fps} {/* ... */}/>

Quando o elemento começa a aparecer na timeline.

durationInFrames

<Img durationInFrames={20 * fps} {/* ... */}/>
<Interactive.Div durationInFrames={20 * fps} {/* ... */}/>

Por quanto tempo a camada toca na timeline. Para mídia, passe a duração natural da mídia: <Video durationInFrames={29.322 * fps}/>

trimBefore

Útil para componentes cujo relógio interno deve começar mais tarde:

// Corta os primeiros 2 segundos do vídeo
<Video trimBefore={2 * fps} {/* ... */} />

// `useCurrenFrame()` para filhos começa em `10 * fps`
<Sequence trimBefore={10 * fps} {/* ... */} />

Fallback

Se um componente não suportar essas props, envolva-o em <Sequence> de remotion, que as possui.

• layout="absolute-fill" faz o Sequence se comportar como AbsoluteFill
• layout="none" é o modo "headless", nenhum elemento wrapper é usado.

Mapas

Consulte Remotion Maps se desejar incluir mapas no vídeo.

Destaques de texto e anotações

Consulte text-highlights.md para destaques de texto (marcadores de destaque), círculos, sublinhados, tachados, texto riscado, caixas.

Vídeos com múltiplas cenas

Consulte multi-scene-video.md se planeja fazer um vídeo com várias cenas subsequentes.

Voiceover

Consulte voiceover.md para adicionar um voiceover gerado por IA a composições do Remotion usando ElevenLabs TTS.

Incorporação de Vídeos

Consulte embedding-videos.md para conhecimento avançado sobre incorporação de vídeos - corte, volume, velocidade, loop, pitch.

Incorporação de Áudio

Consulte audio.md para recursos avançados de áudio como corte, volume, velocidade, pitch.

Edição de vídeo

Consulte video-editing.md para estruturar timelines de vídeo editáveis no Remotion Studio.

Corte

Consulte cropping.md se precisar cortar o retângulo visível de um componente.

Transições

Consulte transitions.md para padrões de transição de cena.

Efeitos visuais e de pixel

Ao criar um efeito visual, considere se é viável usando CSS e HTML, ou se um shader é necessário. Ordem de preferência:

1. HTML + CSS regular ou outras técnicas web
2. Um efeito aplicado diretamente ao elemento (<Video>, <Img>), ou envolvendo o conteúdo em <HtmlInCanvas>, que também aceita effects:

• Um efeito listado via effects.md
• Um createEffect() customizado via effects.md quando nenhum preset estiver disponível.

Conteúdo 3D

Consulte ./3d.md para conteúdo 3D no Remotion usando Three.js e React Three Fiber.

Efeitos sonoros

Quando precisar usar efeitos sonoros, carregue o arquivo ./sfx.md para mais informações.

Visualização de áudio

Quando precisar visualizar áudio (barras de espectro, formas de onda, efeitos reativos a graves), carregue o arquivo ./audio-visualization.md para mais informações.

Mapas

Para mapas estáticos, rotas animadas e marcadores, explicadores geográficos, Mapbox, MapLibre, MapTiler, GeoJSON, ou sobrevoos geográficos 3D, carregue Remotion Maps.

Legendas

Ao lidar com legendas ou subtítulos, carregue o skill de Legendas do Remotion para mais informações.

Google Fonts

É a maneira recomendada de carregar fontes no Remotion. Consulte google-fonts.md para saber como carregar Google Fonts.

Fontes locais

Consulte local-fonts.md para saber como carregar fontes locais.

GIFs

Consulte gifs.md para saber como exibir GIFs sincronizados com a timeline do Remotion.

Imagens Avançadas

Consulte images.md para dimensionamento e posicionamento de imagens, caminhos de imagem dinâmicos e obtenção de dimensões de imagem.

Animações Lottie

Consulte lottie.md para incorporar animações Lottie no Remotion.

Temporização

Consulte timing.md para mais técnicas de temporização para interpolate().

Vídeos parametrizados

Consulte parameters.md para tornar uma composição parametrizável adicionando um esquema Zod.

Medição de nós DOM

Consulte measuring-dom-nodes.md para medir dimensões de elementos DOM no Remotion.

Medição de texto

Consulte measuring-text.md para medir dimensões de texto, ajustar texto a contêineres e verificar estouro.

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 ./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 ./silence-detection.md.

Duração, dimensões e dados dinâmicos

Consulte calculate-metadata.md para definir dinamicamente duração da composição, dimensões e props.

Composições avançadas

Consulte compositions.md para saber como definir imagens estáticas, pastas, props padrão e como aninhar composições.

Sequenciamento avançado

Consulte sequencing.md para mais padrões de sequenciamento - atraso, corte, limitação de duração de itens.

Instalar módulos

Use npx remotion add para adicionar novos pacotes com a versão correta:

npx remotion add @remotion/media

Isso vale para pacotes @remotion/*, mediabunny, @mediabunny/* e zod.

Visualizando marcação

npx remotion studio --no-open

Isso iniciará um processo de longa duração e imprimirá a URL do servidor para a visualização. Se o servidor já estiver iniciado, ele imprimirá a URL. Você pode visitar uma composição específica navegando para /[composition-id], por exemplo http://localhost:3000/MapAnimation.

Opcional: verificação de renderização de um quadro

Você pode renderizar um único quadro com a CLI para verificar rapidamente layout, cores ou temporização. Pule para edições triviais, refatorações puras, ou quando você já tiver confiança suficiente do Studio ou de renderizações anteriores.

npx remotion still [composition-id] --scale=0.25 --frame=30

A 30 fps, --frame=30 é a marca de um segundo (--frame é baseado em zero).