Kit de Video Programático · Remotion · CULTIVA IA

Video Automático
a Escala con React

Sistema de generación programática de videos MP4/WebM para el cliente NutriMax — dashboard Q2 2026 con métricas animadas, subtítulos estilo TikTok y pipeline batch para 50+ clientes/mes.

⚛️ React + Remotion 4.x
🎬 1080×1920 · 30fps · H.264
☁️ Render en AWS Lambda
⏱️ 8 seg · 240 frames
Vista previa del video generado
NutriMax Supplements
Resultados
Q2 2026 🚀
Ingresos Q2
142.5K€
+28%
ROAS Meta Ads
4.7×
Premium
Leads generados
1,847
↑Q1
CAC promedio
12.30€
−15%
Ingresos mensuales Q2
¡Resultados TOP! 📈
Frame 180 / 240  ·  6.0s de 8.0s
Timeline · 240 frames
0sMétricasChartCaptions8s
Configuración de composición
Composición
NutrimaxDashboard
Resolución
1080×1920
Frames totales
240 @ 30fps
Duración
8.0 segundos
Codec
H.264 · CRF 18
Props dinámicas
7 campos
Secuencias del video
Intro / Logo
frames 0–30 · spring animation
1.0s
Métricas animadas
frames 30–120 · staggered slideIn
3.0s
Gráfico de barras
frames 120–180 · interpolate scaleY
2.0s
Captions TikTok
frames 180–240 · word-by-word
2.0s
Props JSON de entrada
{
  "clientName": "NutriMax",
  "quarter": "Q2 2026",
  "revenue": 142500,
  "growth": 28,
  "roas": 4.7,
  "leads": 1847,
  "cac": 12.30
}
Métricas del pipeline batch
🎬
50+
Videos / mes
↑ escalable
~8s
Render Lambda
por video
💰
0.04
Coste Lambda
por render
📐
3×
Formatos output
1:1 · 9:16 · 16:9
Componentes generados
NutrimaxDashboard.tsx
Composición principal
// NutrimaxDashboard.tsx — CULTIVA IA import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Sequence } from "remotion"; interface Props { clientName: string; quarter: string; revenue: number; growth: number; roas: number; leads: number; cac: number; } export const NutrimaxDashboard: React.FC<Props> = ({ clientName, quarter, revenue, growth, roas, leads, cac }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Slide in logo const logoY = spring({ frame, fps, from: -80, to: 0, durationInFrames: 25 }); // Fade in metrics staggered const metricOpacity = (i: number) => interpolate(frame, [30 + i*15, 50 + i*15], [0,1], { extrapolateRight: "clamp" } ); return ( <AbsoluteFill style={{ backgroundColor: "#0F172A" }}> <Sequence from={0} durationInFrames={30}> <IntroScene clientName={clientName} quarter={quarter} logoY={logoY}/> </Sequence> <Sequence from={30} durationInFrames={90}> <MetricsScene revenue={revenue} growth={growth} roas={roas} leads={leads} cac={cac} opacityFn={metricOpacity}/> </Sequence> <Sequence from={120} durationInFrames={120}> <ChartScene frame={frame}/> <TikTokCaptions frame={frame}/> </Sequence> </AbsoluteFill> ); };
batch-render.sh
Pipeline multi-cliente
#!/bin/bash # batch-render.sh — CULTIVA IA # Genera videos Q2 para todos los clientes CLIENTS_JSON="clients-q2-2026.json" OUT_DIR="out/q2-2026" COMP="NutrimaxDashboard" mkdir -p "$OUT_DIR" # Leer clientes del JSON y renderizar jq -r '.[] | @base64' \ "$CLIENTS_JSON" | while read -r row; do client=$(echo "$row" | base64 -d | \ jq -r '.clientName') props=$(echo "$row" | base64 -d | \ jq -c '.') echo "🎬 Rendering: $client" # Render en AWS Lambda (paralelo) npx remotion lambda render \ "$COMP" \ --props="$props" \ --outName="${client}-q2-2026.mp4" \ --codec=h264 \ --crf=18 \ --region=eu-west-1 & done # Esperar a todos los renders wait echo "✅ Batch completo. Archivos en $OUT_DIR" # Subir a S3 y notificar por Slack aws s3 sync "$OUT_DIR" \ s3://cultiva-ia-videos/q2-2026/ \ --acl public-read curl -X POST $SLACK_WEBHOOK \ -d '{"text":"✅ Videos Q2 listos"}'
Arquitectura del pipeline
📊
CRM / API
Datos cliente
📄
JSON Props
clients-q2.json
⚛️
Remotion
React → Frames
☁️
AWS Lambda
Render paralelo
🎬
MP4 / WebM
S3 + CDN
📱
Entrega
WhatsApp / Email
Estado del batch render — Q2 2026
Pipeline de renderizado · clientes activos
12 de 50 clientes
# Cliente Composición Archivo de salida Duración Coste Lambda Estado
01
NutriMax
NutrimaxDashboard
nutrimax-q2-2026.mp4
8.0s 0.038€ Completado
02
CafeLab BCN
CafeLabDashboard
cafelab-q2-2026.mp4
8.0s 0.041€ Completado
03
TechFlow SaaS
SaasDashboard
techflow-q2-2026.mp4
8.0s Renderizando
04
Moda Viu
EcommerceDashboard
modaviu-q2-2026.mp4
8.0s En cola
05
FinSolve
FinanceDashboard
finsolve-q2-2026.mp4
8.0s En cola
Opciones de despliegue cloud
AWS Lambda
Renderizado serverless con máximo paralelismo. Ideal para batches de 50-500 videos. Pay-per-render sin infraestructura permanente.
Recomendado ~0.04€/video eu-west-1
🏃
Google Cloud Run
Contenedores efímeros con autoscaling. Mejor para render continuo con alta frecuencia. Integración directa con GCS y Pub/Sub.
Alternativa ~0.05€/video europe-west1
💻
CLI Local
Renderizado en máquina local para desarrollo y pruebas. Sin coste, con acceso al Remotion Studio para preview en tiempo real.
Dev Gratis Remotion Studio
CULTIVA IA
Kit de Video Programático con Remotion · v1.0.0
Generado para el cliente
NutriMax Supplements
Pipeline Q2 2026
Stack
React · TypeScript · Remotion 4
Apache-2.0 · Uso comercial ✓