morfeo 0.1.0 → 0.1.2

package/remotion/motor/capas.tsx

@@ -7,6 +7,7 @@ import {H, W, backOut, clamp, easeIO, easeOut, lerp} from '../estilo';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
+import {Escenario} from './escenarios';
 import {componente, nombresComponentes} from './registro';
 import {Barra, Chat, Estado, Globo, ImagenCambia, Medidor, Noticia, Onda, Seguir, Votacion} from './widgets';
 
@@ -14,6 +15,9 @@ export type Capa = Record<string, any> & {tipo: string};
 
 const ENTRADA_DUR = 0.5;
 
+// el personaje de una serie sigue en pantalla de escena en escena: no "reaparece" en cada una
+const entradaPorDefecto = (c: Capa) => (c.tipo === 'personaje' ? 'ninguna' : 'escala');
+
 /** Posición, escala, giro y opacidad de una capa en el instante t (entrada, movimiento, salida). */
 function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	const t = ctx.t;
@@ -26,7 +30,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	let r = c.rotar ?? 0;
 	let o = c.opacidad ?? 1;
 	if (t < t0) return null; // con entrada 'ninguna' aparece de golpe en su momento
-	switch (c.entrada ?? 'escala') {
+	switch (c.entrada ?? entradaPorDefecto(c)) {
 		case 'aparecer':
 			o *= easeOut(p);
 			break;
@@ -185,6 +189,8 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			return <Tarjeta c={c} ctx={ctx} />;
 		case 'telefono':
 			return <Telefono c={c} ctx={ctx} />;
+		case 'ventana':
+			return <Ventana c={c} ctx={ctx} />;
 		case 'forma':
 			return <Forma c={c} ctx={ctx} />;
 		case 'icono': {
@@ -214,6 +220,15 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			);
 		case 'grupo':
 			return <Grupo c={c} ctx={ctx} />;
+		case 'escenario': {
+			const {tipo, nombre, x, y, en, hasta, entrada, salida, z, ...props} = c;
+			const t0 = cuando(en, ctx, 0);
+			return (
+				<div style={{width: W, height: H}}>
+					<Escenario nombre={nombre} {...props} t={ctx.t - t0} dur={ctx.dur} cuando={(e: unknown) => cuando(e, ctx) - t0} />
+				</div>
+			);
+		}
 		case 'escena3d':
 			return <Escena3D c={c} ctx={ctx} />;
 		case 'personaje':
@@ -260,7 +275,7 @@ const TextoCapa: React.FC<{c: Capa; ctx: CtxEscena; fuente: string}> = ({c, ctx,
 		const vel = typeof c.escribir === 'number' ? c.escribir : 22; // letras por segundo
 		const n = Math.max(0, Math.floor((ctx.t - t0) * vel));
 		let cuenta = 0;
-		texto = texto.replace(/[^*]/g, (ch) => (cuenta++ < n ? ch : ch === '\n' ? '\n' : ''));
+		texto = texto.replace(/[^*]/g, (ch) => (cuenta++ < n ? ch : ch === '\n' ? '\n' : '')).replace(/\*\*/g, '');
 	}
 	const color = c.color ?? T.colores.texto;
 	const acento = c.acento ?? T.colores.acento;
@@ -398,7 +413,9 @@ const Telefono: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	const borde = ancho * 0.035;
 	return (
 		<div style={{width: ancho, height: alto, background: '#0A0A0C', borderRadius: ancho * 0.13, padding: borde, boxShadow: '0 30px 60px rgba(0,0,0,0.45), inset 0 0 0 3px #2A2A30', boxSizing: 'border-box'}}>
-			<div style={{position: 'relative', width: '100%', height: '100%', borderRadius: ancho * 0.1, overflow: 'hidden', background: c.pantalla ?? '#111'}}>
+			<div style={{position: 'relative', width: '100%', height: '100%', borderRadius: ancho * 0.1, overflow: 'hidden', background: c.pantalla ?? `linear-gradient(160deg, ${ctx.tema.colores.acento2}, ${ctx.tema.colores.acento} 60%, #111)`}}>
+				{/* sin imagen ni capas: una pantalla de app genérica en vez de un rectángulo negro */}
+				{!c.src && !c.capas?.length ? <PantallaGenerica ancho={ancho} t={ctx.t} /> : null}
 				{c.src ? (
 					/\.(mp4|webm|mov)$/i.test(c.src) ? (
 						<OffthreadVideo src={recurso(c.src)} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
@@ -418,6 +435,74 @@ const Telefono: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	);
 };
 
+/**
+ * Ventana circular (escotilla, lupa, mirilla): muestra una imagen o capas adentro, con borde metálico y remaches.
+ *   {tipo: 'ventana', diametro: 640, src: 'interior.png'}  o  {tipo: 'ventana', capas: [...]} (coordenadas desde el centro)
+ *   borde: 'metal' | 'ninguno' | '#color' · remaches · zoom: [inicio, fin] para acercar el contenido · fondo: color detrás
+ */
+const Ventana: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const d = c.diametro ?? 640;
+	const aro = c.borde === 'ninguno' ? 0 : c.grosor ?? Math.round(d * 0.06);
+	const metal = c.borde && c.borde !== 'metal' && c.borde !== 'ninguno' ? c.borde : null;
+	const t0 = cuando(c.en, ctx, 0);
+	const k = clamp((ctx.t - t0) / Math.max(0.5, ctx.dur - t0));
+	const zoom = Array.isArray(c.zoom) ? lerp(c.zoom[0], c.zoom[1], easeIO(k)) : c.zoom ?? 1;
+	const n = c.remaches === false ? 0 : c.remaches ?? 16;
+	const total = d + aro * 2;
+	return (
+		<div style={{position: 'relative', width: total, height: total}}>
+			<div
+				style={{
+					position: 'absolute',
+					inset: 0,
+					borderRadius: '50%',
+					background: metal ?? 'conic-gradient(from 210deg, #8C96A3, #E3E8EE, #7A8592, #C9D0D8, #6E7884, #DDE3EA, #8C96A3)',
+					boxShadow: '0 24px 50px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(0,0,0,0.35)',
+				}}
+			/>
+			<div style={{position: 'absolute', left: aro, top: aro, width: d, height: d, borderRadius: '50%', overflow: 'hidden', background: c.fondo ?? '#0C1A2A', boxShadow: 'inset 0 0 40px rgba(0,0,0,0.6)'}}>
+				<div style={{position: 'absolute', inset: 0, transform: `scale(${zoom})`}}>
+					{c.src ? <Img src={recurso(c.src)} style={{width: '100%', height: '100%', objectFit: 'cover'}} /> : null}
+					<div style={{position: 'absolute', left: '50%', top: '50%', width: 0, height: 0}}>
+						{(c.capas ?? []).map((h: Capa, i: number) => (
+							<CapaVista key={i} c={h} ctx={ctx} relativo i={i} />
+						))}
+					</div>
+				</div>
+				{/* brillo del vidrio */}
+				<div style={{position: 'absolute', inset: 0, borderRadius: '50%', background: 'radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 40%)'}} />
+			</div>
+			{Array.from({length: n}, (_, i) => {
+				const a = (i / n) * Math.PI * 2;
+				const r = d / 2 + aro / 2;
+				return <div key={i} style={{position: 'absolute', left: total / 2 + Math.cos(a) * r - aro * 0.16, top: total / 2 + Math.sin(a) * r - aro * 0.16, width: aro * 0.32, height: aro * 0.32, borderRadius: '50%', background: 'radial-gradient(circle at 35% 35%, #F2F5F8, #6E7884)'}} />;
+			})}
+		</div>
+	);
+};
+
+/** Pantalla de relleno: barra de app, un video con botón de play y renglones de texto. */
+const PantallaGenerica: React.FC<{ancho: number; t: number}> = ({ancho, t}) => {
+	const u = ancho / 100;
+	const pulso = 1 + 0.05 * Math.sin(t * 4);
+	return (
+		<div style={{position: 'absolute', inset: 0, padding: `${12 * u}px ${7 * u}px`, display: 'flex', flexDirection: 'column', gap: 4 * u}}>
+			<div style={{display: 'flex', alignItems: 'center', gap: 3 * u}}>
+				<div style={{width: 9 * u, height: 9 * u, borderRadius: '50%', background: 'rgba(255,255,255,0.85)'}} />
+				<div style={{flex: 1, height: 3 * u, borderRadius: 99, background: 'rgba(255,255,255,0.6)'}} />
+			</div>
+			<div style={{position: 'relative', height: 60 * u, borderRadius: 5 * u, background: 'rgba(0,0,0,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+				<div style={{width: 18 * u, height: 18 * u, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${pulso})`}}>
+					<div style={{width: 0, height: 0, borderStyle: 'solid', borderWidth: `${4.5 * u}px 0 ${4.5 * u}px ${7.5 * u}px`, borderColor: 'transparent transparent transparent #111', marginLeft: 1.5 * u}} />
+				</div>
+			</div>
+			{[90, 70, 80, 50].map((w, i) => (
+				<div key={i} style={{width: `${w}%`, height: 4 * u, borderRadius: 99, background: 'rgba(255,255,255,0.55)'}} />
+			))}
+		</div>
+	);
+};
+
 const Forma: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	const T = ctx.tema;
 	const color = c.color ?? T.colores.acento;

package/remotion/motor/escenarios/Bosque.tsx

@@ -0,0 +1,157 @@
+// Bosque de noche ilustrado, 1080×1920, por capas: cielo, estrellas, luna con halo, montañas,
+// tres filas de pinos, colina con pasto y luciérnagas. Con `paneo` las capas se mueven a distinta
+// velocidad (paralaje). La luna puede tener cara y cantar: luna: {cara: true, cantar: 'palabra', bajar: 'palabra'}.
+import React from 'react';
+
+type Props = {
+	t: number;
+	dur: number;
+	cuando: (en: unknown) => number;
+	paneo?: number;
+	luna?: {x?: number; y?: number; cara?: boolean; cantar?: string; bajar?: string; a?: [number, number]};
+	luciernagas?: boolean;
+};
+
+const W = 1080;
+const H = 1920;
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp(x);
+	return c * c * (3 - 2 * c);
+};
+const azar = (n: number) => {
+	const x = Math.sin(n * 127.1) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+/** Fila de pinos como un solo trazado (más liviano que muchos elementos). */
+function pinos(base: number, alto: number, ancho: number, n: number, semilla: number) {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const cx = (i / (n - 1)) * (W + 400) - 200 + (azar(semilla + i) - 0.5) * ancho * 0.6;
+		const h = alto * (0.75 + azar(semilla + i * 3) * 0.5);
+		const w = ancho * (0.8 + azar(semilla + i * 7) * 0.4);
+		// tres pisos de ramas
+		for (let p = 0; p < 3; p++) {
+			const top = base - h + p * h * 0.26;
+			const bot = base - h * 0.32 + p * h * 0.22;
+			const ww = w * (0.55 + p * 0.25);
+			d += `M${cx} ${top} L${cx + ww / 2} ${bot} L${cx - ww / 2} ${bot} Z `;
+		}
+		d += `M${cx - w * 0.06} ${base - h * 0.12} h${w * 0.12} v${h * 0.14} h${-w * 0.12} Z `;
+	}
+	return d;
+}
+
+export function Bosque({t, dur, cuando, paneo = 0, luna = {}, luciernagas = true}: Props) {
+	const k = suave(t / Math.max(1, dur));
+	const p = (f: number) => -paneo * f * k; // paralaje: lo lejano se mueve menos
+	// luna: posición (puede bajar) y canto
+	const lx0 = luna.x ?? 800;
+	const ly0 = luna.y ?? 470;
+	const kb = luna.bajar ? suave((t - cuando(luna.bajar)) / 1.8) : 0;
+	const lx = lx0 + ((luna.a?.[0] ?? lx0) - lx0) * kb;
+	const ly = ly0 + ((luna.a?.[1] ?? ly0) - ly0) * kb;
+	const canta = luna.cantar ? t >= cuando(luna.cantar) : false;
+	const boca = canta ? 6 + Math.abs(Math.sin(t * 9)) * 14 : 0;
+
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<linearGradient id="cielo" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#0B1033" />
+					<stop offset="0.5" stopColor="#252063" />
+					<stop offset="0.78" stopColor="#5B3C7E" />
+					<stop offset="1" stopColor="#8E5A86" />
+				</linearGradient>
+				<radialGradient id="halo">
+					<stop offset="0" stopColor="rgba(255,240,200,0.55)" />
+					<stop offset="1" stopColor="rgba(255,240,200,0)" />
+				</radialGradient>
+				<linearGradient id="colina" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#1F3B3A" />
+					<stop offset="1" stopColor="#0E1E22" />
+				</linearGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#cielo)" />
+			{/* estrellas que titilan */}
+			{Array.from({length: 70}, (_, i) => {
+				const x = azar(i) * W;
+				const y = azar(i + 100) * 1100;
+				const r = 1.2 + azar(i + 200) * 2.4;
+				const o = 0.35 + 0.65 * Math.abs(Math.sin(t * (1 + azar(i + 300) * 2) + i));
+				return <circle key={i} cx={x + p(0.05)} cy={y} r={r} fill="#FFFFFF" opacity={o} />;
+			})}
+			{/* luna */}
+			<g transform={`translate(${lx + p(0.1)} ${ly})`}>
+				<circle r={260} fill="url(#halo)" />
+				<circle r={110} fill="#FFF4D6" />
+				<circle cx={-34} cy={-26} r={16} fill="rgba(210,190,150,0.45)" />
+				<circle cx={38} cy={30} r={22} fill="rgba(210,190,150,0.4)" />
+				<circle cx={18} cy={-48} r={9} fill="rgba(210,190,150,0.4)" />
+				{luna.cara ? (
+					<g>
+						{canta ? (
+							<>
+								<path d="M-42 -8 Q-30 -18 -18 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+								<path d="M18 -8 Q30 -18 42 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+							</>
+						) : (
+							<>
+								<circle cx={-30} cy={-10} r={8} fill="#6B5236" />
+								<circle cx={30} cy={-10} r={8} fill="#6B5236" />
+							</>
+						)}
+						<ellipse cx={0} cy={34} rx={canta ? 14 : 16} ry={canta ? boca : 4} fill={canta ? '#7A3B3B' : '#6B5236'} />
+						<circle cx={-58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+						<circle cx={58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+					</g>
+				) : null}
+			</g>
+			{/* notas musicales cuando canta */}
+			{canta
+				? Array.from({length: 6}, (_, i) => {
+						const fase = ((t - cuando(luna.cantar) + i * 0.45) % 2.7) / 2.7;
+						const x = lx - 160 - fase * 260 + Math.sin(fase * 9 + i) * 40;
+						const y = ly + 60 + fase * 420;
+						return (
+							<text key={i} x={x} y={y} fontSize={70} fill="#FFE9A8" opacity={Math.sin(fase * Math.PI)} fontFamily="sans-serif">
+								{i % 2 ? '♪' : '♫'}
+							</text>
+						);
+					})
+				: null}
+			{/* montañas lejanas */}
+			<path transform={`translate(${p(0.15)} 0)`} d="M-200 1250 L80 980 L300 1150 L560 920 L820 1120 L1040 960 L1300 1180 L1300 1500 L-200 1500 Z" fill="#2E2A5A" opacity={0.9} />
+			{/* pinos lejanos, medios y cercanos */}
+			<path transform={`translate(${p(0.3)} 0)`} d={pinos(1330, 300, 150, 12, 1)} fill="#263A55" />
+			<path transform={`translate(${p(0.55)} 0)`} d={pinos(1420, 380, 200, 9, 20)} fill="#1A2E3F" />
+			{/* colina */}
+			<path transform={`translate(${p(0.8)} 0)`} d="M-300 1500 Q300 1380 700 1460 Q1050 1520 1400 1440 L1400 1920 L-300 1920 Z" fill="url(#colina)" />
+			{/* pasto */}
+			<g transform={`translate(${p(0.8)} 0)`}>
+				{Array.from({length: 60}, (_, i) => {
+					const x = -200 + i * 26;
+					const y = 1470 + Math.sin(i * 0.7) * 22;
+					const viento = Math.sin(t * 2 + i * 0.4) * 5;
+					return <path key={i} d={`M${x} ${y + 30} Q${x + viento} ${y + 10} ${x + 4 + viento * 1.6} ${y - 6}`} stroke="#2E5A4E" strokeWidth={5} fill="none" strokeLinecap="round" />;
+				})}
+			</g>
+			<path transform={`translate(${p(1)} 0)`} d={pinos(1950, 620, 320, 5, 40)} fill="#0C1A24" />
+			{/* luciérnagas */}
+			{luciernagas
+				? Array.from({length: 14}, (_, i) => {
+						const x = azar(i + 500) * W + Math.sin(t * 0.8 + i) * 40;
+						const y = 1250 + azar(i + 600) * 450 + Math.cos(t * 0.6 + i) * 30;
+						const o = 0.3 + 0.7 * Math.abs(Math.sin(t * 1.7 + i * 2));
+						return (
+							<g key={i} opacity={o}>
+								<circle cx={x} cy={y} r={14} fill="rgba(255,236,120,0.25)" />
+								<circle cx={x} cy={y} r={4} fill="#FFF3A0" />
+							</g>
+						);
+					})
+				: null}
+		</svg>
+	);
+}

package/remotion/motor/escenarios/Cuarto.tsx

@@ -0,0 +1,103 @@
+// Cuarto de Neto (serie). Dos partes para meter al personaje en medio:
+//   {tipo: 'componente', nombre: 'Cuarto'}                         pared, ventana, póster, calendario
+//   {tipo: 'componente', nombre: 'Cuarto', props: {parte: 'frente'}} escritorio, monitor, teclado RGB y ramen
+import React from 'react';
+
+type Props = {t: number; parte?: 'fondo' | 'frente'; dia?: number};
+
+const W = 1080;
+const H = 1920;
+
+function Fondo({t, dia}: {t: number; dia?: number}) {
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<pattern id="rayas" width="90" height="10" patternUnits="userSpaceOnUse">
+					<rect width="90" height="10" fill="#5B3FA0" />
+					<rect width="45" height="10" fill="#6447AE" />
+				</pattern>
+				<linearGradient id="noche" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#0E1840" />
+					<stop offset="1" stopColor="#2D2A6E" />
+				</linearGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#rayas)" />
+			{/* zoclo y piso */}
+			<rect y={1520} width={W} height={400} fill="#3B2A63" />
+			<rect y={1510} width={W} height={18} fill="#2A1D4A" />
+			{/* ventana */}
+			<g transform="translate(70 360)">
+				<rect width={420} height={520} rx={10} fill="url(#noche)" stroke="#2A1D4A" strokeWidth={18} />
+				<circle cx={300} cy={130} r={50} fill="#FFF4D6" />
+				<circle cx={322} cy={118} r={46} fill="#141E4E" />
+				{Array.from({length: 14}, (_, i) => (
+					<circle key={i} cx={40 + ((i * 97) % 340)} cy={60 + ((i * 53) % 400)} r={3} fill="#fff" opacity={0.4 + 0.6 * Math.abs(Math.sin(t * 1.5 + i))} />
+				))}
+				<rect x={200} y={0} width={18} height={520} fill="#2A1D4A" />
+				<rect x={0} y={250} width={420} height={18} fill="#2A1D4A" />
+				{/* cortinas que se mecen */}
+				<path d={`M-40 -20 Q${30 + Math.sin(t) * 8} 260 -10 560 L-60 560 L-60 -20 Z`} fill="#C0304A" />
+				<path d={`M460 -20 Q${390 + Math.sin(t + 1) * 8} 260 430 560 L480 560 L480 -20 Z`} fill="#C0304A" />
+			</g>
+			{/* póster de Ari */}
+			<g transform="translate(700 330) rotate(4)">
+				<rect width={300} height={380} rx={8} fill="#FFFFFF" />
+				<rect x={18} y={18} width={264} height={290} fill="#FF9EC7" />
+				<circle cx={150} cy={150} r={70} fill="#FFE1EF" />
+				<path d="M150 120 l-28 -28 a20 20 0 0 1 28 -18 a20 20 0 0 1 28 18z" fill="#FF3B7F" transform={`translate(0 ${Math.sin(t * 3) * 4})`} />
+				<text x={150} y={355} textAnchor="middle" fontSize={44} fontWeight={900} fill="#FF3B7F" fontFamily="Montserrat, sans-serif">
+					ARI
+				</text>
+				<rect x={120} y={-14} width={60} height={26} fill="rgba(255,255,255,0.7)" />
+			</g>
+			{/* calendario con días tachados */}
+			<g transform="translate(560 780)">
+				<rect width={220} height={230} rx={8} fill="#FFFFFF" />
+				<rect width={220} height={56} rx={8} fill="#E5484D" />
+				<text x={110} y={40} textAnchor="middle" fontSize={32} fontWeight={900} fill="#fff" fontFamily="Montserrat, sans-serif">
+					{dia != null ? `DÍA ${dia}` : 'NOV'}
+				</text>
+				{Array.from({length: 20}, (_, i) => (
+					<text key={i} x={22 + (i % 5) * 42} y={90 + Math.floor(i / 5) * 38} fontSize={30} fontWeight={900} fill="#E5484D" fontFamily="sans-serif">
+						✕
+					</text>
+				))}
+			</g>
+		</svg>
+	);
+}
+
+function Frente({t}: {t: number}) {
+	const colores = ['#FF4D6D', '#FFD60A', '#4CC9F0', '#80ED99', '#B517FF', '#FF8C42'];
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			{/* luz del monitor sobre el escritorio */}
+			<ellipse cx={540} cy={1600} rx={520} ry={120} fill="rgba(120,200,255,0.12)" />
+			{/* escritorio */}
+			<rect x={-20} y={1640} width={1120} height={60} rx={10} fill="#2B2238" />
+			<rect x={-20} y={1690} width={1120} height={260} fill="#1E1828" />
+			{/* teclado RGB */}
+			<g transform="translate(250 1590)">
+				<rect width={580} height={70} rx={14} fill="#15121C" />
+				{Array.from({length: 24}, (_, i) => (
+					<rect key={i} x={14 + (i % 12) * 46} y={10 + Math.floor(i / 12) * 28} width={40} height={22} rx={5} fill={colores[Math.floor(i + t * 6) % colores.length]} opacity={0.9} />
+				))}
+			</g>
+			{/* ramen */}
+			<g transform="translate(70 1500)">
+				<path d="M0 60 L130 60 L112 150 L18 150 Z" fill="#FFFFFF" stroke="#D9D3C7" strokeWidth={4} />
+				<rect x={10} y={80} width={110} height={26} fill="#E5484D" />
+				<path d={`M50 60 Q${44 + Math.sin(t * 2) * 6} 20 56 -10`} stroke="rgba(255,255,255,0.5)" strokeWidth={6} fill="none" strokeLinecap="round" />
+				<rect x={84} y={-30} width={8} height={110} rx={4} fill="#C99A5B" transform="rotate(14 88 30)" />
+				<rect x={98} y={-30} width={8} height={110} rx={4} fill="#C99A5B" transform="rotate(20 102 30)" />
+			</g>
+			{/* mouse */}
+			<ellipse cx={920} cy={1630} rx={38} ry={22} fill="#15121C" />
+			<rect x={916} y={1612} width={8} height={14} rx={3} fill={colores[Math.floor(t * 4) % colores.length]} />
+		</svg>
+	);
+}
+
+export function Cuarto({t, parte = 'fondo', dia}: Props) {
+	return parte === 'frente' ? <Frente t={t} /> : <Fondo t={t} dia={dia} />;
+}

package/remotion/motor/escenarios/Noche.tsx

@@ -0,0 +1,163 @@
+// Escenarios nocturnos para historias, 1080×1920:
+//   lugar: 'departamento'  sala oscura: ventana con ciudad, sillón, lámpara y tele que parpadea
+//   lugar: 'tunel'         túnel del metro: arcos, rieles, luces que pasan y el tren que llega (llegar: 'palabra')
+//   lugar: 'pasillo'       pasillo con la puerta: luz bajo la puerta y golpes que la sacuden (golpe: 'palabra')
+import React from 'react';
+
+type Props = {t: number; cuando: (en: unknown) => number; lugar?: 'departamento' | 'tunel' | 'pasillo'; llegar?: string; golpe?: string};
+
+const W = 1080;
+const H = 1920;
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp(x);
+	return c * c * (3 - 2 * c);
+};
+const azar = (n: number) => {
+	const x = Math.sin(n * 91.7) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+function Departamento({t}: {t: number}) {
+	const tele = 0.55 + 0.45 * Math.abs(Math.sin(t * 7) * Math.sin(t * 3.3));
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<rect width={W} height={H} fill="#121A2B" />
+			<rect y={1480} width={W} height={440} fill="#0C111C" />
+			{/* ventana con ciudad */}
+			<g transform="translate(110 520)">
+				<rect width={460} height={560} fill="#1B2A4A" stroke="#0A0F1A" strokeWidth={16} />
+				{Array.from({length: 8}, (_, i) => {
+					const x = 10 + i * 58;
+					const h = 160 + azar(i) * 260;
+					return (
+						<g key={i}>
+							<rect x={x} y={560 - h} width={50} height={h} fill="#0E1730" />
+							{Array.from({length: 10}, (_, j) =>
+								azar(i * 10 + j) > 0.55 ? <rect key={j} x={x + 8 + (j % 3) * 14} y={560 - h + 14 + Math.floor(j / 3) * 26} width={8} height={12} fill="#FFD27A" opacity={0.5 + 0.5 * Math.abs(Math.sin(t + i + j))} /> : null,
+							)}
+						</g>
+					);
+				})}
+				<rect x={222} width={16} height={560} fill="#0A0F1A" />
+			</g>
+			{/* luz de la lámpara */}
+			<circle cx={880} cy={980} r={420} fill="rgba(255,190,110,0.12)" />
+			<rect x={872} y={900} width={16} height={600} fill="#2A2420" />
+			<path d="M800 900 L960 900 L920 800 L840 800 Z" fill="#E8B35C" />
+			<ellipse cx={880} cy={1500} rx={90} ry={16} fill="#1C1814" />
+			{/* tele que parpadea */}
+			<rect x={600} y={1180} width={260} height={160} rx={8} fill="#0A0F1A" />
+			<rect x={612} y={1192} width={236} height={136} fill={`rgba(120,170,255,${0.35 * tele})`} />
+			<circle cx={730} cy={1260} r={360} fill={`rgba(120,170,255,${0.06 * tele})`} />
+			{/* sillón */}
+			<g transform="translate(140 1300)">
+				<rect width={560} height={180} rx={40} fill="#3A2E3A" />
+				<rect y={-120} width={560} height={150} rx={40} fill="#45374A" />
+				<rect x={-30} y={-60} width={90} height={250} rx={36} fill="#3A2E3A" />
+				<rect x={500} y={-60} width={90} height={250} rx={36} fill="#3A2E3A" />
+			</g>
+		</svg>
+	);
+}
+
+function Tunel({t, tTren}: {t: number; tTren: number}) {
+	const k = suave((t - tTren) / 2.4); // el tren se acerca
+	const escala = 0.2 + k * 0.85;
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<radialGradient id="fondoTunel" cx="0.5" cy="0.48" r="0.6">
+					<stop offset="0" stopColor="#2C3446" />
+					<stop offset="1" stopColor="#07090E" />
+				</radialGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#fondoTunel)" />
+			{/* arcos del túnel hacia el fondo */}
+			{Array.from({length: 7}, (_, i) => {
+				const d = ((i + (t * 0.6) % 1) / 7);
+				const s = 0.15 + (1 - d) * 1.1;
+				return <ellipse key={i} cx={540} cy={900} rx={520 * s} ry={600 * s} fill="none" stroke="#3B4560" strokeWidth={10 * s} opacity={0.25 + (1 - d) * 0.6} />;
+			})}
+			{/* luces de pared que pasan */}
+			{Array.from({length: 6}, (_, i) => {
+				const d = ((i / 6 + t * 0.35) % 1);
+				const s = 0.1 + d * 1.2;
+				return (
+					<g key={i} opacity={d}>
+						<circle cx={540 - 470 * s} cy={900 - 120 * s} r={10 * s + 3} fill="#FFE29A" />
+						<circle cx={540 + 470 * s} cy={900 - 120 * s} r={10 * s + 3} fill="#FFE29A" />
+					</g>
+				);
+			})}
+			{/* rieles */}
+			<path d="M520 960 L250 1920 M560 960 L830 1920" stroke="#5A6378" strokeWidth={14} />
+			{Array.from({length: 10}, (_, i) => {
+				const d = (i / 10 + t * 0.5) % 1;
+				const y = 960 + d * d * 960;
+				const a = 30 + d * 420;
+				return <rect key={i} x={540 - a} y={y} width={a * 2} height={6 + d * 18} fill="#2A2F3C" />;
+			})}
+			{/* tren que llega con faros */}
+			{t >= tTren ? (
+				<g transform={`translate(540 ${930 + k * 160}) scale(${escala})`}>
+					<circle r={700} fill="rgba(255,240,200,0.08)" />
+					<rect x={-330} y={-380} width={660} height={700} rx={70} fill="#D9DEE8" />
+					<rect x={-280} y={-310} width={560} height={240} rx={26} fill="#1A2233" />
+					<rect x={-330} y={-40} width={660} height={60} fill="#E5484D" />
+					<text x={0} y={190} textAnchor="middle" fontSize={130} fontWeight={900} fill="#1A2233" fontFamily="Montserrat, sans-serif">
+						B
+					</text>
+					<circle cx={-210} cy={220} r={46} fill="#FFF6C8" />
+					<circle cx={210} cy={220} r={46} fill="#FFF6C8" />
+					<circle cx={-210} cy={220} r={120} fill="rgba(255,246,200,0.25)" />
+					<circle cx={210} cy={220} r={120} fill="rgba(255,246,200,0.25)" />
+				</g>
+			) : null}
+		</svg>
+	);
+}
+
+function Pasillo({t, tGolpe}: {t: number; tGolpe: number}) {
+	// tres golpes: la puerta se sacude y la luz de abajo parpadea
+	const g = t - tGolpe;
+	const golpe = g >= 0 && g < 1.6 ? [0, 0.45, 0.9].reduce((s, d) => s + Math.max(0, 1 - Math.abs(g - d) * 8), 0) : 0;
+	const sacudida = Math.sin(t * 80) * 10 * golpe;
+	const luz = 0.6 + 0.4 * Math.abs(Math.sin(t * 2.3)) - golpe * 0.3;
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<rect width={W} height={H} fill="#151B26" />
+			{/* paredes en perspectiva */}
+			<path d="M0 0 L250 380 L250 1500 L0 1920 Z" fill="#1C2433" />
+			<path d="M1080 0 L830 380 L830 1500 L1080 1920 Z" fill="#1C2433" />
+			<path d="M250 1500 L830 1500 L1080 1920 L0 1920 Z" fill="#2A2018" />
+			{/* tablas del piso */}
+			{Array.from({length: 7}, (_, i) => (
+				<path key={i} d={`M${250 + i * 97} 1500 L${-60 + i * 200} 1920`} stroke="#1E1610" strokeWidth={4} />
+			))}
+			{/* cuadros en la pared */}
+			<rect x={60} y={700} width={120} height={160} fill="#2A3346" stroke="#3A4560" strokeWidth={8} transform="skewY(18)" />
+			<rect x={900} y={980} width={120} height={160} fill="#2A3346" stroke="#3A4560" strokeWidth={8} transform="skewY(-18)" />
+			{/* puerta */}
+			<g transform={`translate(${sacudida} 0)`}>
+				<rect x={320} y={540} width={440} height={960} fill="#0F1520" />
+				<rect x={340} y={560} width={400} height={930} fill="#22314A" stroke="#33466A" strokeWidth={10} />
+				<rect x={380} y={610} width={320} height={360} fill="none" stroke="#33466A" strokeWidth={8} />
+				<rect x={380} y={1030} width={320} height={400} fill="none" stroke="#33466A" strokeWidth={8} />
+				<circle cx={690} cy={1060} r={18} fill="#D9B45A" />
+				<circle cx={540} cy={760} r={14} fill="#0A0E16" stroke="#3A4560" strokeWidth={5} />
+			</g>
+			{/* luz por debajo de la puerta */}
+			<rect x={340} y={1488} width={400} height={12} fill="#FFD66B" opacity={luz} />
+			<path d={`M340 1500 L740 1500 L${900} 1920 L${180} 1920 Z`} fill={`rgba(255,214,107,${0.12 * luz})`} />
+			{/* sombra de pies bajo la puerta */}
+			{g > 0 ? <rect x={500} y={1489} width={80} height={10} fill="#0A0A0A" opacity={0.85} /> : null}
+		</svg>
+	);
+}
+
+export function Noche({t, cuando, lugar = 'departamento', llegar, golpe}: Props) {
+	if (lugar === 'tunel') return <Tunel t={t} tTren={llegar ? cuando(llegar) : 0.3} />;
+	if (lugar === 'pasillo') return <Pasillo t={t} tGolpe={golpe ? cuando(golpe) : 1} />;
+	return <Departamento t={t} />;
+}

package/remotion/motor/escenarios/index.tsx

@@ -0,0 +1,26 @@
+// Escenarios ilustrados incluidos (1080×1920), para que un personaje nunca quede sobre un fondo vacío.
+//   fondo: {tipo: 'escenario', nombre: 'cuarto'}            como fondo de escena (o del estilo)
+//   {tipo: 'escenario', nombre: 'cuarto', parte: 'frente'}   como capa (por ejemplo, el escritorio delante del personaje)
+// Todos se animan con el tiempo de la escena (estrellas, cortinas, luces, tren, golpes en la puerta...).
+import React from 'react';
+import {Bosque} from './Bosque';
+import {Cuarto} from './Cuarto';
+import {Noche} from './Noche';
+
+type P = {t: number; dur: number; cuando: (en: unknown) => number} & Record<string, any>;
+
+export const ESCENARIOS: Record<string, React.FC<P>> = {
+	bosque: (p) => <Bosque {...p} />,
+	cuarto: (p) => <Cuarto {...p} />,
+	departamento: (p) => <Noche {...p} lugar="departamento" />,
+	tunel: (p) => <Noche {...p} lugar="tunel" />,
+	pasillo: (p) => <Noche {...p} lugar="pasillo" />,
+};
+
+export const NOMBRES_ESCENARIOS = Object.keys(ESCENARIOS);
+
+export const Escenario: React.FC<P & {nombre: string}> = ({nombre, ...p}) => {
+	const Comp = ESCENARIOS[nombre];
+	if (!Comp) throw new Error(`Escenario "${nombre}" no existe. Hay: ${NOMBRES_ESCENARIOS.join(', ')}`);
+	return <Comp {...p} />;
+};

package/remotion/motor/fondo.tsx

@@ -4,9 +4,10 @@ import React from 'react';
 import {AbsoluteFill, Img, OffthreadVideo} from 'remotion';
 import {H, W} from '../estilo';
 import type {Fondo as TFondo, Particulas as TParticulas, Tema} from './tema';
-import {azar, recurso} from './util';
+import {azar, cuando, recurso, type CtxEscena} from './util';
+import {Escenario} from './escenarios';
 
-const Base: React.FC<{f: TFondo}> = ({f}) => {
+const Base: React.FC<{f: TFondo; ctx?: CtxEscena}> = ({f, ctx}) => {
 	switch (f.tipo) {
 		case 'color':
 			return <AbsoluteFill style={{background: f.color}} />;
@@ -19,6 +20,17 @@ const Base: React.FC<{f: TFondo}> = ({f}) => {
 					{f.oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${f.oscurecer})`}} /> : null}
 				</AbsoluteFill>
 			);
+		case 'escenario': {
+			// escenario ilustrado animado: usa el tiempo de la escena (sin ctx, por ejemplo en la miniatura de otro lado, queda quieto)
+			const {tipo, nombre, oscurecer, ...props} = f as any;
+			const c = ctx ?? ({t: 0, dur: 1, habla: [0, 1], palabras: [], semilla: '', tema: undefined as any} as CtxEscena);
+			return (
+				<AbsoluteFill>
+					<Escenario nombre={nombre} {...props} t={c.t} dur={c.dur} cuando={(en: unknown) => cuando(en, c)} />
+					{oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${oscurecer})`}} /> : null}
+				</AbsoluteFill>
+			);
+		}
 		case 'video':
 			return (
 				<AbsoluteFill>
@@ -110,8 +122,8 @@ export const Particulas: React.FC<{p: TParticulas; t: number; semilla: string}>
 };
 
 /** Ruido fino (película) o papel: un SVG fractal estable. */
-const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
-	<AbsoluteFill style={{opacity: tipo === 'papel' ? 0.35 : 0.12, mixBlendMode: 'multiply', pointerEvents: 'none'}}>
+export const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
+	<AbsoluteFill style={{opacity: tipo === 'papel' ? 0.22 : 0.1, mixBlendMode: 'multiply', pointerEvents: 'none'}}>
 		<svg width={W} height={H}>
 			<filter id={`tx-${tipo}`}>
 				<feTurbulence type="fractalNoise" baseFrequency={tipo === 'papel' ? 0.9 : 1.6} numOctaves={tipo === 'papel' ? 3 : 2} seed={3} />
@@ -123,12 +135,12 @@ const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
 );
 
 /** El fondo completo de una escena (el de la escena gana sobre el del estilo). */
-export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla: string}> = ({tema, fondo, t, semilla}) => {
+export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla: string; ctx?: CtxEscena}> = ({tema, fondo, t, semilla, ctx}) => {
 	const f = fondo ?? tema.fondo;
 	const foco = tema.foco;
 	return (
 		<AbsoluteFill>
-			<Base f={f} />
+			<Base f={f} ctx={ctx} />
 			{tema.rayos ? <Rayos color={tema.rayos.color} fuerza={tema.rayos.fuerza ?? 1} t={t} /> : null}
 			{foco ? (
 				<AbsoluteFill
@@ -139,7 +151,6 @@ export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla
 					}}
 				/>
 			) : null}
-			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
 			{tema.particulas ? <Particulas p={tema.particulas} t={t} semilla={semilla} /> : null}
 		</AbsoluteFill>
 	);