morfeo 0.1.2 → 0.2.0

package/remotion/kit/tres.tsx

@@ -0,0 +1,328 @@
+// Kit 3D: piezas de Three.js para armar el mundo de un video (maqueta en corte, mesa con foco de luz) en un componente propio.
+//
+//   import {Lienzo3D, Terreno, Tubo, Arbol, Casa, Mesa, Pila} from 'morfeo/kit';
+//
+// Todo el mundo va en UN solo <Lienzo3D> (Chrome aguanta ~16 contextos WebGL: no pongas un lienzo por objeto).
+// La cámara se mueve por `tomas`: una por escena; viaja desde donde terminó la anterior y luego deriva despacio.
+// Nada usa useFrame: todo depende de las props (`t`, `tEscena`), como pide Remotion.
+import {useThree} from '@react-three/fiber';
+import {ThreeCanvas} from '@remotion/three';
+import React, {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import * as THREE from 'three';
+import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
+import {azarN} from './ilustrado';
+
+export {Objeto3D} from '../motor/objetos3d';
+
+type V3 = [number, number, number];
+const suave = (x: number) => {
+	const c = Math.max(0, Math.min(1, x));
+	return c * c * (3 - 2 * c);
+};
+const mezcla = (a: V3, b: V3, k: number): V3 => [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k, a[2] + (b[2] - a[2]) * k];
+
+/**
+ * Toma de cámara de una escena: dónde está (`pos`) y a dónde mira (`mirar`). Con `a` se mueve hasta ahí durante la
+ * escena; sin `a` se acerca un poco sola (`deriva`, 0.06 = 6 % del camino hacia lo que mira). `corte` salta sin viaje.
+ */
+export type Toma3D = {pos: V3; mirar?: V3; fov?: number; a?: {pos?: V3; mirar?: V3; fov?: number}; viaje?: number; corte?: boolean; deriva?: number};
+type Estado = {pos: V3; mirar: V3; fov: number};
+
+/** Cámara del cuadro actual. `tomas[i]` es la de la escena i+1; si falta, se conserva la anterior. */
+export function camara3D(tomas: (Toma3D | undefined | null)[], escena: number, tEscena: number, inicios?: number[]): Estado {
+	const de = (i: number): Toma3D => {
+		for (let j = Math.min(i, tomas.length - 1); j >= 0; j--) if (tomas[j]) return tomas[j]!;
+		return {pos: [6, 4, 8]};
+	};
+	const inicio = (i: number): Estado => ({pos: de(i).pos, mirar: de(i).mirar ?? [0, 0, 0], fov: de(i).fov ?? 38});
+	const final = (i: number): Estado => {
+		const tm = tomas[i] ? de(i) : ({...de(i), a: undefined} as Toma3D);
+		const a = inicio(i);
+		if (tm.a) return {pos: tm.a.pos ?? a.pos, mirar: tm.a.mirar ?? a.mirar, fov: tm.a.fov ?? a.fov};
+		return {...a, pos: mezcla(a.pos, a.mirar, tm.deriva ?? 0.06)};
+	};
+	const i = Math.max(0, escena - 1);
+	const tm = de(i);
+	const dur = inicios && inicios[i + 1] != null ? inicios[i + 1] - inicios[i] : 5;
+	const viaje = tm.corte || i === 0 || !tomas[i] ? 0 : tm.viaje ?? Math.min(1.2, dur * 0.5);
+	const a = inicio(i);
+	const b = final(i);
+	const kd = Math.max(0, Math.min(1, (tEscena - viaje * 0.6) / Math.max(0.01, dur - viaje * 0.6)));
+	const kq = tm.a ? suave(kd) : kd;
+	const actual: Estado = {pos: mezcla(a.pos, b.pos, kq), mirar: mezcla(a.mirar, b.mirar, kq), fov: a.fov + (b.fov - a.fov) * kq};
+	if (viaje <= 0 || tEscena >= viaje) return actual;
+	const o = final(i - 1);
+	const kv = suave(tEscena / viaje);
+	return {pos: mezcla(o.pos, actual.pos, kv), mirar: mezcla(o.mirar, actual.mirar, kv), fov: o.fov + (actual.fov - o.fov) * kv};
+}
+
+const Camara: React.FC<{estado: Estado}> = ({estado}) => {
+	const {camera} = useThree();
+	useLayoutEffect(() => {
+		camera.position.set(...estado.pos);
+		camera.lookAt(...estado.mirar);
+		const p = camera as THREE.PerspectiveCamera;
+		if (p.isPerspectiveCamera) {
+			p.fov = estado.fov;
+			p.updateProjectionMatrix();
+		}
+	});
+	return null;
+};
+
+const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
+	const {gl, scene} = useThree();
+	useEffect(() => {
+		const pmrem = new THREE.PMREMGenerator(gl);
+		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+		scene.environment = tex;
+		scene.environmentIntensity = fuerza;
+		return () => {
+			tex.dispose();
+			pmrem.dispose();
+		};
+	}, [gl, scene, fuerza]);
+	return null;
+};
+
+/**
+ * El lienzo del mundo 3D (1080×1920). `luz`:
+ *   'dia'     cielo claro, sol con sombras suaves (maquetas, cortes de terreno, low-poly)
+ *   'calida'  cuarto oscuro con un foco cálido desde arriba y su cono visible (mesa, dinero, objetos)
+ */
+export const Lienzo3D: React.FC<{
+	tomas: (Toma3D | undefined | null)[];
+	escena?: number;
+	tEscena?: number;
+	inicios?: number[];
+	luz?: 'dia' | 'calida';
+	fondo?: string;
+	niebla?: [number, number];
+	sol?: V3;
+	foco?: V3;
+	children: React.ReactNode;
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], children}) => {
+	const estado = camara3D(tomas, escena, tEscena, inicios);
+	const color = fondo ?? (luz === 'dia' ? '#BFE3FF' : '#120A06');
+	return (
+		<div style={{width: 1080, height: 1920}}>
+			<ThreeCanvas width={1080} height={1920} shadows gl={{antialias: true}} camera={{fov: estado.fov, position: estado.pos, near: 0.1, far: 400}}>
+				<color attach="background" args={[color]} />
+				{niebla ? <fog attach="fog" args={[color, niebla[0], niebla[1]]} /> : null}
+				<Camara estado={estado} />
+				{luz === 'dia' ? (
+					<>
+						<Entorno fuerza={0.55} />
+						<hemisphereLight args={['#ffffff', '#b9a98a', 1.05]} />
+						<directionalLight position={sol} intensity={2.3} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
+					</>
+				) : (
+					<>
+						<Entorno fuerza={0.22} />
+						<ambientLight color="#6A4630" intensity={0.55} />
+						<spotLight position={foco} angle={0.52} penumbra={0.85} decay={0} intensity={3.4} color="#FFDDAA" castShadow shadow-mapSize={[2048, 2048]} shadow-bias={-0.0004} />
+						{/* cono de luz visible */}
+						<mesh position={[foco[0], foco[1] / 2, foco[2]]}>
+							<coneGeometry args={[foco[1] * 0.56, foco[1], 48, 1, true]} />
+							<meshBasicMaterial color="#FFD9A0" transparent opacity={0.055} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+						</mesh>
+					</>
+				)}
+				{children}
+			</ThreeCanvas>
+		</div>
+	);
+};
+
+type Pieza = {pos?: V3; rot?: V3; escala?: number};
+const RAD = Math.PI / 180;
+const grupo = (p: Pieza) => ({position: p.pos ?? ([0, 0, 0] as V3), rotation: (p.rot ?? [0, 0, 0]).map((g) => g * RAD) as V3, scale: p.escala ?? 1});
+
+/** Bloque de color mate: la pieza base para cajas, muros, banquetas, cualquier cosa. */
+export const Bloque: React.FC<Pieza & {tam: V3; color: string; rugosidad?: number; metal?: number; opacidad?: number; radio?: number}> = ({tam, color, rugosidad = 0.8, metal = 0, opacidad, ...p}) => (
+	<mesh {...grupo(p)} castShadow receiveShadow>
+		<boxGeometry args={tam} />
+		<meshStandardMaterial color={color} roughness={rugosidad} metalness={metal} transparent={opacidad != null} opacity={opacidad ?? 1} />
+	</mesh>
+);
+
+/**
+ * Terreno en corte: capas apiladas hacia abajo desde y = 0 (pasto, tierra, roca...). La cara de enfrente (z = fondo / 2)
+ * queda a la vista para mostrar lo que hay bajo tierra. capas: [[color, grosor], ...]
+ */
+export const Terreno: React.FC<Pieza & {ancho?: number; fondo?: number; capas?: [string, number][]}> = ({ancho = 22, fondo = 9, capas = [['#6CC04A', 0.35], ['#8A5A3B', 3.2], ['#77726E', 3]], ...p}) => {
+	let y = 0;
+	return (
+		<group {...grupo(p)}>
+			{capas.map(([color, grosor], i) => {
+				const centro = y - grosor / 2;
+				y -= grosor;
+				return (
+					<mesh key={i} position={[0, centro, 0]} receiveShadow castShadow={i === 0}>
+						<boxGeometry args={[ancho, grosor, fondo]} />
+						<meshStandardMaterial color={color} roughness={0.95} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Piedritas incrustadas en la cara del corte, para que la tierra no se vea plana. */
+export const Piedras: React.FC<{n?: number; ancho?: number; y0?: number; y1?: number; z: number; color?: string; semilla?: number}> = ({n = 40, ancho = 22, y0 = -0.6, y1 = -6, z, color = '#6B4530', semilla = 0}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => (
+			<mesh key={i} position={[(azarN(semilla + i) - 0.5) * ancho * 0.96, y0 + (y1 - y0) * azarN(semilla + i * 3 + 1), z]} rotation={[0, 0, azarN(semilla + i * 7) * 3]} scale={[1, 0.7, 0.25]}>
+				<icosahedronGeometry args={[0.08 + azarN(semilla + i * 5) * 0.14, 0]} />
+				<meshStandardMaterial color={color} roughness={1} flatShading />
+			</mesh>
+		))}
+	</group>
+);
+
+/** Árbol low-poly: tronco y dos copas facetadas. */
+export const Arbol: React.FC<Pieza & {semilla?: number; color?: string}> = ({semilla = 0, color = '#3F9B3A', ...p}) => {
+	const k = 0.85 + azarN(semilla) * 0.4;
+	return (
+		<group {...grupo(p)}>
+			<group scale={k} rotation={[0, azarN(semilla + 1) * 6, 0]}>
+				<mesh position={[0, 0.55, 0]} castShadow>
+					<cylinderGeometry args={[0.11, 0.17, 1.1, 7]} />
+					<meshStandardMaterial color="#7A4E2D" roughness={0.9} flatShading />
+				</mesh>
+				<mesh position={[0, 1.45, 0]} castShadow>
+					<icosahedronGeometry args={[0.72, 0]} />
+					<meshStandardMaterial color={color} roughness={0.85} flatShading />
+				</mesh>
+				<mesh position={[0.28, 1.95, 0.1]} castShadow>
+					<icosahedronGeometry args={[0.46, 0]} />
+					<meshStandardMaterial color={color} roughness={0.85} flatShading />
+				</mesh>
+			</group>
+		</group>
+	);
+};
+
+/** Arbusto: una bola facetada aplastada. */
+export const Arbusto: React.FC<Pieza & {color?: string}> = ({color = '#4FAE45', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.3, 0]} scale={[1, 0.7, 1]} castShadow>
+			<icosahedronGeometry args={[0.5, 1]} />
+			<meshStandardMaterial color={color} roughness={0.9} flatShading />
+		</mesh>
+	</group>
+);
+
+/** Casa sencilla: cuerpo, techo a cuatro aguas, puerta y ventana. Mide ~2.4 de ancho; la base queda en y = 0. */
+export const Casa: React.FC<Pieza & {color?: string; techo?: string}> = ({color = '#F2E6D0', techo = '#D9533B', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.8, 0]} castShadow receiveShadow>
+			<boxGeometry args={[2.4, 1.6, 2]} />
+			<meshStandardMaterial color={color} roughness={0.85} />
+		</mesh>
+		<mesh position={[0, 2.05, 0]} rotation={[0, Math.PI / 4, 0]} castShadow>
+			<coneGeometry args={[1.95, 0.95, 4]} />
+			<meshStandardMaterial color={techo} roughness={0.8} flatShading />
+		</mesh>
+		<mesh position={[-0.5, 0.5, 1.01]}>
+			<boxGeometry args={[0.5, 1, 0.04]} />
+			<meshStandardMaterial color="#7A4E2D" roughness={0.8} />
+		</mesh>
+		<mesh position={[0.55, 0.95, 1.01]}>
+			<boxGeometry args={[0.6, 0.5, 0.04]} />
+			<meshStandardMaterial color="#9AD4F5" roughness={0.3} />
+		</mesh>
+	</group>
+);
+
+/**
+ * Tubo que pasa por `puntos`. `agua` (0..1) lo llena desde el primer punto: anímalo con el tiempo para que el agua avance.
+ * El tubo es translúcido para que se vea lo que lleva dentro.
+ */
+export const Tubo: React.FC<{puntos: V3[]; radio?: number; color?: string; agua?: number; colorAgua?: string; opacidad?: number}> = ({puntos, radio = 0.22, color = '#E3E5EA', agua = 0, colorAgua = '#1E8BFF', opacidad = 0.34}) => {
+	const llave = JSON.stringify(puntos);
+	const SEG = 220;
+	const RADIAL = 14;
+	const [exterior, interior] = useMemo(() => {
+		const curva = new THREE.CatmullRomCurve3(
+			puntos.map((p) => new THREE.Vector3(...p)),
+			false,
+			'catmullrom',
+			0.06,
+		);
+		return [new THREE.TubeGeometry(curva, SEG, radio, RADIAL, false), new THREE.TubeGeometry(curva, SEG, radio * 0.8, RADIAL, false)];
+	}, [llave, radio]);
+	const k = Math.max(0, Math.min(1, agua));
+	useLayoutEffect(() => {
+		interior.setDrawRange(0, Math.floor(k * SEG) * RADIAL * 6);
+	});
+	return (
+		<group>
+			{k > 0 ? (
+				<mesh geometry={interior}>
+					<meshStandardMaterial color={colorAgua} roughness={0.25} emissive={colorAgua} emissiveIntensity={0.55} />
+				</mesh>
+			) : null}
+			<mesh geometry={exterior} castShadow>
+				<meshStandardMaterial color={color} roughness={0.35} transparent opacity={opacidad} depthWrite={false} />
+			</mesh>
+		</group>
+	);
+};
+
+/** Superficie de agua (río, lago, charco). */
+export const Agua: React.FC<Pieza & {tam: [number, number]; color?: string}> = ({tam, color = '#3AA7FF', ...p}) => (
+	<mesh {...grupo(p)} receiveShadow>
+		<boxGeometry args={[tam[0], 0.06, tam[1]]} />
+		<meshStandardMaterial color={color} roughness={0.15} metalness={0.1} transparent opacity={0.9} />
+	</mesh>
+);
+
+/** Mesa de madera redonda y grande: el piso de las escenas con foco de luz. La superficie queda en y = 0. */
+export const Mesa: React.FC<{radio?: number; color?: string}> = ({radio = 14, color = '#6B4226'}) => (
+	<mesh position={[0, -0.25, 0]} receiveShadow>
+		<cylinderGeometry args={[radio, radio, 0.5, 64]} />
+		<meshStandardMaterial color={color} roughness={0.62} metalness={0.05} />
+	</mesh>
+);
+
+/**
+ * Pilas de monedas o billetes. `n` = cuántas piezas se ven (anímalo para que la pila crezca); se reparten en
+ * columnas de `porColumna`, acomodadas en una rejilla alrededor de `pos`.
+ */
+export const Pila: React.FC<{forma?: 'moneda' | 'billete'; n: number; max?: number; porColumna?: number; pos?: V3; color?: string; separacion?: number; semilla?: number}> = ({forma = 'moneda', n, max = 400, porColumna = 24, pos = [0, 0, 0], color, separacion, semilla = 0}) => {
+	const ref = useRef<THREE.InstancedMesh>(null);
+	const moneda = forma === 'moneda';
+	const alto = moneda ? 0.1 : 0.04;
+	const paso = separacion ?? (moneda ? 1.15 : 1.9);
+	useLayoutEffect(() => {
+		const m = ref.current;
+		if (!m) return;
+		const cols = Math.ceil(max / porColumna);
+		const lado = Math.ceil(Math.sqrt(cols));
+		const o = new THREE.Object3D();
+		for (let i = 0; i < max; i++) {
+			const c = Math.floor(i / porColumna);
+			const nivel = i % porColumna;
+			// las columnas se llenan del centro hacia afuera
+			const cx = (c % lado) - (lado - 1) / 2;
+			const cz = Math.floor(c / lado) - (lado - 1) / 2;
+			o.position.set(cx * paso + (azarN(semilla + i) - 0.5) * 0.07, alto / 2 + nivel * (alto + 0.004), cz * (moneda ? paso : paso * 0.55) + (azarN(semilla + i * 3) - 0.5) * 0.07);
+			o.rotation.set(0, azarN(semilla + i * 7) * (moneda ? 6.28 : 0.16) - (moneda ? 0 : 0.08), 0);
+			o.updateMatrix();
+			m.setMatrixAt(i, o.matrix);
+		}
+		m.instanceMatrix.needsUpdate = true;
+	}, [max, porColumna, paso, moneda, alto, semilla]);
+	useLayoutEffect(() => {
+		if (ref.current) ref.current.count = Math.max(0, Math.min(max, Math.floor(n)));
+	});
+	return (
+		<group position={pos}>
+			<instancedMesh ref={ref} args={[undefined as any, undefined as any, max]} castShadow receiveShadow frustumCulled={false}>
+				{moneda ? <cylinderGeometry args={[0.5, 0.5, alto, 28]} /> : <boxGeometry args={[1.7, alto, 0.8]} />}
+				<meshStandardMaterial color={color ?? (moneda ? '#E8B64A' : '#7DBB86')} roughness={moneda ? 0.3 : 0.8} metalness={moneda ? 0.85 : 0.02} />
+			</instancedMesh>
+		</group>
+	);
+};

package/remotion/motor/Video.tsx

@@ -1,44 +1,107 @@
-// Composición del motor de capas: fondo + cámara + capas por escena, transiciones, subtítulos y marca.
+// Composición del motor de capas: mundo o fondo + cámara + capas por escena, transiciones, acabado, subtítulos y marca.
 import React from 'react';
 import {AbsoluteFill, Audio, staticFile} from 'remotion';
 import {Avatar, MarcaContexto, useMarca} from '../piezas';
-import {FPS, W, clamp, easeIO, easeOut, lerp} from '../estilo';
+import {FPS, H, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
 import type {Datos, Escena} from '../tipos';
 import {Capas} from './capas';
-import {FondoTema, Textura, Vineta} from './fondo';
+import {FondoTema, Post, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
 import {mezclar, temaDe, type Tema} from './tema';
-import type {CtxEscena} from './util';
+import {azar, cuando, partesResaltadas, type CtxEscena} from './util';
 
 const TRANSICION = 0.35;
 
 /** Valor animado de cámara: número fijo o [inicio, fin] a lo largo de la escena. */
 const rango = (v: unknown, k: number, porDefecto: number) => (Array.isArray(v) ? lerp(v[0], v[1], k) : typeof v === 'number' ? v : porDefecto);
 
-const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string}> = ({e, t, tema, semilla}) => {
+const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string; sinFondo?: boolean}> = ({e, t, tema, semilla, sinFondo}) => {
 	const marca = useMarca();
 	const p = e.p;
 	const temaEsc = p.tema ? mezclar(tema, p.tema) : tema;
 	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${semilla}-${e.t0}`};
 	const cam = p.camara ?? {};
 	const k = easeIO(clamp((t - (cam.en ?? 0)) / (cam.duracion ?? e.dur)));
-	const zoom = rango(cam.zoom, k, lerp(1, temaEsc.zoomLento, clamp(t / e.dur)));
-	const cx = rango(cam.x, k, 0);
-	const cy = rango(cam.y, k, 0);
-	const temblor = cam.temblor && t < (cam.temblor.duracion ?? 0.4) ? Math.sin(t * 90) * (cam.temblor.fuerza ?? 12) * (1 - t / (cam.temblor.duracion ?? 0.4)) : 0;
+	// sin `camara`, cada escena tiene una deriva lenta propia: acerca y se desplaza un poco hacia un lado distinto
+	const fase = azar(`${semilla}-${e.t0}-deriva`) * 6.28;
+	const avance = clamp(t / e.dur);
+	const deriva = sinFondo ? 0 : (temaEsc.zoomLento - 1) * 420;
+	const zoom = rango(cam.zoom, k, sinFondo ? 1 : lerp(1, temaEsc.zoomLento, easeOut(avance) * 0.55 + avance * 0.45));
+	const cx = rango(cam.x, k, Math.cos(fase) * deriva * avance);
+	const cy = rango(cam.y, k, Math.sin(fase) * deriva * 0.6 * avance);
+	// temblor: varias frecuencias y en los dos ejes, para que no se sienta como un péndulo
+	const td = cam.temblor?.duracion ?? 0.4;
+	const tf = cam.temblor && t < td ? (cam.temblor.fuerza ?? 12) * (1 - t / td) ** 2 : 0;
+	const tx = tf ? (Math.sin(t * 90) + Math.sin(t * 57 + 1) * 0.6) * tf * 0.7 : 0;
+	const ty = tf ? (Math.cos(t * 73 + 2) + Math.sin(t * 41) * 0.5) * tf * 0.5 : 0;
+	const capas = capasDe(e.tipo, p, temaEsc, marca).filter((c: any) => !(sinFondo && c.enMundo));
 	return (
 		<AbsoluteFill>
-			<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
-				<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} ctx={ctx} />
-			</AbsoluteFill>
-			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + temblor}px, ${-cy}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
-				<Capas capas={capasDe(e.tipo, p, temaEsc, marca)} ctx={ctx} />
+			{sinFondo ? null : (
+				<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
+					<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} ctx={ctx} />
+				</AbsoluteFill>
+			)}
+			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + tx}px, ${-cy + ty}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
+				<Capas capas={capas} ctx={ctx} />
 			</AbsoluteFill>
 		</AbsoluteFill>
 	);
 };
 
+type Toma = {x: number; y: number; zoom: number; giro: number};
+const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
+
+/**
+ * Cámara del mundo. Cada escena da su `toma: {x, y, zoom, giro}` (el punto del mundo que queda al centro);
+ * la cámara viaja desde donde terminó la escena anterior y luego sigue derivando despacio (`deriva`, o hacia `a`).
+ * Sin `toma`, la escena conserva la anterior. `corte: true` salta sin viaje.
+ */
+export function camaraMundo(d: Datos, si: number, t: number): Toma {
+	const destino = (i: number): Toma => {
+		for (let j = i; j >= 0; j--) if (d.escenas[j].p.toma) return {...TOMA0, ...d.escenas[j].p.toma};
+		return TOMA0;
+	};
+	const final = (i: number): Toma => {
+		const tm = d.escenas[i].p.toma ?? {};
+		const base = destino(i);
+		if (tm.a) return {...base, ...tm.a};
+		return {...base, zoom: base.zoom * (1 + (tm.deriva ?? 0.05))};
+	};
+	const e = d.escenas[si];
+	const tm = e.p.toma ?? {};
+	const a = destino(si);
+	const b = final(si);
+	const viaje = tm.corte || si === 0 ? 0 : tm.duracion ?? Math.min(1.1, e.dur * 0.55);
+	const kd = clamp((t - viaje * 0.6) / Math.max(0.01, e.dur - viaje * 0.6));
+	const kq = tm.a ? easeIO(kd) : kd;
+	const actual: Toma = {x: lerp(a.x, b.x, kq), y: lerp(a.y, b.y, kq), zoom: lerp(a.zoom, b.zoom, kq), giro: lerp(a.giro, b.giro, kq)};
+	if (viaje <= 0 || t >= viaje) return actual;
+	const o = final(si - 1);
+	const kv = easeIO(t / viaje);
+	// el zoom se interpola en escala logarítmica: así acercar y alejar se sienten igual de rápidos
+	return {x: lerp(o.x, actual.x, kv), y: lerp(o.y, actual.y, kv), zoom: Math.exp(lerp(Math.log(o.zoom), Math.log(actual.zoom), kv)), giro: lerp(o.giro, actual.giro, kv)};
+}
+
+/** El mundo del video: capas que persisten de escena en escena, vistas por la cámara. Las capas `enMundo` de la escena actual viven aquí. */
+const Mundo: React.FC<{d: Datos; si: number; t: number; T: number; tema: Tema}> = ({d, si, t, T, tema}) => {
+	const marca = useMarca();
+	const e = d.escenas[si];
+	const cam = camaraMundo(d, si, t);
+	const palabras = d.escenas.flatMap((x) => (x.palabras ?? []).map(([w, a, b]) => [w, a + x.t0, b + x.t0] as [string, number, number]));
+	const ctxMundo: CtxEscena = {t: T, dur: d.duracion, habla: [0, d.duracion], palabras, tema, semilla: `${d.id}-mundo`, inicios: d.escenas.map((x) => x.t0), escena: si + 1, tEscena: t, camara: cam};
+	const temaEsc = e.p.tema ? mezclar(tema, e.p.tema) : tema;
+	const ctxEsc: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${d.id}-${e.t0}`};
+	const propias = capasDe(e.tipo, e.p, temaEsc, marca).filter((c: any) => c.enMundo);
+	return (
+		<AbsoluteFill style={{transform: `translate(540px, 960px) scale(${cam.zoom}) rotate(${cam.giro}deg) translate(${-cam.x}px, ${-cam.y}px)`, transformOrigin: '0 0'}}>
+			<Capas capas={d.mundo as any} ctx={ctxMundo} />
+			{propias.length ? <Capas capas={propias} ctx={ctxEsc} /> : null}
+		</AbsoluteFill>
+	);
+};
+
 /** Capas fijas del video (HUD): usan el tiempo de todo el video; `cambios` las actualiza por escena o palabra. */
 const Hud: React.FC<{d: Datos; T: number; tema: Tema}> = ({d, T, tema}) => {
 	const palabras = d.escenas.flatMap((e) => (e.palabras ?? []).map(([w, a, b]) => [w, a + e.t0, b + e.t0] as [string, number, number]));
@@ -49,6 +112,68 @@ const Hud: React.FC<{d: Datos; T: number; tema: Tema}> = ({d, T, tema}) => {
 	return <Capas capas={d.hud as any} ctx={ctx} />;
 };
 
+/**
+ * Rótulo de la escena: el segundo nivel de texto (grande y corto) que resume el momento: "¿CUÁNTO SUBIÓ?", "DÍA 21".
+ * Va abajo si los subtítulos están arriba, y arriba si están abajo. `*palabra*` va en color de acento.
+ */
+const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
+	const texto = String(e.p.rotulo ?? '');
+	if (!texto) return null;
+	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema, semilla: ''};
+	const t0 = cuando(e.p.rotuloEn, ctx, 0.12);
+	if (t < t0) return null;
+	const k = clamp((t - t0) / 0.45);
+	const S = tema.subtitulos;
+	const abajo = S.tipo === 'ninguno' || S.y < 900;
+	const may = tema.tituloMayusculas !== false;
+	const limpio = texto.replace(/\*/g, '');
+	const fuente = tema.fuentes.titulo;
+	// cabe en 940 px: se achica si hace falta (el ancho se mide con la fuente ya cargada)
+	let tam = e.p.rotuloTam ?? 104;
+	try {
+		const w = ancho(may ? limpio.toUpperCase() : limpio, fuente, tam, 900);
+		if (w > 940) tam = Math.max(56, Math.floor((tam * 940) / w));
+	} catch {}
+	const claro = tema.colores.texto !== '#FFFFFF';
+	const contorno = !claro && (S.contorno ?? 0) > 0;
+	return (
+		<div style={{position: 'absolute', left: 50, width: W - 100, top: abajo ? 1470 : 330, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)})`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
+			<span
+				style={{
+					fontFamily: fuente,
+					fontWeight: 900,
+					fontSize: tam,
+					lineHeight: 1.05,
+					color: tema.colores.texto,
+					textTransform: may ? 'uppercase' : undefined,
+					WebkitTextStroke: contorno ? `${S.contorno}px #000` : undefined,
+					paintOrder: 'stroke fill',
+					textShadow: claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+				}}
+			>
+				{partesResaltadas(texto).map(([p, r], i) => (
+					<span key={i} style={r ? {color: tema.colores.acento} : undefined}>
+						{p}
+					</span>
+				))}
+			</span>
+		</div>
+	);
+};
+
+/** Pastilla fija de la serie arriba al centro: "GYM CON CIENCIA · PARTE 5". */
+const Serie: React.FC<{texto: string; tema: Tema}> = ({texto, tema}) => {
+	const claro = tema.colores.texto !== '#FFFFFF';
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: 132, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
+			<div style={{display: 'flex', alignItems: 'center', gap: 12, background: claro ? 'rgba(255,255,255,0.88)' : 'rgba(10,10,14,0.72)', color: claro ? '#141414' : '#FFFFFF', border: `2px solid ${claro ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.14)'}`, borderRadius: 999, padding: '8px 26px', fontFamily: tema.fuentes.mono, fontWeight: 800, fontSize: 26, letterSpacing: 2, textTransform: 'uppercase', whiteSpace: 'nowrap'}}>
+				<span style={{width: 10, height: 10, borderRadius: '50%', background: tema.colores.acento}} />
+				{texto}
+			</div>
+		</div>
+	);
+};
+
 /** Etiqueta de la marca en la esquina (avatar + nombre). */
 const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 	const marca = useMarca();
@@ -74,12 +199,17 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	const e = d.escenas[si];
 	const t = T - e.t0;
 	const semilla = d.id;
-	const trans = (e.p.transicion ?? tema.transicion) as string;
-	const enTransicion = si > 0 && t < TRANSICION && trans !== 'corte';
-	const k = easeOut(clamp(t / TRANSICION));
+	const conMundo = !!d.mundo?.length;
+	const DUR = tema.movimiento?.transicion ?? TRANSICION;
+	// con mundo, la transición es el viaje de la cámara: las capas de pantalla solo entran con su propia animación
+	const trans = conMundo ? 'corte' : ((e.p.transicion ?? tema.transicion) as string);
+	const enTransicion = si > 0 && t < DUR && trans !== 'corte';
+	const lin = clamp(t / DUR);
+	const k = easeOut(lin);
 	const prev = si > 0 ? d.escenas[si - 1] : null;
 	let estiloActual: React.CSSProperties = {};
 	let estiloPrevio: React.CSSProperties = {};
+	let destello = 0;
 	if (enTransicion) {
 		if (trans === 'fundido') estiloActual = {opacity: k};
 		else if (trans === 'deslizar') {
@@ -88,23 +218,44 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 		} else if (trans === 'zoom') {
 			estiloActual = {transform: `scale(${lerp(1.15, 1, k)})`, opacity: k};
 			estiloPrevio = {transform: `scale(${lerp(1, 0.9, k)})`};
+		} else if (trans === 'barrido') {
+			// latigazo: las dos escenas pasan de lado con desenfoque de movimiento, más fuerte a la mitad
+			const q = easeIO(lin);
+			const blur = Math.sin(lin * Math.PI) * 26;
+			const filter = blur > 0.5 ? `blur(${blur}px)` : undefined;
+			estiloActual = {transform: `translateX(${(1 - q) * W}px)`, filter};
+			estiloPrevio = {transform: `translateX(${-q * W}px)`, filter};
+		} else if (trans === 'empuje') {
+			const q = easeIO(lin);
+			estiloActual = {transform: `translateY(${(1 - q) * H}px)`};
+			estiloPrevio = {transform: `translateY(${-q * H}px)`};
+		} else if (trans === 'mascara') {
+			estiloActual = {clipPath: `circle(${easeIO(lin) * 1250}px at 540px 960px)`};
+		} else if (trans === 'destello') {
+			estiloActual = {opacity: lin < 0.4 ? 0 : 1};
+			destello = Math.sin(lin * Math.PI) ** 1.5;
 		}
 	}
 	return (
 		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
+			{conMundo ? <Mundo d={d} si={si} t={t} T={T} tema={tema} /> : null}
 			{enTransicion && prev ? (
 				<AbsoluteFill style={estiloPrevio}>
 					<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} />
 				</AbsoluteFill>
 			) : null}
 			<AbsoluteFill style={estiloActual}>
-				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} />
+				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 			</AbsoluteFill>
+			{destello > 0 ? <AbsoluteFill style={{background: '#fff', opacity: destello}} /> : null}
+			<Post tema={tema} />
 			{/* la textura va quieta, fuera de la cámara: si se moviera con el zoom, cada cuadro sería distinto y el video pesaría 10 veces más */}
 			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
-			<Vineta fuerza={tema.vineta ?? 0} />
+			<Vineta fuerza={tema.vineta ?? 0} color={tema.post?.vinetaColor} />
 			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
-			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} /> : null}
+			{d.serie && e.tipo !== 'cta' ? <Serie texto={d.serie} tema={tema} /> : null}
+			{e.tipo !== 'cta' ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
+			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} claves={e.p.claves} /> : null}
 			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
 		</AbsoluteFill>
 	);