🎬 Video Studio - Arquitectura del Sistema
Fecha de diseño: 28 Enero 2026
Versión: 0.1.0 (Diseño)
Status: 🟡 En planificación
Prerequisitos: Perspectiva Studio v3.0, Blog Studio, Audiobook Studio
📋 Resumen Ejecutivo
Video Studio es un nuevo módulo de Perspectiva Studio para generar videos a partir del contenido ya creado (Blogs, Audiobooks, Perspectivas). El enfoque es ITV (Image-to-Video), aprovechando las imágenes ya generadas y aprobadas para mantener consistencia visual.
🎯 Principios de Diseño
- ITV over TTV: Usar Image-to-Video en lugar de Text-to-Video para mantener consistencia de personajes y estilo
- Motion Tiers: Sistema escalonado de niveles de animación (Ken Burns → Parallax → AI Video)
- Economía de créditos: La generación AI de video es cara (~$0.30-0.50/clip), debe ser feature premium
- Human-in-the-loop: El usuario aprueba cada animación antes de continuar
- Reutilización: Aprovechar el pipeline existente de imágenes (masterSeed, characterContext)
1. Estado del Arte 2025/2026
1.1 Por qué ITV vs TTV
| Aspecto | Text-to-Video (TTV) | Image-to-Video (ITV) |
|---|---|---|
| Consistencia | ❌ Genera nuevas caras/estilos | ✅ Respeta la imagen original |
| Control | ❌ Impredecible | ✅ Predecible |
| Coste | 💰💰💰 | 💰💰 |
| Caso de uso | Conceptos nuevos | Animar contenido existente |
Conclusión: Para Perspectiva Studio, ITV es la única opción viable porque:
- Ya tenemos imágenes aprobadas con
masterSeedycharacterContext - Queremos animar escenas específicas, no inventar nuevas
- Necesitamos que el personaje "Alex" sea el mismo en todas las escenas
1.2 Proveedores de API
| Proveedor | Calidad | Control Cámara | Coste/5s | API Status |
|---|---|---|---|---|
| Luma Dream Machine / Ray 2 | ⭐⭐⭐⭐ | ✅ | ~$0.35 | ✅ Estable |
| Runway Gen-3 Alpha | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ~$0.50 | ✅ Estable |
| Kling AI | ⭐⭐⭐⭐ | ✅ | ~$0.30 | ✅ |
| Haiper | ⭐⭐⭐ | ✅ | ~$0.25 | ✅ |
| Stable Video Diffusion | ⭐⭐⭐ | ⭐⭐ | $0 (self-host) | 🔧 Requiere GPU |
Recomendación:
- Default: Luma Dream Machine (mejor balance calidad/precio)
- Premium: Runway Gen-3 (mejor control de cámara)
- Económico: Haiper/Kling
1.3 Realidad de Costes
┌─────────────────────────────────────────────────────────────────────┐
│ COMPARATIVA DE COSTES │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ IMAGEN (FLUX/Gemini) VIDEO AI (Luma/Runway) │
│ ───────────────────── ──────────────────────── │
│ Tiempo: ~4-8 segundos Tiempo: ~60-120 segundos │
│ Coste: $0.03-0.05 Coste: $0.30-0.50 / 5s clip │
│ │
│ Para video de 3 minutos: │
│ • Solo imágenes: ~$2.00 • Todo AI video: ~$15-25 │
│ • Híbrido (6 clips AI): ~$5.00 │
│ │
└─────────────────────────────────────────────────────────────────────┘
2. Arquitectura del Sistema
2.1 Motion Tiers (Niveles de Movimiento)
┌─────────────────────────────────────────────────────────────────────────────┐
│ MOTION TIERS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ TIER 0: STATIC TIER 1: KEN BURNS (Free) │
│ ───────────────── ───────────────────────── │
│ • Imagen fija • Zoom in/out suave │
│ • Sin movimiento • Pan left/right │
│ • Coste: $0 • CSS animations │
│ • Coste: $0 (client-side) │
│ │
│ TIER 2: PARALLAX (Low Cost) TIER 3: AI VIDEO (Premium) │
│ ────────────────────────── ───────────────────────── │
│ • Mapa de profundidad AI • Video generado por IA │
│ • Efecto 3D con capas • Movimiento real (pelo, ropa) │
│ • Parallax scrolling • Gestos, expresiones │
│ • Coste: ~$0.02 (depth map) • Coste: ~$0.30-0.50 / clip │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
2.2 Pipeline de Video Studio
┌─────────────────────────────────────────────────────────────────────────────┐
│ VIDEO STUDIO PIPELINE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ENTRADA (Fuentes de contenido) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ BLOG │ │AUDIOBOOK │ │PERSPECT- │ │ CYOA │ │
│ │ STUDIO │ │ STUDIO │ │ IVA BASE │ │ AVENTURA │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ VIDEO STUDIO - EDITOR DE ESCENAS │ │
│ │ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ Escena 1│ │ Escena 2│ │ Escena 3│ │ Escena N│ ... │ │
│ │ │ 🖼️ IMG │ │ 🖼️ IMG │ │ 🖼️ IMG │ │ 🖼️ IMG │ │ │
│ │ │ 🎬 Ken │ │ 🎬 Para │ │ 🎬 AI │ │ 🎬 Ken │ │ │
│ │ │ 🔊 TTS │ │ 🔊 TTS │ │ 🔊 TTS │ │ 🔊 TTS │ │ │
│ │ │ ⏱️ 8s │ │ ⏱️ 5s │ │ ⏱️ 12s │ │ ⏱️ 6s │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ │ │
│ │ [Timeline con duración total: 0:31] │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ COMPOSITOR / RENDERER │ │
│ │ │ │
│ │ • ffmpeg (server-side) para composición final │ │
│ │ • Transiciones entre escenas (fade, crossfade, wipe) │ │
│ │ • Audio sync (TTS + música de fondo opcional) │ │
│ │ • Subtítulos automáticos │ │
│ │ • Múltiples resoluciones: 1080p, 720p, 9:16 (Reels) │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ OUTPUT │ │
│ │ │ │
│ │ 📹 MP4 (16:9 YouTube) │ 📱 MP4 (9:16 Reels/TikTok/Shorts) │ │
│ │ 🎬 Visor público │ 📤 Descarga directa │ │
│ │ ☁️ Almacenado en R2 │ 🔗 URL compartible │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
2.3 Estructura de Datos
// Esquema de un proyecto de Video Studio
const videoProject = {
id: "vid_abc123",
title: "Mi Video sobre Productividad",
createdAt: "2026-01-28T10:00:00Z",
source: {
type: "blog", // 'blog' | 'audiobook' | 'perspectiva' | 'cyoa'
id: "blog_xyz789",
title: "5 Técnicas de Productividad"
},
// Configuración global
settings: {
resolution: "1080p", // '1080p' | '720p' | '4k'
aspectRatio: "16:9", // '16:9' | '9:16' | '1:1'
defaultMotion: "kenburns", // 'static' | 'kenburns' | 'parallax' | 'ai_video'
transitionType: "crossfade", // 'cut' | 'fade' | 'crossfade' | 'wipe'
transitionDuration: 0.5, // segundos
backgroundMusic: null, // URL o null
musicVolume: 0.15, // 0-1
voiceProvider: "elevenlabs", // 'gtts' | 'melotts' | 'elevenlabs'
voiceId: "voice_abc"
},
// Escenas del video
scenes: [
{
id: "scene_001",
order: 1,
title: "Introducción",
// Contenido visual
image: {
url: "https://cdn.../image.jpg",
prompt: "Professional workspace, morning light...",
width: 1920,
height: 1080
},
// Sistema de Motion Tiers
motion: {
type: "kenburns", // 'static' | 'kenburns' | 'parallax' | 'ai_video'
status: "ready", // 'pending' | 'generating' | 'ready' | 'error'
// Config específica según tipo
kenburns: {
effect: "zoom_in", // 'zoom_in' | 'zoom_out' | 'pan_left' | 'pan_right' | 'pan_up'
intensity: 0.15, // 0-1 (cuánto zoom/pan)
focusPoint: { x: 0.5, y: 0.4 } // punto focal del zoom
},
parallax: {
depthMapUrl: null, // URL del mapa de profundidad
layers: 3, // número de capas
intensity: 0.3 // intensidad del efecto 3D
},
aiVideo: {
provider: "luma", // 'luma' | 'runway' | 'kling' | 'haiper'
videoUrl: null, // URL del video generado
videoPrompt: "Slow camera push in, gentle wind moving hair, ambient light shifts",
duration: 5, // segundos de video a generar
creditsUsed: 0 // créditos consumidos
}
},
// Audio narración
audio: {
text: "En este video vamos a explorar 5 técnicas de productividad...",
url: "https://cdn.../audio.mp3",
duration: 8.5, // segundos
status: "ready" // 'pending' | 'generating' | 'ready'
},
// Timing calculado
timing: {
start: 0, // segundo donde empieza esta escena
duration: 8.5, // duración total (basada en audio)
end: 8.5
},
// Subtítulos
subtitles: {
enabled: true,
style: "bottom_center", // posición
words: [
{ text: "En", start: 0, end: 0.2 },
{ text: "este", start: 0.2, end: 0.5 },
// ...
]
}
},
// ... más escenas
],
// Estado del proyecto
status: {
totalScenes: 12,
scenesWithMotion: 8,
scenesWithAIVideo: 2,
totalDuration: 185, // segundos
estimatedCredits: 4.50,
renderStatus: "idle" // 'idle' | 'rendering' | 'complete' | 'error'
},
// Output final
output: {
videoUrl: null,
thumbnailUrl: null,
renderedAt: null,
fileSize: null,
format: "mp4"
}
};
3. Interfaz de Usuario
3.1 Editor de Video Studio
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🎬 VIDEO STUDIO [⚙️] [?] [✕] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ PREVIEW PLAYER │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ [Escena actual] │ │ │
│ │ │ con efecto motion │ │ │
│ │ │ │ │ │
│ │ └───────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [⏮️] [▶️ PLAY] [⏭️] 00:15 / 03:05 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ TIMELINE │ │
│ │ ┌────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┐ │ │
│ │ │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │ │ │
│ │ │ K │ K │ P │ V │ K │ K │ P │ K │ V │ K │ K │ K │ │ │
│ │ └────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┘ │ │
│ │ ▲ │ │
│ │ └─ Playhead │ │
│ │ │ │
│ │ K = Ken Burns (free) P = Parallax (~$0.02) V = AI Video (~$0.35) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ ┌──────────────────────────────────┐ │
│ │ 📋 LISTA DE ESCENAS │ │ 🎬 PROPIEDADES ESCENA │ │
│ │ │ │ │ │
│ │ ☑ 1. Introducción [K] 8s │ │ Escena 3: "Técnica Pomodoro" │ │
│ │ ☑ 2. Contexto [K] 6s │ │ │ │
│ │ ☑ 3. Técnica 1 [P] 12s│ │ ┌─────────────────────────────┐ │ │
│ │ ☑ 4. Demo Técnica 1 [V] 5s │ │ │ [🖼️ Preview] │ │ │
│ │ ☑ 5. Técnica 2 [K] 10s│ │ └─────────────────────────────┘ │ │
│ │ ... │ │ │ │
│ │ │ │ Motion Type: │ │
│ │ ───────────────────────── │ │ ○ Static ○ Ken Burns │ │
│ │ Total: 12 escenas | 3:05 │ │ ● Parallax ○ AI Video ✨ │ │
│ │ Créditos: ~$4.50 │ │ │ │
│ │ │ │ [🎬 Animar con IA] (10 créd) │ │
│ │ [+ Añadir escena] │ │ │ │
│ └──────────────────────────────┘ │ Audio: "La técnica Pomodoro..." │ │
│ │ Duración: 12.3s │ │
│ │ │ │
│ │ [🔊 Regenerar TTS] [📝 Editar] │ │
│ └──────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ [📤 Exportar 16:9] [📱 Exportar 9:16] [💾 Guardar borrador] │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
3.2 Botón de Animación en Otros Módulos
En el visor de Audiobook/Blog/CYOA, añadir botón contextual:
┌───────────────────────────────────────────┐
│ [🖼️ Imagen de la escena] │
│ │
│ ┌───────────────┐ │
│ │ 🎬 Animar │ │
│ │ 10 créd │ │
│ └───────────────┘ │
│ │
│ Texto de la narración... │
└───────────────────────────────────────────┘
4. Integraciones API
4.1 API de Video Generation (ITV)
// functions/api/video-generation/animate.js
export async function onRequestPost(context) {
const { request, env } = context;
const {
email,
imageUrl, // URL de la imagen a animar
motionPrompt, // "Slow zoom in, wind moving leaves"
provider, // 'luma' | 'runway' | 'kling'
duration // 4-8 segundos
} = await request.json();
// Verificar créditos del usuario
const credits = await checkUserCredits(env.DB, email, 'video_ai');
if (!credits.sufficient) {
return Response.json({ error: 'Insufficient credits' }, { status: 402 });
}
// Llamar al proveedor de ITV
let result;
switch(provider) {
case 'luma':
result = await generateWithLuma(imageUrl, motionPrompt, duration);
break;
case 'runway':
result = await generateWithRunway(imageUrl, motionPrompt, duration);
break;
case 'kling':
result = await generateWithKling(imageUrl, motionPrompt, duration);
break;
}
// Deducir créditos
await deductCredits(env.DB, email, result.creditsUsed);
return Response.json({
videoUrl: result.url,
duration: result.duration,
creditsUsed: result.creditsUsed
});
}
4.2 API de Depth Map (para Parallax)
// functions/api/video-generation/depth-map.js
export async function onRequestPost(context) {
const { imageUrl } = await context.request.json();
// Usar modelo de depth estimation (MiDaS, DPT, etc.)
// Puede ser Replicate, Cloudflare AI, o self-hosted
const depthMap = await generateDepthMap(imageUrl);
return Response.json({
depthMapUrl: depthMap.url,
layers: depthMap.suggestedLayers
});
}
4.3 API de Composición Final
// functions/api/video-generation/render.js
export async function onRequestPost(context) {
const { videoProjectId } = await context.request.json();
// 1. Obtener proyecto de la DB
const project = await getVideoProject(videoProjectId);
// 2. Encolar job de renderizado (ffmpeg en Cloudflare Worker o queue)
const jobId = await queueRenderJob({
scenes: project.scenes,
settings: project.settings,
outputFormat: 'mp4',
resolution: project.settings.resolution
});
return Response.json({ jobId, status: 'queued' });
}
5. Sistema de Créditos
5.1 Costes por Operación
| Operación | Créditos | Coste Real Estimado |
|---|---|---|
| Ken Burns (CSS) | 0 | $0 |
| Depth Map (Parallax) | 2 | ~$0.02 |
| AI Video 4s (Luma) | 10 | ~$0.30 |
| AI Video 4s (Runway) | 15 | ~$0.50 |
| Render Final (por minuto) | 5 | ~$0.05 |
5.2 Planes Sugeridos
| Plan | Créditos Video/mes | Equivalencia |
|---|---|---|
| Free | 0 | Solo Ken Burns |
| Starter | 50 | ~5 clips AI |
| Pro | 200 | ~20 clips AI |
| Enterprise | Ilimitado | Negociable |
6. Plan de Implementación
Fase 1: Ken Burns + Parallax (2-3 semanas)
- Crear
video.js(módulo base, similar a blog.js) - UI del editor de escenas
- Efectos Ken Burns (CSS animations)
- Integración con Blog/Audiobook (importar escenas)
- Preview en tiempo real
- Timeline básico
Fase 2: Depth Map + Parallax 3D (1-2 semanas)
- API
/api/video-generation/depth-map - Efecto parallax con capas
- Preview del efecto 3D
- Ajustes de intensidad
Fase 3: AI Video Integration (2-3 semanas)
- API
/api/video-generation/animate - Integración con Luma Dream Machine
- Integración con Runway Gen-3 (opcional)
- Sistema de créditos
- Cola de generación
Fase 4: Composición Final (2-3 semanas)
- API
/api/video-generation/render - ffmpeg en Cloudflare (o worker dedicado)
- Transiciones entre escenas
- Subtítulos automáticos
- Música de fondo
- Export 9:16 (Reels/TikTok)
Fase 5: Visor Público + Storage (1 semana)
-
/viewer?type=video&id=xxx - Almacenamiento en R2
- URL compartible
- Embed code
7. Consideraciones Técnicas
7.1 Render Pipeline
Para la composición final, tenemos opciones:
- FFmpeg en Cloudflare Worker: Limitado por tiempo de ejecución (30s free, 15min paid)
- Cloudflare Queue + Durable Object: Mejor para jobs largos
- External Service (Shotstack, Creatomate): APIs de composición de video
- Render Server (EC2/GCP): Control total pero más complejo
Recomendación inicial: Usar Shotstack o Creatomate para la v1. Son APIs especializadas en composición de video y manejan ffmpeg internamente.
7.2 Storage de Videos
- Videos temporales (durante edición): Cloudflare R2
- Videos finales: Cloudflare R2 + CDN
- Limpieza automática de borradores > 7 días
7.3 Limitaciones Conocidas
- Duración máxima: 5 minutos (v1) - expandible después
- Resolución: 1080p máximo (4K requiere más procesamiento)
- AI Video clips: 4-8 segundos por generación (limitación de APIs)
8. Métricas de Éxito
- Adopción: % de usuarios que prueban Video Studio
- Conversión: % que pasan de Ken Burns a AI Video
- Retención: Videos generados por usuario/mes
- Revenue: Ingresos por créditos de video AI
- Calidad: Rating de satisfacción con videos generados
9. Próximos Pasos
- ✅ Documentación de arquitectura (este documento)
- ⏳ Crear archivo
video.jscon estructura base - ⏳ Diseñar UI del editor en Figma/código
- ⏳ Implementar Ken Burns (Fase 1)
- ⏳ Testing con usuarios beta
- ⏳ Iterar basándose en feedback
Autor: Cadences Lab
Fecha: 28 Enero 2026
Versión: 0.1.0 (Diseño)