morfeo 0.3.3 → 0.4.0

package/python/musica.py

@@ -237,7 +237,15 @@ def mix(vid, style, outdir, TIM, SPEC, durs, ev):
             for i in range(len(sp["rows"])): add(sfx, 0.2 * whoosh(rng, 0.15), t0 + m["speech"] * 0.55 + i * 0.12)
         if ty == "cta": add(sfx, 0.4 * tick(), t0 + 1.6)
         # motor de capas: cada capa suena cuando entra (las explícitas siempre; las automáticas, más bajas y sin amontonarse)
-        if sp.get("rotulo"): add(sfx, 0.5 * efecto("whoosh", rng), t0 + momento(sp.get("rotuloEn", 0.12), ev, si, m) - 0.05)
+        if sp.get("rotulo"):
+            # el sello cae de golpe y la letra pixel suena como pantalla vieja; los demás rótulos entran con un whoosh
+            est = sp.get("rotuloEstilo") or ""
+            ef, vol = {"sello": ("golpe", 0.9), "pixel": ("tick", 0.8)}.get(est, ("whoosh", 0.5))
+            add(sfx, vol * efecto(ef, rng), t0 + momento(sp.get("rotuloEn", 0.12), ev, si, m) - (0.0 if est == "sello" else 0.05))
+        # modo de imagen (rayos X, plano, holograma): barrido al entrar, salvo que siga de la escena anterior
+        prev = SPEC[si - 1] if si > 0 else None
+        if sp.get("modo") and not (prev and prev.get("modo") == sp.get("modo") and prev.get("modoHasta") is None and sp.get("modoEn") is None):
+            add(sfx, 0.35 * efecto("whoosh", rng), t0 + momento(sp.get("modoEn", 0), ev, si, m))
         usados = []
         for capa, ef, explicito in sorted(capas_con_sonido(sp), key=lambda x: momento(x[0].get("en"), ev, si, m)):
             tc = t0 + momento(capa.get("en"), ev, si, m)

package/python/preparar.py

@@ -264,7 +264,7 @@ def preparar(job):
     subs = [dict(a=round(c[0][1], 3), b=round(c[-1][2], 3), w=[[x[0].upper(), round(x[1], 3), round(x[2], 3)] for x in c])
             for ws in WORDS for c in trozos(ws)]
     datos = dict(id=vid, titulo=v.get("title", vid), indice=job.get("indice", 0), duracion=round(sum(durs), 3),
-                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [], mundo=v.get("mundo") or [], serie=v.get("serie"),
+                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [], mundo=v.get("mundo") or [], lugares=v.get("lugares") or {}, serie=v.get("serie"),
                  audio=f"v/{vid}/mix.wav", whisper=reales, escenas=escenas, subtitulos=subs)
     json.dump(datos, open(os.path.join(outdir, "datos.json"), "w", encoding="utf-8"), ensure_ascii=False, indent=1)
     print(f"    tiempos por palabra: {'Whisper' if reales else 'reparto por frase'} ({reales}/{len(TIM)} escenas)", flush=True)

package/remotion/estilo.ts

@@ -36,10 +36,12 @@ export const fondoDe = (indice: number) => FONDOS[indice % FONDOS.length];
 export const ANTON = 'Anton';
 export const MONT = 'Montserrat';
 export const MONO = 'JetBrains Mono';
+export const PIXEL = 'Silkscreen';
 export const fuentesListas = Promise.all([
 	loadFont({family: ANTON, url: staticFile('fuentes/Anton.ttf')}),
 	loadFont({family: MONT, url: staticFile('fuentes/Montserrat.ttf'), weight: '100 900'}),
 	loadFont({family: MONO, url: staticFile('fuentes/JetBrainsMono.ttf'), weight: '100 800'}),
+	loadFont({family: PIXEL, url: staticFile('fuentes/Silkscreen.ttf')}),
 ]);
 
 // Curvas

package/remotion/kit/armar.tsx

@@ -0,0 +1,245 @@
+// Piezas 3D para los formatos "construiste un X" y "escalada absurda" (un objeto que suma partes escena por escena),
+// para multitudes ("30 000 hombres") y para la mano en primera persona que aprieta un control o sostiene algo.
+// Todo depende de `t` (segundos) y de props; nada de useFrame.
+//
+//   <Aparece t={t} en={cuando('ruedas')} desde="arriba"><Ruedas /></Aparece>      (cae, rebota y suena por su cuenta)
+//   <Multitud3D t={t} n={400} ancho={16} fondo={10} colores={['#2F6FE0', '#F2B632']} destacar={[0, 7]} />
+//   <Mano3D t={t} pos={[0.5, -1.2, 3]} sostiene="control" aprieta={cuando('botón')} />
+import React, {useMemo} from 'react';
+import * as THREE from 'three';
+import {azarN} from './ilustrado';
+import {grupo, type Pieza, type V3} from './tres';
+
+const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+/** Rebote al caer: llega en 0.55 del tramo, rebota dos veces y se queda. */
+const caida = (k: number) => {
+	if (k >= 1) return 1;
+	if (k < 0.55) return (k / 0.55) ** 2;
+	const r = (k - 0.55) / 0.45;
+	return 1 - Math.abs(Math.sin(r * Math.PI * 2)) * (1 - r) * 0.12;
+};
+
+const Mate: React.FC<{c: string; r?: number}> = ({c, r = 0.75}) => <meshStandardMaterial color={c} roughness={r} flatShading />;
+
+/**
+ * Una parte que llega en su momento: cae desde arriba con rebote (`desde: 'arriba'`), crece desde cero (`'crece'`),
+ * entra de lado (`'izq'`/`'der'`) o sube del suelo (`'abajo'`). Antes de `en` no se ve. `dur` en segundos, `altura` de caída.
+ */
+export const Aparece: React.FC<Pieza & {t: number; en: number; desde?: 'arriba' | 'crece' | 'izq' | 'der' | 'abajo'; dur?: number; altura?: number; hasta?: number; children: React.ReactNode}> = ({t, en, desde = 'arriba', dur = 0.55, altura = 4, hasta, children, ...p}) => {
+	if (t < en) return null;
+	const k = clamp01((t - en) / dur);
+	const fuera = hasta != null ? suave((t - hasta) / 0.35) : 0;
+	if (fuera >= 1) return null;
+	const g = grupo(p);
+	let [x, y, z] = g.position;
+	let esc = g.scale * (1 - fuera);
+	if (desde === 'arriba') y += (1 - caida(k)) * altura;
+	else if (desde === 'abajo') y -= (1 - suave(k)) * altura;
+	else if (desde === 'izq') x -= (1 - suave(k)) * altura;
+	else if (desde === 'der') x += (1 - suave(k)) * altura;
+	else esc *= k < 1 ? Math.sin(suave(k) * Math.PI * 0.62) / Math.sin(Math.PI * 0.62) : 1;
+	// pequeño aplastamiento al tocar el suelo
+	const apl = desde === 'arriba' && k > 0.5 && k < 0.8 ? Math.sin(((k - 0.5) / 0.3) * Math.PI) * 0.12 : 0;
+	return (
+		<group position={[x, y, z]} rotation={g.rotation} scale={[esc * (1 + apl * 0.5), esc * (1 - apl), esc * (1 + apl * 0.5)]}>
+			{children}
+		</group>
+	);
+};
+
+/**
+ * Multitud de figuras simples (cuerpo + cabeza) en una rejilla con algo de desorden, en un solo `instancedMesh` (miles
+ * sin costo). `n`, `ancho`×`fondo` (unidades), `colores` del cuerpo, `destacar: [índices]` en `colorDestacado`, `brinca`
+ * para que salten. Aparece de adelante hacia atrás desde `en`.
+ */
+export const Multitud3D: React.FC<Pieza & {t: number; n?: number; ancho?: number; fondo?: number; colores?: string[]; colorDestacado?: string; destacar?: number[]; brinca?: boolean; en?: number; altura?: number}> = ({t, n = 300, ancho = 14, fondo = 10, colores = ['#2F6FE0', '#3D7DF0', '#2A5FC8'], colorDestacado = '#F2B632', destacar = [], brinca = false, en = 0, altura = 1.1, ...p}) => {
+	const cols = Math.max(1, Math.round(Math.sqrt((n * ancho) / fondo)));
+	const filas = Math.ceil(n / cols);
+	const datos = useMemo(() => {
+		let semilla = n * 3 + 7;
+		const r = () => azarN(semilla++);
+		return Array.from({length: n}, (_, i) => {
+			const c = i % cols;
+			const f = Math.floor(i / cols);
+			const x = (c / Math.max(1, cols - 1) - 0.5) * ancho + (r() - 0.5) * (ancho / cols) * 0.5;
+			const z = (f / Math.max(1, filas - 1) - 0.5) * fondo + (r() - 0.5) * (fondo / filas) * 0.5;
+			return {x, z, fase: r() * 6.28, escala: 0.9 + r() * 0.2, color: destacar.includes(i) ? colorDestacado : colores[Math.floor(r() * colores.length)], fila: f};
+		});
+	}, [n, cols, filas, ancho, fondo, colores.join(), colorDestacado, destacar.join()]);
+	const cuerpo = useMemo(() => new THREE.CapsuleGeometry(0.22 * altura, 0.5 * altura, 3, 6), [altura]);
+	const cabeza = useMemo(() => new THREE.IcosahedronGeometry(0.2 * altura, 0), [altura]);
+	const m = useMemo(() => new THREE.Matrix4(), []);
+	const color = useMemo(() => new THREE.Color(), []);
+	const refC = React.useRef<THREE.InstancedMesh>(null);
+	const refH = React.useRef<THREE.InstancedMesh>(null);
+	// las matrices se escriben en cada render (depende de t), no en un efecto
+	const aplicar = () => {
+		if (!refC.current || !refH.current) return;
+		datos.forEach((d, i) => {
+			const k = clamp01((t - en - d.fila * 0.04) / 0.35);
+			const s = d.escala * (k < 1 ? caida(k) : 1);
+			const salto = brinca ? Math.max(0, Math.sin(t * 6 + d.fase)) * 0.25 : 0;
+			m.compose(new THREE.Vector3(d.x, (0.47 * altura + salto) * s, d.z), new THREE.Quaternion(), new THREE.Vector3(s, s, s));
+			refC.current!.setMatrixAt(i, m);
+			refC.current!.setColorAt(i, color.set(d.color));
+			m.compose(new THREE.Vector3(d.x, (1.05 * altura + salto) * s, d.z), new THREE.Quaternion(), new THREE.Vector3(s, s, s));
+			refH.current!.setMatrixAt(i, m);
+			refH.current!.setColorAt(i, color.set('#F2C9A4'));
+		});
+		refC.current.instanceMatrix.needsUpdate = true;
+		refH.current.instanceMatrix.needsUpdate = true;
+		if (refC.current.instanceColor) refC.current.instanceColor.needsUpdate = true;
+		if (refH.current.instanceColor) refH.current.instanceColor.needsUpdate = true;
+	};
+	React.useLayoutEffect(aplicar);
+	return (
+		<group {...grupo(p)}>
+			<instancedMesh ref={refC} args={[cuerpo, undefined, n]} castShadow>
+				<meshStandardMaterial roughness={0.7} flatShading />
+			</instancedMesh>
+			<instancedMesh ref={refH} args={[cabeza, undefined, n]} castShadow>
+				<meshStandardMaterial roughness={0.7} flatShading />
+			</instancedMesh>
+		</group>
+	);
+};
+
+/** Control remoto o de portón: caja oscura con botones. */
+const Control: React.FC<{apretado: number}> = ({apretado}) => (
+	<group>
+		<mesh castShadow>
+			<boxGeometry args={[0.55, 0.95, 0.16]} />
+			<Mate c="#26282E" />
+		</mesh>
+		<mesh position={[0, 0.2, 0.09 - apretado * 0.03]}>
+			<cylinderGeometry args={[0.13, 0.13, 0.06, 16]} />
+			<meshStandardMaterial color="#E5484D" roughness={0.4} emissive="#E5484D" emissiveIntensity={apretado * 0.8} />
+		</mesh>
+		{[-0.13, 0.13].map((x) => (
+			<mesh key={x} position={[x, -0.15, 0.09]} rotation={[Math.PI / 2, 0, 0]}>
+				<cylinderGeometry args={[0.07, 0.07, 0.04, 12]} />
+				<Mate c="#D7D9DE" />
+			</mesh>
+		))}
+	</group>
+);
+
+/** Teléfono: losa negra con pantalla encendida. */
+const Movil: React.FC<{pantalla?: string}> = ({pantalla = '#3A6FF2'}) => (
+	<group>
+		<mesh castShadow>
+			<boxGeometry args={[0.55, 1.1, 0.08]} />
+			<Mate c="#111214" r={0.4} />
+		</mesh>
+		<mesh position={[0, 0, 0.045]}>
+			<planeGeometry args={[0.48, 1.0]} />
+			<meshStandardMaterial color={pantalla} emissive={pantalla} emissiveIntensity={0.7} />
+		</mesh>
+	</group>
+);
+
+/**
+ * Mano en primera persona (entra desde abajo del cuadro): palma, cuatro dedos que rodean lo que sostiene y pulgar que
+ * aprieta en `aprieta` (segundos). `sostiene: 'control' | 'movil' | 'nada'`, `piel`, `manga` (color de la manga).
+ * Ponla cerca de la cámara (2–4 u) y abajo del centro.
+ */
+export const Mano3D: React.FC<Pieza & {t: number; sostiene?: 'control' | 'movil' | 'nada'; aprieta?: number; piel?: string; manga?: string; en?: number; pantalla?: string}> = ({t, sostiene = 'control', aprieta, piel = '#E8B48F', manga = '#2F6FE0', en = 0, pantalla, ...p}) => {
+	const entra = suave((t - en) / 0.45);
+	const dt = aprieta != null ? t - aprieta : -1;
+	const apretado = dt >= 0 && dt < 0.5 ? Math.sin((dt / 0.5) * Math.PI) : 0;
+	const g = grupo(p);
+	const [x, y, z] = g.position;
+	const tiembla = Math.sin(t * 2.1) * 0.01;
+	return (
+		<group position={[x, y - (1 - entra) * 1.6 + tiembla, z]} rotation={g.rotation} scale={g.scale}>
+			{/* manga y muñeca */}
+			<mesh position={[0, -0.95, -0.05]} rotation={[0.25, 0, 0]} castShadow>
+				<cylinderGeometry args={[0.24, 0.3, 0.9, 8]} />
+				<Mate c={manga} />
+			</mesh>
+			<mesh position={[0, -0.45, 0]} castShadow>
+				<cylinderGeometry args={[0.17, 0.2, 0.3, 8]} />
+				<Mate c={piel} />
+			</mesh>
+			{/* palma detrás del objeto */}
+			<mesh position={[0, -0.05, -0.14]} castShadow>
+				<boxGeometry args={[0.6, 0.62, 0.2]} />
+				<Mate c={piel} />
+			</mesh>
+			{/* lo que sostiene */}
+			<group position={[0, 0.15, 0]}>{sostiene === 'control' ? <Control apretado={apretado} /> : sostiene === 'movil' ? <Movil pantalla={pantalla} /> : null}</group>
+			{/* dedos que rodean por la derecha */}
+			{[0.22, 0.02, -0.18, -0.36].map((yy, i) => (
+				<mesh key={i} position={[0.33, yy + 0.1, 0.02]} rotation={[0, 0, 0.1]} castShadow>
+					<boxGeometry args={[0.14, 0.15, 0.24]} />
+					<Mate c={piel} />
+				</mesh>
+			))}
+			{/* pulgar: baja sobre el botón al apretar */}
+			<group position={[-0.32, -0.05, 0.05]} rotation={[0, 0, -0.9 + apretado * 0.35]}>
+				<mesh position={[0, 0.25, 0.1 - apretado * 0.04]} castShadow>
+					<boxGeometry args={[0.16, 0.42, 0.16]} />
+					<Mate c={piel} />
+				</mesh>
+			</group>
+		</group>
+	);
+};
+
+/** Partes listas para armar objetos que crecen: rueda, motor y asiento (low-poly, se combinan con Aparece). */
+export const Rueda: React.FC<Pieza & {radio?: number; t?: number; gira?: number; color?: string}> = ({radio = 0.35, t = 0, gira = 0, color = '#1E1F24', ...p}) => (
+	<group {...grupo(p)}>
+		<group rotation={[0, 0, -t * gira]}>
+			<mesh rotation={[Math.PI / 2, 0, 0]} castShadow>
+				<cylinderGeometry args={[radio, radio, radio * 0.6, 14]} />
+				<Mate c={color} r={0.9} />
+			</mesh>
+			<mesh rotation={[Math.PI / 2, 0, 0]} position={[0, 0, 0.01]}>
+				<cylinderGeometry args={[radio * 0.5, radio * 0.5, radio * 0.62, 8]} />
+				<Mate c="#B9BEC8" r={0.5} />
+			</mesh>
+		</group>
+	</group>
+);
+
+export const Motor: React.FC<Pieza & {t?: number; color?: string}> = ({t = 0, color = '#F2B632', ...p}) => {
+	const vibra = Math.sin(t * 60) * 0.01;
+	return (
+		<group {...grupo(p)} position={[(p.pos?.[0] ?? 0) + vibra, p.pos?.[1] ?? 0, p.pos?.[2] ?? 0]}>
+			<mesh castShadow>
+				<boxGeometry args={[0.7, 0.5, 0.5]} />
+				<Mate c={color} />
+			</mesh>
+			<mesh position={[0, 0.32, 0]} castShadow>
+				<boxGeometry args={[0.4, 0.14, 0.34]} />
+				<Mate c="#2A2C33" />
+			</mesh>
+			<mesh position={[0.42, 0.1, 0]} rotation={[0, 0, Math.PI / 2]} castShadow>
+				<cylinderGeometry args={[0.06, 0.06, 0.2, 8]} />
+				<Mate c="#6B7080" />
+			</mesh>
+		</group>
+	);
+};
+
+export const Asiento: React.FC<Pieza & {color?: string}> = ({color = '#E5484D', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0, 0]} castShadow>
+			<boxGeometry args={[0.6, 0.14, 0.55]} />
+			<Mate c={color} />
+		</mesh>
+		<mesh position={[0, 0.32, -0.24]} castShadow>
+			<boxGeometry args={[0.6, 0.6, 0.12]} />
+			<Mate c={color} />
+		</mesh>
+		<mesh position={[0, -0.25, 0]} castShadow>
+			<cylinderGeometry args={[0.05, 0.05, 0.4, 6]} />
+			<Mate c="#6B7080" />
+		</mesh>
+	</group>
+);
+

package/remotion/kit/index.ts

@@ -12,3 +12,4 @@ export * from './mundo3d';
 export * from './datos';
 export * from './diorama';
 export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
+export * from './armar';

package/remotion/motor/Video.tsx

@@ -2,9 +2,10 @@
 import React from 'react';
 import {AbsoluteFill, Audio, staticFile} from 'remotion';
 import {Avatar, MarcaContexto, useMarca} from '../piezas';
-import {FPS, H, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
+import {FPS, H, PIXEL, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
 import type {Datos, Escena} from '../tipos';
 import {Capas} from './capas';
+import {Modo} from './modos';
 import {FondoTema, Post, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
@@ -12,6 +13,8 @@ import {mezclar, temaDe, type Tema} from './tema';
 import {azar, cuando, partesResaltadas, type CtxEscena} from './util';
 
 const TRANSICION = 0.35;
+// estilos con fondo claro (cielo, papel): los modos de imagen invierten para que el fondo quede oscuro
+const LOOKS_CLAROS = ['3d', 'maqueta', 'explicativo', 'infografia', 'minimal'];
 
 /** 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);
@@ -50,6 +53,21 @@ const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string;
 	);
 };
 
+/** Lugar (mundo) de la escena `i`: el suyo, o el de la última escena anterior que dijo uno, o el primero de `lugares`. */
+export function lugarDe(d: Datos, i: number): string | null {
+	const nombres = Object.keys(d.lugares ?? {});
+	if (!nombres.length) return null;
+	for (let j = i; j >= 0; j--) {
+		const l = d.escenas[j]?.p.lugar;
+		if (typeof l === 'string' && d.lugares![l]) return l;
+	}
+	return d.mundo?.length ? null : nombres[0];
+}
+const capasDeLugar = (d: Datos, i: number) => {
+	const l = lugarDe(d, i);
+	return (l ? d.lugares![l] : d.mundo) ?? [];
+};
+
 type Toma = {x: number; y: number; zoom: number; giro: number};
 const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
 
@@ -59,8 +77,10 @@ const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
  * Sin `toma`, la escena conserva la anterior. `corte: true` salta sin viaje.
  */
 export function camaraMundo(d: Datos, si: number, t: number): Toma {
+	// cada lugar tiene su propia cámara: al buscar la toma anterior no se cruza a otro lugar
 	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};
+		const l = lugarDe(d, i);
+		for (let j = i; j >= 0 && lugarDe(d, j) === l; j--) if (d.escenas[j].p.toma) return {...TOMA0, ...d.escenas[j].p.toma};
 		return TOMA0;
 	};
 	const final = (i: number): Toma => {
@@ -73,7 +93,8 @@ export function camaraMundo(d: Datos, si: number, t: number): Toma {
 	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 cambiaLugar = si > 0 && lugarDe(d, si) !== lugarDe(d, si - 1);
+	const viaje = tm.corte || si === 0 || cambiaLugar ? 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)};
@@ -96,7 +117,7 @@ const Mundo: React.FC<{d: Datos; si: number; t: number; T: number; tema: Tema}>
 	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} />
+			<Capas capas={capasDeLugar(d, si) as any} ctx={ctxMundo} />
 			{propias.length ? <Capas capas={propias} ctx={ctxEsc} /> : null}
 		</AbsoluteFill>
 	);
@@ -136,6 +157,9 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	} catch {}
 	const claro = tema.colores.texto !== '#FFFFFF';
 	const estilo = e.p.rotuloEstilo ?? tema.rotulo?.estilo ?? 'normal';
+	if (estilo === 'sello') return <RotuloSello texto={texto} t={t - t0} tema={tema} e={e} />;
+	if (estilo === 'paso') return <RotuloPaso texto={texto} t={t - t0} tema={tema} e={e} />;
+	if (estilo === 'pixel') return <RotuloPixel texto={texto} t={t - t0} tema={tema} e={e} />;
 	const contorno = estilo === 'contorno' || (estilo === 'normal' && !claro && (S.contorno ?? 0) > 0);
 	const grosor = estilo === 'contorno' ? Math.max(8, Math.round(tam * 0.11)) : S.contorno;
 	const pastilla = estilo === 'pastilla';
@@ -167,6 +191,168 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	);
 };
 
+/** Colores con nombre para `rotuloColor` (o cualquier color CSS). */
+const COLORES_ROTULO: Record<string, string> = {rojo: '#E0312B', verde: '#22A04B', azul: '#2F5BEA', amarillo: '#F5B70A', naranja: '#F2711C', gris: '#8A8F98', negro: '#1B1B1F', morado: '#7B4FD6'};
+const colorRotulo = (c: unknown, porDefecto: string) => (typeof c === 'string' && c ? COLORES_ROTULO[c] ?? c : porDefecto);
+
+// textura de tinta gastada para el sello: ruido fractal convertido en máscara (huecos donde la tinta no pegó)
+const TINTA = `url("data:image/svg+xml,${encodeURIComponent(
+	"<svg xmlns='http://www.w3.org/2000/svg' width='600' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.05'/></filter><rect width='100%' height='100%' filter='url(#f)'/></svg>",
+)}")`;
+
+/**
+ * Sello de goma: texto en mayúsculas con borde doble, inclinado, que cae de golpe (escala 1.7 → 1 en 0,16 s y un
+ * pequeño rebote). La tinta tiene huecos como un sello real. `rotuloColor` (rojo por defecto) y `rotuloInclinar`.
+ */
+const RotuloSello: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const color = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, '#E0312B');
+	const caida = clamp(t / 0.16);
+	const rebote = t > 0.16 ? Math.sin(clamp((t - 0.16) / 0.22) * Math.PI) * 0.05 : 0;
+	const escala = lerp(1.7, 1, easeIO(caida)) - rebote;
+	const inclinar = e.p.rotuloInclinar ?? tema.rotulo?.inclinar ?? -7;
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 92;
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	try {
+		const w = ancho(limpio, tema.fuentes.titulo, tam, 900);
+		if (w > 820) tam = Math.max(44, Math.floor((tam * 820) / w));
+	} catch {}
+	// lejos de los subtítulos: si van a media altura, el sello se pone arriba de ellos
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && Math.abs(S.y - 1180) < 260 ? S.y - 300 : 1180);
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none', opacity: clamp(caida * 4)}}>
+			<div
+				style={{
+					transform: `translate(0, -50%) rotate(${inclinar}deg) scale(${escala})`,
+					fontFamily: tema.fuentes.titulo,
+					fontWeight: 900,
+					fontSize: tam,
+					lineHeight: 1,
+					letterSpacing: tam * 0.03,
+					color,
+					textTransform: 'uppercase',
+					padding: `${tam * 0.2}px ${tam * 0.34}px ${tam * 0.16}px`,
+					border: `${Math.max(5, tam * 0.08)}px solid ${color}`,
+					borderRadius: tam * 0.12,
+					outline: `${Math.max(2, tam * 0.03)}px solid ${color}`,
+					outlineOffset: -Math.max(9, tam * 0.15),
+					background: 'rgba(255,255,255,0.82)',
+					boxShadow: '0 10px 26px rgba(0,0,0,0.22)',
+					WebkitMaskImage: TINTA,
+					maskImage: TINTA,
+					WebkitMaskSize: '600px 240px',
+					whiteSpace: 'nowrap',
+				}}
+			>
+				{limpio}
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Titular de paso: arriba a la izquierda, en dos renglones, con `*clave*` en color y una insignia con el número del
+ * paso (`rotuloPaso: 3`). Entra deslizándose de la izquierda. Para explicadores "paso a paso".
+ */
+const RotuloPaso: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const k = easeIO(clamp(t / 0.35));
+	const color = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, tema.colores.acento);
+	const tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 64;
+	// si los subtítulos van arriba, el titular baja para no encimarse con ellos
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && S.y < 600 ? S.y + 120 : 250);
+	const n = e.p.rotuloPaso;
+	return (
+		<div style={{position: 'absolute', left: 56, right: 56, top: y, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, pointerEvents: 'none'}}>
+			<div style={{clipPath: `inset(0 ${(1 - k) * 100}% 0 0)`, transform: `translateX(${(1 - k) * -40}px)`, maxWidth: n != null ? 800 : 968}}>
+				<span
+					style={{
+						fontFamily: tema.fuentes.titulo,
+						fontWeight: 900,
+						fontSize: tam,
+						lineHeight: 1.02,
+						color: '#FFFFFF',
+						textTransform: 'uppercase',
+						WebkitTextStroke: `${Math.round(tam * 0.1)}px #15151A`,
+						paintOrder: 'stroke fill',
+						textShadow: '0 5px 0 rgba(0,0,0,0.25)',
+					}}
+				>
+					{partesResaltadas(texto).map(([p, r], i) => (
+						<span key={i} style={r ? {color} : undefined}>
+							{p}
+						</span>
+					))}
+				</span>
+			</div>
+			{n != null ? (
+				<div
+					style={{
+						flex: 'none',
+						minWidth: tam * 0.95,
+						height: tam * 0.95,
+						padding: `0 ${tam * 0.2}px`,
+						borderRadius: tam * 0.16,
+						background: '#15151A',
+						border: '4px solid #FFFFFF',
+						color: '#FFFFFF',
+						fontFamily: tema.fuentes.titulo,
+						fontWeight: 900,
+						fontSize: tam * 0.62,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						transform: `scale(${resorte(clamp((t - 0.15) / 0.3), 0.35)})`,
+						boxShadow: '0 8px 18px rgba(0,0,0,0.3)',
+					}}
+				>
+					{String(n)}
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+/**
+ * Rótulo pixel: letra de videojuego en una caja de color (verde = bien, rojo = mal; `rotuloColor`). Las letras
+ * aparecen de una en una, como en una pantalla vieja. Arriba por defecto.
+ */
+const RotuloPixel: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const fondo = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, '#2F5BEA');
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	const letras = [...limpio];
+	const vistas = Math.min(letras.length, Math.floor(t / 0.035) + 1);
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 64;
+	try {
+		const w = ancho(limpio, PIXEL, tam, 400);
+		if (w > 900) tam = Math.max(30, Math.floor((tam * 900) / w));
+	} catch {}
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && S.y < 600 ? S.y + 150 : 230);
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
+			<div
+				style={{
+					transform: 'translateY(-50%)',
+					fontFamily: PIXEL,
+					fontSize: tam,
+					lineHeight: 1.15,
+					color: '#FFFFFF',
+					background: fondo,
+					padding: `${tam * 0.18}px ${tam * 0.3}px ${tam * 0.12}px`,
+					border: '4px solid rgba(255,255,255,0.9)',
+					boxShadow: '6px 6px 0 rgba(0,0,0,0.45)',
+					whiteSpace: 'nowrap',
+					imageRendering: 'pixelated',
+				}}
+			>
+				<span>{letras.slice(0, vistas).join('')}</span>
+				<span style={{visibility: 'hidden'}}>{letras.slice(vistas).join('')}</span>
+			</div>
+		</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';
@@ -205,10 +391,12 @@ 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 conMundo = !!d.mundo?.length;
+	const conMundo = !!d.mundo?.length || Object.keys(d.lugares ?? {}).length > 0;
 	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);
+	// con mundo, la transición es el viaje de la cámara: las capas de pantalla solo entran con su propia animación.
+	// Al cambiar de lugar sí hay transición (la de la escena; corte si no dice), y el lugar anterior sale con ella.
+	const cambiaLugar = conMundo && si > 0 && lugarDe(d, si) !== lugarDe(d, si - 1);
+	const trans = conMundo ? (cambiaLugar ? ((e.p.transicion as string) ?? 'corte') : '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);
@@ -244,15 +432,26 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	}
 	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} />
+			<Modo d={d} si={si} t={t} T={T} claro={LOOKS_CLAROS.includes(d.estilo ?? '') || tema.colores.texto !== '#FFFFFF'}>
+				{conMundo && enTransicion && prev ? (
+					<AbsoluteFill style={estiloPrevio}>
+						<Mundo d={d} si={si - 1} t={prev.dur + t} T={T} tema={tema} />
+					</AbsoluteFill>
+				) : null}
+				{conMundo ? (
+					<AbsoluteFill style={enTransicion ? estiloActual : undefined}>
+						<Mundo d={d} si={si} t={t} T={T} tema={tema} />
+					</AbsoluteFill>
+				) : null}
+				{enTransicion && prev ? (
+					<AbsoluteFill style={estiloPrevio}>
+						<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} sinFondo={conMundo} />
+					</AbsoluteFill>
+				) : null}
+				<AbsoluteFill style={estiloActual}>
+					<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 				</AbsoluteFill>
-			) : null}
-			<AbsoluteFill style={estiloActual}>
-				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
-			</AbsoluteFill>
+			</Modo>
 			{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 */}

package/remotion/motor/capas.tsx

@@ -6,6 +6,7 @@ import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
 import {H, W, ancho, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
 import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
 import {FICHAS, Fichas} from './fichas';
+import {HISTORIAS, Historias} from './historias';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
@@ -280,6 +281,7 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 		default:
 			if (ANOTACIONES.includes(c.tipo)) return <Anotacion c={c} ctx={ctx} />;
 			if (FICHAS.includes(c.tipo)) return <Fichas c={c} ctx={ctx} />;
+			if (HISTORIAS.includes(c.tipo)) return <Historias c={c} ctx={ctx} />;
 			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
 	}
 };