Animaciones — pipeline Remotion + Codex con un solo comando

Qué es#

Proyecto operativo para crear videos animados con Remotion + Codex desde cero.

Ejecutás un solo comando → el sistema instala dependencias, prepara proyecto, levanta preview, te deja listo para iterar en vivo.

Pre-requisitos#

Si recién empezás#

Solo terminal abierta. El script hace el resto.

Si sos experto#

Te conviene saber que el bootstrap es idempotente: instala solo lo faltante, reusa setup existente.

Setup en 3 pasos#

Paso 1 — Abrí terminal#

Paso 2 — Ejecutá un comando#

macOS / Linux / WSL:

bash <(curl -fsSL https://raw.githubusercontent.com/Hainrixz/tododeia-animaciones/main/install.sh)

Windows PowerShell:

irm https://raw.githubusercontent.com/Hainrixz/tododeia-animaciones/main/install.ps1 | iex

Paso 3 — Qué instala automático#

• Codex CLI (si ya lo tenés, se saltea)
• Dependencias base: git, node, npm, cloudflared
• Skills necesarias: video-generator + remotion-best-practices
• Proyecto inicial Remotion en output/agent-video-starter
• Preview local + URL pública por túnel para revisión

5 min después, tenés:

• localhost:3000 con preview en vivo
• URL pública para mandar a quien quieras (cliente, equipo)
• Estructura Remotion lista para iterar

Cómo iterar#

Después del setup, dentro del proyecto:

> Generame video de 30 segundos con [DESCRIPCIÓN DETALLADA].
  Estilo: [REFERENCIA].
  Aspect ratio: [9:16 / 16:9 / 1:1].

Codex modifica los archivos Remotion. Preview se actualiza en tiempo real.

Iteración típica#

1. Generás v1 → ves preview
2. "El texto sale muy rápido en segundo 5, ralentizá"
3. v2 → preview
4. "Cambiá color principal a azul"
5. v3 → preview
6. Cuando estás contento → renderizás MP4

Por qué Remotion + Codex#

Remotion#

Framework de React para video programático. Todo el video es código → reproducible, versionable, iterable.

Codex#

CLI de OpenAI integrado a Claude Code / VS Code. Genera código Remotion bien estructurado.

El combo#

Casos de uso#

1. Reels educativos en cantidad#

> Generá 5 Reels de 30s, cada uno explicando uno de estos tips:
  1. [Tip 1]
  2. [Tip 2]
  ...
  Estilo consistente: dark mode, texto grande, transiciones suaves.

Output: 5 MP4 con estética consistente.

2. Animaciones para landing#

> Generá hero animation para mi landing.
  Concepto: data flowing through nodes (red neural).
  Duración: loop perfecto de 8 segundos.
  Color: gradiente azul → violeta.
  Resolución: 1920×1080.

Embebés en <video autoplay loop muted> en tu site.

3. Explicar concepto visual#

> Animación de 45s explicando "cómo funciona blockchain":
  - 0-5s: hook (problema actual con confianza)
  - 5-25s: 3 puntos clave con visualización
  - 25-40s: ejemplo concreto
  - 40-45s: tagline final

4. Promo de feature de producto#

> Promo 20s de mi nueva feature [DESCRIBÍ].
  Mostrar UI screenshots con animación de transición.
  Texto destaca beneficios clave.
  CTA al final: "Probalo gratis 14 días".

Diferencia con Editor Pro Max#

Ambos usan Remotion. Diferencia es el workflow.

Estructura del proyecto#

output/agent-video-starter/
├── package.json
├── src/
│   ├── compositions/        ← tus videos
│   │   ├── HelloWorld.tsx
│   │   └── MyAnimation.tsx
│   ├── components/          ← elementos reutilizables
│   │   ├── AnimatedText.tsx
│   │   └── Background.tsx
│   └── Root.tsx             ← registra compositions
└── remotion.config.ts

Codex modifica src/compositions/ y src/components/ según pidas.

Anti-patrones#

1. Querer pixel-perfect first try#

Remotion + Codex genera buena base. Iterás 3-5 veces para finalizar. Aceptá el proceso.

2. Sin describir el "porqué"#

❌ "Generá animación de logo" ✅ "Generá animación de logo para landing de SaaS B2B, mood profesional pero moderno, 5 segundos, loop perfecto"

3. Pedir mucho de una#

❌ "Generá 30 segundos con 10 animaciones distintas" ✅ "Generá 30 segundos. Primero el hero (0-10s) con [X]. Después agrego el resto."

4. Ignorar performance#

Remotion permite cosas muy pesadas. Si tu animación tarda 20 min en renderear, simplificá efectos.

5. No versionar#

output/ está en git. Versioná cada versión que te gusta. Sin esto, perdés iteraciones que funcionaban.

Cuándo NO conviene#

Combinaciones potentes#

Con Editor Pro Max#

> Generá animaciones complejas custom con este proyecto.
> Para Reels/TikTok estándar de cantidad, usá Editor Pro Max.

Editor Pro Max.

Con stack creator#

Animaciones es pieza dentro del stack IA creador.

Con humanizer#

Si tus animaciones tienen texto narrativo, pasalo por humanizalo antes.

Próximos pasos#

• Para producción de Reels/TikToks en cantidad, Editor Pro Max
• Para stack completo de creator con varias herramientas, Stack IA Creador
• Para combo Awesome Skills + UltraThink + VoxCPM, Viral Script Combo