Cómo creo videos promocionales con código, no con editores

Cómo creo videos promocionales con código, no con editores

Llevaba tres horas seguidas mirando fijamente mi línea de tiempo en Adobe Premiere, arrastrando capas de texto píxel a píxel, y me vino un pensamiento que lo cambió todo: soy desarrollador. ¿Por qué estoy editando videos como un YouTuber de 2015?

Eso fue hace seis meses. Desde entonces, he publicado más de una docena de videos promocionales — promos de escuelas de IA, demos de portfolio, reels de presentación para clientes — y no he abierto un editor de video tradicional ni una sola vez. Ni Premiere. Ni Final Cut. Ni siquiera CapCut. Todos y cada uno de los videos fueron escritos como código React, renderizados desde mi terminal y, en la mayoría de los casos, el componente inicial fue generado por Claude Code antes de que yo tocara el teclado.

La herramienta que hizo esto posible es Remotion. Y el acelerador de flujo de trabajo que convirtió una curva de aprendizaje empinada en una tarde tranquila es el sistema de skills de Claude Code. Juntos, se han convertido en mi arma secreta para producir contenido promocional pulido a un ritmo que pondría nerviosa a cualquier agencia de producción de video.

Esta es la parte que todavía sorprende a la gente cuando se la cuento: los videos se ven bien. No "bien para estar generados con código." Realmente bien. Animaciones suaves, esquemas de colores de marca, audio sincronizado, transiciones profesionales. El tipo de cosas por las que normalmente pagarías a un freelancer entre $500 y $2,000.

Pero hay una trampa de la que nadie te advierte cuando empiezas por este camino — y casi hizo que lo dejara antes de descubrir la solución. Llegaré a eso en un momento.

Por qué la edición de video tradicional me fundió el cerebro

Voy a ser honesto sobre algo. Puedo construir aplicaciones full-stack, configurar clústeres de Kubernetes y escribir informes de auditoría de seguridad. Pero, ¿pedirme que haga keyframes de una animación de texto en After Effects? Se me nublan los ojos.

El problema no es la complejidad — lidio con sistemas complejos todos los días. El problema es que la edición de video tradicional es fundamentalmente manual. Cada cambio es un arrastre de ratón. Cada revisión significa rehacer el trabajo a mano. ¿Quieres cambiar el color de marca en 47 elementos de texto? Buena suerte. Son 47 clics individuales.

Para un desarrollador, esto es desesperante. Nosotros tenemos variables. Tenemos bucles. Tenemos componentes que aceptan props y renderizan de forma diferente según los datos. La idea de codificar elementos visuales a mano arrastrándolos por una línea de tiempo se siente como escribir código moviendo bloques físicos sobre una mesa.

Y luego está el problema del versionado. Intenta meter un archivo de proyecto de Adobe Premiere en Git. Te reto. No puedes hacer diff. No puedes crear ramas. No puedes hacer pull requests. Es un blob binario que se queda ahí, burlándose de toda tu disciplina de ingeniería de software.

Remotion resuelve cada uno de estos problemas. Pero no entendí realmente lo poderoso que era hasta que lo combiné con la capacidad de Claude Code para generar y modificar componentes React bajo demanda. Ahí es donde esta historia se pone interesante.

Qué es realmente Remotion (y por qué debería importarte como desarrollador)

Remotion es un framework de React para crear videos de forma programática. Esa frase suena simple, pero las implicaciones son enormes. Cada fotograma de tu video es un componente React. La posición en la línea de tiempo es un número que lees desde un hook. Las animaciones son simplemente funciones de interpolación. Y todo se renderiza a MP4 desde tu terminal.

Esto es lo que significa en la práctica. En lugar de esto (arrastrar cajas en Premiere):

Escribes esto:

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

export const TitleCard: React.FC<{ title: string; color: string }> = ({ title, color }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateRight: "clamp",
  });

  const translateY = interpolate(frame, [0, fps * 0.5], [30, 0], {
    extrapolateRight: "clamp",
  });

  return (
    <div style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      height: "100%",
      backgroundColor: color,
      opacity,
      transform: `translateY(${translateY}px)`,
    }}>
      <h1 style={{ fontSize: 72, color: "white", fontWeight: 800 }}>{title}</h1>
    </div>
  );
};

Eso es una tarjeta de título con animación de fade-in y deslizamiento hacia arriba. Tomó 25 líneas de código. ¿Cambiar el título? Pasa un prop diferente. ¿Cambiar el color de marca? Una variable. ¿Cambiar el timing de la animación? Ajusta dos números.

Ahora imagina hacer eso para un video promocional completo — secuencia de intro, destacados de funcionalidades, testimonios, llamada a la acción, outro. Todo como componentes React componibles. Todo con control de versiones. Todo renderizable desde un solo comando de terminal.

Esto cambia todo respecto a la velocidad con la que puedes producir contenido en video. Pero la verdadera aceleración ocurrió cuando traje a Claude Code al proceso.

El flujo de trabajo con Remotion + Claude Code que cambió mi proceso

Este es mi flujo de trabajo real, paso a paso. Esta es la guía rápida que tengo fijada en mi terminal, y voy a explicarte no solo qué hacer, sino por qué cada paso importa y dónde las cosas pueden salir mal.

Paso 1: Configuración del proyecto (una sola vez)

cd "/Users/mejba/Local Storage/AI Development/vibe-design/remotion/mejba-demo"
npm install

Este es el directorio raíz de tu proyecto Remotion. La estructura sigue las convenciones estándar de React — src/ para componentes, public/ para assets estáticos, out/ para videos renderizados. Nada exótico aquí.

Consejo profesional: Mantén tus proyectos de Remotion en un directorio dedicado junto a tu otro trabajo de desarrollo. Yo mantengo los míos en mi carpeta vibe-design porque ahí es donde viven todos mis proyectos de creative coding. La nomenclatura importa — cuando tengas tres o cuatro proyectos de video, te agradecerás la organización clara.

Paso 2: Añade tus assets

Drop audio/images into:
mejba-demo/public/

Aquí es donde van tu música de fondo, archivos de logo, capturas de pantalla de productos y cualquier otro medio. Remotion los sirve mediante staticFile(), que apunta al directorio public/ igual que lo hace Create React App.

Esto es algo que aprendí por las malas: el formato de audio importa. MP3 funciona. WAV funciona. Pero si metes un archivo OGG o algún códec obscuro, la vista previa puede reproducirse bien en Chrome, pero el render fallará. Quédate con MP3 para la música de fondo. Yo mantengo un archivo llamado bgm.mp3 en cada proyecto — cámbialo cuando quieras un audio diferente, pero mantén la nomenclatura consistente.

Paso 3: Vista previa en el navegador

npm start
# Opens at http://localhost:3000

Esto lanza Remotion Studio — un entorno de vista previa completo que se ejecuta en tu navegador. Tienes una línea de tiempo, scrubbing fotograma a fotograma, edición de props de componentes y renderizado en tiempo real. Es como tener un editor de video, pero todo lo que ves es la salida de tu código React.

La vista previa es donde pasarás la mayor parte de tu tiempo de desarrollo. Y aquí va un truco de flujo de trabajo que me tomó semanas descubrir: puedes editar el código de tu componente mientras la vista previa está corriendo, y se recarga en caliente al instante. Cambia un color, guarda el archivo, y la vista previa se actualiza en menos de un segundo. Este ciclo de retroalimentación tan rápido es lo que hace que el desarrollo en Remotion se sienta más como desarrollo front-end que como producción de video.

Paso 4: Edita los componentes de tu video

Aquí es donde ocurre el verdadero trabajo creativo. Las composiciones de tu video viven como componentes React en el directorio src/:

mejba-demo/src/AISchoolPromo.tsx   # AI School promotional video
mejba-demo/src/MejbaDemo.tsx       # Portfolio demo reel

Cada archivo es un componente de video completo. Aquí tienes una estructura simplificada de cómo se ve un componente de video promocional:

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";
import { Audio, Video } from "@remotion/media";
import { staticFile } from "remotion";

export const AISchoolPromo: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      {/* Intro sequence: frames 0-90 (3 seconds at 30fps) */}
      <Sequence from={0} durationInFrames={90}>
        <IntroSlide title="AI School" subtitle="Learn to Build the Future" />
      </Sequence>

      {/* Feature highlights: frames 90-450 */}
      <Sequence from={90} durationInFrames={360}>
        <FeatureShowcase features={courseFeatures} />
      </Sequence>

      {/* Testimonials: frames 450-720 */}
      <Sequence from={450} durationInFrames={270}>
        <TestimonialCarousel testimonials={studentReviews} />
      </Sequence>

      {/* CTA: frames 720-900 */}
      <Sequence from={720} durationInFrames={180}>
        <CallToAction url="aischool.mejba.me" />
      </Sequence>

      {/* Background music throughout */}
      <Audio src={staticFile("bgm.mp3")} volume={0.3} />
    </AbsoluteFill>
  );
};

¿Ves lo que está pasando? Cada sección del video promocional es un <Sequence> con un fotograma de inicio y una duración. Cada secuencia renderiza un componente diferente. Los componentes en sí manejan sus propias animaciones usando useCurrentFrame() e interpolate().

Aquí es donde Claude Code se vuelve increíblemente poderoso. Más sobre eso en un momento — pero primero, déjame mostrarte cómo registrar y renderizar estas composiciones.

Paso 5: Registra nuevas composiciones

Cada componente de video necesita ser registrado en src/Root.tsx. Este es el punto de entrada de Remotion — piensa en él como tu App.tsx pero para videos:

<Composition
  id="MyNewVideo"
  component={MyNewVideo}
  durationInFrames={900}  // 30s at 30fps
  fps={30}
  width={1920}
  height={1080}
/>

El id es lo que referencias al renderizar. durationInFrames dividido entre fps te da la duración del video en segundos. Width y height establecen la resolución — 1920x1080 para HD estándar, 1080x1080 para cuadrados de Instagram/redes sociales, 1080x1920 para stories verticales.

Un error que cometí al principio: seguía haciendo composiciones demasiado largas. Un promo de 30 segundos a 30fps son 900 fotogramas. Eso es todo. Mi primer intento fue de 3,600 fotogramas porque estaba pensando en "duración del video" en vez de "conteo de fotogramas." El render tardó una eternidad y el video tenía espacios muertos incómodos. Ajusta tu conteo de fotogramas a tu contenido, no al revés.

Paso 6: Renderiza el video final

# AI School Promo
npx remotion render src/index.tsx AISchoolPromo out/ai-school-promo.mp4

# Portfolio Demo
npx remotion render src/index.tsx MejbaDemo out/video.mp4

# Any composition
npx remotion render src/index.tsx <CompositionId> out/<filename>.mp4

Este es el momento mágico. Un comando, y tu código React se convierte en un archivo MP4. Remotion renderiza cada fotograma como una captura de pantalla del navegador, los codifica con FFmpeg y produce un archivo de video.

Renderizar un video de 30 segundos a 1080p típicamente toma de 2 a 4 minutos en mi MacBook. Composiciones más largas o resoluciones más altas toman proporcionalmente más tiempo. Si necesitas renders más rápidos, Remotion ofrece renderizado en la nube vía Lambda, pero para contenido promocional, el renderizado local es más que suficiente.

Paso 7: Abre y revisa

open out/

Tu video renderizado está en el directorio out/. Reprodúcelo, revísalo, y si algo necesita ajustes — vuelve al paso 4, edita el componente y vuelve a renderizar. El tiempo de ciclo desde "quiero cambiar esto" hasta "viendo el video actualizado" es típicamente de menos de 5 minutos. Compara eso con los tiempos de re-exportación en Premiere o After Effects.

Paso 8: Sube y publica

Ve a youtube.com/upload y arrastra el archivo .mp4. Listo.

O súbelo a Vimeo, incrústalo en tu sitio web, publícalo en LinkedIn, adjúntalo a una campaña de email — la salida es un archivo MP4 estándar que funciona en todas partes.

Si has llegado hasta aquí, ya entiendes el flujo de trabajo básico. Pero el flujo de trabajo básico no es lo que hace especial a este enfoque. El verdadero poder aparece cuando traes a Claude Code al proceso creativo.

Donde Claude Code convierte este flujo de trabajo en un superpoder

Esto es lo que la mayoría de la gente no ve sobre Remotion: la parte de programar es el cuello de botella. No porque Remotion sea difícil de programar — en realidad es bastante agradable — sino porque diseñar animaciones, calcular tiempos y componer secuencias visuales requiere mucha iteración.

Esto es exactamente donde Claude Code brilla. Lo uso como compañero de creative coding a lo largo de todo el proceso de creación de video.

Generación de nuevos componentes de video

Cuando necesito un nuevo video promocional, no empiezo desde cero. Le describo lo que quiero a Claude Code:

Create a Remotion component for a 30-second AI School promotional video
with 4 sections: intro with logo animation, 3 feature highlights with
slide-in text, a testimonials section, and a CTA with pulsing button effect.
Use dark theme (#0a0a0a background) with electric blue (#00d4ff) accents.

Claude Code genera el componente completo — imports, animaciones, secuencias, timing, estilos — todo. Y como entiende React a fondo, la salida no es boilerplate genérico. Es un componente funcional con curvas de animación bien pensadas, timing de fotogramas adecuado y una estructura de composición limpia.

El primer borrador rara vez es perfecto. Pero está al 80%, lo que significa que paso mi tiempo refinando en lugar de construyendo desde cero. Esa es una experiencia creativa fundamentalmente diferente.

Iterando sobre animaciones

Aquí es donde el flujo de trabajo con Claude Code realmente se acelera. En lugar de ajustar valores de interpolación a mano, probar, ajustar de nuevo — describo lo que quiero:

Make the title slide in from the left instead of fading in,
and add a subtle scale effect to the feature icons.
The transition between sections should use a wipe effect.

Claude Code modifica el componente, ajustando las llamadas a interpolate(), añadiendo propiedades transform y reestructurando el timing de los Sequence. Hago vista previa en Remotion Studio, y si no está del todo bien, describo el siguiente ajuste. El ciclo de iteración pasa de minutos a segundos.

Generando videos basados en datos

Este es el enfoque que más tiempo me ha ahorrado. Los videos de Remotion pueden aceptar props — lo que significa que puedes generar diferentes videos a partir de la misma plantilla pasando datos diferentes.

Hice que Claude Code construyera un componente de plantilla que acepta un objeto JSON con título, funcionalidades, testimonios, colores y texto de CTA. Ahora cuando necesito un promo para un producto diferente, no rediseño el video. Escribo un nuevo archivo de datos y renderizo.

const aiSchoolData = {
  title: "AI School",
  tagline: "Learn to Build the Future",
  features: ["Hands-on Projects", "Expert Mentors", "Career Support"],
  primaryColor: "#00d4ff",
  ctaUrl: "aischool.mejba.me",
};

const cybersecData = {
  title: "xCyberSecurity",
  tagline: "Enterprise Protection",
  features: ["Penetration Testing", "Compliance Audits", "24/7 Monitoring"],
  primaryColor: "#ff3333",
  ctaUrl: "xcybersecurity.io",
};

Misma plantilla. Datos diferentes. Dos videos con marca completamente diferentes. Esa es la ventaja del desarrollador — pensamos en abstracciones, y Remotion nos permite aplicar ese pensamiento a la producción de video.

La integración con Remotion Skills

Remotion en realidad publica un paquete de skills — un conjunto de reglas y patrones diseñados específicamente para asistentes de programación con IA. Estos skills codifican las mejores prácticas para la estructura de composiciones, patrones de animación, manejo de audio y configuración de renderizado. Cuando Claude Code tiene acceso a estos patrones, el código generado sigue las convenciones de Remotion con precisión.

Los skills cubren todo, desde la configuración básica de <Composition> hasta funcionalidades avanzadas como la parametrización con esquemas Zod, @remotion/media para control de video/audio, @remotion/transitions para transiciones de escena, y @remotion/three para contenido 3D. Es como darle a Claude Code un libro de texto de Remotion para que lo consulte mientras escribe los componentes de tu video.

La referencia rápida que tengo en mi escritorio

Después de construir docenas de videos con este flujo de trabajo, condensé todo en una tarjeta de referencia rápida. Esto es lo que realmente miro durante una sesión de producción:

Eso es todo. Cinco comandos cubren todo el flujo de producción. Todo lo demás es código React.

El problema que casi me hace abandonar

Prometí antes que te contaría sobre la trampa. Aquí está.

Cuando empecé con Remotion, intenté hacer videos cinematográficos. Movimientos de cámara complejos. Efectos de partículas. Transformaciones 3D con profundidad. Y las vistas previas se veían increíbles en Chrome.

Luego rendericé el video. Las animaciones eran entrecortadas. El timing estaba desfasado. Algunas propiedades CSS que se veían suaves a 60fps en el navegador se veían terribles a 30fps en el video renderizado.

Esto es lo que no entendía: Remotion renderiza cada fotograma de forma independiente. No hay motion blur. No hay interpolación de fotogramas entre renders. Cada fotograma es una captura de pantalla estática de tu componente React en ese punto exacto del tiempo. Si tu animación se mueve demasiado rápido entre fotogramas, se ve entrecortada en el video final.

La solución es simple pero no obvia: diseña tus animaciones para 30fps desde el principio. Mantén los movimientos suaves y relativamente lentos. Usa curvas de easing (Remotion tiene física de resortes integrada vía spring()) en lugar de interpolación lineal. Y prueba haciendo scrubbing en la línea de tiempo fotograma a fotograma, no reproduciendo la vista previa a velocidad completa.

Una vez que interioricé esto, la calidad de mis renders mejoró drásticamente. Pero ojalá alguien me lo hubiera dicho el primer día en lugar de dejarme perder una semana depurando animaciones "rotas" que en realidad simplemente estaban mal diseñadas para renderizado fotograma a fotograma.

Errores que he cometido para que tú no tengas que hacerlo

Más allá del problema de la tasa de fotogramas, estas son las otras minas que he pisado:

Problemas de sincronización de audio. Si tu música de fondo no coincide exactamente con la duración de tu video, tendrás silencio al final o cortes abruptos. Siempre recorta tu audio para que coincida con tu cálculo de durationInFrames / fps. Uso una regla simple: si mi video dura 30 segundos (900 fotogramas a 30fps), mi archivo de audio dura exactamente 30 segundos. Ni más, ni menos.

Sorpresas con la carga de fuentes. Las fuentes personalizadas necesitan cargarse antes de que se renderice el primer fotograma. Si usas @remotion/google-fonts, importa y carga la fuente al inicio de tu componente. Una vez pasé una hora depurando por qué mi texto de título se renderizaba en Times New Roman — la fuente de Google no se había cargado a tiempo para el primer fotograma.

Composiciones sobrecomplicadas. Mis primeros videos tenían más de 15 secuencias con líneas de tiempo superpuestas complejas. Eran imposibles de depurar y una pesadilla para modificar. Ahora mantengo las composiciones planas: 4-6 secuencias, límites claros de inicio/fin, sin superposiciones a menos que sea absolutamente necesario. Las composiciones simples se renderizan más rápido y son más fáciles de iterar.

Ignorar la funcionalidad calculateMetadata. Remotion te permite calcular dinámicamente la duración y las dimensiones del video basándose en las props. Antes codificaba estos valores a mano, lo que significaba que cambiar la longitud del contenido requería actualizar el conteo de fotogramas manualmente. Ahora uso calculateMetadata para derivar la duración del contenido, y mis plantillas funcionan sin importar cuántos datos les alimente.

Lo que realmente produzco con esta configuración

Déjame ser específico sobre los resultados, porque las afirmaciones vagas no ayudan a nadie.

En los últimos seis meses usando este flujo de trabajo de Remotion + Claude Code, he producido:

• 4 videos promocionales de AI School (30-60 segundos cada uno) — usados para anuncios de YouTube y landing pages
• 2 reels de demo de portfolio — mostrando proyectos para presentaciones a clientes
• 6 clips para redes sociales (formato de 15 segundos) — para LinkedIn y Twitter
• 3 videos de anuncio de lanzamiento de productos — para diferentes marcas en mi ecosistema

Tiempo total de edición de video tradicional: cero horas. Tiempo total de desarrollo por video: 1-3 horas para una plantilla nueva, 15-30 minutos para una variante basada en datos de una plantilla existente.

¿El costo? Mi máquina de desarrollo existente y una licencia gratuita de Remotion (Remotion es gratis para uso personal y empresas que facturan menos de $1M). Sin suscripción a Creative Cloud. Sin licencias de material de archivo. Sin facturas de freelancers.

Y como todo es código, cada video está versionado en Git. Puedo ver exactamente qué cambió entre versiones, volver a cualquier estado anterior y crear ramas experimentales sin riesgo. Intenta hacer eso con un archivo de proyecto de Premiere Pro.

Hacia dónde va esto

No voy a pretender que la producción de video basada en código va a reemplazar la edición tradicional para todo. Los editores de cine, artistas de motion graphics y especialistas en VFX hacen trabajo que va mucho más allá de lo que Remotion maneja.

Pero para una categoría específica de video — contenido promocional, demos de productos, visualizaciones basadas en datos, clips de marca para redes sociales — el flujo de trabajo del desarrollador es más rápido, más barato y más mantenible. Y está mejorando a un ritmo que debería preocupar a las agencias de producción de video tradicionales.

El ecosistema de Remotion se está expandiendo rápidamente. El paquete @remotion/transitions trae transiciones de escena profesionales. @remotion/captions maneja la generación de subtítulos. @remotion/three te permite incrustar escenas 3D de Three.js directamente en la línea de tiempo de tu video. Cada nuevo paquete cierra otra brecha entre video generado por código y video producido tradicionalmente.

Y del lado de la IA, la capacidad de Claude Code para generar, iterar y optimizar componentes React significa que el cuello de botella creativo sigue reduciéndose. He empezado a experimentar con pipelines de video completamente automatizados — alimentar un artículo de blog, generar un guion, generar los componentes de Remotion, renderizar el video — todo activado por un solo comando. Aún no está listo para producción, pero funciona. Y está sorprendentemente cerca.

Lo que le diría a mi yo del pasado

Si pudiera volver a esa noche en la que estaba arrastrando capas de texto en Premiere, diría esto: ya sabes cómo hacer videos. Solo que aún no lo sabes.

Cada concepto de React que has aprendido — componentes, props, estado, composición, interpolación — se mapea directamente a la producción de video. El modelo mental es idéntico. La única diferencia es el formato de salida: en lugar de píxeles en una pantalla, obtienes fotogramas en un archivo de video.

La combinación de Remotion + Claude Code no es solo una optimización de flujo de trabajo. Es un cambio de mentalidad. Dejas de pensar en el video como una disciplina separada y especializada y empiezas a verlo como otro formato de salida para tu código. Y una vez que eso hace clic, empiezas a ver oportunidades de video promocional en todas partes — porque el costo de crear uno acaba de bajar de "contratar a alguien" a "escribir un componente."

Mi desafío para ti: elige una cosa para la que necesites un video. Una presentación de proyecto. Una demo de producto. Una introducción personal para tu portfolio. Configura un proyecto de Remotion, describe lo que quieres a Claude Code y renderízalo. Todo el proceso — desde la configuración hasta el MP4 final — te tomará menos de una tarde.

Y te garantizo que nunca más verás Premiere Pro de la misma manera.

Trabajemos juntos

¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.

• Fiverr (builds 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