morfeo 0.1.3 → 0.2.0

package/remotion/motor/tema.ts

@@ -32,7 +32,12 @@ export type Tema = {
 	fuentes: {titulo: string; texto: string; mono: string};
 	tituloMayusculas: boolean;
 	subtitulos: {
-		tipo: 'karaoke' | 'pop' | 'bloque' | 'palabra' | 'ninguno';
+		/**
+		 * karaoke: frase arriba, lo dicho en un color y lo pendiente tenue · seleccion: igual, pero solo la palabra clave
+		 * de cada frase lleva caja de selección con asas · pop: 1–3 palabras grandes · bloque: 2 renglones con caja ·
+		 * palabra: una palabra a la vez · caja: la frase completa en una etiqueta clara.
+		 */
+		tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno';
 		mayusculas?: boolean;
 		contorno?: number;
 		fondo?: string; // caja detrás de la frase (karaoke)
@@ -43,7 +48,16 @@ export type Tema = {
 		resalte: string; // caja de la palabra actual ('' = sin caja)
 		maxPalabras: number;
 	};
-	transicion: 'corte' | 'fundido' | 'deslizar' | 'zoom';
+	transicion: 'corte' | 'fundido' | 'deslizar' | 'zoom' | 'barrido' | 'empuje' | 'mascara' | 'destello';
+	/** Ritmo de las animaciones: duraciones (s) y curva de las entradas. Sin esto: 0.5 / 0.35 / 0.35 y 'suave'. */
+	movimiento?: {entrada?: number; salida?: number; transicion?: number; curva?: 'suave' | 'resorte' | 'seca'};
+	/** Acabado sobre todo el cuadro: tinte de color, cono de luz y desenfoque de bordes (profundidad). */
+	post?: {
+		tinte?: {color: string; fuerza?: number; modo?: 'multiply' | 'screen' | 'overlay' | 'soft-light'};
+		luz?: {x?: number; y?: number; ancho?: number; largo?: number; color?: string; fuerza?: number; angulo?: number};
+		desenfoqueBordes?: number; // px de blur arriba y abajo (efecto maqueta / profundidad)
+		vinetaColor?: string;
+	};
 	marca: 'esquina' | 'arriba' | 'ninguna';
 	/** Movimiento suave de cámara por defecto en cada escena (zoom de 1 a este valor). */
 	zoomLento: number;
@@ -62,8 +76,9 @@ export const ESTILOS: Record<string, Tema> = {
 		tituloMayusculas: true,
 		subtitulos: {...SUB_BASE, y: 300, color: '#141414', pendiente: 'rgba(20,20,20,0.28)', resalte: ''},
 		transicion: 'deslizar',
+		movimiento: {entrada: 0.45, salida: 0.25, transicion: 0.42, curva: 'seca'},
 		marca: 'esquina',
-		zoomLento: 1.03,
+		zoomLento: 1.02,
 	},
 	// Fondo azul profundo con rayos de luz y burbujas; datos en chips (naturaleza, ciencia, océano)
 	documental: {
@@ -74,10 +89,12 @@ export const ESTILOS: Record<string, Tema> = {
 		colores: {texto: '#FFFFFF', acento: '#7FE3FF', acento2: '#FF5A5A', suave: 'rgba(255,255,255,0.55)', tarjeta: 'rgba(8,20,40,0.78)', tarjetaTexto: '#FFFFFF', borde: '#7FE3FF'},
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
 		tituloMayusculas: false,
-		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.42)', resalte: '#2C7BE5'},
+		subtitulos: {...SUB_BASE, tipo: 'seleccion', y: 310, tam: 50, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.5)', resalte: '#4C8DFF'},
 		transicion: 'fundido',
+		movimiento: {entrada: 0.6, salida: 0.4, transicion: 0.5, curva: 'suave'},
+		post: {tinte: {color: '#1E6BFF', fuerza: 0.14, modo: 'soft-light'}},
 		marca: 'esquina',
-		zoomLento: 1.06,
+		zoomLento: 1.07,
 	},
 	// Escenarios ilustrados (bosque, ciudad): el fondo suele ser una imagen tuya; cielo de atardecer por defecto
 	ilustrado: {
@@ -87,8 +104,10 @@ export const ESTILOS: Record<string, Tema> = {
 		colores: {texto: '#FFFFFF', acento: '#FFE27A', acento2: '#FF6B6B', suave: 'rgba(255,255,255,0.55)', tarjeta: 'rgba(20,14,30,0.75)', tarjetaTexto: '#FFFFFF', borde: '#FFFFFF'},
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
 		tituloMayusculas: false,
-		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '#3D5AFE'},
+		subtitulos: {...SUB_BASE, tipo: 'seleccion', y: 310, tam: 50, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.5)', resalte: '#4C8DFF'},
 		transicion: 'corte',
+		movimiento: {entrada: 0.55, salida: 0.3, transicion: 0.4, curva: 'resorte'},
+		post: {tinte: {color: '#FF9A5A', fuerza: 0.1, modo: 'soft-light'}},
 		marca: 'esquina',
 		zoomLento: 1.08,
 	},
@@ -101,10 +120,12 @@ export const ESTILOS: Record<string, Tema> = {
 		colores: {texto: '#FFFFFF', acento: '#FFD66B', acento2: '#FF4A4A', suave: 'rgba(255,255,255,0.5)', tarjeta: 'rgba(0,0,0,0.6)', tarjetaTexto: '#FFD66B', borde: '#FFD66B'},
 		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
 		tituloMayusculas: true,
-		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.4)', resalte: ''},
+		subtitulos: {...SUB_BASE, tipo: 'seleccion', y: 310, tam: 50, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '#FFD66B'},
 		transicion: 'corte',
+		movimiento: {entrada: 0.6, salida: 0.35, transicion: 0.45, curva: 'suave'},
+		post: {luz: {x: 700, ancho: 900, largo: 1700, color: '#FFE2A8', fuerza: 0.22, angulo: 12}, vinetaColor: '#05060F'},
 		marca: 'esquina',
-		zoomLento: 1.05,
+		zoomLento: 1.06,
 	},
 	// Objetos sobre una mesa con foco de luz, contadores tipo LCD (dinero, crecimiento, comparaciones)
 	mesa: {
@@ -115,10 +136,12 @@ export const ESTILOS: Record<string, Tema> = {
 		colores: {texto: '#FFFFFF', acento: '#FFD24A', acento2: '#5CFF7A', suave: 'rgba(255,255,255,0.5)', tarjeta: 'rgba(10,8,6,0.85)', tarjetaTexto: '#FFD24A', borde: '#3A2A1A'},
 		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
 		tituloMayusculas: true,
-		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.4)', resalte: '#2C7BE5'},
+		subtitulos: {...SUB_BASE, tipo: 'seleccion', y: 310, tam: 50, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '#4C8DFF'},
 		transicion: 'fundido',
+		movimiento: {entrada: 0.55, salida: 0.35, transicion: 0.5, curva: 'resorte'},
+		post: {luz: {x: 540, ancho: 820, largo: 1500, color: '#FFD9A0', fuerza: 0.3}, desenfoqueBordes: 5, vinetaColor: '#0A0503'},
 		marca: 'esquina',
-		zoomLento: 1.04,
+		zoomLento: 1.05,
 	},
 	// El de los shorts clásicos (morado oscuro, Anton, amarillo): para capas dentro de 'datos-curiosos'
 	'datos-curiosos': {
@@ -129,6 +152,7 @@ export const ESTILOS: Record<string, Tema> = {
 		tituloMayusculas: true,
 		subtitulos: {...SUB_BASE, tipo: 'pop', y: 1420, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: ''},
 		transicion: 'corte',
+		movimiento: {entrada: 0.45, salida: 0.25, transicion: 0.3, curva: 'resorte'},
 		marca: 'arriba',
 		zoomLento: 1,
 	},
@@ -141,8 +165,9 @@ export const ESTILOS: Record<string, Tema> = {
 		tituloMayusculas: true,
 		subtitulos: {tipo: 'bloque', y: 1080, tam: 62, maxPalabras: 4, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '#FF3B5C', contorno: 8},
 		transicion: 'corte',
+		movimiento: {entrada: 0.45, salida: 0.25, transicion: 0.3, curva: 'resorte'},
 		marca: 'ninguna',
-		zoomLento: 1.02,
+		zoomLento: 1.03,
 	},
 	// Infografía plana (cuerpo, ciencia, comparaciones): gris claro, encabezado y subtítulos abajo en caja
 	infografia: {
@@ -152,22 +177,25 @@ export const ESTILOS: Record<string, Tema> = {
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
 		tituloMayusculas: true,
 		subtitulos: {tipo: 'karaoke', y: 1500, tam: 48, maxPalabras: 4, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '', fondo: '#1B1B1F'},
-		transicion: 'corte',
+		transicion: 'empuje',
+		movimiento: {entrada: 0.42, salida: 0.25, transicion: 0.45, curva: 'seca'},
 		marca: 'esquina',
-		zoomLento: 1.0,
+		zoomLento: 1.02,
 	},
 	// Escenas 3D (construcción, cómo funciona por dentro): una palabra grande a la vez
 	'3d': {
 		fondo: {tipo: 'degradado', colores: ['#BFE3FF', '#EAF6FF']},
 		vineta: 0.1,
 		// cielo claro: el texto propio va oscuro; los subtítulos siguen blancos con contorno negro
-		colores: {texto: '#14233A', acento: '#FF8A00', acento2: '#FF5A36', suave: '#4F6278', tarjeta: 'rgba(20,20,20,0.78)', tarjetaTexto: '#FFFFFF', borde: '#141414'},
+		colores: {texto: '#14233A', acento: '#FFC400', acento2: '#FF5A36', suave: '#4F6278', tarjeta: 'rgba(20,20,20,0.78)', tarjetaTexto: '#FFFFFF', borde: '#141414'},
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
 		tituloMayusculas: true,
-		subtitulos: {tipo: 'palabra', y: 1400, tam: 76, maxPalabras: 1, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '', contorno: 10},
+		subtitulos: {tipo: 'pop', y: 1380, tam: 50, maxPalabras: 3, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '', contorno: 10},
 		transicion: 'corte',
+		movimiento: {entrada: 0.5, salida: 0.3, transicion: 0.35, curva: 'resorte'},
+		post: {desenfoqueBordes: 4},
 		marca: 'esquina',
-		zoomLento: 1.0,
+		zoomLento: 1.04,
 	},
 	// Oscuro y limpio, para lo que sea
 	minimal: {
@@ -178,8 +206,9 @@ export const ESTILOS: Record<string, Tema> = {
 		tituloMayusculas: false,
 		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.35)', resalte: '#8B7BFF'},
 		transicion: 'fundido',
+		movimiento: {entrada: 0.5, salida: 0.3, transicion: 0.4, curva: 'suave'},
 		marca: 'esquina',
-		zoomLento: 1.03,
+		zoomLento: 1.04,
 	},
 };
 

package/remotion/motor/util.ts

@@ -10,6 +10,9 @@ export type CtxEscena = {
 	tema: Tema;
 	semilla: string;
 	inicios?: number[]; // inicio de cada escena (para el HUD: cambios en {escena: n})
+	escena?: number; // en el `mundo`: número de la escena actual (1 = la primera)
+	camara?: {x: number; y: number; zoom: number; giro: number}; // en el `mundo`: la cámara de este cuadro (para paralaje)
+	tEscena?: number; // en el `mundo`: segundos desde que empezó la escena actual
 };
 
 const norm = (s: string) =>

package/remotion/tipos.ts

@@ -21,6 +21,8 @@ export type Datos = {
 	estilo?: string; // 'datos-curiosos' (clásico) o un estilo del motor de capas
 	tema?: Record<string, any>; // ajustes del estilo para este video
 	hud?: Record<string, any>[]; // capas fijas sobre todo el video (día, barra de progreso, hora...)
+	mundo?: Record<string, any>[]; // capas del mundo: persisten todo el video y la cámara las recorre con la `toma` de cada escena
+	serie?: string; // pastilla fija arriba: 'GYM CON CIENCIA · PARTE 5'
 	audio: string;
 	whisper: number;
 	escenas: Escena[];