morfeo 0.1.3 → 0.2.0

package/remotion/motor/capas.tsx

@@ -3,7 +3,8 @@
 import React from 'react';
 import {Img, OffthreadVideo} from 'remotion';
 import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
-import {H, W, backOut, clamp, easeIO, easeOut, lerp} from '../estilo';
+import {H, W, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
+import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
@@ -16,13 +17,18 @@ export type Capa = Record<string, any> & {tipo: string};
 const ENTRADA_DUR = 0.5;
 
 // el personaje de una serie sigue en pantalla de escena en escena: no "reaparece" en cada una
-const entradaPorDefecto = (c: Capa) => (c.tipo === 'personaje' ? 'ninguna' : 'escala');
+// las anotaciones que se dibujan solas (línea que avanza) tampoco llevan entrada de capa
+const entradaPorDefecto = (c: Capa) => (c.tipo === 'personaje' || ANOTACIONES_SIN_ENTRADA.includes(c.tipo) ? 'ninguna' : c.tipo === 'fuente' || c.tipo === 'seccion' ? 'subir' : 'escala');
 
 /** Posición, escala, giro y opacidad de una capa en el instante t (entrada, movimiento, salida). */
-function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
+export function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	const t = ctx.t;
 	const t0 = cuando(c.en, ctx, 0);
-	const dur = c.duracionEntrada ?? ENTRADA_DUR;
+	const mov = ctx.tema?.movimiento ?? {};
+	const dur = c.duracionEntrada ?? mov.entrada ?? ENTRADA_DUR;
+	const curva = c.curva ?? mov.curva ?? 'suave';
+	const E = curva === 'resorte' ? (x: number) => resorte(x, 0.3) : curva === 'seca' ? easeOutExpo : easeOut;
+	let b = 0; // desenfoque de entrada (px)
 	const p = dur > 0 ? clamp((t - t0) / dur) : t >= t0 ? 1 : 0;
 	let x = c.x ?? (relativo ? 0 : W / 2);
 	let y = c.y ?? (relativo ? 0 : H / 2);
@@ -32,38 +38,43 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	if (t < t0) return null; // con entrada 'ninguna' aparece de golpe en su momento
 	switch (c.entrada ?? entradaPorDefecto(c)) {
 		case 'aparecer':
-			o *= easeOut(p);
+			o *= E(p);
 			break;
 		case 'escala':
-			s *= easeOut(p);
+			s *= E(p);
 			o *= clamp(p * 3);
 			break;
 		case 'rebote':
 			s *= backOut(p);
 			break;
 		case 'deslizar-izq':
-			x -= (1 - easeOut(p)) * W;
+			x -= (1 - E(p)) * W;
 			break;
 		case 'deslizar-der':
-			x += (1 - easeOut(p)) * W;
+			x += (1 - E(p)) * W;
 			break;
 		case 'deslizar-arriba':
-			y += (1 - easeOut(p)) * H * 0.6;
+			y += (1 - E(p)) * H * 0.6;
 			break;
 		case 'deslizar-abajo':
-			y -= (1 - easeOut(p)) * H * 0.6;
+			y -= (1 - E(p)) * H * 0.6;
 			break;
 		case 'caer':
 			y -= (1 - backOut(p, 1.2)) * 700;
 			o *= clamp(p * 4);
 			break;
 		case 'girar':
-			r += (1 - easeOut(p)) * -200;
-			s *= easeOut(p);
+			r += (1 - E(p)) * -200;
+			s *= E(p);
+			break;
+		case 'enfocar':
+			o *= E(p);
+			b = (1 - E(p)) * 22;
+			s *= lerp(1.08, 1, E(p));
 			break;
 		case 'subir':
-			y += (1 - easeOut(p)) * 80;
-			o *= easeOut(p);
+			y += (1 - E(p)) * 80;
+			o *= E(p);
 			break;
 	}
 	// movimiento: mover: {a: [x, y], en?, duracion?, curva?: 'suave' | 'lineal'}
@@ -94,7 +105,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	// salida: hasta: palabra o segundos; sale con la animación `salida` (aparecer = desvanecer)
 	if (c.hasta != null) {
 		const h = cuando(c.hasta, ctx, ctx.dur);
-		const q = clamp((t - h) / 0.35);
+		const q = clamp((t - h) / (mov.salida ?? 0.35));
 		if (q >= 1) return null;
 		if (q > 0) {
 			const sal = c.salida ?? 'aparecer';
@@ -106,7 +117,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 		}
 	}
 	if (s <= 0.001 || o <= 0.001) return null;
-	return {x, y, s, r, o};
+	return {x, y, s, r, o, b};
 }
 
 const sombra = (c: Capa) => (c.sombra === false ? undefined : c.sombra === true || c.sombra == null ? 'drop-shadow(0 18px 24px rgba(0,0,0,0.35))' : c.sombra);
@@ -133,10 +144,16 @@ function aplicarCambios(c: Capa, ctx: CtxEscena): Capa {
 }
 
 /** Una capa con su animación aplicada. */
-export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i?: number}> = ({c: c0, ctx, relativo = false, i = 0}) => {
+export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i?: number; base?: {x: number; y: number} | null}> = ({c: c0, ctx, relativo = false, i = 0, base}) => {
 	const c = aplicarCambios(c0, ctx);
-	const a = animar(c, ctx, relativo);
+	// `sigue: 'id'`: la capa se coloca respecto a otra (x, y son la distancia a su centro) y se mueve con ella
+	if (c.sigue && !base) return null;
+	const a = animar(c, ctx, relativo || !!base);
 	if (!a) return null;
+	if (base) {
+		a.x += base.x;
+		a.y += base.y;
+	}
 	const ancla = c.ancla === 'izquierda' ? '0%' : c.ancla === 'derecha' ? '-100%' : '-50%';
 	return (
 		<div
@@ -147,7 +164,7 @@ export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i
 				transform: `translate(${ancla}, -50%) scale(${a.s}) rotate(${a.r}deg)${c.voltear ? ' scaleX(-1)' : ''}`,
 				transformOrigin: c.ancla === 'izquierda' ? 'left center' : c.ancla === 'derecha' ? 'right center' : 'center',
 				opacity: a.o,
-				filter: [c.tipo === 'imagen' || c.tipo === 'emoji' ? sombra(c) : undefined, c.desenfoque ? `blur(${c.desenfoque}px)` : undefined].filter(Boolean).join(' ') || undefined,
+				filter: [c.tipo === 'imagen' || c.tipo === 'emoji' ? sombra(c) : undefined, c.desenfoque || a.b ? `blur(${(c.desenfoque ?? 0) + a.b}px)` : undefined].filter(Boolean).join(' ') || undefined,
 				zIndex: c.z ?? i,
 			}}
 		>
@@ -257,9 +274,10 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			const Comp = componente(c.nombre);
 			if (!Comp) throw new Error(`No hay un componente llamado "${c.nombre}". Regístralo en morfeo.config.mjs → componentes. Disponibles: ${nombresComponentes().join(', ') || 'ninguno'}`);
 			const t0 = cuando(c.en, ctx, 0);
-			return <Comp {...(c.props ?? {})} t={ctx.t - t0} dur={ctx.dur} palabras={ctx.palabras} tema={ctx.tema} cuando={(en: unknown) => cuando(en, ctx) - t0} />;
+			return <Comp {...(c.props ?? {})} t={ctx.t - t0} dur={ctx.dur} palabras={ctx.palabras} tema={ctx.tema} cuando={(en: unknown) => cuando(en, ctx) - t0} escena={ctx.escena} tEscena={ctx.tEscena} inicios={ctx.inicios} camara={ctx.camara} />;
 		}
 		default:
+			if (ANOTACIONES.includes(c.tipo)) return <Anotacion c={c} ctx={ctx} />;
 			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
 	}
 };
@@ -621,12 +639,17 @@ const Personaje: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 };
 
 /** Todas las capas de una escena. */
-export const Capas: React.FC<{capas: Capa[]; ctx: CtxEscena}> = ({capas, ctx}) => (
-	<>
-		{capas.map((c, i) => (
-			<CapaVista key={i} c={c} ctx={ctx} i={i} />
-		))}
-	</>
-);
+export const Capas: React.FC<{capas: Capa[]; ctx: CtxEscena}> = ({capas, ctx}) => {
+	// posiciones de las capas con `id`, para las que las siguen (`sigue: 'id'`)
+	const pos: Record<string, {x: number; y: number} | null> = {};
+	if (capas.some((c) => c.sigue)) for (const c of capas) if (c.id != null && !c.sigue) pos[c.id] = animar(aplicarCambios(c, ctx), ctx, false);
+	return (
+		<>
+			{capas.map((c, i) => (
+				<CapaVista key={i} c={c} ctx={ctx} i={i} base={c.sigue ? pos[c.sigue] ?? null : undefined} />
+			))}
+		</>
+	);
+};
 
 export {useMarca};

package/remotion/motor/fondo.tsx

@@ -156,5 +156,59 @@ export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla
 	);
 };
 
-export const Vineta: React.FC<{fuerza: number}> = ({fuerza}) =>
-	fuerza > 0 ? <AbsoluteFill style={{background: `radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,${fuerza}) 100%)`, pointerEvents: 'none'}} /> : null;
+/** Convierte #RRGGBB a "r, g, b". */
+const rgb = (hex: string) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(', ');
+
+export const Vineta: React.FC<{fuerza: number; color?: string}> = ({fuerza, color}) =>
+	fuerza > 0 ? <AbsoluteFill style={{background: `radial-gradient(ellipse at center, transparent 45%, rgba(${color ? rgb(color) : '0, 0, 0'}, ${fuerza}) 100%)`, pointerEvents: 'none'}} /> : null;
+
+/**
+ * Acabado sobre todo el cuadro (va quieto, fuera de la cámara):
+ *   luz: cono de luz desde arriba (lámpara, foco de escenario) · tinte: capa de color que unifica la paleta ·
+ *   desenfoqueBordes: blur arriba y abajo, que da sensación de maqueta y de profundidad.
+ */
+export const Post: React.FC<{tema: Tema}> = ({tema}) => {
+	const p = tema.post;
+	if (!p) return null;
+	const L = p.luz;
+	const lx = L?.x ?? 540;
+	const ly = L?.y ?? -60;
+	const ancho = L?.ancho ?? 760;
+	const largo = L?.largo ?? 1500;
+	const borde = (mascara: string): React.CSSProperties => ({
+		backdropFilter: `blur(${p.desenfoqueBordes}px)`,
+		WebkitBackdropFilter: `blur(${p.desenfoqueBordes}px)`,
+		maskImage: mascara,
+		WebkitMaskImage: mascara,
+		pointerEvents: 'none',
+	});
+	return (
+		<>
+			{L ? (
+				<AbsoluteFill style={{mixBlendMode: 'screen', opacity: L.fuerza ?? 0.5, pointerEvents: 'none'}}>
+					<svg width={W} height={H}>
+						<defs>
+							<linearGradient id="post-luz" x1="0" y1="0" x2="0" y2="1">
+								<stop offset="0" stopColor={L.color ?? '#FFE6B0'} stopOpacity="0.95" />
+								<stop offset="1" stopColor={L.color ?? '#FFE6B0'} stopOpacity="0" />
+							</linearGradient>
+							<filter id="post-luz-blur" x="-30%" y="-10%" width="160%" height="120%">
+								<feGaussianBlur stdDeviation="38" />
+							</filter>
+						</defs>
+						<g transform={`rotate(${L.angulo ?? 0} ${lx} ${ly})`} filter="url(#post-luz-blur)">
+							<polygon points={`${lx - 40},${ly} ${lx + 40},${ly} ${lx + ancho / 2},${ly + largo} ${lx - ancho / 2},${ly + largo}`} fill="url(#post-luz)" />
+						</g>
+					</svg>
+				</AbsoluteFill>
+			) : null}
+			{p.desenfoqueBordes ? (
+				<>
+					<AbsoluteFill style={borde('linear-gradient(180deg, #000 0%, transparent 24%)')} />
+					<AbsoluteFill style={borde('linear-gradient(0deg, #000 0%, transparent 22%)')} />
+				</>
+			) : null}
+			{p.tinte ? <AbsoluteFill style={{background: p.tinte.color, opacity: p.tinte.fuerza ?? 0.25, mixBlendMode: p.tinte.modo ?? 'soft-light', pointerEvents: 'none'}} /> : null}
+		</>
+	);
+};

package/remotion/motor/plantillas.tsx

@@ -24,7 +24,7 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 			const out: Capa[] = [];
 			if (p.etiqueta) out.push({tipo: 'etiqueta', texto: p.etiqueta, x: 80, y: y - 92, ancla: 'izquierda', entrada: 'aparecer'});
 			out.push({tipo: 'texto', texto: p.texto ?? '', x: 80, y, ancla: 'izquierda', alinear: 'left', tam: p.tam ?? 104, maxAncho: p.numero != null ? 800 : 920, entrada: 'subir', en: p.en});
-			if (p.numero != null) out.push({tipo: 'numero', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
+			if (p.numero != null) out.push({tipo: 'insignia', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
 			if (p.sub) out.push({tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 600, color: tema.colores.suave, x: 80, y: y + 110, ancla: 'izquierda', alinear: 'left', entrada: 'aparecer', en: 0.3});
 			return [...out, ...extra];
 		}
@@ -114,6 +114,31 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 		}
 		case 'cta': {
 			const nombre = marca.nombre;
+			// cierre que pide una acción concreta (lo que hacen los videos virales): comentar una palabra o mandárselo a alguien
+			if (p.pide === 'comenta' || p.pide === 'comparte') {
+				const claro = tema.colores.texto !== '#FFFFFF';
+				const caja = claro ? '#FFFFFF' : '#1C1D24';
+				const letra = claro ? '#141414' : '#FFFFFF';
+				const out: Capa[] = [{tipo: 'marca', tam: 210, x: 540, y: 640, entrada: 'rebote'}];
+				if (p.pide === 'comenta') {
+					const palabra = String(p.palabra ?? 'SÍ').toUpperCase();
+					out.push(
+						{tipo: 'texto', texto: p.texto ?? `Escribe *${palabra}*`, x: 540, y: 900, tam: 110, maxAncho: 940, entrada: 'subir', en: 0.2},
+						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
+						// caja de comentario que se escribe sola y se envía
+						{tipo: 'terminal', x: 540, y: 1220, ancho: 760, tam: 46, titulo: 'comentario', fondo: caja, colorTexto: letra, en: 0.5, entrada: 'subir', color: tema.colores.acento, lineas: [{texto: palabra, en: 0.9}]},
+						{tipo: 'sello', texto: 'ENVIADO', x: 760, y: 1360, en: 2.1, color: tema.colores.acento, tam: 44},
+					);
+				} else {
+					out.push(
+						{tipo: 'texto', texto: p.texto ?? 'Mándaselo a *alguien*', x: 540, y: 900, tam: 104, maxAncho: 940, entrada: 'subir', en: 0.2},
+						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010, maxAncho: 900, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
+						{tipo: 'texto', texto: `ENVIAR A…\n${p.a ?? 'AMIGO'}`, fuente: 'texto', tam: 46, peso: 800, color: letra, fondo: caja, relleno: '24px 60px', radio: 26, interlineado: 1.5, x: 540, y: 1230, entrada: 'subir', en: 0.5, mayusculas: false},
+						{tipo: 'texto', texto: 'ENVIADO ✓', fuente: 'texto', tam: 50, peso: 900, color: '#141414', fondo: tema.colores.acento, relleno: '16px 54px', radio: 99, x: 540, y: 1390, entrada: 'rebote', en: 1.6, sombra: false, sonido: 'ding'},
+					);
+				}
+				return [...out, ...extra];
+			}
 			return [
 				{tipo: 'marca', tam: 330, x: 540, y: 760, entrada: 'rebote', latir: true},
 				...(nombre ? [{tipo: 'texto', texto: nombre, x: 540, y: 1030, tam: 120, color: tema.colores.texto, entrada: 'rebote', en: 0.25, mayusculas: false}] : []),

package/remotion/motor/subtitulos.tsx

@@ -1,15 +1,26 @@
 // Subtítulos del motor de capas.
-//   karaoke: frase corta arriba; lo ya dicho en blanco, lo que falta tenue y la palabra actual resaltada.
-//   pop: 1–3 palabras grandes en mayúsculas, la actual en color de acento (estilo TikTok clásico).
+//   karaoke: frase corta arriba; lo ya dicho en un color, lo que falta tenue y la palabra actual resaltada.
+//   seleccion: las palabras aparecen al decirse; lo dicho queda tenue, la actual en claro y la palabra clave de la
+//              frase se queda dentro de una caja de selección con asas (documentales ilustrados).
+//   pop: 1–3 palabras grandes en mayúsculas; la palabra clave en color de acento y la actual da un golpe de escala.
 //   bloque: 2 renglones centrados en mayúsculas; la palabra actual dentro de una caja de color (series animadas).
-//   palabra: una sola palabra grande a la vez; las largas en color de acento (videos 3D).
+//   palabra: una sola palabra grande a la vez; la palabra clave en color de acento (videos 3D).
+//   caja: la frase completa dentro de una etiqueta clara (historias, anime).
 //   karaoke con `fondo`: la frase dentro de una caja oscura (infografías).
+// Palabra clave de una frase: la que la escena marque en `claves: ['cerebro']`; si no, una cifra; si no, la más larga.
 import React from 'react';
-import {W, backOut, clamp} from '../estilo';
+import {W, backOut, clamp, easeOut, resorte} from '../estilo';
 import type {Tema} from './tema';
 
 type Palabra = [string, number, number];
 
+const limpia = (w: string) =>
+	w
+		.normalize('NFD')
+		.replace(/[̀-ͯ]/g, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9]/g, '');
+
 /** Parte las palabras de la escena en frases de hasta `max` palabras, cortando en la puntuación. */
 function frases(palabras: Palabra[], max: number): Palabra[][] {
 	const out: Palabra[][] = [];
@@ -25,23 +36,54 @@ function frases(palabras: Palabra[], max: number): Palabra[][] {
 	return out;
 }
 
-export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; dur: number}> = ({tema, palabras, t, dur}) => {
+/** Índice de la palabra clave de la frase (-1 = ninguna). */
+function claveDe(g: Palabra[], claves?: string[]): number {
+	if (claves?.length) {
+		const cs = claves.map(limpia).filter(Boolean);
+		const i = g.findIndex(([w]) => cs.some((c) => limpia(w).startsWith(c)));
+		if (i >= 0) return i;
+	}
+	const cifra = g.findIndex(([w]) => /\d/.test(w));
+	if (cifra >= 0) return cifra;
+	let mejor = -1;
+	let largo = 7; // solo palabras de 8 letras o más
+	g.forEach(([w], i) => {
+		const n = limpia(w).length;
+		if (n > largo) {
+			largo = n;
+			mejor = i;
+		}
+	});
+	return mejor;
+}
+
+/** Golpe de escala al decir una palabra: sube de golpe y se asienta. */
+const golpe = (t: number, a: number, fuerza: number) => (t < a ? 1 : 1 + fuerza * (1 - easeOut((t - a) / 0.22)));
+
+const Asa: React.FC<{x: string; y: string; color: string}> = ({x, y, color}) => (
+	<span style={{position: 'absolute', left: x, top: y, width: 11, height: 11, marginLeft: -6, marginTop: -6, background: '#fff', border: `2.5px solid ${color}`, boxSizing: 'border-box'}} />
+);
+
+export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; dur: number; claves?: string[]}> = ({tema, palabras, t, dur, claves}) => {
 	const S = tema.subtitulos;
 	if (S.tipo === 'ninguno' || !palabras.length) return null;
-	const max = S.tipo === 'pop' ? 3 : S.tipo === 'bloque' ? Math.min(S.maxPalabras, 5) : S.tipo === 'palabra' ? 1 : S.maxPalabras;
+	const max = S.tipo === 'pop' ? Math.min(S.maxPalabras, 4) : S.tipo === 'bloque' ? Math.min(S.maxPalabras, 5) : S.tipo === 'palabra' ? 1 : S.maxPalabras;
 	const grupos = frases(palabras, max);
 	const gi = grupos.findIndex((g, i) => t < (grupos[i + 1]?.[0][1] ?? dur) - 0.02);
 	const g = grupos[gi];
 	if (!g || t < g[0][1] - 0.12) return null;
 	const entrada = clamp((t - (g[0][1] - 0.12)) / 0.18);
+	const clave = claveDe(g, claves);
+	const texto = (w: string) => (S.mayusculas ? w.toUpperCase() : w);
 
 	if (S.tipo === 'palabra') {
 		const [w] = g[0];
-		const acento = w.replace(/[^\p{L}\p{N}]/gu, '').length >= 7;
+		// 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;
 		return (
-			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, textAlign: 'center'}}>
+			<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 ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: '0 6px 0 rgba(0,0,0,0.35)'}}>
-					{S.mayusculas ? w.toUpperCase() : w}
+					{texto(w)}
 				</span>
 			</div>
 		);
@@ -67,7 +109,8 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 								borderRadius: 10,
 								WebkitTextStroke: actual && S.resalte ? undefined : `${S.contorno ?? 8}px #1a1a1a`,
 								paintOrder: 'stroke fill',
-								transform: `scale(${actual ? 1.06 : 1})`,
+								display: 'inline-block',
+								transform: `scale(${golpe(t, a, 0.1)})`,
 							}}
 						>
 							{w}
@@ -79,14 +122,94 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 	}
 
 	if (S.tipo === 'pop') {
+		const tam = S.tam * 1.5;
 		return (
-			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: `0 ${Math.round(S.tam * 1.5 * 0.4 + 20)}px`}}>
-				{g.map(([w, a, b], i) => {
-					const activa = t >= a && t < b + 0.05;
+			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${resorte(entrada, 0.2)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: `0 ${Math.round(tam * 0.3)}px`}}>
+				{g.map(([w, a], i) => (
+					<span
+						key={i}
+						style={{
+							fontFamily: tema.fuentes.titulo,
+							fontWeight: 900,
+							fontSize: tam,
+							lineHeight: 1.12,
+							color: i === clave ? tema.colores.acento : S.color,
+							WebkitTextStroke: `${S.contorno ?? 10}px #000`,
+							paintOrder: 'stroke fill',
+							textShadow: '0 6px 0 rgba(0,0,0,0.4)',
+							textTransform: 'uppercase',
+							display: 'inline-block',
+							transformOrigin: 'center bottom',
+							opacity: t >= a - 0.04 ? 1 : 0.55,
+							transform: `scale(${golpe(t, a, 0.14)})`,
+						}}
+					>
+						{w}
+					</span>
+				))}
+			</div>
+		);
+	}
+
+	if (S.tipo === 'caja') {
+		return (
+			<div style={{position: 'absolute', left: 70, width: W - 140, top: S.y, transform: `translateY(-50%) scale(${0.94 + 0.06 * resorte(entrada, 0.2)})`, opacity: clamp(entrada * 2), textAlign: 'center'}}>
+				<span
+					style={{
+						display: 'inline-block',
+						background: S.fondo ?? '#EAF3FF',
+						color: S.color,
+						fontFamily: tema.fuentes.texto,
+						fontWeight: 800,
+						fontSize: S.tam,
+						lineHeight: 1.25,
+						padding: '14px 30px',
+						borderRadius: 18,
+						boxShadow: '0 8px 22px rgba(0,0,0,0.28)',
+					}}
+				>
+					{g.map(([w, a], i) => (
+						<React.Fragment key={i}>
+							<span style={{opacity: t >= a - 0.04 ? 1 : 0.38, color: i === clave && S.resalte ? S.resalte : undefined}}>{texto(w)}</span>{' '}
+						</React.Fragment>
+					))}
+				</span>
+			</div>
+		);
+	}
+
+	if (S.tipo === 'seleccion') {
+		const marco = S.resalte || '#4C8DFF';
+		const dichas = g.filter(([, a]) => t >= a - 0.03);
+		if (!dichas.length) return null;
+		return (
+			<div style={{position: 'absolute', left: 90, width: W - 180, top: S.y, transform: 'translateY(-50%)', textAlign: 'center', fontFamily: tema.fuentes.texto, fontSize: S.tam, lineHeight: 1.42, textShadow: '0 2px 10px rgba(0,0,0,0.45)'}}>
+				{dichas.map(([w, a, b], i) => {
+					const actual = t < b + 0.08 || i === dichas.length - 1;
+					const esClave = i === clave;
+					const k = resorte(clamp((t - a) / 0.3), 0.3);
 					return (
-						<span key={i} style={{fontFamily: tema.fuentes.titulo, fontWeight: 900, fontSize: S.tam * 1.5, color: activa ? tema.colores.acento : S.color, WebkitTextStroke: '10px #000', paintOrder: 'stroke fill', textTransform: 'uppercase', display: 'inline-block', transformOrigin: 'center bottom', transform: `scale(${activa ? 1.1 : 1})`}}>
-							{w}
-						</span>
+						<React.Fragment key={i}>
+							<span
+								style={{
+									position: 'relative',
+									display: 'inline-block',
+									color: actual || esClave ? S.color : S.pendiente,
+									fontWeight: actual || esClave ? 800 : 600,
+									opacity: clamp((t - a + 0.03) / 0.1),
+									padding: esClave ? '0 10px' : undefined,
+									margin: esClave ? '0 2px' : undefined,
+								}}
+							>
+								{esClave ? (
+									<span style={{position: 'absolute', inset: '4px 0', border: `3px solid ${marco}`, background: `${marco}33`, borderRadius: 3, transform: `scale(${0.7 + 0.3 * k})`, opacity: clamp(k * 2)}}>
+										<Asa x="0%" y="0%" color={marco} />
+										<Asa x="100%" y="100%" color={marco} />
+									</span>
+								) : null}
+								<span style={{position: 'relative'}}>{texto(w)}</span>
+							</span>{' '}
+						</React.Fragment>
 					);
 				})}
 			</div>
@@ -111,26 +234,26 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 			}}
 		>
 			<span style={S.fondo ? {background: S.fondo, padding: '10px 22px', borderRadius: 14, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone', lineHeight: 1.6} : undefined}>
-			{g.map(([w, a, b], i) => {
-				const dicha = t >= a;
-				const actual = t >= a && t < b + 0.06;
-				return (
-					<React.Fragment key={i}>
-						<span
-							style={{
-								color: dicha ? S.color : S.pendiente,
-								fontWeight: actual ? 800 : 700,
-								background: actual && S.resalte ? S.resalte : undefined,
-								borderRadius: 10,
-								padding: actual && S.resalte ? '2px 10px' : undefined,
-								margin: actual && S.resalte ? '0 -10px' : undefined,
-							}}
-						>
-							{w}
-						</span>{' '}
-					</React.Fragment>
-				);
-			})}
+				{g.map(([w, a, b], i) => {
+					const dicha = t >= a;
+					const actual = t >= a && t < b + 0.06;
+					return (
+						<React.Fragment key={i}>
+							<span
+								style={{
+									color: dicha ? S.color : S.pendiente,
+									fontWeight: actual ? 800 : 700,
+									background: actual && S.resalte ? S.resalte : undefined,
+									borderRadius: 10,
+									padding: actual && S.resalte ? '2px 10px' : undefined,
+									margin: actual && S.resalte ? '0 -10px' : undefined,
+								}}
+							>
+								{texto(w)}
+							</span>{' '}
+						</React.Fragment>
+					);
+				})}
 			</span>
 		</div>
 	);