morfeo 0.3.1 → 0.3.4

package/README.md

@@ -1,6 +1,6 @@
 # Morfeo
 
-> **Documentación: [ureckchan.github.io/morfeo](https://ureckchan.github.io/morfeo/)** · Ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo)
+> **Documentación: [morfeo-docs-two.vercel.app](https://morfeo-docs-two.vercel.app/)** · Ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo) · Versiones: [historial](https://morfeo-docs-two.vercel.app/historial)
 
 Genera videos verticales animados (Shorts, TikTok, Reels) desde código: escribes las escenas y Morfeo agrega
 la voz, la música, los efectos de sonido, los subtítulos, las animaciones y la miniatura.

package/bin/morfeo.mjs

@@ -138,7 +138,9 @@ Pruébalo:  npx morfeo render ${pos[0]}   y revísalo:  npx morfeo hoja ${pos[0]
 			const p = await cargarProyecto(proyecto);
 			const num = (v) => (v == null || v === true ? undefined : Number(v));
 			for (const id of pos) {
-				const video = /\.(mp4|mov|webm)$/i.test(id) ? path.resolve(id) : path.join(p.salida, `${id}.mp4`);
+				const {salidaDe, ordenarSalida} = await import('../lib/salida.mjs');
+				ordenarSalida(p);
+				const video = /\.(mp4|mov|webm)$/i.test(id) ? path.resolve(id) : salidaDe(p, id);
 				console.log(hoja({video, cols: num(op.cols), filas: num(op.filas), desde: num(op.desde), hasta: num(op.hasta)}));
 			}
 			return;

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'];
@@ -158,6 +160,8 @@ export async function cargarProyecto(proyecto = process.cwd()) {
 			concurrencia: Number(process.env.MORFEO_CONCURRENCIA) || r.concurrencia || null, // null = Morfeo elige según la máquina y el modo (ver render.mjs)
 			miniatura: r.miniatura ?? true,
 			consejos: r.consejos ?? true,
+			// 'titulo' (por defecto): salida/<Título del video>.mp4, listo para subir · 'id': salida/<id>.mp4
+			nombreArchivo: r.nombreArchivo ?? 'titulo',
 		},
 	};
 }
@@ -311,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;
@@ -349,6 +358,7 @@ function validarVideo(id, v, ctx) {
 		if (clasico) err('`mundo` es del motor de capas: usa un estilo como ilustrado, 3d o mesa (no "datos-curiosos")');
 	}
 	if (v.serie != null && typeof v.serie !== 'string') err("`serie` debe ser un texto ('GYM CON CIENCIA · PARTE 5')");
+	if (v.title != null && typeof v.title !== 'string') err('`title` debe ser un texto (también es el nombre del archivo del video)');
 	if (v.calidad != null && !['alta', 'media', 'ligera'].includes(v.calidad)) err("`calidad` debe ser 'alta', 'media' o 'ligera'");
 	if (v.tags != null && (!Array.isArray(v.tags) || v.tags.some((x) => typeof x !== 'string'))) err("`tags` debe ser una lista de textos (['curiosidades', 'ciencia'])");
 	// archivos de assets/ que piden las escenas y el HUD: mejor avisar ahora que a mitad del render

package/lib/estructura.mjs

@@ -106,7 +106,7 @@ export function revisarEstructura(v, d) {
 	// 5) habla de tú
 	const todo = cuerpo.map((s) => s.say ?? '').join(' ');
 	const n = palabrasDe(todo).length;
-	const tu = (todo.match(/\b(tú|tu|tus|te|ti|contigo|imagina|tienes|eres|puedes|sabes)\b/gi) ?? []).length;
+	const tu = (todo.match(/\b(tú|tu|tus|te|ti|contigo|imagina|imaginas|tienes|eres|puedes|sabes|sabías|crees|conoces|harías|pagarías)\b/gi) ?? []).length;
 	if (n > 40 && tu === 0) add('tu', 'idea', 'No le habla al espectador ni una vez: una frase en segunda persona ("imagina que tú…") lo mete en la historia.');
 	return out;
 }

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/lib/render.mjs

@@ -6,7 +6,7 @@ import fs from 'node:fs';
 import {createRequire} from 'node:module';
 import path from 'node:path';
 import {cargarProyecto, ErrorMorfeo} from './config.mjs';
-import {ENTRADA_REMOTION, FUENTES, MODELOS, PY_DIR, modelosListos, pythonVenv, venvListo} from './entorno.mjs';
+import {ENTRADA_REMOTION, FUENTES, MODELOS, PAQUETE, PY_DIR, modelosListos, pythonVenv, venvListo} from './entorno.mjs';
 import {asegurarNavegador} from './navegador.mjs';
 import {generarImagenes} from './imagenes.mjs';
 import {ponerPoses, prepararPersonajes} from './personajes.mjs';
@@ -15,6 +15,7 @@ import {sintetizarVoces} from './voces.mjs';
 import {transcribir, whisperListo} from './whisper.mjs';
 import {consejosEnTexto, revisarEstructura} from './estructura.mjs';
 import {revisarPalabras} from './palabras.mjs';
+import {ordenarSalida, salidaDe} from './salida.mjs';
 
 const require = createRequire(import.meta.url);
 
@@ -71,7 +72,13 @@ function huellaMotor() {
 }
 
 // Remotion calcula la clave del caché a partir de la configuración: meter la huella ahí la invalida
-const conHuella = (config) => ({...config, name: `morfeo-${huellaMotor()}`});
+// También: los componentes del proyecto pueden importar 'three', 'react' o '@react-three/fiber' aunque no estén instalados
+// en el proyecto (llegan como dependencias de morfeo; con `npm i ../morfeo` o pnpm no quedan en su node_modules).
+const conHuella = (config) => ({
+	...config,
+	name: `morfeo-${huellaMotor()}`,
+	resolve: {...config.resolve, modules: [...(config.resolve?.modules ?? ['node_modules']), path.join(PAQUETE, 'node_modules')]},
+});
 
 /**
  * Entrada de Remotion. Sin componentes propios es la del paquete; con ellos, Morfeo escribe
@@ -128,13 +135,13 @@ export const datosDe = (publico, id) => {
 	return fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : null;
 };
 
-const salidaDe = (p, id) => path.join(p.salida, `${id}.mp4`);
 
 /** [{id, titulo, hecho}] en el orden del proyecto. */
 export async function lista({proyecto = process.cwd()} = {}) {
 	cargarEnv(proyecto);
 	const p = await cargarProyecto(proyecto);
-	return Object.entries(p.videos).map(([id, v]) => ({id, titulo: v.title ?? id, hecho: fs.existsSync(salidaDe(p, id))}));
+	ordenarSalida(p);
+	return Object.entries(p.videos).map(([id, v]) => ({id, titulo: v.title ?? id, archivo: path.basename(salidaDe(p, id)), hecho: fs.existsSync(salidaDe(p, id))}));
 }
 
 /** Corre python/preparar.py con el trabajo indicado; su salida va directo a la terminal. */
@@ -218,6 +225,8 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 			return [];
 		}
 	}
+	// archivos ya hechos con el id o con un título viejo → su nombre actual (sin volver a renderizar)
+	ordenarSalida(p, (m) => log(m));
 	let lista = ids?.length ? ids : todos ? Object.keys(p.videos) : Object.keys(p.videos).filter((id) => !fs.existsSync(salidaDe(p, id)));
 	const malos = lista.filter((id) => !p.videos[id]);
 	if (malos.length) throw new ErrorMorfeo(`No existen: ${malos.join(', ')}. Usa: npx morfeo lista`);
@@ -236,90 +245,97 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 		}
 
 	if (!listos.length) return terminarLote(p, loteArchivo, [], fallidos, log);
-	log('Empaquetando la animación...');
-	const {bundle} = await import('@remotion/bundler');
-	const {renderMedia, renderStill, selectComposition} = await import('@remotion/renderer');
-	const entrada = entradaDe(p);
-	const serveUrl = await bundle({entryPoint: entrada, publicDir: publico, rootDir: entrada === ENTRADA_REMOTION ? path.dirname(ENTRADA_REMOTION) : p.proyecto, webpackOverride: conHuella});
-	fs.mkdirSync(p.salida, {recursive: true});
-	const chromiumOptions = {gl: p.render.gl};
-	const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
+	// un solo render a la vez en esta computadora: dos Chrome usando la GPU al mismo tiempo dejaban en algunos
+	// cuadros pedazos de texto de cuadros anteriores (rótulos o subtítulos fantasma)
 	const hechos = [];
-	// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
-	const nucleos = os.cpus().length;
-	const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
-	const sinTTY = !process.stdout.isTTY;
-	for (const [i, id] of listos.entries()) {
-		const t = Date.now();
-		try {
-		const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
-		const mp4 = salidaDe(p, id);
-		let gl = p.render.gl;
-		let concurrencia = concurrenciaBase;
-		let composition;
-		// hasta 3 intentos: si el navegador truena, se baja la concurrencia y, con GPU, se pasa a software
-		for (let intento = 1; ; intento++) {
-			const chromium = {gl};
-			let ultimo = -1;
+	const soltar = await tomarCandado(log);
+	try {
+		log('Empaquetando la animación...');
+		const {bundle} = await import('@remotion/bundler');
+		const {renderMedia, renderStill, selectComposition} = await import('@remotion/renderer');
+		const entrada = entradaDe(p);
+		const serveUrl = await bundle({entryPoint: entrada, publicDir: publico, rootDir: entrada === ENTRADA_REMOTION ? path.dirname(ENTRADA_REMOTION) : p.proyecto, webpackOverride: conHuella});
+		fs.mkdirSync(p.salida, {recursive: true});
+		const chromiumOptions = {gl: p.render.gl};
+		const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
+		// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
+		const nucleos = os.cpus().length;
+		const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
+		const sinTTY = !process.stdout.isTTY;
+		for (const [i, id] of listos.entries()) {
+			const t = Date.now();
 			try {
-				composition = await selectComposition({serveUrl, id, inputProps, browserExecutable, chromiumOptions: chromium});
-				await renderMedia({
-					serveUrl,
-					composition,
-					inputProps,
-					browserExecutable,
-					chromiumOptions: chromium,
-					codec: 'h264',
-					crf: crfDe(p, id),
-					audioBitrate: '192k',
-					imageFormat: 'jpeg',
-					jpegQuality: 92,
-					concurrency: concurrencia,
-					outputLocation: mp4,
-					onProgress: ({progress}) => {
-						alProgreso?.(id, progress);
-						// con terminal: cada 10 % en la misma línea; sin terminal (logs, CI): cada 25 %
-						const paso = sinTTY ? 4 : 10;
-						const n = Math.floor(progress * paso);
-						if (n !== ultimo) {
-							if (sinTTY) log(`[${i + 1}/${listos.length}] ${id}: video ${Math.round((n / paso) * 100)}%`);
-							else process.stdout.write(`\r[${i + 1}/${listos.length}] ${id}: video ${n * 10}%   `);
-						}
-						ultimo = n;
-					},
-				});
-				chromiumOptions.gl = gl;
-				break;
+			const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
+			const mp4 = salidaDe(p, id);
+			let gl = p.render.gl;
+			let concurrencia = concurrenciaBase;
+			let composition;
+			// hasta 3 intentos: si el navegador truena, se baja la concurrencia y, con GPU, se pasa a software
+			for (let intento = 1; ; intento++) {
+				const chromium = {gl};
+				let ultimo = -1;
+				try {
+					composition = await selectComposition({serveUrl, id, inputProps, browserExecutable, chromiumOptions: chromium});
+					await renderMedia({
+						serveUrl,
+						composition,
+						inputProps,
+						browserExecutable,
+						chromiumOptions: chromium,
+						codec: 'h264',
+						crf: crfDe(p, id),
+						audioBitrate: '192k',
+						imageFormat: 'jpeg',
+						jpegQuality: 92,
+						concurrency: concurrencia,
+						outputLocation: mp4,
+						onProgress: ({progress}) => {
+							alProgreso?.(id, progress);
+							// con terminal: cada 10 % en la misma línea; sin terminal (logs, CI): cada 25 %
+							const paso = sinTTY ? 4 : 10;
+							const n = Math.floor(progress * paso);
+							if (n !== ultimo) {
+								if (sinTTY) log(`[${i + 1}/${listos.length}] ${id}: video ${Math.round((n / paso) * 100)}%`);
+								else process.stdout.write(`\r[${i + 1}/${listos.length}] ${id}: video ${n * 10}%   `);
+							}
+							ultimo = n;
+						},
+					});
+					chromiumOptions.gl = gl;
+					break;
+				} catch (e) {
+					const msg = String(e?.message ?? e);
+					const truena = /crash|Session closed|Target closed|Protocol error|WebGL|context lost|browser has disconnected|Navigation failed/i.test(msg);
+					if (!truena || intento >= 3) throw e;
+					if (gl === 'angle' && /WebGL|context/i.test(msg)) gl = 'swangle';
+					else if (concurrencia > 1) concurrencia = Math.max(1, Math.floor(concurrencia / 2));
+					else if (gl === 'angle') gl = 'swangle';
+					log(`\n    el navegador falló; reintento con ${gl === 'angle' ? 'GPU' : 'CPU'} y ${concurrencia} cuadro(s) a la vez...`);
+				}
+			}
+			let jpg = null;
+			if (p.render.miniatura) {
+				// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
+				jpg = salidaDe(p, id, 'jpg');
+				const d = datos[id];
+				const e0 = d.escenas[0];
+				const seg = p.videos[id].miniaturaEn ?? Math.min(e0.dur - 0.15, Math.max(1.4, e0.habla[1] * 0.85));
+				const frame = Math.max(0, Math.min(composition.durationInFrames - 1, Math.round(seg * composition.fps)));
+				const props = {...inputProps, miniatura: true};
+				await renderStill({serveUrl, composition: {...composition, props: {...composition.props, miniatura: true}}, inputProps: props, browserExecutable, chromiumOptions: {gl}, frame, imageFormat: 'jpeg', jpegQuality: 92, output: jpg});
+			}
+			const segundos = Math.round((Date.now() - t) / 1000);
+			if (process.stdout.isTTY) process.stdout.write('\r');
+			log(`[${i + 1}/${listos.length}] ${id}: listo en ${segundos} s  →  ${path.relative(p.proyecto, mp4)}      `);
+			hechos.push({id, mp4, jpg, segundos});
 			} catch (e) {
-				const msg = String(e?.message ?? e);
-				const truena = /crash|Session closed|Target closed|Protocol error|WebGL|context lost|browser has disconnected|Navigation failed/i.test(msg);
-				if (!truena || intento >= 3) throw e;
-				if (gl === 'angle' && /WebGL|context/i.test(msg)) gl = 'swangle';
-				else if (concurrencia > 1) concurrencia = Math.max(1, Math.floor(concurrencia / 2));
-				else if (gl === 'angle') gl = 'swangle';
-				log(`\n    el navegador falló; reintento con ${gl === 'angle' ? 'GPU' : 'CPU'} y ${concurrencia} cuadro(s) a la vez...`);
+				if (process.stdout.isTTY) process.stdout.write('\n');
+				fallidos.push({id, error: mensajeDe(e)});
+				log(`[${i + 1}/${listos.length}] ${id}: ✘ ${mensajeDe(e)}`);
 			}
 		}
-		let jpg = null;
-		if (p.render.miniatura) {
-			// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
-			jpg = path.join(p.salida, `${id}.jpg`);
-			const d = datos[id];
-			const e0 = d.escenas[0];
-			const seg = p.videos[id].miniaturaEn ?? Math.min(e0.dur - 0.15, Math.max(1.4, e0.habla[1] * 0.85));
-			const frame = Math.max(0, Math.min(composition.durationInFrames - 1, Math.round(seg * composition.fps)));
-			const props = {...inputProps, miniatura: true};
-			await renderStill({serveUrl, composition: {...composition, props: {...composition.props, miniatura: true}}, inputProps: props, browserExecutable, chromiumOptions: {gl}, frame, imageFormat: 'jpeg', jpegQuality: 92, output: jpg});
-		}
-		const segundos = Math.round((Date.now() - t) / 1000);
-		if (process.stdout.isTTY) process.stdout.write('\r');
-		log(`[${i + 1}/${listos.length}] ${id}: listo en ${segundos} s  →  ${path.relative(p.proyecto, mp4)}      `);
-		hechos.push({id, mp4, jpg, segundos});
-		} catch (e) {
-			if (process.stdout.isTTY) process.stdout.write('\n');
-			fallidos.push({id, error: mensajeDe(e)});
-			log(`[${i + 1}/${listos.length}] ${id}: ✘ ${mensajeDe(e)}`);
-		}
+	} finally {
+		soltar();
 	}
 	return terminarLote(p, loteArchivo, hechos, fallidos, log);
 }
@@ -332,6 +348,48 @@ export function crfDe(p, id) {
 	return CRF[v.calidad ?? p.render.calidad ?? (v.mundo?.length ? 'media' : 'alta')] ?? 18;
 }
 
+/**
+ * Candado de render por computadora (~/.morfeo/render.lock con el pid). Si otro render de Morfeo está corriendo,
+ * espera a que termine; si el proceso del candado ya no existe, lo toma. Devuelve la función que lo suelta.
+ */
+async function tomarCandado(log) {
+	const {HOME} = await import('./entorno.mjs');
+	const archivo = path.join(HOME, 'render.lock');
+	fs.mkdirSync(HOME, {recursive: true});
+	const vivo = (pid) => {
+		try {
+			process.kill(pid, 0);
+			return true;
+		} catch (e) {
+			return e.code === 'EPERM';
+		}
+	};
+	let avisado = false;
+	for (;;) {
+		try {
+			fs.writeFileSync(archivo, String(process.pid), {flag: 'wx'});
+			break;
+		} catch (e) {
+			if (e.code !== 'EEXIST') throw e;
+			const pid = Number(fs.readFileSync(archivo, 'utf8')) || 0;
+			if (!pid || pid === process.pid || !vivo(pid)) {
+				fs.rmSync(archivo, {force: true});
+				continue;
+			}
+			if (!avisado) log(`Otro render de Morfeo está usando la tarjeta de video (proceso ${pid}); espero a que termine...`);
+			avisado = true;
+			await new Promise((r) => setTimeout(r, 2000));
+		}
+	}
+	const soltar = () => {
+		try {
+			if (Number(fs.readFileSync(archivo, 'utf8')) === process.pid) fs.rmSync(archivo, {force: true});
+		} catch {}
+	};
+	process.once('exit', soltar);
+	return soltar;
+}
+
 /** Primera línea útil de un error (sin la pila de Remotion o de Python). */
 const mensajeDe = (e) => String(e?.message ?? e).split('\n').find((l) => l.trim()) ?? 'error desconocido';
 
@@ -370,18 +428,18 @@ function escribirResumen(p) {
 		.filter(([id]) => fs.existsSync(salidaDe(p, id)))
 		.map(([id, v]) => {
 			const c = creditosDe(p, id);
-			return {id, titulo: v.title ?? id, archivo: `${id}.mp4`, duracion: datosDe(publico, id)?.duracion ?? null, ...(c.length ? {creditos: c} : {}), ...(v.meta ? {meta: v.meta} : {})};
+			return {id, titulo: v.title ?? id, archivo: path.basename(salidaDe(p, id)), duracion: datosDe(publico, id)?.duracion ?? null, ...(c.length ? {creditos: c} : {}), ...(v.meta ? {meta: v.meta} : {})};
 		});
 	fs.writeFileSync(path.join(p.salida, 'resumen.json'), JSON.stringify(filas, null, '\t') + '\n');
 	// créditos para la descripción del video (las licencias CC BY piden mencionar al autor)
 	const conCreditos = filas.filter((f) => f.creditos?.length);
-	// <id>.txt: lo que se copia al publicar (título, descripción, etiquetas y créditos)
+	// <título>.txt: lo que se copia al publicar (título, descripción, etiquetas y créditos)
 	for (const f of filas) {
 		const v = p.videos[f.id];
 		const tags = (v.tags ?? []).map((x) => `#${String(x).replace(/^#/, '').replace(/\s+/g, '')}`).join(' ');
 		const creditos = f.creditos?.length ? ['', 'Créditos:', ...f.creditos.map((c) => `- ${c}`)] : [];
 		const lineas = [v.title ?? f.id, '', ...(v.descripcion ? [v.descripcion, ''] : []), ...(tags ? [tags] : []), ...creditos];
-		fs.writeFileSync(path.join(p.salida, `${f.id}.txt`), lineas.join('\n').trim() + '\n');
+		fs.writeFileSync(salidaDe(p, f.id, 'txt'), lineas.join('\n').trim() + '\n');
 	}
 	if (conCreditos.length)
 		fs.writeFileSync(path.join(p.salida, 'creditos.md'), ['# Créditos de recursos', '', ...conCreditos.flatMap((f) => [`## ${f.titulo}`, ...f.creditos.map((c) => `- ${c}`), ''])].join('\n'));

package/lib/salida.mjs

@@ -0,0 +1,84 @@
+// Nombres de los archivos terminados. Por defecto, el título del video: YouTube, TikTok e Instagram toman el nombre
+// del archivo como título al subirlo, así que no hay que escribirlo otra vez. `render.nombreArchivo: 'id'` vuelve a
+// usar el id. Los videos hechos con el id (versiones anteriores) se renombran solos, sin volver a renderizar.
+import fs from 'node:fs';
+import path from 'node:path';
+
+const EXTENSIONES = ['mp4', 'jpg', 'txt'];
+// nombres que Windows no permite como archivo
+const RESERVADOS = /^(con|prn|aux|nul|com\d|lpt\d)$/i;
+
+/** Título → nombre de archivo válido en Windows, Mac y Linux (conserva acentos y emojis). */
+export function nombreSeguro(titulo, respaldo = 'video') {
+	let s = String(titulo ?? '')
+		.normalize('NFC')
+		.replace(/[<>:"/\\|?*\u0000-\u001F]/g, ' ') // prohibidos en Windows
+		.replace(/\s+/g, ' ')
+		.trim()
+		.replace(/[. ]+$/g, ''); // Windows no acepta punto ni espacio al final
+	// largo máximo prudente (cuenta caracteres, no bytes; los emojis cuentan como uno)
+	const chars = [...s];
+	if (chars.length > 90) s = chars.slice(0, 90).join('').replace(/[. ]+$/g, '');
+	if (!s || RESERVADOS.test(s)) s = respaldo;
+	return s;
+}
+
+/**
+ * {id: nombre base} para todos los videos del proyecto. Dos videos con el mismo título se distinguen con " (2)",
+ * en el orden del proyecto, así que el nombre de cada uno no cambia entre renders.
+ */
+export function nombresDe(p) {
+	const porId = {};
+	const usados = new Set();
+	for (const [id, v] of Object.entries(p.videos)) {
+		const base = p.render?.nombreArchivo === 'id' ? id : nombreSeguro(v?.title, id);
+		let nombre = base;
+		for (let n = 2; usados.has(nombre.toLowerCase()); n++) nombre = `${base} (${n})`;
+		usados.add(nombre.toLowerCase());
+		porId[id] = nombre;
+	}
+	return porId;
+}
+
+/** Ruta de un archivo terminado: salidaDe(p, 'mi-video') → salida/<Título>.mp4 */
+export const salidaDe = (p, id, ext = 'mp4') => path.join(p.salida, `${nombresDe(p)[id] ?? id}.${ext}`);
+
+/**
+ * Pone los archivos ya hechos bajo su nombre actual: los que tenían el id (versiones anteriores) o un título viejo
+ * (registrado en .morfeo/archivos.json). Así cambiar el título renombra el video sin volver a renderizarlo.
+ */
+export function ordenarSalida(p, log = () => {}) {
+	const registro = path.join(p.trabajo, 'archivos.json');
+	let antes = {};
+	try {
+		antes = JSON.parse(fs.readFileSync(registro, 'utf8'));
+	} catch {}
+	const ahora = nombresDe(p);
+	if (fs.existsSync(p.salida)) {
+		for (const [id, nombre] of Object.entries(ahora)) {
+			for (const viejo of [antes[id], id]) {
+				if (!viejo || viejo === nombre) continue;
+				const de = path.join(p.salida, `${viejo}.mp4`);
+				const a = path.join(p.salida, `${nombre}.mp4`);
+				if (!fs.existsSync(de) || fs.existsSync(a)) continue;
+				for (const ext of EXTENSIONES) {
+					const d = path.join(p.salida, `${viejo}.${ext}`);
+					if (fs.existsSync(d)) fs.renameSync(d, path.join(p.salida, `${nombre}.${ext}`));
+				}
+				// la hoja de contacto también sigue al video
+				const hoja = path.join(p.salida, `${viejo}-hoja.png`);
+				if (fs.existsSync(hoja)) fs.renameSync(hoja, path.join(p.salida, `${nombre}-hoja.png`));
+				log(`  ${viejo}.mp4 → ${nombre}.mp4`);
+				break;
+			}
+		}
+	}
+	// resumen.json apunta a los archivos: que siga a los nombres nuevos
+	const resumen = path.join(p.salida, 'resumen.json');
+	try {
+		const filas = JSON.parse(fs.readFileSync(resumen, 'utf8'));
+		if (Array.isArray(filas)) fs.writeFileSync(resumen, JSON.stringify(filas.map((f) => (ahora[f.id] ? {...f, archivo: `${ahora[f.id]}.mp4`} : f)), null, '\t') + '\n');
+	} catch {}
+	fs.mkdirSync(p.trabajo, {recursive: true});
+	fs.writeFileSync(registro, JSON.stringify(ahora, null, '\t'));
+}

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "morfeo",
-	"version": "0.3.1",
+	"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",
 	"author": "Uriel Gómez",
-	"homepage": "https://ureckchan.github.io/morfeo/",
+	"homepage": "https://morfeo-docs-two.vercel.app/",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/UreckChan/morfeo.git"

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/kit/tres.tsx

@@ -85,16 +85,21 @@ const Camara: React.FC<{estado: Estado}> = ({estado}) => {
 
 const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	const {gl, scene} = useThree();
-	useEffect(() => {
+	// useLayoutEffect, no useEffect: con useEffect el primer cuadro de cada pestaña de Chrome salía sin reflejos
+	// (más oscuro). La textura se crea una vez; la intensidad (que cambia con la hora) se ajusta en cada cuadro.
+	useLayoutEffect(() => {
 		const pmrem = new THREE.PMREMGenerator(gl);
 		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
 		scene.environment = tex;
-		scene.environmentIntensity = fuerza;
 		return () => {
+			scene.environment = null;
 			tex.dispose();
 			pmrem.dispose();
 		};
-	}, [gl, scene, fuerza]);
+	}, [gl, scene]);
+	useLayoutEffect(() => {
+		scene.environmentIntensity = fuerza;
+	});
 	return null;
 };
 

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/modelo3d.tsx

@@ -96,16 +96,21 @@ const Glb: React.FC<{src: string; levantar?: boolean}> = ({src, levantar}) => {
 /** Reflejos de un cuarto iluminado: sin esto, los metales (monedas, lingotes) se ven negros. */
 const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	const {gl, scene} = useThree();
-	useEffect(() => {
+	// useLayoutEffect, no useEffect: con useEffect el primer cuadro de cada pestaña de Chrome salía sin reflejos
+	// (más oscuro). La textura se crea una vez; la intensidad (que cambia con la hora) se ajusta en cada cuadro.
+	useLayoutEffect(() => {
 		const pmrem = new THREE.PMREMGenerator(gl);
 		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
 		scene.environment = tex;
-		scene.environmentIntensity = fuerza;
 		return () => {
+			scene.environment = null;
 			tex.dispose();
 			pmrem.dispose();
 		};
-	}, [gl, scene, fuerza]);
+	}, [gl, scene]);
+	useLayoutEffect(() => {
+		scene.environmentIntensity = fuerza;
+	});
 	return null;
 };
 

package/remotion/motor/modos.tsx

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

package/remotion/motor/subtitulos.tsx

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

package/remotion/motor/tema.ts

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