morfeo 0.3.3 → 0.4.0

package/remotion/motor/historias.tsx

@@ -0,0 +1,440 @@
+// Capas para series interactivas, historias y documental (medidas en los videos de referencia de "elige tú" y de biografías):
+//   bloqueo (pantalla de bloqueo con la hora gigante y notificaciones), llamada (entrante o en curso, con contador),
+//   recuento (lo que votaron en el capítulo anterior), capitulo (fin de capítulo con opciones A/B y horario),
+//   vigilancia (vista de cámara: REC, hora corriendo, esquinas y mira), cintillo (nombre y cargo de una persona),
+//   fecha (tarjeta de año: "1985 · SE CASARON"), calendario (hoja que cambia: "MESES 5") y dividida (pantalla A | B).
+import React from 'react';
+import {clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
+import {Capas} from './capas';
+import {TIERRA} from './tierra-datos';
+import {azar, cuando, type CtxEscena} from './util';
+
+type C = Record<string, any>;
+const desde = (c: C, ctx: CtxEscena) => ctx.t - cuando(c.en, ctx, 0);
+const MESES = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
+const DIAS = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
+
+/** Marco de teléfono sostenido (sin mano: solo el aparato). `ancho` en px. */
+const Aparato: React.FC<{ancho: number; children: React.ReactNode; fondo?: string}> = ({ancho, children, fondo}) => {
+	const alto = ancho * 2.05;
+	return (
+		<div style={{position: 'relative', width: ancho, height: alto, borderRadius: ancho * 0.13, background: '#0D0D10', padding: ancho * 0.03, boxShadow: '0 30px 60px rgba(0,0,0,0.5), inset 0 0 0 3px #2A2A30'}}>
+			<div style={{position: 'relative', width: '100%', height: '100%', borderRadius: ancho * 0.105, overflow: 'hidden', background: fondo ?? 'linear-gradient(170deg, #4A2C6E 0%, #D96B4A 55%, #F2B45C 75%, #2B2340 100%)'}}>
+				{children}
+				<div style={{position: 'absolute', top: ancho * 0.035, left: '50%', transform: 'translateX(-50%)', width: ancho * 0.3, height: ancho * 0.075, borderRadius: 99, background: '#000'}} />
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Pantalla de bloqueo: fecha, hora gigante (y año abajo si lo das: los videos de viajes en el tiempo lo usan) y
+ * notificaciones que entran en su palabra. `hora: '18:40'`, `fecha: 'lunes, 10 de noviembre'`, `anio: 2031`,
+ * `notificaciones: [{app: 'Mensajes', titulo: 'Tú', texto: 'No llames a casa.', en: 'vibra'}]`, `fondo` (CSS).
+ */
+export const Bloqueo: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 520;
+	const notifs: C[] = c.notificaciones ?? [];
+	// el año puede "saltar" de uno a otro: anio: [2026, 2031] con anioEn
+	const anios = Array.isArray(c.anio) ? c.anio : c.anio != null ? [c.anio] : [];
+	const cambio = anios.length > 1 ? clamp((ctx.t - cuando(c.anioEn, ctx, 0.6)) / 0.35) : 1;
+	const anio = anios.length > 1 ? (cambio < 0.5 ? anios[0] : anios[anios.length - 1]) : anios[0];
+	const sacudida = anios.length > 1 && cambio > 0 && cambio < 1 ? Math.sin(cambio * 40) * 6 : 0;
+	return (
+		<Aparato ancho={ancho} fondo={c.fondo}>
+			<div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: ancho * 0.2, color: '#FFFFFF', fontFamily: 'Montserrat, sans-serif', textShadow: '0 2px 12px rgba(0,0,0,0.35)'}}>
+				<div style={{fontSize: ancho * 0.05, fontWeight: 600, opacity: 0.9}}>{c.fecha ?? 'lunes, 10 de noviembre'}</div>
+				<div style={{fontSize: ancho * 0.3, fontWeight: 800, letterSpacing: -ancho * 0.01, lineHeight: 1}}>{c.hora ?? '18:40'}</div>
+				{anio != null ? (
+					<div style={{marginTop: ancho * 0.02, fontSize: ancho * 0.085, fontWeight: 900, letterSpacing: ancho * 0.02, padding: `${ancho * 0.01}px ${ancho * 0.05}px`, borderRadius: ancho * 0.03, background: cambio >= 1 && anios.length > 1 ? 'rgba(229,72,77,0.85)' : 'rgba(0,0,0,0.25)', transform: `translateX(${sacudida}px)`}}>
+						{anio}
+					</div>
+				) : null}
+				<div style={{marginTop: 'auto', marginBottom: ancho * 0.12, width: '88%', display: 'flex', flexDirection: 'column', gap: ancho * 0.025}}>
+					{notifs.map((n, i) => {
+						const k = clamp((ctx.t - cuando(n.en, ctx, 0.4 + i * 0.5)) / 0.35);
+						if (k <= 0) return null;
+						return (
+							<div key={i} style={{opacity: k, transform: `translateY(${(1 - easeOut(k)) * 30}px) scale(${lerp(0.94, 1, easeOut(k))})`, background: 'rgba(245,245,250,0.82)', color: '#111', borderRadius: ancho * 0.05, padding: `${ancho * 0.03}px ${ancho * 0.04}px`, textShadow: 'none'}}>
+								<div style={{fontSize: ancho * 0.034, fontWeight: 700, opacity: 0.6, textTransform: 'uppercase', letterSpacing: 1}}>{n.app ?? 'Mensajes'}</div>
+								<div style={{fontSize: ancho * 0.045, fontWeight: 800}}>{n.titulo}</div>
+								<div style={{fontSize: ancho * 0.045, fontWeight: 500, lineHeight: 1.25}}>{n.texto}</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</Aparato>
+	);
+};
+
+/**
+ * Llamada en el teléfono. `estado: 'entrante'` (botones colgar/contestar que laten) o `'curso'` (contador que corre
+ * desde `desde` segundos y onda de voz). `'terminada'` muestra "Llamada finalizada" y la duración fija. `nombre`, `numero`.
+ */
+export const Llamada: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 520;
+	const t = Math.max(0, desde(c, ctx));
+	const estado = c.estado ?? 'entrante';
+	const seg = estado === 'terminada' ? c.duracion ?? 33 : (c.desde ?? 0) + Math.floor(t);
+	const mmss = `${Math.floor(seg / 60)}:${String(seg % 60).padStart(2, '0')}`;
+	const late = 1 + Math.sin(t * 7) * 0.06;
+	return (
+		<Aparato ancho={ancho} fondo={c.fondo ?? 'linear-gradient(180deg, #1C2238 0%, #0B0E1A 100%)'}>
+			<div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: ancho * 0.22, color: '#FFFFFF', fontFamily: 'Montserrat, sans-serif'}}>
+				{estado === 'entrante' && c.aviso !== false ? <div style={{background: '#E5484D', fontWeight: 800, fontSize: ancho * 0.04, padding: `${ancho * 0.008}px ${ancho * 0.03}px`, borderRadius: 6, marginBottom: ancho * 0.03, letterSpacing: 1}}>{c.aviso ?? 'LLAMADA ENTRANTE'}</div> : null}
+				<div style={{width: ancho * 0.26, height: ancho * 0.26, borderRadius: '50%', background: '#8E93A6', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', overflow: 'hidden'}}>
+					<div style={{width: ancho * 0.12, height: ancho * 0.12, borderRadius: '50%', background: '#D9DCE5', marginBottom: ancho * 0.015, boxShadow: `0 ${ancho * 0.1}px 0 ${ancho * 0.05}px #D9DCE5`}} />
+				</div>
+				<div style={{fontSize: ancho * 0.1, fontWeight: 800, marginTop: ancho * 0.04}}>{c.nombre ?? 'Desconocido'}</div>
+				<div style={{fontSize: ancho * 0.042, opacity: 0.7}}>{estado === 'terminada' ? 'Llamada finalizada' : estado === 'curso' ? mmss : c.numero ?? 'móvil'}</div>
+				{estado === 'terminada' ? <div style={{fontSize: ancho * 0.2, fontWeight: 800, marginTop: ancho * 0.08}}>{mmss}</div> : null}
+				{estado === 'curso' ? (
+					<div style={{display: 'flex', alignItems: 'center', gap: 4, height: ancho * 0.12, marginTop: ancho * 0.08}}>
+						{Array.from({length: 22}, (_, i) => (
+							<div key={i} style={{width: 4, borderRadius: 2, background: '#FFFFFF', height: `${20 + 80 * Math.abs(Math.sin(t * 6 + i * 0.9) * azar(`onda${i}`))}%`, opacity: 0.85}} />
+						))}
+					</div>
+				) : null}
+				<div style={{marginTop: 'auto', marginBottom: ancho * 0.16, display: 'flex', gap: ancho * 0.22}}>
+					{(estado === 'entrante' ? ['#E5484D', '#30A46C'] : estado === 'curso' ? ['#E5484D'] : []).map((col, i) => (
+						<div key={i} style={{width: ancho * 0.17, height: ancho * 0.17, borderRadius: '50%', background: col, transform: `scale(${estado === 'entrante' && i === 1 ? late : 1})`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 ${estado === 'entrante' && i === 1 ? 30 : 0}px ${col}`}}>
+							<div style={{width: ancho * 0.08, height: ancho * 0.03, borderRadius: 99, background: '#FFFFFF', transform: i === 0 ? 'rotate(0deg)' : 'rotate(-35deg)'}} />
+						</div>
+					))}
+				</div>
+			</div>
+		</Aparato>
+	);
+};
+
+/**
+ * Recuento de la votación del capítulo anterior: "VOTACIÓN · CAPÍTULO 1 / LA MAYORÍA DE USTEDES VOTÓ" y barras
+ * que se llenan; la ganadora en color. `opciones: [{texto: 'SÍ', sub: 'no tomas el metro', valor: 90}]`.
+ */
+export const Recuento: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = desde(c, ctx);
+	const ops: C[] = c.opciones ?? [];
+	const max = Math.max(...ops.map((o) => o.valor ?? 0));
+	const color = c.color ?? '#E5484D';
+	return (
+		<div style={{width: c.ancho ?? 820, fontFamily: 'Montserrat, sans-serif', color: '#FFFFFF'}}>
+			<div style={{textAlign: 'center', fontSize: 26, letterSpacing: 6, opacity: 0.6, fontWeight: 600}}>{c.cabecera ?? 'VOTACIÓN · CAPÍTULO 1'}</div>
+			<div style={{textAlign: 'center', fontSize: 62, fontWeight: 900, lineHeight: 1.08, margin: '18px 0 44px'}}>{c.titulo ?? 'LA MAYORÍA DE USTEDES VOTÓ'}</div>
+			{ops.map((o, i) => {
+				const k = easeOut(clamp((t - 0.35 - i * 0.18) / 1));
+				const gana = (o.valor ?? 0) === max;
+				return (
+					<div key={i} style={{marginBottom: 38, opacity: gana ? 1 : 0.55}}>
+						<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
+							<span style={{fontSize: 54, fontWeight: 900}}>{o.texto}</span>
+							<span style={{fontSize: 46, fontWeight: 900, color: gana ? color : '#FFFFFF'}}>{Math.round((o.valor ?? 0) * k)}%</span>
+						</div>
+						<div style={{height: 14, borderRadius: 99, background: 'rgba(255,255,255,0.14)', marginTop: 10}}>
+							<div style={{width: `${(o.valor ?? 0) * k}%`, height: '100%', borderRadius: 99, background: gana ? '#FFFFFF' : 'rgba(255,255,255,0.5)'}} />
+						</div>
+						{o.sub ? <div style={{fontSize: 26, opacity: 0.6, marginTop: 8}}>{o.sub}</div> : null}
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+/**
+ * Fin de capítulo: nombre de la serie, "CAPÍTULO 2", la pregunta y dos (o más) opciones como botones, "comenta tu
+ * opción · la más votada gana" y el botón de seguir con el horario del siguiente.
+ * `serie`, `capitulo`, `pregunta`, `opciones: [{texto: 'ABRIR', sub: 'le abres la puerta'}]`, `siguiente: 'CAPÍTULO 3'`, `horario`.
+ */
+export const Capitulo: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = desde(c, ctx);
+	const ops: C[] = c.opciones ?? [{texto: 'A'}, {texto: 'B'}];
+	const color = c.color ?? '#E5484D';
+	const pasa = (d: number) => easeOut(clamp((t - d) / 0.4));
+	return (
+		<div style={{width: c.ancho ?? 860, fontFamily: 'Montserrat, sans-serif', color: '#FFFFFF', textAlign: 'center'}}>
+			<div style={{opacity: pasa(0), fontSize: 30, fontWeight: 900, letterSpacing: 6, color}}>{c.serie ?? 'MI SERIE'}</div>
+			<div style={{opacity: pasa(0.1) * 0.6, fontSize: 22, letterSpacing: 8, marginTop: 6}}>{(c.capitulo ?? 'CAPÍTULO 1').toUpperCase()}</div>
+			<div style={{opacity: pasa(0.25), transform: `translateY(${(1 - pasa(0.25)) * 20}px)`, fontSize: 74, fontWeight: 900, lineHeight: 1.05, margin: '40px 0 46px'}}>{c.pregunta ?? '¿QUÉ HACES?'}</div>
+			<div style={{display: 'flex', gap: 28, justifyContent: 'center'}}>
+				{ops.map((o, i) => (
+					<div key={i} style={{opacity: pasa(0.5 + i * 0.12), transform: `scale(${resorte(pasa(0.5 + i * 0.12), 0.3)})`, flex: 1, maxWidth: 380}}>
+						<div style={{border: `4px solid ${i === 0 ? '#FFFFFF' : color}`, color: i === 0 ? '#FFFFFF' : color, borderRadius: 99, padding: '18px 10px', fontSize: 40, fontWeight: 900}}>{o.texto}</div>
+						{o.sub ? <div style={{fontSize: 24, opacity: 0.6, marginTop: 10}}>{o.sub}</div> : null}
+					</div>
+				))}
+			</div>
+			<div style={{opacity: pasa(0.9) * 0.6, fontSize: 22, letterSpacing: 3, marginTop: 40}}>{c.pie ?? 'COMENTA TU OPCIÓN · LA MÁS VOTADA GANA'}</div>
+			<div style={{opacity: pasa(1.1), display: 'inline-block', marginTop: 34, background: color, borderRadius: 99, padding: '18px 44px', fontSize: 32, fontWeight: 900, boxShadow: `0 0 ${20 + 14 * Math.sin(t * 4)}px ${color}`}}>
+				SÍGUEME PARA EL {(c.siguiente ?? 'SIGUIENTE CAPÍTULO').toUpperCase()}
+			</div>
+			{c.horario ? <div style={{opacity: pasa(1.2) * 0.65, fontSize: 24, marginTop: 14}}>{c.horario}</div> : null}
+		</div>
+	);
+};
+
+/**
+ * Vista de cámara de vigilancia sobre toda la pantalla: REC que parpadea, fecha y hora corriendo, esquinas, mira al
+ * centro y zoom. `hora: '23:47:14'`, `fecha`, `etiqueta: 'CAM 03'`, `mira: false` la quita. Va encima del mundo.
+ */
+export const Vigilancia: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = Math.max(0, desde(c, ctx));
+	const [h, m, s] = String(c.hora ?? '23:47:14').split(':').map(Number);
+	const total = (h || 0) * 3600 + (m || 0) * 60 + (s || 0) + Math.floor(t);
+	const hh = (n: number) => String(n).padStart(2, '0');
+	const reloj = `${hh(Math.floor(total / 3600) % 24)}:${hh(Math.floor(total / 60) % 60)}:${hh(total % 60)}`;
+	const color = c.color ?? '#FFFFFF';
+	const esquina = (st: React.CSSProperties) => <div style={{position: 'absolute', width: 90, height: 90, borderColor: color, borderStyle: 'solid', borderWidth: 0, ...st}} />;
+	return (
+		<div style={{position: 'relative', width: 1080, height: 1920, fontFamily: 'JetBrains Mono, monospace', color, pointerEvents: 'none'}}>
+			<div style={{position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 5px)', mixBlendMode: 'overlay'}} />
+			<div style={{position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%)'}} />
+			{esquina({left: 70, top: 260, borderLeftWidth: 6, borderTopWidth: 6})}
+			{esquina({right: 70, top: 260, borderRightWidth: 6, borderTopWidth: 6})}
+			{esquina({left: 70, bottom: 260, borderLeftWidth: 6, borderBottomWidth: 6})}
+			{esquina({right: 70, bottom: 260, borderRightWidth: 6, borderBottomWidth: 6})}
+			<div style={{position: 'absolute', left: 100, top: 290, display: 'flex', alignItems: 'center', gap: 14, fontSize: 34, fontWeight: 800}}>
+				<span style={{width: 22, height: 22, borderRadius: '50%', background: '#FF3B30', opacity: Math.floor(t * 2) % 2 ? 0.25 : 1}} /> REC
+			</div>
+			<div style={{position: 'absolute', right: 100, top: 290, fontSize: 30, fontWeight: 700, textAlign: 'right'}}>
+				{c.etiqueta ?? 'CAM 03'}
+				<div style={{fontSize: 26, opacity: 0.8}}>{c.fecha ?? ''}</div>
+			</div>
+			<div style={{position: 'absolute', right: 100, bottom: 290, fontSize: 36, fontWeight: 800}}>{reloj}</div>
+			<div style={{position: 'absolute', left: 100, bottom: 290, fontSize: 24, opacity: 0.8}}>ZOOM {(c.zoom ?? 3.8).toFixed(1)}x</div>
+			{c.mira !== false ? (
+				<div style={{position: 'absolute', left: 540 + (c.miraX ?? 0), top: 960 + (c.miraY ?? 0), transform: 'translate(-50%, -50%)'}}>
+					<div style={{width: 120, height: 120, borderRadius: '50%', border: `3px solid ${color}`, opacity: 0.9}} />
+					<div style={{position: 'absolute', left: -30, top: 59, width: 180, height: 3, background: color}} />
+					<div style={{position: 'absolute', left: 59, top: -30, width: 3, height: 180, background: color}} />
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+/**
+ * Cintillo de persona (documental): nombre en grande y cargo abajo, con barra de color a la izquierda; entra
+ * deslizándose. `nombre`, `cargo`, `color`. Pensado abajo a la izquierda (x ~ 300, y ~ 1560).
+ */
+export const Cintillo: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const k = easeIO(clamp(desde(c, ctx) / 0.45));
+	const color = c.color ?? ctx.tema.colores.acento;
+	return (
+		<div style={{display: 'flex', alignItems: 'stretch', fontFamily: 'Montserrat, sans-serif', clipPath: `inset(0 ${(1 - k) * 100}% 0 0)`}}>
+			<div style={{width: 12, background: color}} />
+			<div style={{background: 'rgba(12,12,16,0.88)', padding: '14px 28px 16px 22px'}}>
+				<div style={{color: '#FFFFFF', fontWeight: 900, fontSize: c.tam ?? 56, lineHeight: 1.05}}>{c.nombre}</div>
+				{c.cargo ? <div style={{color: 'rgba(255,255,255,0.7)', fontWeight: 600, fontSize: (c.tam ?? 56) * 0.48, marginTop: 6, textTransform: 'uppercase', letterSpacing: 2}}>{c.cargo}</div> : null}
+			</div>
+		</div>
+	);
+};
+
+/** Tarjeta de año: el año en grande (dorado por defecto) y qué pasó abajo: "1985 · SE CASARON". El año cuenta hacia su valor. */
+export const Fecha: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = desde(c, ctx);
+	const k = easeOut(clamp(t / 0.7));
+	const fin = Number(c.anio ?? c.valor ?? 2000);
+	const ini = c.de != null ? Number(c.de) : fin;
+	const anio = Math.round(lerp(ini, fin, k));
+	const color = c.color ?? '#E8C66A';
+	return (
+		<div style={{transform: `scale(${resorte(clamp(t / 0.4), 0.3)})`, background: 'rgba(14,12,10,0.86)', border: `4px solid ${color}`, borderRadius: 14, padding: '10px 34px 14px', textAlign: 'center', fontFamily: 'Montserrat, sans-serif', boxShadow: '0 16px 34px rgba(0,0,0,0.45)'}}>
+			<div style={{color, fontWeight: 900, fontSize: c.tam ?? 96, lineHeight: 1}}>{c.texto ?? anio}</div>
+			{c.pie ? <div style={{color: '#FFFFFF', fontWeight: 800, fontSize: (c.tam ?? 96) * 0.26, letterSpacing: 2, textTransform: 'uppercase', marginTop: 4}}>{c.pie}</div> : null}
+		</div>
+	);
+};
+
+/**
+ * Calendario de hoja: encabezado de color con el título ("MESES", "DÍA", un mes) y el número grande, que cambia de
+ * `de` a `a` volteando la hoja. `titulo`, `de`, `a`, `color`.
+ */
+export const Calendario: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = desde(c, ctx);
+	const de = Number(c.de ?? c.a ?? c.valor ?? 1);
+	const a = Number(c.a ?? c.valor ?? de);
+	const pasos = Math.abs(a - de);
+	const dur = c.duracion ?? Math.min(1.6, 0.25 * pasos + 0.3);
+	const k = clamp((t - 0.3) / dur);
+	const v = pasos ? Math.round(lerp(de, a, easeOut(k))) : a;
+	// la hoja se voltea cada vez que cambia el número
+	const frac = pasos ? ((easeOut(k) * pasos) % 1) : 1;
+	const tam = c.tam ?? 220;
+	const color = c.color ?? '#E5484D';
+	return (
+		<div style={{width: tam, borderRadius: tam * 0.08, overflow: 'hidden', background: '#FFFFFF', boxShadow: '0 16px 34px rgba(0,0,0,0.35)', fontFamily: 'Montserrat, sans-serif', textAlign: 'center', transform: `scale(${resorte(clamp(t / 0.35), 0.3)})`}}>
+			<div style={{background: color, color: '#FFFFFF', fontWeight: 900, fontSize: tam * 0.13, padding: `${tam * 0.04}px 0`, letterSpacing: 2}}>{(c.titulo ?? 'DÍA').toUpperCase()}</div>
+			<div style={{fontWeight: 900, fontSize: tam * 0.46, color: '#1B1B1F', lineHeight: 1.25, transform: `perspective(400px) rotateX(${k < 1 && pasos ? (1 - frac) * 50 : 0}deg)`}}>{v}</div>
+		</div>
+	);
+};
+
+/**
+ * Pantalla dividida en dos (lado a lado o arriba/abajo): cada mitad tiene su etiqueta y sus capas, con una línea
+ * al centro. `izq: {etiqueta: 'CINTA', capas: [...]}`, `der: {...}`, `vertical: true` para arriba/abajo, `fondo`.
+ * Las capas de cada mitad usan coordenadas de su mitad (540×1920 o 1080×960).
+ */
+export const Dividida: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const k = easeIO(clamp(desde(c, ctx) / 0.5));
+	const vertical = !!c.vertical;
+	const W2 = vertical ? 1080 : 540;
+	const H2 = vertical ? 960 : 1920;
+	const mitad = (m: C | undefined, i: number) => (
+		<div key={i} style={{position: 'absolute', left: vertical ? 0 : i * 540, top: vertical ? i * 960 : 0, width: W2, height: H2, overflow: 'hidden', background: m?.fondo ?? c.fondo ?? (i === 0 ? '#1A1C24' : '#22252F'), clipPath: vertical ? `inset(0 ${(1 - k) * 100}% 0 0)` : `inset(${(1 - k) * 100}% 0 0 0)`}}>
+			<div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: 1920, transform: vertical ? `translateY(${-480}px)` : `translateX(${-270}px)`}}>
+				<Capas capas={(m?.capas ?? []) as any} ctx={ctx} />
+			</div>
+			{m?.etiqueta ? (
+				<div style={{position: 'absolute', left: '50%', top: vertical ? 40 : (c.etiquetaY ?? 430), transform: 'translateX(-50%)', background: m.color ?? '#1B1B1F', color: '#FFFFFF', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 34, letterSpacing: 3, padding: '8px 22px', borderRadius: 10}}>{m.etiqueta}</div>
+			) : null}
+		</div>
+	);
+	return (
+		<div style={{position: 'relative', width: 1080, height: 1920}}>
+			{mitad(c.izq ?? c.arriba, 0)}
+			{mitad(c.der ?? c.abajo, 1)}
+			<div style={{position: 'absolute', background: c.linea ?? '#FFFFFF', ...(vertical ? {left: 0, top: 957, width: 1080 * k, height: 6} : {left: 537, top: 0, width: 6, height: 1920 * k})}} />
+		</div>
+	);
+};
+
+/**
+ * Globo terráqueo que gira hasta dejar `lat`/`lon` al frente y clava un pin con su etiqueta ("Taiwán · 1963").
+ * Proyección ortográfica de los contornos de Natural Earth (dominio público). `tam`, `color` (del pin), `girar: false`
+ * lo deja quieto. Pensado como plano de apertura de una biografía o un "¿dónde pasó?".
+ */
+export const Tierra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const t = desde(c, ctx);
+	const tam = c.tam ?? 760;
+	const R = tam / 2 - 30;
+	const k = c.girar === false ? 1 : easeIO(clamp(t / (c.duracion ?? 1.8)));
+	const lon0 = Number(c.lon) + lerp(-110, 0, k) + (c.girar === false ? 0 : t * 1.5 * (1 - k));
+	const lat0 = lerp(0, Math.max(-50, Math.min(50, Number(c.lat))) * 0.7, k);
+	const rad = Math.PI / 180;
+	const [sl0, cl0] = [Math.sin(lat0 * rad), Math.cos(lat0 * rad)];
+	const proy = (lon: number, lat: number): [number, number, number] => {
+		const dl = (lon - lon0) * rad;
+		const [sl, cl] = [Math.sin(lat * rad), Math.cos(lat * rad)];
+		const x = cl * Math.sin(dl);
+		const y = cl0 * sl - sl0 * cl * Math.cos(dl);
+		const z = sl0 * sl + cl0 * cl * Math.cos(dl); // > 0: cara visible
+		return [x, y, z];
+	};
+	const cx = tam / 2;
+	// Recorte en el horizonte: cada polígono se camina arista por arista; donde cruza al otro lado se corta en el
+	// borde del disco y el tramo de atrás se reemplaza por el arco del borde. La Antártida solo si se mira hacia el sur.
+	const borde = (a: [number, number, number], b: [number, number, number]): [number, number] => {
+		const f = a[2] / (a[2] - b[2]);
+		const x = a[0] + (b[0] - a[0]) * f;
+		const y = a[1] + (b[1] - a[1]) * f;
+		const n = Math.hypot(x, y) || 1;
+		return [x / n, y / n];
+	};
+	const P = (x: number, y: number) => `${(cx + x * R).toFixed(1)} ${(cx - y * R).toFixed(1)}`;
+	const caminos = TIERRA.map((poly) => {
+		if (lat0 > -30 && poly.every((v, i) => i % 2 === 0 || v < -60)) return '';
+		const pts: [number, number, number][] = [];
+		for (let i = 0; i < poly.length; i += 2) pts.push(proy(poly[i], poly[i + 1]));
+		if (!pts.some((p) => p[2] > 0)) return '';
+		// empezar en un punto visible para que el camino abra bien
+		const i0 = pts.findIndex((p) => p[2] > 0);
+		const ord = [...pts.slice(i0), ...pts.slice(0, i0)];
+		let d = `M${P(ord[0][0], ord[0][1])}`;
+		let salida: [number, number] | null = null;
+		for (let i = 1; i <= ord.length; i++) {
+			const a = ord[i - 1];
+			const b = ord[i % ord.length];
+			if (a[2] > 0 && b[2] > 0) d += `L${P(b[0], b[1])}`;
+			else if (a[2] > 0 && b[2] <= 0) {
+				salida = borde(a, b);
+				d += `L${P(salida[0], salida[1])}`;
+			} else if (a[2] <= 0 && b[2] > 0) {
+				const entrada = borde(a, b);
+				if (salida) {
+					// arco por el borde: el sentido corto entre la salida y la entrada
+					const cruz = salida[0] * entrada[1] - salida[1] * entrada[0];
+					d += `A${R} ${R} 0 0 ${cruz > 0 ? 0 : 1} ${P(entrada[0], entrada[1])}`;
+				} else d += `L${P(entrada[0], entrada[1])}`;
+				d += `L${P(b[0], b[1])}`;
+				salida = null;
+			}
+		}
+		return d + 'Z';
+	}).filter(Boolean);
+	const [px, py, pz] = proy(Number(c.lon), Number(c.lat));
+	const pin = clamp((t - (c.girar === false ? 0.2 : (c.duracion ?? 1.8) * 0.85)) / 0.35);
+	const X = cx + px * R;
+	const Y = cx - py * R;
+	const color = c.color ?? '#E5484D';
+	return (
+		<div style={{position: 'relative', width: tam, height: tam}}>
+			<svg width={tam} height={tam} style={{overflow: 'visible'}}>
+				<defs>
+					<radialGradient id="tierra-mar" cx="38%" cy="32%" r="75%">
+						<stop offset="0" stopColor="#3C8DE0" />
+						<stop offset="0.65" stopColor="#1C4FA3" />
+						<stop offset="1" stopColor="#0B2457" />
+					</radialGradient>
+					<radialGradient id="tierra-luz" cx="35%" cy="30%" r="80%">
+						<stop offset="0" stopColor="rgba(255,255,255,0.28)" />
+						<stop offset="0.5" stopColor="rgba(255,255,255,0)" />
+						<stop offset="1" stopColor="rgba(0,0,20,0.55)" />
+					</radialGradient>
+					<clipPath id="tierra-disco">
+						<circle cx={cx} cy={cx} r={R} />
+					</clipPath>
+				</defs>
+				<circle cx={cx} cy={cx} r={R + 18} fill="none" stroke="rgba(120,190,255,0.25)" strokeWidth={22} style={{filter: 'blur(8px)'}} />
+				<circle cx={cx} cy={cx} r={R} fill="url(#tierra-mar)" />
+				<g clipPath="url(#tierra-disco)">
+					{caminos.map((d, i) => (
+						<path key={i} d={d} fill="#6FBF73" stroke="#4E9A55" strokeWidth={1.2} strokeLinejoin="round" />
+					))}
+				</g>
+				<circle cx={cx} cy={cx} r={R} fill="url(#tierra-luz)" />
+				{pin > 0 && pz > 0 ? (
+					<g transform={`translate(${X} ${Y}) scale(${resorte(pin, 0.3)})`}>
+						<circle r={26 + 30 * ((t * 1.2) % 1)} fill="none" stroke={color} strokeWidth={4} opacity={1 - ((t * 1.2) % 1)} />
+						<path d="M0 0 C -16 -22 -22 -34 -22 -46 A 22 22 0 1 1 22 -46 C 22 -34 16 -22 0 0 Z" fill={color} stroke="#FFFFFF" strokeWidth={4} />
+						<circle cy={-46} r={8} fill="#FFFFFF" />
+					</g>
+				) : null}
+			</svg>
+			{c.etiqueta && pin > 0 && pz > 0 ? (
+				<div style={{position: 'absolute', left: X, top: Y + 18, transform: `translateX(-50%) scale(${resorte(clamp((t - (c.duracion ?? 1.8) * 0.85 - 0.15) / 0.35), 0.3)})`, background: color, color: '#FFFFFF', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: tam * 0.045, padding: '6px 18px', borderRadius: 10, whiteSpace: 'nowrap', boxShadow: '0 8px 18px rgba(0,0,0,0.35)'}}>
+					{c.etiqueta}
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+export const HISTORIAS = ['tierra', 'bloqueo', 'llamada', 'recuento', 'capitulo', 'vigilancia', 'cintillo', 'fecha', 'calendario', 'dividida'];
+export const Historias: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	switch (c.tipo) {
+		case 'tierra':
+			return <Tierra c={c} ctx={ctx} />;
+		case 'bloqueo':
+			return <Bloqueo c={c} ctx={ctx} />;
+		case 'llamada':
+			return <Llamada c={c} ctx={ctx} />;
+		case 'recuento':
+			return <Recuento c={c} ctx={ctx} />;
+		case 'capitulo':
+			return <Capitulo c={c} ctx={ctx} />;
+		case 'vigilancia':
+			return <Vigilancia c={c} ctx={ctx} />;
+		case 'cintillo':
+			return <Cintillo c={c} ctx={ctx} />;
+		case 'fecha':
+			return <Fecha c={c} ctx={ctx} />;
+		case 'calendario':
+			return <Calendario c={c} ctx={ctx} />;
+		case 'dividida':
+			return <Dividida c={c} ctx={ctx} />;
+		default:
+			return null;
+	}
+};

package/remotion/motor/modos.tsx

@@ -0,0 +1,120 @@
+// Modos de imagen por escena: la imagen (mundo, fondo y capas) cambia a rayos X, plano azul (blueprint) u holograma
+// justo en una palabra, como en los videos que "abren" el cuerpo o una máquina para explicar lo de adentro.
+// Se hace con filtros y capas de mezcla sobre lo ya dibujado: funciona igual en 2D, en 3D (el canvas también se
+// filtra) y con componentes propios, sin dibujar nada dos veces.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {H, W, clamp, easeIO} from '../estilo';
+import type {Datos} from '../tipos';
+import {azar, cuando, type CtxEscena} from './util';
+
+export const MODOS = ['rayosx', 'plano', 'holograma'] as const;
+export type ModoImagen = (typeof MODOS)[number];
+
+const ENTRADA = 0.4; // s del barrido de entrada
+
+/**
+ * Modo activo en el instante `t` de la escena `si` y cuánto lleva (k de 0 a 1 = barrido de entrada).
+ * Si la escena anterior terminó en el mismo modo y esta no dice `modoEn`, sigue sin volver a barrer.
+ */
+export function modoDe(d: Datos, si: number, t: number): {modo: ModoImagen; k: number; sale: number} | null {
+	const e = d.escenas[si];
+	const modo = e?.p.modo as ModoImagen | undefined;
+	if (!modo || !MODOS.includes(modo)) return null;
+	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: {} as any, semilla: ''};
+	const prev = si > 0 ? d.escenas[si - 1] : null;
+	const sigue = prev?.p.modo === modo && prev.p.modoHasta == null && e.p.modoEn == null;
+	const t0 = sigue ? -ENTRADA : cuando(e.p.modoEn ?? 0, ctx, 0);
+	if (t < t0) return null;
+	// `modoHasta`: vuelve a la imagen normal en esa palabra (con el mismo barrido al revés)
+	let sale = 0;
+	if (e.p.modoHasta != null) {
+		const t1 = cuando(e.p.modoHasta, ctx, e.dur);
+		if (t >= t1 + ENTRADA) return null;
+		sale = clamp((t - t1) / ENTRADA);
+	}
+	return {modo, k: clamp((t - t0) / ENTRADA), sale};
+}
+
+/**
+ * Filtro CSS de cada modo, con su intensidad `q` (0 = imagen normal, 1 = modo completo). En looks claros (cielo,
+ * papel) se invierte la imagen para que el fondo quede oscuro y lo sólido brille; en looks oscuros no hace falta.
+ */
+function filtro(modo: ModoImagen, q: number, invertir: boolean): string {
+	if (q <= 0) return 'none';
+	const inv = invertir ? q : 0;
+	if (modo === 'rayosx') return `grayscale(${q}) invert(${0.92 * inv}) contrast(${1 + (invertir ? 0.45 : 0.6) * q}) brightness(${1 + (invertir ? -0.08 : 0.18) * q})`;
+	if (modo === 'plano') return `grayscale(${q}) invert(${inv}) contrast(${1 + 0.9 * q}) brightness(${1 + 0.1 * q})`;
+	return `grayscale(${q}) invert(${0.88 * inv}) contrast(${1 + 0.35 * q}) brightness(${1 + 0.1 * q})`;
+}
+
+const TINTE: Record<ModoImagen, {color: string; mezcla: React.CSSProperties['mixBlendMode']}> = {
+	// lo claro queda cian brillante sobre negro
+	rayosx: {color: '#38D4FF', mezcla: 'color'},
+	// fondo azul de plano con líneas blancas: el azul entra por "screen" (lo negro se vuelve azul, lo blanco sigue blanco)
+	plano: {color: '#1747B8', mezcla: 'screen'},
+	// azul translúcido sobre oscuro, como proyectado
+	holograma: {color: '#3D8BFF', mezcla: 'color'},
+};
+
+/** Rejilla fina + gruesa (plano y holograma). */
+const Rejilla: React.FC<{color: string; fuerza: number; paso?: number}> = ({color, fuerza, paso = 60}) => (
+	<AbsoluteFill
+		style={{
+			opacity: fuerza,
+			backgroundImage: [
+				`linear-gradient(${color} 2px, transparent 2px)`,
+				`linear-gradient(90deg, ${color} 2px, transparent 2px)`,
+				`linear-gradient(${color} 1px, transparent 1px)`,
+				`linear-gradient(90deg, ${color} 1px, transparent 1px)`,
+			].join(','),
+			backgroundSize: `${paso * 5}px ${paso * 5}px, ${paso * 5}px ${paso * 5}px, ${paso}px ${paso}px, ${paso}px ${paso}px`,
+			backgroundPosition: '-1px -1px',
+		}}
+	/>
+);
+
+/** Envuelve la imagen del video (mundo + escena) y le aplica el modo de la escena actual. */
+export const Modo: React.FC<{d: Datos; si: number; t: number; T: number; claro: boolean; children: React.ReactNode}> = ({d, si, t, T, claro, children}) => {
+	const m = modoDe(d, si, t);
+	if (!m) return <>{children}</>;
+	const invertir = typeof d.escenas[si].p.modoInvertir === 'boolean' ? d.escenas[si].p.modoInvertir : claro;
+	const {modo, k, sale} = m;
+	const q = easeIO(k) * (1 - easeIO(sale));
+	const tinte = TINTE[modo];
+	// línea de barrido: baja por la pantalla al entrar y sube al salir; tapa el paso intermedio del filtro
+	const barrido = k < 1 ? easeIO(k) : sale > 0 ? 1 - easeIO(sale) : -1;
+	const parpadeo = modo === 'holograma' ? 0.94 + 0.06 * azar(`holo-${Math.floor(T * 15)}`) : 1;
+	const banda = ((T * 0.35) % 1.3) - 0.15; // banda de escaneo del holograma, cada ~3,7 s
+	return (
+		<AbsoluteFill style={{isolation: 'isolate'}}>
+			<AbsoluteFill style={{filter: filtro(modo, q, invertir)}}>{children}</AbsoluteFill>
+			<AbsoluteFill style={{background: tinte.color, mixBlendMode: tinte.mezcla, opacity: (modo === 'plano' ? 1 : 0.9) * q}} />
+			{modo === 'plano' ? <Rejilla color="rgba(255,255,255,0.3)" fuerza={q} /> : null}
+			{modo === 'holograma' ? (
+				<>
+					<Rejilla color="rgba(120,200,255,0.30)" fuerza={q * parpadeo} paso={48} />
+					<AbsoluteFill style={{opacity: q * 0.18, backgroundImage: 'repeating-linear-gradient(0deg, rgba(160,220,255,0.6) 0 2px, transparent 2px 6px)'}} />
+					<div style={{position: 'absolute', left: 0, width: W, top: banda * H, height: 160, opacity: q * 0.35, background: 'linear-gradient(transparent, rgba(140,210,255,0.55), transparent)'}} />
+				</>
+			) : null}
+			{modo === 'rayosx' ? (
+				// borde oscuro y grano fino de placa
+				<AbsoluteFill style={{opacity: q, background: 'radial-gradient(ellipse 75% 60% at 50% 50%, transparent 55%, rgba(0,8,20,0.75) 100%)'}} />
+			) : null}
+			{barrido >= 0 ? (
+				<div
+					style={{
+						position: 'absolute',
+						left: 0,
+						width: W,
+						top: barrido * H - 3,
+						height: 6,
+						background: modo === 'plano' ? '#FFFFFF' : '#9BE8FF',
+						boxShadow: `0 0 28px 10px ${modo === 'plano' ? 'rgba(255,255,255,0.6)' : 'rgba(80,210,255,0.7)'}`,
+					}}
+				/>
+			) : null}
+		</AbsoluteFill>
+	);
+};

package/remotion/motor/subtitulos.tsx

@@ -36,6 +36,20 @@ function frases(palabras: Palabra[], max: number): Palabra[][] {
 	return out;
 }
 
+/**
+ * Con `coloresClave`, cada palabra clave de la escena toma el siguiente color de la lista (la 1.ª rojo, la 2.ª naranja…).
+ * Cuenta las claves dichas antes que `w` en la escena, con la misma regla de `claveDe` palabra por palabra.
+ */
+function colorRotativo(colores: string[] | undefined, palabras: Palabra[], w: Palabra, claves?: string[]): string | undefined {
+	if (!colores?.length) return undefined;
+	let n = 0;
+	for (const p of palabras) {
+		if (p === w || p[1] >= w[1]) break;
+		if (claveDe([p], claves) === 0) n++;
+	}
+	return colores[n % colores.length];
+}
+
 /** Índice de la palabra clave de la frase (-1 = ninguna). */
 function claveDe(g: Palabra[], claves?: string[]): number {
 	if (claves?.length) {
@@ -80,9 +94,10 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 		const [w] = g[0];
 		// con una palabra por frase, la clave se decide sobre toda la escena: las marcadas, las cifras y las largas
 		const acento = claveDe([g[0]], claves) === 0;
+		const colorClave = acento ? colorRotativo(S.coloresClave, palabras, g[0], claves) ?? tema.colores.acento : S.color;
 		return (
 			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${resorte(entrada, 0.25)})`, textAlign: 'center'}}>
-				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: acento ? tema.colores.acento : S.color, WebkitTextStroke: S.contorno === 0 ? undefined : `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: S.contorno === 0 ? '0 3px 3px rgba(0,0,0,0.45), 0 6px 22px rgba(0,0,0,0.35)' : '0 6px 0 rgba(0,0,0,0.35)'}}>
+				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: colorClave, WebkitTextStroke: S.contorno === 0 ? undefined : `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: S.contorno === 0 ? '0 3px 3px rgba(0,0,0,0.45), 0 6px 22px rgba(0,0,0,0.35)' : '0 6px 0 rgba(0,0,0,0.35)'}}>
 					{texto(w)}
 				</span>
 			</div>
@@ -133,7 +148,7 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 							fontWeight: 900,
 							fontSize: tam,
 							lineHeight: 1.12,
-							color: i === clave ? tema.colores.acento : S.color,
+							color: i === clave ? colorRotativo(S.coloresClave, palabras, g[i], claves) ?? tema.colores.acento : S.color,
 							WebkitTextStroke: `${S.contorno ?? 10}px #000`,
 							paintOrder: 'stroke fill',
 							textShadow: '0 6px 0 rgba(0,0,0,0.4)',

package/remotion/motor/tema.ts

@@ -49,6 +49,8 @@ export type Tema = {
 		pendiente: string; // palabras por decir
 		resalte: string; // caja de la palabra actual ('' = sin caja)
 		maxPalabras: number;
+		/** Colores que rotan entre las palabras clave (`palabra` y `pop`): ['#FF3B30', '#FF9F0A', '#FFD60A', '#34C759']. */
+		coloresClave?: string[];
 	};
 	transicion: 'corte' | 'fundido' | 'deslizar' | 'zoom' | 'barrido' | 'empuje' | 'mascara' | 'destello';
 	/** Ritmo de las animaciones: duraciones (s) y curva de las entradas. Sin esto: 0.5 / 0.35 / 0.35 y 'suave'. */
@@ -60,13 +62,19 @@ export type Tema = {
 		desenfoqueBordes?: number; // px de blur arriba y abajo (efecto maqueta / profundidad)
 		vinetaColor?: string;
 	};
-	/** Rótulo grande de cada escena: 'normal' (color del texto), 'contorno' (blanco con contorno oscuro, clave en acento) o 'pastilla' (caja oscura inclinada). */
-	rotulo?: {estilo?: 'normal' | 'contorno' | 'pastilla'; inclinar?: number; y?: number; tam?: number};
+	/**
+	 * Rótulo grande de cada escena: 'normal' (color del texto), 'contorno' (blanco con contorno oscuro, clave en acento),
+	 * 'pastilla' (caja oscura inclinada), 'sello' (sello de goma con borde que cae de golpe), 'paso' (titular arriba a la
+	 * izquierda con insignia numerada) o 'pixel' (letra pixel en una caja de color, arriba).
+	 */
+	rotulo?: {estilo?: EstiloRotulo; inclinar?: number; y?: number; tam?: number; color?: string};
 	marca: 'esquina' | 'arriba' | 'ninguna';
 	/** Movimiento suave de cámara por defecto en cada escena (zoom de 1 a este valor). */
 	zoomLento: number;
 };
 
+export type EstiloRotulo = 'normal' | 'contorno' | 'pastilla' | 'sello' | 'paso' | 'pixel';
+
 const SUB_BASE = {tipo: 'karaoke' as const, y: 330, tam: 54, maxPalabras: 7};
 
 export const ESTILOS: Record<string, Tema> = {