morfeo 0.3.4 → 0.5.0

package/remotion/motor/historias.tsx

@@ -0,0 +1,483 @@
+// 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;
+	// `acercar: 4`: después del pin, la cámara vuela hacia el sitio (el globo crece alrededor del pin)
+	const tPin = c.girar === false ? 0.2 : (c.duracion ?? 1.8) * 0.85;
+	const vuelo = c.acercar ? easeIO(clamp((t - tPin - 0.6) / (c.duracionVuelo ?? 1.2))) : 0;
+	const zoom = 1 + ((c.acercar ?? 1) - 1) * vuelo;
+	const color = c.color ?? '#E5484D';
+	return (
+		<div style={{position: 'relative', width: tam, height: tam, transform: `scale(${zoom})`, transformOrigin: `${X}px ${Y}px`}}>
+			<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" vectorEffect="non-scaling-stroke" />
+					))}
+				</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>
+	);
+};
+
+/**
+ * Línea de tiempo vertical: la línea se dibuja hacia abajo y cada hito entra en su palabra (`en`), con el año en
+ * grande y su texto. `hitos: [{anio: 1963, texto: 'Nace en Taiwán', en: 'nació'}]`, `color`, `ancho`. El último que
+ * ya entró queda resaltado.
+ */
+export const Linea: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const hitos: C[] = c.hitos ?? [];
+	const color = c.color ?? ctx.tema.colores.acento;
+	const paso = c.paso ?? 190;
+	const tiempos = hitos.map((h, i) => cuando(h.en, ctx, 0.3 + i * 0.8));
+	const visibles = tiempos.filter((t0) => ctx.t >= t0).length;
+	const ultimo = visibles - 1;
+	// la línea llega hasta el último hito que ya entró (y avanza mientras entra)
+	const kUlt = ultimo >= 0 ? easeOut(clamp((ctx.t - tiempos[ultimo]) / 0.4)) : 0;
+	const largo = ultimo >= 0 ? (ultimo - 1 + kUlt) * paso + paso * 0.15 : 0;
+	return (
+		<div style={{position: 'relative', width: c.ancho ?? 820, height: hitos.length * paso, fontFamily: 'Montserrat, sans-serif'}}>
+			<div style={{position: 'absolute', left: 38, top: 30, width: 8, height: (hitos.length - 1) * paso, borderRadius: 4, background: 'rgba(255,255,255,0.18)'}} />
+			<div style={{position: 'absolute', left: 38, top: 30, width: 8, height: Math.max(0, largo + paso * 0.85), borderRadius: 4, background: color}} />
+			{hitos.map((h, i) => {
+				const k = easeOut(clamp((ctx.t - tiempos[i]) / 0.4));
+				if (k <= 0) return null;
+				const actual = i === ultimo;
+				return (
+					<div key={i} style={{position: 'absolute', left: 0, top: i * paso, display: 'flex', alignItems: 'flex-start', gap: 34, opacity: k, transform: `translateX(${(1 - k) * 40}px)`}}>
+						<div style={{width: 84, height: 84, borderRadius: '50%', background: actual ? color : '#1B1B1F', border: `6px solid ${color}`, boxShadow: actual ? `0 0 24px ${color}` : undefined, transform: `scale(${resorte(k, 0.3)})`, flex: 'none'}} />
+						<div style={{paddingTop: 2}}>
+							<div style={{color: actual ? color : '#FFFFFF', fontWeight: 900, fontSize: 64, lineHeight: 1}}>{h.anio ?? h.titulo}</div>
+							{h.texto ? <div style={{color: '#FFFFFF', fontWeight: 700, fontSize: 36, marginTop: 6, maxWidth: (c.ancho ?? 820) - 140, textShadow: '0 2px 10px rgba(0,0,0,0.5)'}}>{h.texto}</div> : null}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export const HISTORIAS = ['linea', '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 'linea':
+			return <Linea c={c} ctx={ctx} />;
+		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/portada.tsx

@@ -0,0 +1,44 @@
+// Portada del video (salida/<título> (portada).jpg): el cuadro de la miniatura con el título grande abajo, la palabra
+// clave en color y la marca arriba. Distinta de la miniatura (que es el cuadro limpio): la portada es la que se ve en
+// el perfil y en la cuadrícula del canal, así que el título tiene que leerse en chiquito.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {ANTON, ancho} from '../estilo';
+import {Avatar, MarcaContexto} from '../piezas';
+import type {Marca} from '../tipos';
+import {partesResaltadas} from './util';
+
+export const Portada: React.FC<{texto: string; marca: Marca; acento?: string}> = ({texto, marca, acento = marca.color ?? '#FFD400'}) => {
+	const letra = marca.letra ?? ANTON;
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	// sin *palabra*, se resalta la última palabra larga
+	const marcado = texto.includes('*') ? texto : texto.replace(/([^\s]{5,})(?![\s\S]*\s[^\s]{5,})/, '*$1*');
+	let tam = 150;
+	try {
+		// en 2–3 renglones de 940 px
+		const w = ancho(limpio, letra, tam, 400);
+		if (w > 940 * 2.6) tam = Math.max(84, Math.floor((tam * 940 * 2.6) / w));
+	} catch {}
+	return (
+		<MarcaContexto.Provider value={marca}>
+			<AbsoluteFill>
+				<AbsoluteFill style={{background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.92) 100%)'}} />
+				{marca.nombre || marca.logo ? (
+					<div style={{position: 'absolute', left: 56, top: 110, display: 'flex', alignItems: 'center', gap: 18}}>
+						<div style={{position: 'relative', width: 96, height: 96}}>
+							<Avatar x={0} y={0} size={88} aro={5} />
+						</div>
+						{marca.nombre ? <div style={{fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 44, color: '#FFFFFF', textShadow: '0 3px 12px rgba(0,0,0,0.6)'}}>{marca.nombre}</div> : null}
+					</div>
+				) : null}
+				<div style={{position: 'absolute', left: 60, right: 60, bottom: 230, fontFamily: letra, fontSize: tam, lineHeight: 1.02, color: '#FFFFFF', textTransform: 'uppercase', textShadow: '0 8px 30px rgba(0,0,0,0.6)', WebkitTextStroke: `${Math.round(tam * 0.04)}px #000`, paintOrder: 'stroke fill'}}>
+					{partesResaltadas(marcado).map(([p, r], i) => (
+						<span key={i} style={r ? {color: acento} : undefined}>
+							{p}
+						</span>
+					))}
+				</div>
+			</AbsoluteFill>
+		</MarcaContexto.Provider>
+	);
+};