morfeo 0.3.3 → 0.3.4

package/index.d.ts

@@ -154,8 +154,30 @@ interface EscenaMotorBase extends EscenaBase {
 	rotuloEn?: Momento;
 	rotuloTam?: number;
 	/** 'normal' | 'contorno' (blanco con contorno, clave en acento) | 'pastilla' (caja oscura inclinada: ¡CUIDADO!). Por defecto, el del estilo. */
-	rotuloEstilo?: 'normal' | 'contorno' | 'pastilla';
+	/**
+	 * 'sello': sello de goma inclinado que cae de golpe ('¡SIN LUZ!') · 'paso': titular arriba a la izquierda con
+	 * insignia numerada (`rotuloPaso`) · 'pixel': letra de videojuego en caja de color (`rotuloColor`: 'verde', 'rojo'…).
+	 */
+	rotuloEstilo?: 'normal' | 'contorno' | 'pastilla' | 'sello' | 'paso' | 'pixel';
 	rotuloInclinar?: number;
+	/** Número de la insignia del rótulo 'paso'. */
+	rotuloPaso?: number | string;
+	/** Color del sello, del paso o de la caja pixel: 'rojo', 'verde', 'azul', 'amarillo', 'naranja', 'gris', 'negro', 'morado' o CSS. */
+	rotuloColor?: string;
+	/** Altura del rótulo (px de 1920). */
+	rotuloY?: number;
+	/**
+	 * Modo de imagen: el mundo, el fondo y las capas cambian a 'rayosx' (cian sobre negro), 'plano' (blueprint azul con
+	 * rejilla) u 'holograma' (azul translúcido con rejilla y escaneo), con un barrido. Rótulo y subtítulos no cambian.
+	 * Si la escena siguiente tiene el mismo `modo`, sigue sin volver a barrer.
+	 */
+	modo?: 'rayosx' | 'plano' | 'holograma';
+	/** Palabra o segundos en que entra el modo (por defecto, al inicio de la escena). */
+	modoEn?: Momento;
+	/** Palabra o segundos en que vuelve a la imagen normal. */
+	modoHasta?: Momento;
+	/** Invertir la imagen en el modo (fondo claro → oscuro). Por defecto sí en looks claros (3d, maqueta, explicativo, infografia, minimal). */
+	modoInvertir?: boolean;
 	/** Palabras clave de la escena para los subtítulos (la que lleva caja o color de acento en cada frase). */
 	claves?: string[];
 	/** Ajustes del tema solo para esta escena. */
@@ -183,7 +205,7 @@ export interface Tema {
 	colores: {texto: string; acento: string; acento2: string; suave: string; tarjeta: string; tarjetaTexto: string; borde: string};
 	fuentes: {titulo: string; texto: string; mono: string};
 	tituloMayusculas: boolean;
-	subtitulos: {tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno'; y: number; tam: number; color: string; pendiente: string; resalte: string; maxPalabras: number; mayusculas?: boolean | 'inicial'; contorno?: number; fondo?: string};
+	subtitulos: {tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno'; y: number; tam: number; color: string; pendiente: string; resalte: string; maxPalabras: number; mayusculas?: boolean | 'inicial'; contorno?: number; fondo?: string; /** Colores que rotan entre las palabras clave (palabra, pop). */ coloresClave?: string[]};
 	transicion: Transicion;
 	/** Ritmo de las animaciones: duraciones (s) y curva de las entradas. */
 	movimiento?: {entrada?: number; salida?: number; transicion?: number; curva?: 'suave' | 'resorte' | 'seca'};
@@ -195,7 +217,7 @@ export interface Tema {
 		vinetaColor?: string;
 	};
 	/** Rótulo de cada escena: estilo 'normal' | 'contorno' | 'pastilla', inclinación, altura (px) y tamaño. */
-	rotulo?: {estilo?: 'normal' | 'contorno' | 'pastilla'; inclinar?: number; y?: number; tam?: number};
+	rotulo?: {estilo?: 'normal' | 'contorno' | 'pastilla' | 'sello' | 'paso' | 'pixel'; inclinar?: number; y?: number; tam?: number; color?: string};
 	marca: 'esquina' | 'arriba' | 'ninguna';
 	zoomLento: number;
 }

package/lib/config.mjs

@@ -22,6 +22,8 @@ const parecidas = (nombre, lista, n = 3) => {
 export const TIPOS_CLASICOS = ['title', 'year', 'text', 'icon', 'compare', 'card', 'dialog', 'aliens', 'memory', 'morph', 'cta'];
 export const TIPOS_MOTOR = ['capas', 'titular', 'dato', 'lista', 'telefono', 'comparar', 'eleccion', 'cta'];
 export const TIPOS_ESCENA = [...new Set([...TIPOS_CLASICOS, ...TIPOS_MOTOR])];
+export const ROTULOS = ['normal', 'contorno', 'pastilla', 'sello', 'paso', 'pixel'];
+export const MODOS = ['rayosx', 'plano', 'holograma'];
 export const ESTILOS = ['datos-curiosos', 'explicativo', 'documental', 'ilustrado', 'historia', 'mesa', 'serie', 'infografia', '3d', 'maqueta', 'minimal'];
 export const TIPOS_CAPA = ['imagen', 'video', 'texto', 'contador', 'chip', 'etiqueta', 'numero', 'tarjeta', 'telefono', 'forma', 'icono', 'emoji', 'marca', 'particulas', 'grupo', 'modelo', 'componente', 'barra', 'medidor', 'votacion', 'estado', 'noticia', 'chat', 'onda', 'globo', 'seguir', 'personaje', 'escena3d', 'ventana', 'escenario', 'recurso', 'dato', 'medida', 'trazo', 'contorno', 'fuente', 'seccion', 'insignia', 'sello', 'cursor', 'terminal', 'nombre', 'accion', 'reloj', 'cronometro', 'termometro', 'recipientes', 'ficha', 'checklist', 'mapa'];
 export const ESCENARIOS = ['bosque', 'cuarto', 'departamento', 'tunel', 'pasillo'];
@@ -313,6 +315,11 @@ function validarVideo(id, v, ctx) {
 			);
 		if (s.capas != null) validarCapas(s.capas, `${n}`, err, ctx.componentes);
 		if (s.rotulo != null && typeof s.rotulo !== 'string') err(`${n}: \`rotulo\` debe ser un texto corto ('¿CUÁNTO *SUBIÓ*?')`);
+		if (s.rotuloEstilo != null && !ROTULOS.includes(s.rotuloEstilo)) err(`${n}: rotuloEstilo "${s.rotuloEstilo}" no existe. Opciones: ${ROTULOS.join(', ')}`);
+		if (s.rotuloPaso != null && s.rotuloEstilo !== 'paso') err(`${n}: \`rotuloPaso\` es para rotuloEstilo: 'paso'`);
+		if (s.modo != null) {
+			if (!MODOS.includes(s.modo)) err(`${n}: modo "${s.modo}" no existe. Opciones: ${MODOS.join(', ')}`);
+		} else if (s.modoEn != null || s.modoHasta != null) err(`${n}: \`modoEn\`/\`modoHasta\` necesitan \`modo\` ('rayosx', 'plano' u 'holograma')`);
 		if (s.claves != null && (!Array.isArray(s.claves) || s.claves.some((k) => typeof k !== 'string'))) err(`${n}: \`claves\` debe ser una lista de palabras (['cerebro'])`);
 		if (s.toma != null) {
 			const tm = s.toma;

package/lib/palabras.mjs

@@ -56,7 +56,7 @@ export function revisarPalabras(v, d) {
 		if (!dichas.length) return;
 		const momentos = [];
 		// los de la escena misma (rotuloEn, at/click de las clásicas) y los de sus capas
-		for (const k of ['rotuloEn', 'at', 'click']) {
+		for (const k of ['rotuloEn', 'modoEn', 'modoHasta', 'at', 'click']) {
 			const p = palabraDe(s[k]);
 			if (p) momentos.push([k, p]);
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "morfeo",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"description": "Genera videos verticales animados (Remotion + Three.js) con voz, música y subtítulos, desde un guion en código o escrito por IA.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE",

package/python/musica.py

@@ -237,7 +237,15 @@ def mix(vid, style, outdir, TIM, SPEC, durs, ev):
             for i in range(len(sp["rows"])): add(sfx, 0.2 * whoosh(rng, 0.15), t0 + m["speech"] * 0.55 + i * 0.12)
         if ty == "cta": add(sfx, 0.4 * tick(), t0 + 1.6)
         # motor de capas: cada capa suena cuando entra (las explícitas siempre; las automáticas, más bajas y sin amontonarse)
-        if sp.get("rotulo"): add(sfx, 0.5 * efecto("whoosh", rng), t0 + momento(sp.get("rotuloEn", 0.12), ev, si, m) - 0.05)
+        if sp.get("rotulo"):
+            # el sello cae de golpe y la letra pixel suena como pantalla vieja; los demás rótulos entran con un whoosh
+            est = sp.get("rotuloEstilo") or ""
+            ef, vol = {"sello": ("golpe", 0.9), "pixel": ("tick", 0.8)}.get(est, ("whoosh", 0.5))
+            add(sfx, vol * efecto(ef, rng), t0 + momento(sp.get("rotuloEn", 0.12), ev, si, m) - (0.0 if est == "sello" else 0.05))
+        # modo de imagen (rayos X, plano, holograma): barrido al entrar, salvo que siga de la escena anterior
+        prev = SPEC[si - 1] if si > 0 else None
+        if sp.get("modo") and not (prev and prev.get("modo") == sp.get("modo") and prev.get("modoHasta") is None and sp.get("modoEn") is None):
+            add(sfx, 0.35 * efecto("whoosh", rng), t0 + momento(sp.get("modoEn", 0), ev, si, m))
         usados = []
         for capa, ef, explicito in sorted(capas_con_sonido(sp), key=lambda x: momento(x[0].get("en"), ev, si, m)):
             tc = t0 + momento(capa.get("en"), ev, si, m)

package/remotion/estilo.ts

@@ -36,10 +36,12 @@ export const fondoDe = (indice: number) => FONDOS[indice % FONDOS.length];
 export const ANTON = 'Anton';
 export const MONT = 'Montserrat';
 export const MONO = 'JetBrains Mono';
+export const PIXEL = 'Silkscreen';
 export const fuentesListas = Promise.all([
 	loadFont({family: ANTON, url: staticFile('fuentes/Anton.ttf')}),
 	loadFont({family: MONT, url: staticFile('fuentes/Montserrat.ttf'), weight: '100 900'}),
 	loadFont({family: MONO, url: staticFile('fuentes/JetBrainsMono.ttf'), weight: '100 800'}),
+	loadFont({family: PIXEL, url: staticFile('fuentes/Silkscreen.ttf')}),
 ]);
 
 // Curvas

package/remotion/motor/Video.tsx

@@ -2,9 +2,10 @@
 import React from 'react';
 import {AbsoluteFill, Audio, staticFile} from 'remotion';
 import {Avatar, MarcaContexto, useMarca} from '../piezas';
-import {FPS, H, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
+import {FPS, H, PIXEL, W, ancho, clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
 import type {Datos, Escena} from '../tipos';
 import {Capas} from './capas';
+import {Modo} from './modos';
 import {FondoTema, Post, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
@@ -12,6 +13,8 @@ import {mezclar, temaDe, type Tema} from './tema';
 import {azar, cuando, partesResaltadas, type CtxEscena} from './util';
 
 const TRANSICION = 0.35;
+// estilos con fondo claro (cielo, papel): los modos de imagen invierten para que el fondo quede oscuro
+const LOOKS_CLAROS = ['3d', 'maqueta', 'explicativo', 'infografia', 'minimal'];
 
 /** 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);
@@ -136,6 +139,9 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	} catch {}
 	const claro = tema.colores.texto !== '#FFFFFF';
 	const estilo = e.p.rotuloEstilo ?? tema.rotulo?.estilo ?? 'normal';
+	if (estilo === 'sello') return <RotuloSello texto={texto} t={t - t0} tema={tema} e={e} />;
+	if (estilo === 'paso') return <RotuloPaso texto={texto} t={t - t0} tema={tema} e={e} />;
+	if (estilo === 'pixel') return <RotuloPixel texto={texto} t={t - t0} tema={tema} e={e} />;
 	const contorno = estilo === 'contorno' || (estilo === 'normal' && !claro && (S.contorno ?? 0) > 0);
 	const grosor = estilo === 'contorno' ? Math.max(8, Math.round(tam * 0.11)) : S.contorno;
 	const pastilla = estilo === 'pastilla';
@@ -167,6 +173,163 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	);
 };
 
+/** Colores con nombre para `rotuloColor` (o cualquier color CSS). */
+const COLORES_ROTULO: Record<string, string> = {rojo: '#E0312B', verde: '#22A04B', azul: '#2F5BEA', amarillo: '#F5B70A', naranja: '#F2711C', gris: '#8A8F98', negro: '#1B1B1F', morado: '#7B4FD6'};
+const colorRotulo = (c: unknown, porDefecto: string) => (typeof c === 'string' && c ? COLORES_ROTULO[c] ?? c : porDefecto);
+
+// textura de tinta gastada para el sello: ruido fractal convertido en máscara (huecos donde la tinta no pegó)
+const TINTA = `url("data:image/svg+xml,${encodeURIComponent(
+	"<svg xmlns='http://www.w3.org/2000/svg' width='600' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.05'/></filter><rect width='100%' height='100%' filter='url(#f)'/></svg>",
+)}")`;
+
+/**
+ * Sello de goma: texto en mayúsculas con borde doble, inclinado, que cae de golpe (escala 1.7 → 1 en 0,16 s y un
+ * pequeño rebote). La tinta tiene huecos como un sello real. `rotuloColor` (rojo por defecto) y `rotuloInclinar`.
+ */
+const RotuloSello: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const color = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, '#E0312B');
+	const caida = clamp(t / 0.16);
+	const rebote = t > 0.16 ? Math.sin(clamp((t - 0.16) / 0.22) * Math.PI) * 0.05 : 0;
+	const escala = lerp(1.7, 1, easeIO(caida)) - rebote;
+	const inclinar = e.p.rotuloInclinar ?? tema.rotulo?.inclinar ?? -7;
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 92;
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	try {
+		const w = ancho(limpio, tema.fuentes.titulo, tam, 900);
+		if (w > 820) tam = Math.max(44, Math.floor((tam * 820) / w));
+	} catch {}
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 1180;
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none', opacity: clamp(caida * 4)}}>
+			<div
+				style={{
+					transform: `translate(0, -50%) rotate(${inclinar}deg) scale(${escala})`,
+					fontFamily: tema.fuentes.titulo,
+					fontWeight: 900,
+					fontSize: tam,
+					lineHeight: 1,
+					letterSpacing: tam * 0.03,
+					color,
+					textTransform: 'uppercase',
+					padding: `${tam * 0.2}px ${tam * 0.34}px ${tam * 0.16}px`,
+					border: `${Math.max(5, tam * 0.08)}px solid ${color}`,
+					borderRadius: tam * 0.12,
+					outline: `${Math.max(2, tam * 0.03)}px solid ${color}`,
+					outlineOffset: -Math.max(9, tam * 0.15),
+					background: 'rgba(255,255,255,0.82)',
+					boxShadow: '0 10px 26px rgba(0,0,0,0.22)',
+					WebkitMaskImage: TINTA,
+					maskImage: TINTA,
+					WebkitMaskSize: '600px 240px',
+					whiteSpace: 'nowrap',
+				}}
+			>
+				{limpio}
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Titular de paso: arriba a la izquierda, en dos renglones, con `*clave*` en color y una insignia con el número del
+ * paso (`rotuloPaso: 3`). Entra deslizándose de la izquierda. Para explicadores "paso a paso".
+ */
+const RotuloPaso: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const k = easeIO(clamp(t / 0.35));
+	const color = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, tema.colores.acento);
+	const tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 64;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 250;
+	const n = e.p.rotuloPaso;
+	return (
+		<div style={{position: 'absolute', left: 56, right: 56, top: y, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, pointerEvents: 'none'}}>
+			<div style={{clipPath: `inset(0 ${(1 - k) * 100}% 0 0)`, transform: `translateX(${(1 - k) * -40}px)`, maxWidth: n != null ? 800 : 968}}>
+				<span
+					style={{
+						fontFamily: tema.fuentes.titulo,
+						fontWeight: 900,
+						fontSize: tam,
+						lineHeight: 1.02,
+						color: '#FFFFFF',
+						textTransform: 'uppercase',
+						WebkitTextStroke: `${Math.round(tam * 0.1)}px #15151A`,
+						paintOrder: 'stroke fill',
+						textShadow: '0 5px 0 rgba(0,0,0,0.25)',
+					}}
+				>
+					{partesResaltadas(texto).map(([p, r], i) => (
+						<span key={i} style={r ? {color} : undefined}>
+							{p}
+						</span>
+					))}
+				</span>
+			</div>
+			{n != null ? (
+				<div
+					style={{
+						flex: 'none',
+						minWidth: tam * 0.95,
+						height: tam * 0.95,
+						padding: `0 ${tam * 0.2}px`,
+						borderRadius: tam * 0.16,
+						background: '#15151A',
+						border: '4px solid #FFFFFF',
+						color: '#FFFFFF',
+						fontFamily: tema.fuentes.titulo,
+						fontWeight: 900,
+						fontSize: tam * 0.62,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						transform: `scale(${resorte(clamp((t - 0.15) / 0.3), 0.35)})`,
+						boxShadow: '0 8px 18px rgba(0,0,0,0.3)',
+					}}
+				>
+					{String(n)}
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+/**
+ * Rótulo pixel: letra de videojuego en una caja de color (verde = bien, rojo = mal; `rotuloColor`). Las letras
+ * aparecen de una en una, como en una pantalla vieja. Arriba por defecto.
+ */
+const RotuloPixel: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> = ({texto, t, tema, e}) => {
+	const fondo = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, '#2F5BEA');
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	const letras = [...limpio];
+	const vistas = Math.min(letras.length, Math.floor(t / 0.035) + 1);
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 64;
+	try {
+		const w = ancho(limpio, PIXEL, tam, 400);
+		if (w > 900) tam = Math.max(30, Math.floor((tam * 900) / w));
+	} catch {}
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 230;
+	return (
+		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
+			<div
+				style={{
+					transform: 'translateY(-50%)',
+					fontFamily: PIXEL,
+					fontSize: tam,
+					lineHeight: 1.15,
+					color: '#FFFFFF',
+					background: fondo,
+					padding: `${tam * 0.18}px ${tam * 0.3}px ${tam * 0.12}px`,
+					border: '4px solid rgba(255,255,255,0.9)',
+					boxShadow: '6px 6px 0 rgba(0,0,0,0.45)',
+					whiteSpace: 'nowrap',
+					imageRendering: 'pixelated',
+				}}
+			>
+				<span>{letras.slice(0, vistas).join('')}</span>
+				<span style={{visibility: 'hidden'}}>{letras.slice(vistas).join('')}</span>
+			</div>
+		</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';
@@ -244,15 +407,17 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	}
 	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} />
+			<Modo d={d} si={si} t={t} T={T} claro={LOOKS_CLAROS.includes(d.estilo ?? '') || tema.colores.texto !== '#FFFFFF'}>
+				{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} sinFondo={conMundo} />
 				</AbsoluteFill>
-			) : null}
-			<AbsoluteFill style={estiloActual}>
-				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
-			</AbsoluteFill>
+			</Modo>
 			{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 */}

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> = {