1. Un vídeo es una serie de imágenes a lo largo del tiempo.
  2. Un fotograma representa el contenido de la película en un instante de tiempo ("una imagen"). Por tanto, una animación no es más que una sucesión de fotogramas.
import { useCurrentFrame, AbsoluteFill } from "remotion";
export const MyComposition = () => {
   const { fps, durationInFrames, width, height } = useVideoConfig(); // Podemos derivar estos valores del gancho `useVideoConfig()`
   const frame = useCurrentFrame(); // Devuelve el número de fotograma actual, el cual puedes usar para animar cuadro por cuadro
   const seconds = durationInFrames / fps; // Calcula la duración del video en segundos
   return (
      <AbsoluteFill
         style={{
            justifyContent: "center",
            alignItems: "center",
            fontSize: 60,
            backgroundColor: "white"
         }}
      >
         This {width}x{height}px video is {durationInFrames / fps} seconds long.
         The current frame is {frame}.
      </AbsoluteFill>
  );
};

Un video tiene 4 propiedades:

  1. width: en píxeles.
  2. height: en píxeles.
  3. durationInFrames: número total de fotogramas.
  4. fps: fotogramas por segundo.

Frames

  • El primer frame o cuadro de un video es 0,
  • El último es durationInFrames - 1.