morfeo 0.3.4 → 0.4.0

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

@@ -53,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};
 
@@ -62,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 => {
@@ -76,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)};
@@ -99,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>
 	);
@@ -198,7 +216,9 @@ const RotuloSello: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 		const w = ancho(limpio, tema.fuentes.titulo, tam, 900);
 		if (w > 820) tam = Math.max(44, Math.floor((tam * 820) / w));
 	} catch {}
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 1180;
+	// 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
@@ -238,7 +258,9 @@ const RotuloPaso: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 	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;
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 250;
+	// 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'}}>
@@ -305,7 +327,8 @@ const RotuloPixel: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 		const w = ancho(limpio, PIXEL, tam, 400);
 		if (w > 900) tam = Math.max(30, Math.floor((tam * 900) / w));
 	} catch {}
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 230;
+	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
@@ -368,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);
@@ -408,10 +433,19 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	return (
 		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
 			<Modo d={d} si={si} t={t} T={T} claro={LOOKS_CLAROS.includes(d.estilo ?? '') || tema.colores.texto !== '#FFFFFF'}>
-				{conMundo ? <Mundo d={d} si={si} t={t} T={T} tema={tema} /> : null}
+				{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} />
+						<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 					</AbsoluteFill>
 				) : null}
 				<AbsoluteFill style={estiloActual}>

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>;
 	}
 };