remotion-interactivity

Quando Usar

• Use quando este fluxo de trabalho upstream corresponder ao objetivo declarado do usuário.
• Use quando a tarefa exigir os procedimentos documentados nesta habilidade.

Ao escrever marcações Remotion de uma maneira específica, o Remotion Studio consegue reconhecer a estrutura do código e torná-lo interativo:

• Permitindo que itens sejam selecionados clicando neles
• Permitindo arrastar e soltar, redimensionar e girar
• Editando os estilos CSS
• Tornando os keyframes e valores de easing editáveis

Se a marcação for muito complexa para o Studio torná-la interativa, os valores ficarão acinzentados.

Torne um elemento HTML interativo usando Interactive

Todo elemento HTML e SVG (exceto <Img>, que já é interativo) como <div> pode ser tornado interativo usando Interactive:

<Interactive.Div
  name="Greeting card"
  style={{fontSize: 80, padding: 24}}
>
  Hello
</Interactive.Div>

Isso permite que estilos e keyframes sejam definidos no Studio. Seja sensato, se um componente tiver muitos elementos, a linha do tempo pode ficar confusa.

Prefira texto inline

Se o texto for fixo e usado apenas uma vez, escreva-o diretamente dentro do elemento interativo em vez de extraí-lo para uma constante.

// 👍 Fixed copy stays editable
<Interactive.Div name="Title">
  Remotion Best Practices
</Interactive.Div>

Use uma prop ou variável apenas quando o texto for dinâmico ou reutilizado.

Dê nomes descritivos aos elementos interativos

Adicione uma prop name aos elementos para torná-los facilmente identificáveis. Evite nomes computados, codifique-os diretamente.

<>
  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
    Launch day
  </Interactive.Div>
  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
  <Video name="Background" src="https://remotion.media/video.mp4" />
  <Sequence name="Title">
    Launch day
  </Sequence>
</>

Mantenha todos os estilos CSS inline

A melhor maneira é simplesmente passar um objeto simples para style - sem referenciar constantes, sem espalhar objetos, sem cálculos.

<Interactive.Div
  style={{
    fontSize: 80,
    color: 'red',
  }}
>
  Hello World!
</Interactive.Div>

const baseStyle = useMemo(() => {
  return {
    fontSize: 12 // ❌ Non-inline styles are not supported
  }
}, []);

<Interactive.Div
  style={{
    ...baseStyle, // ❌ Spreading is not supported
    color: RED, // ❌ Referring to constants is not supported
    scale: frame * 10 // ❌ Math is not supported
  }}
>
  Hello World!
</Interactive.Div>

Anime usando interpolate()

Escreva animações como chamadas interpolate() inline na propriedade que muda. O intervalo de saída, easing, extrapolação e a propriedade output devem usar valores codificados diretamente.

O intervalo de entrada pode adicionalmente usar durationInFrames, fps, width e height desestruturados diretamente de useVideoConfig(). Identificadores simples como durationInFrames, multiplicação por um número como 2 * fps ou fps * 2, e subtração de um número como durationInFrames - 1 são suportados.

const {fps, durationInFrames} = useVideoConfig();

// 👍 Inline values can be standardized and keyframed
<Interactive.Div
  name="Product card"
  style={{
    color: 'white',
    fontSize: 80,
    scale: interpolate(frame, [0, fps], [0, 1], {
      easing: Easing.spring({damping: 200}),
      output: 'perceptual-scale',
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
      easing: Easing.spring({damping: 200}),
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    translate: interpolate(
      frame,
      [durationInFrames - 30, durationInFrames],
      ['0px 0px', '0px 120px'],
      {
        easing: Easing.spring({damping: 200}),
        output: 'perceptual-scale',
        extrapolateLeft: 'clamp',
        extrapolateRight: 'clamp'
      }
    ),
  }}
/>

const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Cálculos devem estar diretamente na marcação

<Interactive.Div
  name="Cartão do Produto"
  style={{
    translate: translateY, // ❌ Apenas chamadas interpolate() inline são suportadas,
    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), // ❌ Não é possível usar cálculos com variáveis arbitrárias, não é possível usar constantes
    scale: interpolate(anyVariable, [0, 30], [0, 1]) // ❌ Só é possível interpretar a variável `frame`.
  }}
/>

…