Componentes

Los componentes de React nos permiten reutilizar elementos visuales varias veces.

import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

const Title: React.FC<{ title: string }> = ({ title }) => { // Componente Title
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <div style={{ opacity, textAlign: "center", fontSize: "7em" }}>{title}</div>
  );
};

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Title title="Hello World" />
    </AbsoluteFill>
  );
};

Secuencias

Podemos utilizar el componente para cambiar el tiempo en la visualización de los componentes.

import { Sequence } from "remotion";

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence
         name="Hello" // Nombre de secuencia que se muestra en la línea de tiempo de Remotion Studio.
         durationInFrames={40} // Limita la duración del componente.
         className="" // Nombre de clase que se aplicará al contenedor.
         style={{}} // Estilos CSS que se aplicarán al contenedor.
         > 
         <Title title="Hello" />
      </Sequence>
      <Sequence from={40}> // Desplaza el valor de useCurrentFrame(), de modo que devuelve 0 sólo cuando el tiempo absoluto es 40.
         <Title title="World" />
      </Sequence>
    </AbsoluteFill>
  );
};

1. De forma predeterminada, los elementos secundarios de una <Sequence> están incluidos en un componente <AbsoluteFill>.
   • Si no desea este comportamiento, agregue layout="none" para que se representen como un <div> normal.
2. Si se establece layout="none", no hay contenedor y no se permiten configurar style y className.