morfeo 0.1.2 → 0.2.0

package/remotion/motor/subtitulos.tsx

@@ -1,15 +1,26 @@
 // Subtítulos del motor de capas.
-//   karaoke: frase corta arriba; lo ya dicho en blanco, lo que falta tenue y la palabra actual resaltada.
-//   pop: 1–3 palabras grandes en mayúsculas, la actual en color de acento (estilo TikTok clásico).
+//   karaoke: frase corta arriba; lo ya dicho en un color, lo que falta tenue y la palabra actual resaltada.
+//   seleccion: las palabras aparecen al decirse; lo dicho queda tenue, la actual en claro y la palabra clave de la
+//              frase se queda dentro de una caja de selección con asas (documentales ilustrados).
+//   pop: 1–3 palabras grandes en mayúsculas; la palabra clave en color de acento y la actual da un golpe de escala.
 //   bloque: 2 renglones centrados en mayúsculas; la palabra actual dentro de una caja de color (series animadas).
-//   palabra: una sola palabra grande a la vez; las largas en color de acento (videos 3D).
+//   palabra: una sola palabra grande a la vez; la palabra clave en color de acento (videos 3D).
+//   caja: la frase completa dentro de una etiqueta clara (historias, anime).
 //   karaoke con `fondo`: la frase dentro de una caja oscura (infografías).
+// Palabra clave de una frase: la que la escena marque en `claves: ['cerebro']`; si no, una cifra; si no, la más larga.
 import React from 'react';
-import {W, backOut, clamp} from '../estilo';
+import {W, backOut, clamp, easeOut, resorte} from '../estilo';
 import type {Tema} from './tema';
 
 type Palabra = [string, number, number];
 
+const limpia = (w: string) =>
+	w
+		.normalize('NFD')
+		.replace(/[̀-ͯ]/g, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9]/g, '');
+
 /** Parte las palabras de la escena en frases de hasta `max` palabras, cortando en la puntuación. */
 function frases(palabras: Palabra[], max: number): Palabra[][] {
 	const out: Palabra[][] = [];
@@ -25,23 +36,54 @@ function frases(palabras: Palabra[], max: number): Palabra[][] {
 	return out;
 }
 
-export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; dur: number}> = ({tema, palabras, t, dur}) => {
+/** Índice de la palabra clave de la frase (-1 = ninguna). */
+function claveDe(g: Palabra[], claves?: string[]): number {
+	if (claves?.length) {
+		const cs = claves.map(limpia).filter(Boolean);
+		const i = g.findIndex(([w]) => cs.some((c) => limpia(w).startsWith(c)));
+		if (i >= 0) return i;
+	}
+	const cifra = g.findIndex(([w]) => /\d/.test(w));
+	if (cifra >= 0) return cifra;
+	let mejor = -1;
+	let largo = 7; // solo palabras de 8 letras o más
+	g.forEach(([w], i) => {
+		const n = limpia(w).length;
+		if (n > largo) {
+			largo = n;
+			mejor = i;
+		}
+	});
+	return mejor;
+}
+
+/** Golpe de escala al decir una palabra: sube de golpe y se asienta. */
+const golpe = (t: number, a: number, fuerza: number) => (t < a ? 1 : 1 + fuerza * (1 - easeOut((t - a) / 0.22)));
+
+const Asa: React.FC<{x: string; y: string; color: string}> = ({x, y, color}) => (
+	<span style={{position: 'absolute', left: x, top: y, width: 11, height: 11, marginLeft: -6, marginTop: -6, background: '#fff', border: `2.5px solid ${color}`, boxSizing: 'border-box'}} />
+);
+
+export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; dur: number; claves?: string[]}> = ({tema, palabras, t, dur, claves}) => {
 	const S = tema.subtitulos;
 	if (S.tipo === 'ninguno' || !palabras.length) return null;
-	const max = S.tipo === 'pop' ? 3 : S.tipo === 'bloque' ? Math.min(S.maxPalabras, 5) : S.tipo === 'palabra' ? 1 : S.maxPalabras;
+	const max = S.tipo === 'pop' ? Math.min(S.maxPalabras, 4) : S.tipo === 'bloque' ? Math.min(S.maxPalabras, 5) : S.tipo === 'palabra' ? 1 : S.maxPalabras;
 	const grupos = frases(palabras, max);
 	const gi = grupos.findIndex((g, i) => t < (grupos[i + 1]?.[0][1] ?? dur) - 0.02);
 	const g = grupos[gi];
 	if (!g || t < g[0][1] - 0.12) return null;
 	const entrada = clamp((t - (g[0][1] - 0.12)) / 0.18);
+	const clave = claveDe(g, claves);
+	const texto = (w: string) => (S.mayusculas ? w.toUpperCase() : w);
 
 	if (S.tipo === 'palabra') {
 		const [w] = g[0];
-		const acento = w.replace(/[^\p{L}\p{N}]/gu, '').length >= 7;
+		// con una palabra por frase, la clave se decide sobre toda la escena: las marcadas, las cifras y las largas
+		const acento = claveDe([g[0]], claves) === 0;
 		return (
-			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, textAlign: 'center'}}>
+			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${resorte(entrada, 0.25)})`, textAlign: 'center'}}>
 				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: acento ? tema.colores.acento : S.color, WebkitTextStroke: `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: '0 6px 0 rgba(0,0,0,0.35)'}}>
-					{S.mayusculas ? w.toUpperCase() : w}
+					{texto(w)}
 				</span>
 			</div>
 		);
@@ -67,7 +109,8 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 								borderRadius: 10,
 								WebkitTextStroke: actual && S.resalte ? undefined : `${S.contorno ?? 8}px #1a1a1a`,
 								paintOrder: 'stroke fill',
-								transform: `scale(${actual ? 1.06 : 1})`,
+								display: 'inline-block',
+								transform: `scale(${golpe(t, a, 0.1)})`,
 							}}
 						>
 							{w}
@@ -79,14 +122,94 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 	}
 
 	if (S.tipo === 'pop') {
+		const tam = S.tam * 1.5;
 		return (
-			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: '0 22px'}}>
-				{g.map(([w, a, b], i) => {
-					const activa = t >= a && t < b + 0.05;
+			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${resorte(entrada, 0.2)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: `0 ${Math.round(tam * 0.3)}px`}}>
+				{g.map(([w, a], i) => (
+					<span
+						key={i}
+						style={{
+							fontFamily: tema.fuentes.titulo,
+							fontWeight: 900,
+							fontSize: tam,
+							lineHeight: 1.12,
+							color: i === clave ? tema.colores.acento : S.color,
+							WebkitTextStroke: `${S.contorno ?? 10}px #000`,
+							paintOrder: 'stroke fill',
+							textShadow: '0 6px 0 rgba(0,0,0,0.4)',
+							textTransform: 'uppercase',
+							display: 'inline-block',
+							transformOrigin: 'center bottom',
+							opacity: t >= a - 0.04 ? 1 : 0.55,
+							transform: `scale(${golpe(t, a, 0.14)})`,
+						}}
+					>
+						{w}
+					</span>
+				))}
+			</div>
+		);
+	}
+
+	if (S.tipo === 'caja') {
+		return (
+			<div style={{position: 'absolute', left: 70, width: W - 140, top: S.y, transform: `translateY(-50%) scale(${0.94 + 0.06 * resorte(entrada, 0.2)})`, opacity: clamp(entrada * 2), textAlign: 'center'}}>
+				<span
+					style={{
+						display: 'inline-block',
+						background: S.fondo ?? '#EAF3FF',
+						color: S.color,
+						fontFamily: tema.fuentes.texto,
+						fontWeight: 800,
+						fontSize: S.tam,
+						lineHeight: 1.25,
+						padding: '14px 30px',
+						borderRadius: 18,
+						boxShadow: '0 8px 22px rgba(0,0,0,0.28)',
+					}}
+				>
+					{g.map(([w, a], i) => (
+						<React.Fragment key={i}>
+							<span style={{opacity: t >= a - 0.04 ? 1 : 0.38, color: i === clave && S.resalte ? S.resalte : undefined}}>{texto(w)}</span>{' '}
+						</React.Fragment>
+					))}
+				</span>
+			</div>
+		);
+	}
+
+	if (S.tipo === 'seleccion') {
+		const marco = S.resalte || '#4C8DFF';
+		const dichas = g.filter(([, a]) => t >= a - 0.03);
+		if (!dichas.length) return null;
+		return (
+			<div style={{position: 'absolute', left: 90, width: W - 180, top: S.y, transform: 'translateY(-50%)', textAlign: 'center', fontFamily: tema.fuentes.texto, fontSize: S.tam, lineHeight: 1.42, textShadow: '0 2px 10px rgba(0,0,0,0.45)'}}>
+				{dichas.map(([w, a, b], i) => {
+					const actual = t < b + 0.08 || i === dichas.length - 1;
+					const esClave = i === clave;
+					const k = resorte(clamp((t - a) / 0.3), 0.3);
 					return (
-						<span key={i} style={{fontFamily: tema.fuentes.titulo, fontWeight: 900, fontSize: S.tam * 1.5, color: activa ? tema.colores.acento : S.color, WebkitTextStroke: '10px #000', paintOrder: 'stroke fill', textTransform: 'uppercase', transform: `scale(${activa ? 1.1 : 1})`}}>
-							{w}
-						</span>
+						<React.Fragment key={i}>
+							<span
+								style={{
+									position: 'relative',
+									display: 'inline-block',
+									color: actual || esClave ? S.color : S.pendiente,
+									fontWeight: actual || esClave ? 800 : 600,
+									opacity: clamp((t - a + 0.03) / 0.1),
+									padding: esClave ? '0 10px' : undefined,
+									margin: esClave ? '0 2px' : undefined,
+								}}
+							>
+								{esClave ? (
+									<span style={{position: 'absolute', inset: '4px 0', border: `3px solid ${marco}`, background: `${marco}33`, borderRadius: 3, transform: `scale(${0.7 + 0.3 * k})`, opacity: clamp(k * 2)}}>
+										<Asa x="0%" y="0%" color={marco} />
+										<Asa x="100%" y="100%" color={marco} />
+									</span>
+								) : null}
+								<span style={{position: 'relative'}}>{texto(w)}</span>
+							</span>{' '}
+						</React.Fragment>
 					);
 				})}
 			</div>
@@ -111,26 +234,26 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 			}}
 		>
 			<span style={S.fondo ? {background: S.fondo, padding: '10px 22px', borderRadius: 14, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone', lineHeight: 1.6} : undefined}>
-			{g.map(([w, a, b], i) => {
-				const dicha = t >= a;
-				const actual = t >= a && t < b + 0.06;
-				return (
-					<React.Fragment key={i}>
-						<span
-							style={{
-								color: dicha ? S.color : S.pendiente,
-								fontWeight: actual ? 800 : 700,
-								background: actual && S.resalte ? S.resalte : undefined,
-								borderRadius: 10,
-								padding: actual && S.resalte ? '2px 10px' : undefined,
-								margin: actual && S.resalte ? '0 -10px' : undefined,
-							}}
-						>
-							{w}
-						</span>{' '}
-					</React.Fragment>
-				);
-			})}
+				{g.map(([w, a, b], i) => {
+					const dicha = t >= a;
+					const actual = t >= a && t < b + 0.06;
+					return (
+						<React.Fragment key={i}>
+							<span
+								style={{
+									color: dicha ? S.color : S.pendiente,
+									fontWeight: actual ? 800 : 700,
+									background: actual && S.resalte ? S.resalte : undefined,
+									borderRadius: 10,
+									padding: actual && S.resalte ? '2px 10px' : undefined,
+									margin: actual && S.resalte ? '0 -10px' : undefined,
+								}}
+							>
+								{texto(w)}
+							</span>{' '}
+						</React.Fragment>
+					);
+				})}
 			</span>
 		</div>
 	);

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[];