Claude Code + Remotion: Motion Graphics para canales de YouTube sin editor de video
El gráfico de barras apareció en pantalla — fluido, elástico, cada columna encajando en su lugar con un ligero sobreimpulso antes de estabilizarse. Junto a él, un contador avanzó del 0% al 78%, brillando tenuemente sobre un fondo oscuro. Todo se sentía como algo por lo que una agencia de motion design cobraría $800.
Lo construí en un prompt. Once palabras, una terminal de Claude Code y unos cuarenta segundos de procesamiento.
Ese momento cambió cómo pienso sobre el contenido en video. No porque la animación fuera perfecta — no lo era, y llegaré a los ajustes que hice — sino porque demolió un muro que llevaba meses mirando. Quería crear un canal de YouTube sin rostro centrado en visualizaciones de datos y videos estilo ranking. El tipo que acumula millones de vistas con gráficos de barras animados mostrando las personas más ricas del mundo, los países de más rápido crecimiento o los lenguajes de programación más populares a lo largo del tiempo. Pero cada vez que abría After Effects, lo cerraba en menos de veinte minutos. El flujo de trabajo con keyframes se sentía como escribir código copiando caracteres a mano de un libro impreso.
Entonces descubrí que Claude Code y Remotion podían convertir una descripción de texto en un motion graphic completamente codificado y renderizable. Y de repente, las cuentas de los canales de YouTube sin rostro cambiaron completamente.
La economía que captó mi atención
No voy a fingir que entré en esto puramente por el oficio. Los números me atrajeron.
Los canales de YouTube sin rostro — los que funcionan enteramente con motion graphics, material de archivo y narración sin que nadie aparezca ante la cámara — generan ingresos reales. Según los datos de nicho 2026 de OutlierKit, los canales en el espacio de finanzas y visualización de datos ganan $15-22 CPM, lo que significa que cada millón de vistas se traduce en aproximadamente $15.000 a $22.000 en ingresos por publicidad. Un canal que produce videos estilo ranking con buenas miniaturas y temas tendencia puede alcanzar de forma realista 5-10 millones de vistas al mes dentro del primer año.
El instructor en el tutorial que desencadenó todo este experimento estimó $2-3 por cada 1.000 vistas para contenido general de motion graphics. Ese es el extremo conservador — los nichos de entretenimiento y conocimiento general se sitúan más abajo en la escala CPM. Pero incluso a esa tasa, un canal que alcance 100 millones de vistas totales genera $200.000 a $300.000. Canales como Fern (@fern-tv), que produce documentales de crimen en 3D, supuestamente ganan más de $80.000 al mes solo en ingresos por publicidad, según el análisis de canales sin rostro de NexLev.
El cuello de botella nunca fue el concepto ni los temas. Era la velocidad de producción. Los flujos de trabajo tradicionales de motion graphics — After Effects, Premiere Pro, keyframing manual — te limitan a quizás dos o tres videos pulidos por semana si trabajas solo. Los canales que dominan este espacio producen contenido a escala. Algunos superan los 1.500 videos. Ese volumen es imposible con animación manual a menos que contrates un equipo.
Claude Code y Remotion rompieron ese cuello de botella para mí. Así es como lo configuré, qué funcionó realmente y las partes donde tropecé.
Lo que necesitas antes de escribir un solo prompt
La configuración toma unos quince minutos si todo coopera, y unos cuarenta y cinco si PowerShell decide ser difícil. Aquí está el stack exacto que instalé, en orden, con los números de versión que funcionaron para mí.
1. Una cuenta de Claude AI con suscripción
Esto no es negociable. Claude Code requiere una suscripción pagada de Claude — el nivel gratuito no es suficiente. A abril de 2026, el plan Pro a $20/mes te da acceso a Claude Code a través de la extensión de VS Code. Si planeas generar videos en cualquier volumen real, agotarás rápidamente los límites de uso estándar. Yo actualicé al plan Max dentro de la primera semana.
2. Visual Studio Code
Descarga VS Code de code.visualstudio.com. Cualquier versión reciente funciona. Este es tu centro de operaciones — Claude Code funciona como extensión dentro de él, y aquí harás todo tu prompting e inspección de código.
3. Node.js (Versión 18+)
Remotion necesita Node.js como su entorno de ejecución. Consíguelo en nodejs.org — yo uso Node 20 LTS. Este es el motor que realmente renderiza tus videos.
4. Git
El control de versiones puede parecer opcional para un proyecto de video, pero confía en mí — instala Git. Lo querrás por dos razones. Primero, la instalación del skill de Remotion lo usa. Segundo, una vez que empieces a iterar en plantillas de motion graphics, poder ramificar y revertir te salva de la espiral de "accidentalmente rompí la animación que funcionaba perfectamente hace diez minutos."
5. La extensión de Claude Code
Abre VS Code, ve a la pestaña Extensiones (Cmd+Shift+X en Mac, Ctrl+Shift+X en Windows), busca "Claude Code" e instálala. Sigue las indicaciones de autorización para conectarla con tu cuenta de Claude AI.
6. El Skill de Remotion
Aquí es donde está la magia. Abre tu terminal dentro de VS Code y ejecuta:
npx skills add remotion-dev/skills
Ese único comando descarga los archivos del skill de Remotion en .claude/skills en tu directorio de proyecto. Estos archivos enseñan a Claude cómo funciona Remotion. Sin este skill instalado, Claude puede escribir código de Remotion, pero alucinará métodos de API y perderá mejores prácticas. Con el skill, escribe componentes de Remotion de calidad de producción en el primer intento aproximadamente el 80% de las veces.
Si encuentras un error de política de ejecución de PowerShell en Windows, ejecuta primero esto:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Para cualquiera que inicie un proyecto nuevo de Remotion, también puedes crear uno directamente:
bun create video
El flujo de trabajo que realmente produce videos
Aquí es donde la teoría se encuentra con la práctica. Te guiaré por el flujo exacto que uso para ir de "tengo una idea de video" a "MP4 renderizado en mi carpeta de exportación."
Paso 1: Describe la animación en español sencillo
Abre el panel de chat de Claude Code y escribe lo que quieres. No pseudo-código. No especificaciones técnicas. Solo describe la animación como se la describirías a un colega tomando café.
Paso 2: Deja que Claude ejecute
Claude procesará tu prompt, escribirá el código del componente, configurará la estructura del proyecto Remotion e instalará dependencias. En mi M2 MacBook Air, esto toma 30-60 segundos para una animación típica.
Paso 3: Previsualiza en Remotion Studio
Una vez que Claude termina de generar, produce una URL — típicamente http://localhost:3000. Ábrela en tu navegador y estarás viendo Remotion Studio: un editor de video y herramienta de previsualización basado en web.
Paso 4: Itera con prompts de seguimiento
Si algo no está bien, simplemente describe el cambio. Claude modifica el código del componente existente. La previsualización se actualiza. Iteras hasta que se vea bien.
Paso 5: Renderiza a MP4
npx remotion render src/index.ts MyComposition out/video.mp4 --fps=30
El tiempo de renderizado depende de la complejidad y duración. Una visualización de datos de 15 segundos con animaciones fluidas tarda unos 45 segundos en renderizar. Un video de 60 segundos con múltiples escenas tarda tres a cuatro minutos. Compara eso con After Effects, donde un motion graphic de 60 segundos puede tardar 15-20 minutos en renderizar.
Construyendo un gráfico de ranking: el video que me convenció
El tutorial que originalmente inspiró este flujo de trabajo demostró un gráfico de ranking "Top 10 Personas Más Ricas" — el tipo de video que funciona extremadamente bien en YouTube.
Claude generó un componente React de 180 líneas. Usó interpolate de Remotion para las animaciones de crecimiento de barras, spring para los efectos de rebote en los números, y componentes Sequence para escalonar el timing de cada entrada.
Tiempo total del prompt al render terminado: unos doce minutos. Construir la misma animación en After Effects tomaría mínimo tres a cuatro horas.
Por qué los motion graphics basados en código cambian el juego de escala
Las animaciones que Claude genera no son solo videos — son componentes React. Esa distinción importa enormemente para cualquiera que piense en canales de YouTube sin rostro a escala.
Las plantillas se convierten en plantillas reales
Cuando construí ese gráfico de ranking, no construí solo un video. Construí una plantilla. El componente acepta datos como props — nombres, valores, colores, títulos. Cambia los datos y tienes un video completamente diferente.
// Same component, different data — different video
const richestPeople = [
{ name: "Elon Musk", value: 700, color: "#8B5CF6" },
{ name: "Bernard Arnault", value: 620, color: "#3B82F6" },
// ... more entries
];
const programmingLanguages = [
{ name: "Python", value: 4200000, color: "#3776AB" },
{ name: "JavaScript", value: 3800000, color: "#F7DF1E" },
// ... more entries
];
El renderizado por lotes está integrado
# Render multiple compositions from a data file
node render-batch.js --data=./datasets/rankings.json --output=./exports/
El control de versiones funciona
Cada animación vive en un repositorio Git. Puedo ramificar, comparar, fusionar y revertir.
Las partes honestas: dónde este flujo de trabajo se queda corto
La animación compleja de personajes aún no está ahí
La animación basada en código destaca en visualización de datos, tipografía, formas geométricas, gráficos y diseño de movimiento abstracto. Lucha con el movimiento orgánico.
La curva de aprendizaje no es cero
Pasé mi primer fin de semana leyendo la documentación de Remotion para entender conceptos como useCurrentFrame, interpolate y Sequence.
El renderizado consume recursos
Un video de 60 segundos a 1080p y 30fps significa que Remotion renderiza 1.800 frames individuales. Eventualmente moví mis renderizados por lotes a una instancia AWS EC2 con 32GB de RAM.
No todo prompt produce oro
Alrededor del 20% de mis prompts necesitan revisión significativa.
Si prefieres que alguien construya una pipeline completa de motion graphics para tu canal, tomo exactamente estos tipos de proyectos. Puedes ver mi trabajo en fiverr.com/s/EgxYmWD.
De videos individuales a una pipeline de producción
Paso 1: Investigación de temas
Uso Google Trends, VidIQ y sugerencias de búsqueda de YouTube para encontrar temas de ranking con volumen de búsqueda.
Paso 2: Recolección de datos
Para cada tema, compilo los datos en un formato JSON estructurado. Esto toma unos quince minutos por tema.
Paso 3: Selección o creación de plantilla
Mantengo cinco plantillas principales. Aproximadamente el 70% de mis videos usa una de estas plantillas existentes con nuevos datos.
Paso 4: Generación y revisión
Este paso toma de cinco a quince minutos por video dependiendo de la complejidad.
Paso 5: Ensamblaje
Combino el motion graphic renderizado con narración, música de fondo, intro/outro y miniatura.
Paso 6: Lotes cuando sea posible
Los domingos preparo los videos de la semana siguiente. Los lunes por la mañana tengo de cinco a siete motion graphics crudos listos.
Esta pipeline me permite producir de cinco a siete videos por semana como creador individual.
Lo que Remotion hace bajo el capó
Remotion trata los frames de video de la misma manera que React trata los renders de UI. Cada frame de tu video es un componente React renderizado en un punto específico en el tiempo.
import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
export const AnimatedCounter: React.FC<{ target: number }> = ({ target }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Spring-based animation for natural movement
const progress = spring({
frame,
fps,
config: { damping: 15, stiffness: 80 },
});
const currentValue = Math.round(progress * target);
return (
<div style={{
fontSize: 96,
fontWeight: "bold",
color: "#8B5CF6",
fontFamily: "Inter, sans-serif",
}}>
{currentValue.toLocaleString()}
</div>
);
};
Licencias: lo que necesitas saber antes de monetizar
A abril de 2026, Remotion Skills es gratuito para desarrolladores individuales, organizaciones sin fines de lucro y empresas con tres o menos empleados. Si tu operación crece a cuatro o más personas, necesitarás una licencia comercial de Remotion.
Lo que le diría a alguien que empieza hoy
Empieza con una plantilla, no cinco. Elige gráfico de barras horizontal. Domínalo. Luego expande.
Invierte dos horas en los docs de Remotion. Solo la guía de inicio y las páginas sobre interpolate, spring y Sequence.
Elige tu nicho antes de tu primer render. El algoritmo de YouTube recompensa la consistencia.
No te saltes la narración. Los generadores de voz IA como ElevenLabs producen narración de calidad de transmisión.
Renderiza durante la noche. Programa tus renders por lotes antes de dormir.
Para un recorrido más profundo de los fundamentos de Claude Code, lo cubrí extensamente en mi tutorial de Claude Code para principiantes. Y si quieres ver cómo he usado Remotion más allá del contenido de YouTube, consulta mi desglose completo del flujo de trabajo con Remotion.
El cambio que importa más que la herramienta
Hace seis meses miraba los canales de YouTube sin rostro y pensaba: "Gran modelo de negocio, pero el costo de producción lo mata para creadores individuales." Claude Code y Remotion no solo redujeron ese costo. Lo eliminaron como variable. Mis costos de producción por video son ahora efectivamente cero más allá de las suscripciones que ya pagaba para trabajo de desarrollo.
Los canales que dominarán el espacio de YouTube sin rostro en los próximos dos años no serán los que tengan los mayores presupuestos de producción. Serán los que descubrieron cómo convertir descripciones de texto en motion graphics profesionales a escala.
Las herramientas están ahí. El skill se instala en quince segundos. La primera animación toma cuarenta.
¿Qué va a mostrar tu primer gráfico de ranking?
Preguntas frecuentes
¿Necesito saber React para usar Claude Code con Remotion?
No. Claude Code traduce prompts en español sencillo a componentes React/Remotion funcionales. La familiaridad básica con React ayuda a ajustar la salida, pero la generación inicial requiere cero conocimiento de programación.
¿Cuánto cuesta la configuración completa de Claude Code y Remotion?
Una suscripción Claude Pro cuesta $20/mes. Remotion es gratuito para creadores individuales y equipos de tres o menos. Costo mínimo total: $20/mes. Añade una herramienta de voz IA ($10-30/mes) para videos narrados, y estás viendo $30-50/mes para una pipeline de producción completa.
¿Cuánto tarda en renderizar un video de motion graphics?
Una animación de 15 segundos a 1080p/30fps renderiza en aproximadamente 45 segundos en un M2 MacBook Air. Una composición multi-escena de 60 segundos tarda de tres a cuatro minutos.
¿Puedo monetizar videos de YouTube hechos con Remotion y Claude Code?
Sí. La salida es video MP4 estándar que te pertenece. Las políticas de monetización de YouTube aplican al contenido mismo, no a las herramientas usadas para crearlo.
¿Qué tipos de motion graphics funcionan mejor con este flujo de trabajo?
Visualizaciones de datos, carreras de gráficos de barras, animaciones de ranking, showcases de contadores/estadísticas, gráficos comparativos y contenido basado en tipografía producen los resultados más fuertes.
Trabajemos juntos
¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudar.
- Fiverr (desarrollos personalizados e integraciones): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
