Remotion

Stack: Remotion 4.x + React 19 + TypeScript + Code Hike

1. Estructura de proyecto

my-video/
├── src/
│   ├── index.ts              # registerRoot
│   ├── Root.tsx              # Composition definitions
│   ├── Main.tsx              # Componente principal del video
│   ├── CodeTransition.tsx    # Transiciones entre bloques de código
│   ├── ProgressBar.tsx       # Barra de progreso
│   ├── ReloadOnCodeChange.tsx
│   ├── font.ts               # Config de tipografía
│   ├── utils.ts
│   ├── calculate-metadata/   # Metadata dinámica (duración, props)
│   └── annotations/          # Anotaciones de código
├── public/                   # Assets estáticos
├── remotion.config.ts        # Configuración global
├── package.json
└── tsconfig.json

2. Inicio rápido

# Crear proyecto nuevo
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video && npm i

# Iniciar Studio
npx remotion studio src/index.ts

# Renderizar video
npx remotion render src/index.ts Main out/video.mp4

# Renderizar un frame (still)
npx remotion still src/index.ts Main out/frame.png --frame=30

# Ver composiciones disponibles
npx remotion compositions src/index.ts

3. Composición base

// src/Root.tsx
import { Composition } from "remotion";
import { Main } from "./Main";

export const RemotionRoot = () => {
  return (
    <Composition
      id="Main"
      component={Main}
      fps={30}
      height={1080}
      width={1920}
      durationInFrames={360}
    />
  );
};

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

4. Animaciones

Usar useCurrentFrame() + interpolate() — NO usar CSS transitions/animations.

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

const MyComp = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello</div>;
};

5. Sequencing con <Series> y <Sequence>

import { AbsoluteFill, Sequence, Series } from "remotion";

// Series: secuencias una tras otra
<Series>
  <Series.Sequence durationInFrames={90}>
    <Scene1 />
  </Series.Sequence>
  <Series.Sequence durationInFrames={90}>
    <Scene2 />
  </Series.Sequence>
</Series>

// Sequence: contenido con delay/duración controlada
<Sequence from={30} durationInFrames={60} layout="none">
  <DelayedContent />
</Sequence>

6. Assets y multimedia

import { Audio, Video, Img, staticFile } from "remotion";

// Archivos locales en public/
<Video src={staticFile("video.mp4")} />
<Audio src={staticFile("audio.mp3")} />
<Img src={staticFile("logo.png")} />

// URLs remotas
<Video src="https://example.com/video.mp4" />

7. Metadata dinámica

// calculate-metadata/calculate-metadata.ts
export const calculateMetadata = ({ props }) => {
  const durationInFrames = props.steps.length * 30;
  return { durationInFrames, fps: 30 };
};

8. Skills oficiales de Remotion

El CLI de Remotion incluye skills para Claude Code:

npx remotion skills add    # Instalar skills interactivamente
npx remotion skills add --yes --global  # Sin prompts

Skills disponibles: remotion-best-practices, remotion-markup, remotion-create, remotion-render, remotion-interactivity, remotion-captions, remotion-saas, mediabunny.

9. Comandos útiles

10. Referencias

• references/*.md — patrones avanzados, Code Hike, captions, efectos, rendering en Lambda, Player