Cuándo usar
Utiliza esta skill siempre que estés trabajando con código de Remotion para obtener conocimiento específico del dominio.
Configuración de un nuevo proyecto
Cuando estés en una carpeta o espacio de trabajo vacío sin un proyecto Remotion existente, crea uno usando:
npx create-video@latest --yes --blank --no-tailwind mi-video
Reemplaza mi-video con un nombre de proyecto adecuado.
Diseñando un video
Anima propiedades usando useCurrentFrame() e interpolate(). Usa Easing para personalizar la temporización de la animación.
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 }}>¡Hola Mundo!</div>;
};
Las transiciones o animaciones CSS están PROHIBIDAS: no se renderizarán correctamente. Los nombres de clases de animación de Tailwind están PROHIBIDOS: no se renderizarán correctamente.
Coloca los activos en la carpeta public/ en la raíz de tu proyecto.
Usa staticFile() para hacer referencia a archivos desde la carpeta public/.
Agrega imágenes usando el componente <Img>:
import { Img, staticFile } from "remotion";
export const MyComposition = () => {
return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
Agrega videos usando el 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 }} />;
};
Agrega audio usando el componente <Audio> de @remotion/media:
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
Los activos también se pueden referenciar como URLs remotas:
import { Video } from "@remotion/media";
export const MyComposition = () => {
return <Video src="https://remotion.media/video.mp4" />
};
Para retrasar contenido, envuélvelo en <Sequence> y usa from.
Para limitar la duración de un elemento, usa durationInFrames de <Sequence>.
<Sequence> por defecto ocupa todo el espacio absoluto. Para contenido en línea, usa 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 }}>Título</div>;
};
export const Subtitle = () => {
return <div>Subtítulo</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>
);
}
El ancho, alto, fps y duración de un video se definen en 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}
/>
);
};
Los metadatos también se pueden calcular dinámicamente:
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}
/>
);
};
Iniciar vista previa
Inicia Remotion Studio para previsualizar un video:
npx remotion studio
Opcional: comprobación de renderizado de un solo fotograma
Puedes renderizar un solo fotograma con la CLI para verificar el diseño, colores o temporización. Puedes omitirlo para ediciones triviales, refactorizaciones simples, o cuando ya tengas suficiente confianza gracias a Studio o renderizados previos.
npx remotion still [composition-id] --scale=0.25 --frame=30
A 30 fps, --frame=30 es la marca de un segundo (--frame es basado en cero).
Subtítulos
Cuando trabajes con subtítulos o leyendas, carga el archivo ./rules/subtitles.md para obtener más información.
Usando FFmpeg
Para algunas operaciones de video, como recortar videos o detectar silencio, se debe usar FFmpeg. Carga el archivo ./rules/ffmpeg.md para obtener más información.
Detección de silencio
Cuando necesites detectar y recortar segmentos silenciosos de archivos de video o audio, carga el archivo ./rules/silence-detection.md.
Visualización de audio
Cuando necesites visualizar audio (barras de espectro, formas de onda, efectos reactivos a graves), carga el archivo ./rules/audio-visualization.md para obtener más información.
Efectos de sonido
Cuando necesites usar efectos de sonido, carga el archivo ./rules/sfx.md para obtener más información.
Contenido 3D
Consulta rules/3d.md para contenido 3D en Remotion usando Three.js y React Three Fiber.
Audio avanzado
Consulta rules/audio.md para funciones avanzadas de audio como recorte, volumen, velocidad, tono.
Duración, dimensiones y datos dinámicos
Consulta rules/calculate-metadata.md para establecer dinámicamente la duración, dimensiones y props de una composición.
Composiciones avanzadas
Consulta rules/compositions.md para definir imágenes fijas, carpetas, props predeterminados y cómo anidar composiciones.
Google Fonts
Es la forma recomendada de cargar fuentes en Remotion. Consulta rules/google-fonts.md para cargar Google Fonts.
Fuentes locales
Consulta rules/local-fonts.md para cargar fuentes locales.
Obtener duración de audio
Consulta rules/get-audio-duration.md para obtener la duración de un archivo de audio en segundos con Mediabunny.
Obtener dimensiones de video
Consulta rules/get-video-dimensions.md para obtener el ancho y alto de un archivo de video con Mediabunny.
Obtener duración de video
Consulta rules/get-video-duration.md para obtener la duración de un archivo de video en segundos con Mediabunny.
GIFs
Consulta rules/gifs.md para mostrar GIFs sincronizados con la línea de tiempo de Remotion.
Imágenes avanzadas
Consulta rules/images.md para ajustar tamaño y posición de imágenes, rutas de imagen dinámicas y obtener dimensiones de imágenes.
Fugas de luz
Consulta rules/light-leaks.md para efectos de superposición de fugas de luz usando @remotion/light-leaks.
Animaciones Lottie
Consulta rules/lottie.md para incrustar animaciones Lottie en Remotion.
HTML en canvas
Consulta rules/html-in-canvas.md si necesitas renderizar HTML en un <canvas> para aplicar efectos 2D o WebGL mediante <HtmlInCanvas>.
Medición de nodos DOM
Consulta rules/measuring-dom-nodes.md para medir dimensiones de elementos DOM en Remotion.
Medición de texto
Consulta rules/measuring-text.md para medir dimensiones de texto, ajustar texto a contenedores y verificar desbordamiento.
Secuenciación avanzada
Consulta rules/sequencing.md para más patrones de secuenciación: retraso, recorte, limitación de duración de elementos.
TailwindCSS
Consulta rules/tailwind.md para usar TailwindCSS en Remotion.
Animaciones de texto
Consulta rules/text-animations.md para patrones de tipografía y animación de texto.
Temporización avanzada
Consulta rules/timing.md para temporización avanzada con interpolate y easing Bézier, y muelles (springs).
Transiciones
Consulta rules/transitions.md para patrones de transición entre escenas.
Videos transparentes
Consulta rules/transparent-videos.md para renderizar un video con transparencia.
Recorte
Consulta rules/trimming.md para patrones de recorte: cortar el principio o el final de animaciones.
Videos avanzados
Consulta rules/videos.md para conocimiento avanzado sobre incrustación de videos: recorte, volumen, velocidad, bucle, tono.
Videos parametrizados
Consulta rules/parameters.md para hacer una composición parametrizable agregando un esquema Zod.
Mapas
Para mapas simples con breves sobrevuelos, considera usar imágenes de mapa estáticas. Para mapas complejos con rutas animadas o sobrevuelos, carga la regla de mapas: rules/maplibre.md
Voz en off
Consulta rules/voiceover.md para agregar voz en off generada por IA a composiciones de Remotion usando ElevenLabs TTS.