Configuración de Remotion

¿Qué hace Configuración de Remotion?

Andamia un proyecto Remotion nuevo y lo prepara para que el resto del flujo de trabajo sea "solo pedirle a Claude". Es el trabajo de configuración único. Hazlo una vez por proyecto; después, remotion-compose y remotion-render saltan directamente al bucle creativo.

Ejecútalo con decisión. Si el usuario menciona algo sobre hacer videos con Claude - "configurar Remotion", "crear un proyecto Remotion", "quiero hacer videos de producto con Claude", "iniciar un proyecto de video" - ejecuta esta habilidad.

Paso 1 - Verificar el conjunto de herramientas

Remotion renderiza con Chromium sin interfaz gráfica, así que verifica Node antes de andamiar:

node --version   # necesita >= 16; prefiere una versión LTS activa

Si Node es anterior a 16, detente y dile al usuario que lo actualice (nvm: nvm install --lts && nvm use --lts). También confirma que npx esté disponible (viene con npm 5.2+).

Paso 2 - Andamiar el proyecto

npx create-video@latest

Esto es interactivo. Recomienda la plantilla Blank (Hola Mundo) - es la base más limpia para videos de producto. La CLI pide el directorio del proyecto y un gestor de paquetes; deja que el usuario elija, luego cd a la nueva carpeta e instala:

cd <nombre-del-proyecto>
npm install

Paso 3 - Instalar las habilidades del agente Remotion

Para que Claude Code tenga el contexto de las habilidades propias de Remotion en este repositorio:

npx remotion skills add remotion

Esto coloca los archivos de habilidad del agente de Remotion en el proyecto. Si el comando no está disponible en la versión instalada de Remotion, indícale al usuario que use una versión más reciente de @remotion/cli y continúa - es una conveniencia, no una dependencia obligatoria.

Paso 4 - Establecer convenciones de carpetas

Estandariza la estructura para que las habilidades posteriores sepan siempre dónde van las cosas:

src/
  Root.tsx              # registra cada <Composition> (el registro de entrada)
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # un archivo .tsx por video - remotion-compose escribe aquí
public/
  assets/               # imágenes, logotipos, audio - referenciados mediante staticFile()

Crea las carpetas si la plantilla no lo hizo:

mkdir -p src/compositions public/assets

src/Root.tsx es el registro. Cada video es un <Composition> registrado aquí:

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

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

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

Valores predeterminados sensatos para registrar: 30 fps y 1920x1080 para videos de producto en horizontal (1080x1920 para redes sociales verticales), y duraciones cortas - 90 cuadros a 30 fps son 3 segundos, y la mayoría de los videos demo de producto duran entre 15 y 60 segundos (450-1800 cuadros).

Paso 5 - Cargar una fuente de Google

Remotion tiene soporte de primera clase para Google Fonts para que el texto se renderice de manera determinista. Instala y carga una vez:

npm install @remotion/google-fonts

// carga cerca de la parte superior de un archivo de composición
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// luego usa: <div style={{ fontFamily }}>...</div>

loadFont() bloquea el renderizado hasta que la fuente esté lista, por lo que el texto en pantalla nunca parpadea con un fallback sin estilo. Elige la fuente que coincida con la marca - cambia Inter por Poppins, Roboto, etc.

Paso 6 - Composición de prueba

Escribe una composición trivial para demostrar que el entorno renderiza de principio a fin:

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        Funciona.
      </h1>
    </AbsoluteFill>
  );
};

Asegúrate de que esté registrada en src/Root.tsx (Paso 4), luego renderízala:

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

El primer renderizado descarga Chromium sin interfaz gráfica (unos cientos de MB - espera una espera única de unos minutos en una conexión normal); después de eso, esta prueba de 90 cuadros debería renderizarse en menos de un minuto. Si out/smoke-test.mp4 reproduce un título que aparece gradualmente, el entorno está bien. Si el renderizado falla, casi siempre es por (a) descarga/permisos de Chromium, (b) la composición no registrada en Root.tsx, o (c) un problema de versión de Node del Paso 1.

Paso 7 - Iniciar Remotion Studio para vista previa

Para la vista previa interactiva (desplazarse por la línea de tiempo, recarga en caliente con las ediciones):

npx remotion studio

Esto sirve el Studio en http://localhost:3000. La plantilla create-video también vincula npm run dev a lo mismo. Deja Studio ejecutándose mientras iteras: las ediciones en los archivos de composición se recargan al instante.

Entregable

El usuario se va con un proyecto Remotion funcional: el repositorio andamiado con la estructura src/compositions/ + public/assets/ en su lugar, las habilidades del agente Remotion instaladas, una fuente de Google configurada, una composición de prueba registrada, un out/smoke-test.mp4 renderizado que realmente se reproduce y Remotion Studio ejecutándose para vista previa. Nada está "configurado" hasta que el MP4 de prueba exista y se reproduzca.

NO hagas

• No omitas la verificación de Node y andamies de todas formas - un Node inferior a 16 falla en lo profundo del renderizado de Chromium con un error confuso, no en el momento de la instalación.
• No declares la configuración completa sin renderizar la prueba de humo; un proyecto que compila pero nunca ha producido un MP4 no ha demostrado que el pipeline de Chromium funcione.
• No coloques composiciones o activos en ubicaciones ad-hoc - las habilidades posteriores (remotion-compose, remotion-render) dependen de que src/compositions/ y public/assets/ existan.
• No hagas referencia a activos mediante rutas relativas o URLs; usa staticFile() desde public/, o los renderizados funcionarán localmente pero fallarán en otros lugares.
• No uses fuentes del sistema o importadas por CSS para el texto en pantalla - sin loadFont() bloqueando, el texto puede renderizarse con una fuente de respaldo en la máquina de renderizado.
• No elijas una plantilla con muchas funciones para videos de producto; la plantilla Blank evita cargar código de demostración que el usuario deba eliminar después.

Estándar de calidad

• node --version es >= 16 y se verificó antes de andamiar.
• out/smoke-test.mp4 existe y reproduce un título que aparece gradualmente.
• Las convenciones de carpetas existen exactamente como se especificó, y la composición de prueba está registrada en src/Root.tsx.
• El texto se renderiza a través de @remotion/google-fonts con loadFont(), no con un fallback del sistema.
• Remotion Studio se inicia en localhost:3000 y recarga en caliente una edición.

Transferencia

Una vez que la prueba de humo se renderice y Studio esté funcionando, dile al usuario que el proyecto está listo y transfiere: "La configuración está completa. Describe el video que quieres: duración, escenas, colores de marca - y yo escribiré la composición (remotion-compose), luego renderizaré e iteraré (remotion-render)."