create-refacil-video

Crea proyectos de video animado con Remotion y equipos de agentes de Claude Code.

Describe lo que quieres en lenguaje natural — Claude lo construye.

npx create-refacil-video mi-video --layout reel
cd mi-video
claude

Cómo funciona

Este paquete crea un proyecto de Remotion pre-configurado con Claude Code. Dentro tienes dos formas de trabajar:

1. Chat libre — solo descríbelo

Abre Claude Code y dile lo que quieres en lenguaje natural. Sin comandos.

Tú: crea un video de presentación de mi empresa con nuestros colores y logo
Claude: [lee el brand, crea Composition.tsx, corre tsc, abre preview]

Tú: agrega una escena con el equipo y sus fotos
Claude: [extiende la composición con la nueva escena]

Tú: hazlo más dinámico, con más movimiento en las transiciones
Claude: [ajusta los spring configs y el timing]

2. Slash commands — flujos estructurados

Usa slash commands para resultados confiables con Equipos de Agentes:

/new-video  → Director → Diseñador → Desarrollador (3 agentes en secuencia)
/improve    → Animación + Visual + Copy (3 agentes en paralelo)
/variants   → N agentes en paralelo, uno por variante

Ambos enfoques usan tu marca automáticamente — colores, logo y fuentes de brand/brand.json.

Requisitos

Node.js 18+

node --version   # debe ser v18+

Descarga: https://nodejs.org

Claude Code

npm install -g @anthropic-ai/claude-code
claude   # abre el navegador para autenticarte la primera vez

Obtén tu API key en https://console.anthropic.com

Crear un proyecto

npx create-refacil-video <nombre-proyecto> [--layout <layout>]

Layouts

| Layout | Resolución | Duración | Uso | |--------|-----------|----------|-----| | landscape | 1280×720 | 10s | YouTube, presentaciones, demos (por defecto) | | reel | 1080×1920 | 10s | Instagram Reels, TikTok, YouTube Shorts | | story | 1080×1920 | 5s | Instagram Stories, WhatsApp Status | | square | 1080×1080 | 10s | Feed de Instagram, LinkedIn | | ad | 1200×628 | 5s | Anuncios de Facebook, LinkedIn, Open Graph |

npx create-refacil-video demo-producto
npx create-refacil-video campana-ig --layout reel
npx create-refacil-video anuncio-fb --layout ad
npx create-refacil-video story-lanzamiento --layout story

Primeros pasos

# 1. Crear el proyecto
npx create-refacil-video mi-campana --layout reel
cd mi-campana

# 2. Abrir Claude Code
claude

# 3. Configurar tu marca (2 minutos)
/setup

# 4. Crear tu primer video — elige tu estilo:

# Chat libre:
# "haz un video de introducción a nuestra app de pagos"

# O con slash command:
/new-video video introductorio de nuestra app de pagos mostrando el flujo principal

# 5. Vista previa
/studio

# 6. Exportar
/render

Proyectos de ejemplo

Notificación de pago (WhatsApp / SMS)

/new-video flujo de notificación de pago por WhatsApp — cliente recibe factura, toca pagar, recibe confirmación

Un mockup de teléfono muestra un hilo de chat. La tarjeta de factura entra animada, la tarjeta de éxito aparece con un checkmark y glow verde, y el recibo sigue. El copy del CTA se desliza desde la derecha.

Reel de lanzamiento de producto

npx create-refacil-video lanzamiento-producto --layout reel
/new-video reel de lanzamiento de nuestra nueva app — headline llamativo, 3 features destacados, CTA de descarga

Fondo de gradiente pantalla completa. El headline entra con un spring. Tres bloques de features aparecen escalonados desde abajo. Los badges de app store pulsan al final.

Presentación de empresa

npx create-refacil-video presentacion-empresa --layout landscape
/new-video video de presentación de la empresa — quiénes somos, qué hacemos, 3 estadísticas, foto del equipo, contacto

Formato landscape limpio. El logo entra animado, las estadísticas cuentan hacia arriba, la grilla del equipo aparece con fade, la slide de contacto se mantiene al final.

Anuncio en redes sociales

npx create-refacil-video promo-anuncio --layout ad
/new-video anuncio de Facebook para una promoción del 50% — urgencia, estilo countdown, CTA fuerte

Texto en negrita con énfasis de color. La insignia de descuento rebota. El botón de CTA pulsa. Optimizado para 5 segundos de atención.

Video explicativo

npx create-refacil-video explicativo --layout landscape
/new-video explicativo: cómo funciona nuestra plataforma en 3 pasos — regístrate, conecta, cobra

Flujo paso a paso con círculos numerados. Los iconos entran animados por paso. Indicador de progreso en la parte inferior.

Historia de Instagram

npx create-refacil-video promo-story --layout story
/new-video story promocionando una venta de fin de semana — swipe up, colores llamativos, emojis

Formato vertical con fondo a pantalla completa. Texto en negrita apilado. Lluvia de emojis. Indicador de "desliza arriba" en la parte inferior.

Flujo de onboarding

/new-video secuencia de onboarding — 4 pantallas: bienvenida, beneficio principal, cómo funciona, CTA para comenzar

Cada pantalla es un <Sequence>. Las transiciones entre escenas usan wipe o slide de @remotion/transitions.

Slash commands

/setup

Asistente interactivo de configuración de marca. Hace una pregunta a la vez en este orden:

| # | Pregunta | Campo en brand.json | |---|----------|-------------------| | 1 | ¿Cuál es el nombre de tu empresa o marca? | name | | 2 | ¿Cuál es tu color primario de marca? (hex, ej. #25D366) | colors.primary | | 3 | ¿Qué color de fondo deben tener los videos? (oscuro o claro) | colors.background | | 4 | ¿Tienes un color secundario o de acento? (para botones, highlights) | colors.accent | | 5 | ¿Qué color debe tener el texto principal? | colors.text | | 6 | Describe tu marca en 3–5 palabras (ej. "moderna, amigable, fintech latina") | tone | | 7 | ¿Tienes un archivo de logo? → abre public/brand/assets/ en Finder | logo | | 8 | ¿Qué fuente usas? (ej. Inter, Helvetica — Enter para omitir) | fonts.heading |

Al terminar muestra el JSON resultante, lo escribe en brand/brand.json y confirma los assets encontrados.

Si el brand ya está configurado (sin placeholders y con logo), lo indica y no vuelve a preguntar.

/setup

/new-video [descripción]

Crea una composición completa desde cero usando un equipo secuencial de 3 agentes.

Antes de empezar: valida que brand/brand.json esté configurado. Si tiene placeholders, para y pide correr /setup.

Flujo de agentes:

1. Director — lee el brand y los assets disponibles, analiza la solicitud y produce un brief creativo completo: concepto, desglose de escenas con rangos de frames, componentes necesarios, paleta de colores, duración total.

2. Diseñador — toma el brief del Director y especifica la implementación visual exacta: dimensiones en px, gradientes con hex, spring({ damping, stiffness }) por animación, rangos de interpolate(), box-shadows, tipografía.

3. Desarrollador (Claude principal) — implementa Composition.tsx completo con el spec del Diseñador. Antes de escribir, archiva la composición actual en src/compositions/[timestamp]-[slug].tsx. Corre npx tsc --noEmit y reintenta hasta 3× si hay errores.

/new-video flujo de confirmación de pago por WhatsApp
/new-video demo de producto mostrando 3 features clave con iconos animados
/new-video video de fin de año con 5 estadísticas y confeti
/new-video pantalla de bienvenida con reveal del logo

/improve [enfoque?]

Lanza 3 agentes especialistas en paralelo sobre la composición actual y aplica todos sus hallazgos en un solo paso.

| Agente | Qué revisa | |--------|-----------| | Animaciones | Spring configs, timing entre escenas, easing, stagger, overshoot | | Visual | Layout, colores vs. brand, tipografía, sombras, contraste, uso de logo | | Copy | Claridad, tono, extensión de textos, CTAs, tiempo de lectura por elemento |

Cada agente devuelve cambios concretos (old → new). Claude aplica todo, corre tsc y renderiza.

Enfoques disponibles: animations, design, copy, performance

/improve
/improve animations
/improve design
/improve copy

/add-scene [descripción]

Agrega una nueva escena a la composición existente sin tocar las escenas actuales. Un agente de diseño planifica la escena primero (placement, frame range, componentes, animaciones), luego Claude la implementa. Extiende durationInFrames en Root.tsx si es necesario.

/add-scene slide de cierre con datos de contacto y redes sociales
/add-scene captura de pantalla del producto con callouts de anotación
/add-scene cita de testimonio con avatar y calificación de estrellas

/variants [N] [temas?]

Genera N variantes de color/estilo en paralelo — un agente por variante. Cada uno produce un Composition.[tema].tsx independiente. Si no se especifican temas, los auto-genera según el contenido del video.

/variants 3
/variants 2 oscuro y claro
/variants 4 esmerald-dark, ocean-blue, warm-coral, midnight-gold

Para previsualizar una variante: edita src/Root.tsx para importar desde el archivo de variante.

/render [gif?]

Renderiza la composición actual y guarda en dos lugares:

• out/video.mp4 — siempre el último (se sobreescribe)
• out/history/[timestamp].mp4 — historial permanente por render

Abre el archivo automáticamente al terminar. Muestra el historial completo de renders.

/render
/render gif

/studio

Abre Remotion Studio para vista previa en vivo con hot-reload.

• Si ya hay una pestaña abierta en localhost:300X → la enfoca (no abre una nueva)
• Si no está corriendo → levanta npm run dev en background, espera a que el puerto esté disponible y abre el navegador

Nota: el enfoque de pestaña usa AppleScript — solo funciona en macOS con Chrome o Safari.

/studio

/layout [nombre]

Cambia resolución y duración en Root.tsx sin recrear el proyecto.

| Nombre | Resolución | Duración | |--------|-----------|----------| | landscape | 1280×720 | 10s (300f) | | reel | 1080×1920 | 10s (300f) | | story | 1080×1920 | 5s (150f) | | square | 1080×1080 | 10s (300f) | | ad | 1200×628 | 5s (150f) |

Si la composición ya tiene contenido, avisa que fue diseñada para el layout anterior y sugiere /improve design o /new-video para adaptar.

/layout reel
/layout landscape
/layout square

/new-project [nombre] [--layout]

Crea un proyecto hermano desde dentro de Claude Code sin salir de la sesión. Corre npx create-refacil-video <nombre> --layout <layout> en el directorio padre. Al terminar, pregunta si copiar el brand actual al nuevo proyecto.

/new-project campana-verano --layout reel
/new-project anuncios-q4 --layout ad

Modo chat libre

No necesitas slash commands para crear videos. Solo describe lo que quieres — Claude lee tu marca y lo construye directamente.

Empezando desde cero:

haz un video de presentación de nuestra empresa con animaciones suaves

Iterando sobre el video actual:

la intro es muy larga, córtala a la mitad
cambia el color del título al color primario de nuestra marca
agrega un emoji de cohete al headline

Pidiendo ideas:

¿qué escenas podríamos agregar para comunicar mejor el CTA?

Combinando ambos estilos: Usa el chat libre para ajustes rápidos y /new-video cuando quieras una reconstrucción completa con el Equipo de Agentes.

Configuración de marca

Claude usa tu marca automáticamente en cada video. Configúrala una vez con /setup o edita los archivos directamente.

brand/brand.json

{
  "name": "Mi Empresa",
  "colors": {
    "primary": "#6366F1",
    "background": "#0F172A",
    "accent": "#F59E0B",
    "text": "#F8FAFC"
  },
  "fonts": {
    "heading": "Inter",
    "body": "Inter"
  },
  "logo": "brand/assets/logo.png",
  "tone": "moderno, audaz, B2B SaaS"
}

public/brand/assets/

Arrastra tus archivos aquí — Claude los recoge automáticamente:

public/brand/assets/
├── logo.png           ← logo principal (fondo transparente recomendado)
├── logo-blanco.png    ← versión blanca para fondos oscuros (opcional)
├── logo-oscuro.png    ← versión oscura para fondos claros (opcional)
├── fondo.png          ← imagen de fondo (opcional)
└── icono.png          ← ícono de app o marca estilo favicon (opcional)

Formatos soportados: PNG, JPG, SVG, WebP, WOFF2 (fuentes). Referencia en código con staticFile("brand/assets/logo.png").

Estructura del proyecto

mi-video/
├── src/
│   ├── Composition.tsx       ← toda la lógica de animación vive aquí
│   ├── Root.tsx              ← duración, fps, resolución
│   ├── index.ts
│   ├── index.css
│   └── compositions/         ← versiones anteriores (creadas por /new-video)
│       └── 20250420-120000-flujo-pago.tsx
├── brand/
│   └── brand.json            ← identidad de marca: colores, fuentes, tono
├── public/
│   └── brand/
│       └── assets/           ← logos, imágenes, fuentes (servidas por Remotion)
├── out/
│   ├── video.mp4             ← último render
│   └── history/              ← historial de renders
│       └── 20250420-120500.mp4
└── .claude/
    └── commands/             ← definiciones de slash commands (Markdown)

Actualizar un proyecto existente

Cuando se lance una nueva versión, actualiza tus slash commands y configuración sin tocar tu código:

cd mi-video
npx create-refacil-video update

Resultado:

Updating project…

  ↑ updated  .claude/commands/new-video.md
  ↑ updated  .claude/commands/improve.md
  + added    .claude/commands/nuevo-comando.md

✓ Done. Restart your claude session to pick up the changes.

Qué se actualiza:

• .claude/commands/*.md — lógica de slash commands
• .claude/settings.json — permisos de Bash pre-aprobados
• CLAUDE.md — instrucciones que Claude lee en cada sesión

Qué nunca cambia:

• src/ — tu código de composición
• brand/ — tu configuración de marca
• public/brand/assets/ — tus logos e imágenes
• package.json — tus dependencias

Solución de problemas

claude no se encuentra después de instalar

npm install -g @anthropic-ai/claude-code
# si sigue sin encontrarse, revisa tu PATH:
npm config get prefix

La validación de marca bloquea /new-video

Tu brand/brand.json todavía tiene valores de placeholder. Corre /setup para configurarlo — toma 2 minutos.

Remotion Studio no abre

npm run dev
# Remotion elige el siguiente puerto disponible si el 3000 está ocupado — revisa la salida del terminal

Errores de TypeScript después de /new-video

Claude reintenta hasta 3× automáticamente. Si los errores persisten:

npm run lint
# pega los errores en el chat para corrección manual

npx create-refacil-video descarga en cada ejecución

Es el comportamiento esperado. Para evitarlo, instala globalmente:

npm install -g create-refacil-video
create-refacil-video mi-video --layout reel

Paquetes de Remotion disponibles

Vienen pre-instalados. Claude los usa — nunca necesitas correr npm install manualmente.

| Paquete | Qué provee | |---------|-----------| | remotion | useCurrentFrame, spring, interpolate, AbsoluteFill, Sequence, Img | | @remotion/google-fonts | Google Fonts (Inter, Roboto, Montserrat y más de 1000) | | @remotion/shapes | Formas SVG: <Triangle>, <Circle>, <Star>, <Pie> | | @remotion/noise | Ruido Perlin para movimiento orgánico y natural | | @remotion/transitions | Transiciones de escena: fade(), slide(), wipe() | | @remotion/tailwind-v4 | TailwindCSS v4 para estilos utilitarios |

Licencia

MIT