morfeo 0.1.3 → 0.2.0

package/remotion/motor/Video.tsx

@@ -1,44 +1,107 @@
-// Composición del motor de capas: fondo + cámara + capas por escena, transiciones, subtítulos y marca.
+// Composición del motor de capas: mundo o fondo + cámara + capas por escena, transiciones, acabado, subtítulos y marca.
 import React from 'react';
 import {AbsoluteFill, Audio, staticFile} from 'remotion';
 import {Avatar, MarcaContexto, useMarca} from '../piezas';
-import {FPS, W, clamp, easeIO, easeOut, lerp} from '../estilo';
+import {FPS, H, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
 import type {Datos, Escena} from '../tipos';
 import {Capas} from './capas';
-import {FondoTema, Textura, Vineta} from './fondo';
+import {FondoTema, Post, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
 import {mezclar, temaDe, type Tema} from './tema';
-import type {CtxEscena} from './util';
+import {azar, cuando, partesResaltadas, type CtxEscena} from './util';
 
 const TRANSICION = 0.35;
 
 /** Valor animado de cámara: número fijo o [inicio, fin] a lo largo de la escena. */
 const rango = (v: unknown, k: number, porDefecto: number) => (Array.isArray(v) ? lerp(v[0], v[1], k) : typeof v === 'number' ? v : porDefecto);
 
-const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string}> = ({e, t, tema, semilla}) => {
+const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string; sinFondo?: boolean}> = ({e, t, tema, semilla, sinFondo}) => {
 	const marca = useMarca();
 	const p = e.p;
 	const temaEsc = p.tema ? mezclar(tema, p.tema) : tema;
 	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${semilla}-${e.t0}`};
 	const cam = p.camara ?? {};
 	const k = easeIO(clamp((t - (cam.en ?? 0)) / (cam.duracion ?? e.dur)));
-	const zoom = rango(cam.zoom, k, lerp(1, temaEsc.zoomLento, clamp(t / e.dur)));
-	const cx = rango(cam.x, k, 0);
-	const cy = rango(cam.y, k, 0);
-	const temblor = cam.temblor && t < (cam.temblor.duracion ?? 0.4) ? Math.sin(t * 90) * (cam.temblor.fuerza ?? 12) * (1 - t / (cam.temblor.duracion ?? 0.4)) : 0;
+	// sin `camara`, cada escena tiene una deriva lenta propia: acerca y se desplaza un poco hacia un lado distinto
+	const fase = azar(`${semilla}-${e.t0}-deriva`) * 6.28;
+	const avance = clamp(t / e.dur);
+	const deriva = sinFondo ? 0 : (temaEsc.zoomLento - 1) * 420;
+	const zoom = rango(cam.zoom, k, sinFondo ? 1 : lerp(1, temaEsc.zoomLento, easeOut(avance) * 0.55 + avance * 0.45));
+	const cx = rango(cam.x, k, Math.cos(fase) * deriva * avance);
+	const cy = rango(cam.y, k, Math.sin(fase) * deriva * 0.6 * avance);
+	// temblor: varias frecuencias y en los dos ejes, para que no se sienta como un péndulo
+	const td = cam.temblor?.duracion ?? 0.4;
+	const tf = cam.temblor && t < td ? (cam.temblor.fuerza ?? 12) * (1 - t / td) ** 2 : 0;
+	const tx = tf ? (Math.sin(t * 90) + Math.sin(t * 57 + 1) * 0.6) * tf * 0.7 : 0;
+	const ty = tf ? (Math.cos(t * 73 + 2) + Math.sin(t * 41) * 0.5) * tf * 0.5 : 0;
+	const capas = capasDe(e.tipo, p, temaEsc, marca).filter((c: any) => !(sinFondo && c.enMundo));
 	return (
 		<AbsoluteFill>
-			<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
-				<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} ctx={ctx} />
-			</AbsoluteFill>
-			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + temblor}px, ${-cy}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
-				<Capas capas={capasDe(e.tipo, p, temaEsc, marca)} ctx={ctx} />
+			{sinFondo ? null : (
+				<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
+					<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} ctx={ctx} />
+				</AbsoluteFill>
+			)}
+			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + tx}px, ${-cy + ty}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
+				<Capas capas={capas} ctx={ctx} />
 			</AbsoluteFill>
 		</AbsoluteFill>
 	);
 };
 
+type Toma = {x: number; y: number; zoom: number; giro: number};
+const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
+
+/**
+ * Cámara del mundo. Cada escena da su `toma: {x, y, zoom, giro}` (el punto del mundo que queda al centro);
+ * la cámara viaja desde donde terminó la escena anterior y luego sigue derivando despacio (`deriva`, o hacia `a`).
+ * Sin `toma`, la escena conserva la anterior. `corte: true` salta sin viaje.
+ */
+export function camaraMundo(d: Datos, si: number, t: number): Toma {
+	const destino = (i: number): Toma => {
+		for (let j = i; j >= 0; j--) if (d.escenas[j].p.toma) return {...TOMA0, ...d.escenas[j].p.toma};
+		return TOMA0;
+	};
+	const final = (i: number): Toma => {
+		const tm = d.escenas[i].p.toma ?? {};
+		const base = destino(i);
+		if (tm.a) return {...base, ...tm.a};
+		return {...base, zoom: base.zoom * (1 + (tm.deriva ?? 0.05))};
+	};
+	const e = d.escenas[si];
+	const tm = e.p.toma ?? {};
+	const a = destino(si);
+	const b = final(si);
+	const viaje = tm.corte || si === 0 ? 0 : tm.duracion ?? Math.min(1.1, e.dur * 0.55);
+	const kd = clamp((t - viaje * 0.6) / Math.max(0.01, e.dur - viaje * 0.6));
+	const kq = tm.a ? easeIO(kd) : kd;
+	const actual: Toma = {x: lerp(a.x, b.x, kq), y: lerp(a.y, b.y, kq), zoom: lerp(a.zoom, b.zoom, kq), giro: lerp(a.giro, b.giro, kq)};
+	if (viaje <= 0 || t >= viaje) return actual;
+	const o = final(si - 1);
+	const kv = easeIO(t / viaje);
+	// el zoom se interpola en escala logarítmica: así acercar y alejar se sienten igual de rápidos
+	return {x: lerp(o.x, actual.x, kv), y: lerp(o.y, actual.y, kv), zoom: Math.exp(lerp(Math.log(o.zoom), Math.log(actual.zoom), kv)), giro: lerp(o.giro, actual.giro, kv)};
+}
+
+/** El mundo del video: capas que persisten de escena en escena, vistas por la cámara. Las capas `enMundo` de la escena actual viven aquí. */
+const Mundo: React.FC<{d: Datos; si: number; t: number; T: number; tema: Tema}> = ({d, si, t, T, tema}) => {
+	const marca = useMarca();
+	const e = d.escenas[si];
+	const cam = camaraMundo(d, si, t);
+	const palabras = d.escenas.flatMap((x) => (x.palabras ?? []).map(([w, a, b]) => [w, a + x.t0, b + x.t0] as [string, number, number]));
+	const ctxMundo: CtxEscena = {t: T, dur: d.duracion, habla: [0, d.duracion], palabras, tema, semilla: `${d.id}-mundo`, inicios: d.escenas.map((x) => x.t0), escena: si + 1, tEscena: t, camara: cam};
+	const temaEsc = e.p.tema ? mezclar(tema, e.p.tema) : tema;
+	const ctxEsc: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${d.id}-${e.t0}`};
+	const propias = capasDe(e.tipo, e.p, temaEsc, marca).filter((c: any) => c.enMundo);
+	return (
+		<AbsoluteFill style={{transform: `translate(540px, 960px) scale(${cam.zoom}) rotate(${cam.giro}deg) translate(${-cam.x}px, ${-cam.y}px)`, transformOrigin: '0 0'}}>
+			<Capas capas={d.mundo as any} ctx={ctxMundo} />
+			{propias.length ? <Capas capas={propias} ctx={ctxEsc} /> : null}
+		</AbsoluteFill>
+	);
+};
+
 /** Capas fijas del video (HUD): usan el tiempo de todo el video; `cambios` las actualiza por escena o palabra. */
 const Hud: React.FC<{d: Datos; T: number; tema: Tema}> = ({d, T, tema}) => {
 	const palabras = d.escenas.flatMap((e) => (e.palabras ?? []).map(([w, a, b]) => [w, a + e.t0, b + e.t0] as [string, number, number]));
@@ -49,6 +112,68 @@ const Hud: React.FC<{d: Datos; T: number; tema: Tema}> = ({d, T, tema}) => {
 	return <Capas capas={d.hud as any} ctx={ctx} />;
 };
 
+/**
+ * Rótulo de la escena: el segundo nivel de texto (grande y corto) que resume el momento: "¿CUÁNTO SUBIÓ?", "DÍA 21".
+ * Va abajo si los subtítulos están arriba, y arriba si están abajo. `*palabra*` va en color de acento.
+ */
+const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
+	const texto = String(e.p.rotulo ?? '');
+	if (!texto) return null;
+	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema, semilla: ''};
+	const t0 = cuando(e.p.rotuloEn, ctx, 0.12);
+	if (t < t0) return null;
+	const k = clamp((t - t0) / 0.45);
+	const S = tema.subtitulos;
+	const abajo = S.tipo === 'ninguno' || S.y < 900;
+	const may = tema.tituloMayusculas !== false;
+	const limpio = texto.replace(/\*/g, '');
+	const fuente = tema.fuentes.titulo;
+	// cabe en 940 px: se achica si hace falta (el ancho se mide con la fuente ya cargada)
+	let tam = e.p.rotuloTam ?? 104;
+	try {
+		const w = ancho(may ? limpio.toUpperCase() : limpio, fuente, tam, 900);
+		if (w > 940) tam = Math.max(56, Math.floor((tam * 940) / w));
+	} catch {}
+	const claro = tema.colores.texto !== '#FFFFFF';
+	const contorno = !claro && (S.contorno ?? 0) > 0;
+	return (
+		<div style={{position: 'absolute', left: 50, width: W - 100, top: abajo ? 1470 : 330, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)})`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
+			<span
+				style={{
+					fontFamily: fuente,
+					fontWeight: 900,
+					fontSize: tam,
+					lineHeight: 1.05,
+					color: tema.colores.texto,
+					textTransform: may ? 'uppercase' : undefined,
+					WebkitTextStroke: contorno ? `${S.contorno}px #000` : undefined,
+					paintOrder: 'stroke fill',
+					textShadow: claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+				}}
+			>
+				{partesResaltadas(texto).map(([p, r], i) => (
+					<span key={i} style={r ? {color: tema.colores.acento} : undefined}>
+						{p}
+					</span>
+				))}
+			</span>
+		</div>
+	);
+};
+
+/** Pastilla fija de la serie arriba al centro: "GYM CON CIENCIA · PARTE 5". */
+const Serie: React.FC<{texto: string; tema: Tema}> = ({texto, tema}) => {
+	const claro = tema.colores.texto !== '#FFFFFF';
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: 132, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
+			<div style={{display: 'flex', alignItems: 'center', gap: 12, background: claro ? 'rgba(255,255,255,0.88)' : 'rgba(10,10,14,0.72)', color: claro ? '#141414' : '#FFFFFF', border: `2px solid ${claro ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.14)'}`, borderRadius: 999, padding: '8px 26px', fontFamily: tema.fuentes.mono, fontWeight: 800, fontSize: 26, letterSpacing: 2, textTransform: 'uppercase', whiteSpace: 'nowrap'}}>
+				<span style={{width: 10, height: 10, borderRadius: '50%', background: tema.colores.acento}} />
+				{texto}
+			</div>
+		</div>
+	);
+};
+
 /** Etiqueta de la marca en la esquina (avatar + nombre). */
 const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 	const marca = useMarca();
@@ -74,12 +199,17 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	const e = d.escenas[si];
 	const t = T - e.t0;
 	const semilla = d.id;
-	const trans = (e.p.transicion ?? tema.transicion) as string;
-	const enTransicion = si > 0 && t < TRANSICION && trans !== 'corte';
-	const k = easeOut(clamp(t / TRANSICION));
+	const conMundo = !!d.mundo?.length;
+	const DUR = tema.movimiento?.transicion ?? TRANSICION;
+	// con mundo, la transición es el viaje de la cámara: las capas de pantalla solo entran con su propia animación
+	const trans = conMundo ? 'corte' : ((e.p.transicion ?? tema.transicion) as string);
+	const enTransicion = si > 0 && t < DUR && trans !== 'corte';
+	const lin = clamp(t / DUR);
+	const k = easeOut(lin);
 	const prev = si > 0 ? d.escenas[si - 1] : null;
 	let estiloActual: React.CSSProperties = {};
 	let estiloPrevio: React.CSSProperties = {};
+	let destello = 0;
 	if (enTransicion) {
 		if (trans === 'fundido') estiloActual = {opacity: k};
 		else if (trans === 'deslizar') {
@@ -88,23 +218,44 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 		} else if (trans === 'zoom') {
 			estiloActual = {transform: `scale(${lerp(1.15, 1, k)})`, opacity: k};
 			estiloPrevio = {transform: `scale(${lerp(1, 0.9, k)})`};
+		} else if (trans === 'barrido') {
+			// latigazo: las dos escenas pasan de lado con desenfoque de movimiento, más fuerte a la mitad
+			const q = easeIO(lin);
+			const blur = Math.sin(lin * Math.PI) * 26;
+			const filter = blur > 0.5 ? `blur(${blur}px)` : undefined;
+			estiloActual = {transform: `translateX(${(1 - q) * W}px)`, filter};
+			estiloPrevio = {transform: `translateX(${-q * W}px)`, filter};
+		} else if (trans === 'empuje') {
+			const q = easeIO(lin);
+			estiloActual = {transform: `translateY(${(1 - q) * H}px)`};
+			estiloPrevio = {transform: `translateY(${-q * H}px)`};
+		} else if (trans === 'mascara') {
+			estiloActual = {clipPath: `circle(${easeIO(lin) * 1250}px at 540px 960px)`};
+		} else if (trans === 'destello') {
+			estiloActual = {opacity: lin < 0.4 ? 0 : 1};
+			destello = Math.sin(lin * Math.PI) ** 1.5;
 		}
 	}
 	return (
 		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
+			{conMundo ? <Mundo d={d} si={si} t={t} T={T} tema={tema} /> : null}
 			{enTransicion && prev ? (
 				<AbsoluteFill style={estiloPrevio}>
 					<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} />
 				</AbsoluteFill>
 			) : null}
 			<AbsoluteFill style={estiloActual}>
-				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} />
+				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 			</AbsoluteFill>
+			{destello > 0 ? <AbsoluteFill style={{background: '#fff', opacity: destello}} /> : null}
+			<Post tema={tema} />
 			{/* la textura va quieta, fuera de la cámara: si se moviera con el zoom, cada cuadro sería distinto y el video pesaría 10 veces más */}
 			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
-			<Vineta fuerza={tema.vineta ?? 0} />
+			<Vineta fuerza={tema.vineta ?? 0} color={tema.post?.vinetaColor} />
 			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
-			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} /> : null}
+			{d.serie && e.tipo !== 'cta' ? <Serie texto={d.serie} tema={tema} /> : null}
+			{e.tipo !== 'cta' ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
+			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} claves={e.p.claves} /> : null}
 			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
 		</AbsoluteFill>
 	);

package/remotion/motor/anotaciones.tsx

@@ -0,0 +1,296 @@
+// Anotaciones: capas que señalan y explican lo que hay en pantalla, como en un documental o un tutorial.
+//   dato      cifra grande + unidad en una pastilla oscura:  {tipo: 'dato', valor: 57, unidad: 'toneladas'}
+//   medida    línea de cota con topes y su etiqueta:          {tipo: 'medida', de: [200, 900], a: [700, 300], texto: '18 m'}
+//   trazo     línea o flecha que se dibuja por varios puntos: {tipo: 'trazo', puntos: [[x, y], ...], flecha: true, punteado: true}
+//   contorno  marco punteado que "camina" alrededor de algo:  {tipo: 'contorno', ancho: 400, alto: 300}  (forma: 'rect' | 'circulo' | 'aro')
+//   fuente    cita pequeña de dónde sale el dato:              {tipo: 'fuente', texto: 'Cook et al., 2016 · Science'}
+//   seccion   etiqueta de capítulo en monoespaciada:           {tipo: 'seccion', texto: 'paso 2 · la carpeta'}
+//   insignia  número de paso en un cuadro oscuro:              {tipo: 'insignia', texto: 2}
+//   sello     sello de goma inclinado:                         {tipo: 'sello', texto: 'AUTOMÁTICO'}
+//   cursor    puntero que viaja y hace clic:                   {tipo: 'cursor', a: [620, 900], clic: 'carpeta'}
+// `medida` y `trazo` usan coordenadas del lienzo (1080×1920). Todas aceptan `en`, `hasta` y `sigue: 'id'`.
+import React from 'react';
+import {clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
+import {cuando, formatoNumero, type CtxEscena} from './util';
+
+type Capa = Record<string, any> & {tipo: string};
+
+//   nombre    etiqueta de personaje con su rol:               {tipo: 'nombre', texto: 'DOÑA ROSA', sub: 'la mamá · 48 años'}
+//   accion    lo que hace el protagonista en ese momento:      {tipo: 'accion', texto: 'Te despiertas'}
+//   terminal  ventana de terminal que se escribe sola:         {tipo: 'terminal', lineas: [{texto: 'npm install morfeo', en: 'instala'}, {texto: '✔ listo', salida: true, en: 'fin'}]}
+export const ANOTACIONES = ['dato', 'medida', 'trazo', 'contorno', 'fuente', 'seccion', 'insignia', 'sello', 'cursor', 'terminal', 'nombre', 'accion'];
+/** Las que se dibujan solas (línea que avanza): no llevan animación de entrada de capa. */
+export const ANOTACIONES_SIN_ENTRADA = ['medida', 'trazo', 'contorno', 'cursor'];
+
+const largoDe = (pts: [number, number][]) => pts.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1]), 0);
+
+/** Pastilla oscura translúcida: la base de `dato` y de la etiqueta de `medida`. */
+const Pastilla: React.FC<{children: React.ReactNode; color?: string; tam?: number}> = ({children, color, tam = 1}) => (
+	<div
+		style={{
+			display: 'inline-flex',
+			alignItems: 'baseline',
+			gap: 10 * tam,
+			padding: `${10 * tam}px ${22 * tam}px`,
+			background: color ?? 'rgba(10, 14, 24, 0.82)',
+			border: '2px solid rgba(255,255,255,0.14)',
+			borderRadius: 16 * tam,
+			boxShadow: '0 10px 26px rgba(0,0,0,0.35)',
+			whiteSpace: 'nowrap',
+		}}
+	>
+		{children}
+	</div>
+);
+
+export const Anotacion: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const t = ctx.t - cuando(c.en, ctx, 0);
+	// origen de la capa en el lienzo: `medida` y `trazo` reciben puntos absolutos y hay que restarlo
+	const ox = c.x ?? 540;
+	const oy = c.y ?? 960;
+	const color = c.color ?? T.colores.acento;
+
+	switch (c.tipo) {
+		case 'dato': {
+			const tam = (c.tam ?? 64) / 64;
+			const k = c.de != null ? easeOut(clamp(t / (c.duracion ?? 0.9))) : 1;
+			const v = typeof c.valor === 'number' ? formatoNumero(lerp(c.de ?? c.valor, c.valor, k), c.decimales ?? 0) : String(c.valor ?? c.texto ?? '');
+			return (
+				<Pastilla color={c.fondo} tam={tam}>
+					<span style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: 64 * tam, lineHeight: 1, color}}>{v}</span>
+					{c.unidad ? <span style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: 30 * tam, color: '#fff', opacity: 0.92}}>{c.unidad}</span> : null}
+				</Pastilla>
+			);
+		}
+
+		case 'medida': {
+			const [x1, y1] = c.de ?? [ox - 200, oy];
+			const [x2, y2] = c.a ?? [ox + 200, oy];
+			const k = easeIO(clamp(t / (c.duracion ?? 0.6)));
+			const xa = lerp(x1, x2, k);
+			const ya = lerp(y1, y2, k);
+			const ang = Math.atan2(y2 - y1, x2 - x1);
+			const nx = Math.cos(ang + Math.PI / 2) * (c.tope ?? 16);
+			const ny = Math.sin(ang + Math.PI / 2) * (c.tope ?? 16);
+			const g = c.grosor ?? 5;
+			// la etiqueta va a un lado de la mitad de la línea
+			const sep = c.separacion ?? 70;
+			const lx = (x1 + x2) / 2 - Math.cos(ang + Math.PI / 2) * sep;
+			const ly = (y1 + y2) / 2 - Math.sin(ang + Math.PI / 2) * sep;
+			const ke = resorte(clamp((t - (c.duracion ?? 0.6) * 0.6) / 0.4), 0.3);
+			return (
+				<div style={{position: 'relative', width: 0, height: 0}}>
+					<svg style={{position: 'absolute', left: -ox, top: -oy, overflow: 'visible'}} width={1} height={1}>
+						<g stroke={color} strokeWidth={g} strokeLinecap="round" style={{filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.4))'}}>
+							<line x1={x1} y1={y1} x2={xa} y2={ya} />
+							<line x1={x1 - nx} y1={y1 - ny} x2={x1 + nx} y2={y1 + ny} />
+							{k > 0.98 ? <line x1={x2 - nx} y1={y2 - ny} x2={x2 + nx} y2={y2 + ny} /> : null}
+						</g>
+					</svg>
+					{c.texto != null && ke > 0.01 ? (
+						<div style={{position: 'absolute', left: lx - ox, top: ly - oy, transform: `translate(-50%, -50%) scale(${ke})`}}>
+							<Pastilla tam={(c.tam ?? 46) / 64}>
+								<span style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: c.tam ?? 46, lineHeight: 1, color}}>{c.texto}</span>
+								{c.unidad ? <span style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: (c.tam ?? 46) * 0.5, color: '#fff'}}>{c.unidad}</span> : null}
+							</Pastilla>
+						</div>
+					) : null}
+				</div>
+			);
+		}
+
+		case 'trazo': {
+			const pts: [number, number][] = c.puntos ?? [];
+			if (pts.length < 2) return null;
+			const L = largoDe(pts);
+			const k = easeIO(clamp(t / (c.duracion ?? Math.max(0.4, L / 1400))));
+			const g = c.grosor ?? 6;
+			const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ');
+			const [px, py] = pts[pts.length - 1];
+			const [qx, qy] = pts[pts.length - 2];
+			const ang = (Math.atan2(py - qy, px - qx) * 180) / Math.PI;
+			const guion = c.punteado ? (typeof c.punteado === 'number' ? c.punteado : g * 2.6) : 0;
+			return (
+				<svg style={{position: 'absolute', left: -ox, top: -oy, overflow: 'visible'}} width={1} height={1}>
+					<defs>
+						<mask id={`trazo-${c.id ?? `${pts[0][0]}-${pts[0][1]}`}`} maskUnits="userSpaceOnUse" x={-200} y={-200} width={1480} height={2320}>
+							<path d={d} fill="none" stroke="#fff" strokeWidth={g + 8} strokeDasharray={L} strokeDashoffset={L * (1 - k)} strokeLinecap="round" strokeLinejoin="round" />
+						</mask>
+					</defs>
+					<g mask={`url(#trazo-${c.id ?? `${pts[0][0]}-${pts[0][1]}`})`} style={{filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))'}}>
+						<path d={d} fill="none" stroke={color} strokeWidth={g} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={guion ? `${guion} ${guion}` : undefined} strokeDashoffset={guion ? -ctx.t * (c.velocidad ?? 40) : undefined} />
+					</g>
+					{c.flecha && k > 0.97 ? <polygon points={`0,0 ${-g * 4.2},${-g * 2.4} ${-g * 4.2},${g * 2.4}`} fill={color} transform={`translate(${px} ${py}) rotate(${ang})`} /> : null}
+				</svg>
+			);
+		}
+
+		case 'contorno': {
+			const w = c.ancho ?? 400;
+			const h = c.alto ?? (c.forma === 'aro' ? w * 0.32 : c.forma === 'circulo' ? w : 300);
+			const g = c.grosor ?? 5;
+			const k = easeOut(clamp(t / (c.duracion ?? 0.45)));
+			const guion = c.punteado === false ? undefined : `${g * 3.2} ${g * 2.6}`;
+			const desfase = -ctx.t * (c.velocidad ?? 46);
+			const comun = {fill: c.relleno ?? 'none', stroke: color, strokeWidth: g, strokeDasharray: guion, strokeDashoffset: desfase, strokeLinecap: 'round' as const};
+			const m = g + 6;
+			return (
+				<svg width={w + m * 2} height={h + m * 2} style={{display: 'block', overflow: 'visible', opacity: k, transform: `scale(${lerp(1.12, 1, k)})`, filter: c.forma === 'aro' ? `drop-shadow(0 0 14px ${color})` : 'drop-shadow(0 2px 5px rgba(0,0,0,0.35))'}}>
+					{c.forma === 'circulo' || c.forma === 'aro' ? <ellipse cx={w / 2 + m} cy={h / 2 + m} rx={w / 2} ry={h / 2} {...comun} /> : <rect x={m} y={m} width={w} height={h} rx={c.radio ?? 14} {...comun} />}
+				</svg>
+			);
+		}
+
+		case 'fuente':
+			return (
+				<div style={{borderLeft: `4px solid ${color}`, paddingLeft: 14, fontFamily: T.fuentes.mono, color: c.colorTexto ?? T.colores.texto, opacity: 0.86, textShadow: T.colores.texto === '#FFFFFF' ? '0 2px 8px rgba(0,0,0,0.6)' : undefined}}>
+					<div style={{fontSize: (c.tam ?? 24) * 0.72, letterSpacing: 3, color, fontWeight: 700}}>{c.etiqueta ?? 'FUENTE'}</div>
+					<div style={{fontSize: c.tam ?? 24, whiteSpace: 'pre', marginTop: 4}}>{c.texto}</div>
+				</div>
+			);
+
+		case 'seccion':
+			return (
+				<div style={{fontFamily: T.fuentes.mono, fontSize: c.tam ?? 30, color: c.color ?? T.colores.suave, whiteSpace: 'pre', letterSpacing: 0.5}}>
+					<span style={{opacity: 0.7}}>{'// '}</span>
+					{c.texto}
+				</div>
+			);
+
+		case 'insignia': {
+			const tam = c.tam ?? 96;
+			const claro = T.colores.texto === '#FFFFFF';
+			return (
+				<div
+					style={{
+						width: tam,
+						height: tam * 1.08,
+						background: c.fondo ?? (claro ? '#fff' : '#161616'),
+						color: c.colorTexto ?? (claro ? '#111' : '#fff'),
+						fontFamily: T.fuentes.titulo,
+						fontSize: tam * 0.64,
+						lineHeight: 1,
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						gap: tam * 0.05,
+						borderRadius: tam * 0.14,
+						boxShadow: '0 8px 0 rgba(0,0,0,0.18), 0 14px 22px rgba(0,0,0,0.22)',
+						transform: `rotate(${c.inclinar ?? 0}deg)`,
+					}}
+				>
+					<span>{c.texto ?? c.valor}</span>
+					<span style={{display: 'flex', gap: tam * 0.07}}>
+						{[0, 1, 2].map((i) => (
+							<span key={i} style={{width: tam * 0.06, height: tam * 0.06, borderRadius: '50%', background: 'currentColor', opacity: 0.45}} />
+						))}
+					</span>
+				</div>
+			);
+		}
+
+		case 'sello': {
+			const tam = c.tam ?? 52;
+			// golpe de sello: cae grande y se asienta con una vibración corta
+			const k = clamp(t / 0.22);
+			const escala = lerp(1.9, 1, easeOut(k)) * (k >= 1 ? 1 + 0.03 * Math.exp(-(t - 0.22) * 14) * Math.sin((t - 0.22) * 60) : 1);
+			return (
+				<div
+					style={{
+						transform: `rotate(${c.inclinar ?? -7}deg) scale(${escala})`,
+						opacity: clamp(k * 3) * 0.92,
+						border: `${Math.max(4, tam * 0.1)}px solid ${color}`,
+						outline: `${Math.max(2, tam * 0.04)}px solid ${color}`,
+						outlineOffset: tam * 0.1,
+						borderRadius: tam * 0.2,
+						padding: `${tam * 0.12}px ${tam * 0.42}px`,
+						fontFamily: T.fuentes.titulo,
+						fontSize: tam,
+						lineHeight: 1.1,
+						letterSpacing: 2,
+						color,
+						textTransform: 'uppercase',
+						whiteSpace: 'nowrap',
+					}}
+				>
+					{c.texto}
+				</div>
+			);
+		}
+
+		case 'terminal': {
+			// ventana de terminal: cada línea se escribe letra por letra a partir de su `en`
+			const w = c.ancho ?? 820;
+			const tam = c.tam ?? 34;
+			const lineas: any[] = (c.lineas ?? []).map((l: any) => (typeof l === 'string' ? {texto: l} : l));
+			return (
+				<div style={{width: w, background: c.fondo ?? '#16171D', borderRadius: 22, boxShadow: '0 26px 50px rgba(0,0,0,0.28), 0 4px 0 rgba(0,0,0,0.25)', overflow: 'hidden', border: '2px solid rgba(255,255,255,0.08)'}}>
+					<div style={{display: 'flex', alignItems: 'center', gap: 10, padding: '16px 20px', background: 'rgba(255,255,255,0.06)'}}>
+						{['#FF5F57', '#FEBC2E', '#28C840'].map((k) => (
+							<span key={k} style={{width: 16, height: 16, borderRadius: '50%', background: k}} />
+						))}
+						<span style={{marginLeft: 12, fontFamily: T.fuentes.mono, fontSize: tam * 0.62, color: 'rgba(255,255,255,0.45)'}}>{c.titulo ?? 'terminal'}</span>
+					</div>
+					<div style={{padding: `${tam * 0.7}px ${tam * 0.8}px ${tam}px`, fontFamily: T.fuentes.mono, fontSize: tam, lineHeight: 1.55, minHeight: tam * 1.55 * Math.max(2, lineas.length)}}>
+						{lineas.map((l, i) => {
+							const tl = ctx.t - cuando(l.en, ctx, cuando(c.en, ctx, 0) + i * 0.6);
+							if (tl < 0) return null;
+							const salida = l.salida === true;
+							const n = salida ? l.texto.length : Math.floor(tl * (c.velocidad ?? 24));
+							const escribiendo = !salida && n <= l.texto.length + 6;
+							return (
+								<div key={i} style={{color: l.color ?? (salida ? '#7BE08A' : c.colorTexto ?? '#F2F2F5'), whiteSpace: 'pre-wrap', opacity: salida ? clamp(tl / 0.2) : 1}}>
+									{salida ? '' : <span style={{color}}>{'$ '}</span>}
+									{l.texto.slice(0, n)}
+									{escribiendo && Math.floor(ctx.t * 3) % 2 === 0 ? <span style={{background: c.colorTexto ?? '#F2F2F5', color: 'transparent'}}>_</span> : null}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			);
+		}
+
+		case 'nombre': {
+			// pastilla clara con el nombre en mayúsculas y el rol debajo, más chico (como en las series ilustradas)
+			const tam = c.tam ?? 40;
+			return (
+				<div style={{background: c.fondo ?? '#FFFFFF', color: c.colorTexto ?? '#141414', borderRadius: tam * 0.45, padding: `${tam * 0.24}px ${tam * 0.6}px`, textAlign: 'center', boxShadow: '0 6px 0 rgba(0,0,0,0.18), 0 10px 18px rgba(0,0,0,0.18)', border: `${Math.max(3, tam * 0.08)}px solid ${c.borde ?? '#141414'}`, whiteSpace: 'nowrap'}}>
+					<div style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: tam, lineHeight: 1.05, letterSpacing: 0.5}}>{String(c.texto ?? '').toUpperCase()}</div>
+					{c.sub ? <div style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: tam * 0.5, opacity: 0.6, marginTop: 2}}>{c.sub}</div> : null}
+				</div>
+			);
+		}
+
+		case 'accion': {
+			// "▶ Te despiertas": pastilla oscura con borde de acento; marca lo que hace el protagonista
+			const tam = c.tam ?? 36;
+			return (
+				<div style={{display: 'inline-flex', alignItems: 'center', gap: tam * 0.4, background: c.fondo ?? 'rgba(14,14,20,0.86)', color: c.colorTexto ?? '#FFFFFF', border: `${Math.max(2, tam * 0.08)}px solid ${color}`, borderRadius: 999, padding: `${tam * 0.26}px ${tam * 0.7}px`, fontFamily: T.fuentes.texto, fontWeight: 800, fontSize: tam, whiteSpace: 'nowrap', boxShadow: '0 8px 20px rgba(0,0,0,0.35)'}}>
+					<span style={{color, fontSize: tam * 0.7}}>▶</span>
+					{c.texto}
+				</div>
+			);
+		}
+
+		case 'cursor': {
+			const tam = c.tam ?? 64;
+			const [ax, ay] = c.a ?? [ox, oy];
+			const k = easeIO(clamp(t / (c.duracion ?? 0.7)));
+			const tc = c.clic != null ? ctx.t - cuando(c.clic, ctx, 0) : -1;
+			const pulso = tc >= 0 && tc < 0.5 ? tc / 0.5 : -1;
+			const hundir = tc >= 0 && tc < 0.16 ? 0.86 : 1;
+			return (
+				<div style={{position: 'relative', width: 0, height: 0, transform: `translate(${(ax - ox) * k}px, ${(ay - oy) * k}px)`}}>
+					{pulso >= 0 ? <div style={{position: 'absolute', left: -tam * (0.3 + pulso), top: -tam * (0.3 + pulso), width: tam * (0.6 + pulso * 2), height: tam * (0.6 + pulso * 2), borderRadius: '50%', border: `4px solid ${color}`, opacity: 1 - pulso}} /> : null}
+					<svg width={tam} height={tam} viewBox="0 0 24 24" style={{position: 'absolute', left: -tam * 0.14, top: -tam * 0.08, transform: `scale(${hundir})`, transformOrigin: '15% 10%', filter: 'drop-shadow(0 5px 6px rgba(0,0,0,0.4))'}}>
+						<path d="M4 2 L4 19 L8.6 15.2 L11.6 22 L14.6 20.7 L11.7 14 L18 14 Z" fill="#111" stroke="#fff" strokeWidth={1.6} strokeLinejoin="round" />
+					</svg>
+				</div>
+			);
+		}
+	}
+	return null;
+};