morfeo 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # Morfeo
 
-> Galería de estilos y ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo).
+> **Documentación: [ureckchan.github.io/morfeo](https://ureckchan.github.io/morfeo/)** · Ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo)
 
 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/index.d.ts

@@ -87,6 +87,7 @@ export type Capa = CapaBase &
 		| {tipo: 'onda'; barras?: number; ancho?: number; alto?: number; color?: string; siempre?: boolean}
 		| {tipo: 'globo'; texto: string; cola?: 'abajo' | 'arriba' | 'izq' | 'der' | 'ninguna'; fondo?: string; color?: string; borde?: string; tam?: number; maxAncho?: number}
 		| {tipo: 'seguir'; usuario?: string; texto?: string; pulsar?: number}
+		| {tipo: 'ventana'; diametro?: number; src?: string; capas?: Capa[]; borde?: 'metal' | 'ninguno' | (string & {}); grosor?: number; remaches?: number | false; zoom?: number | [number, number]; fondo?: string}
 	);
 
 export type FondoEscena =
@@ -182,6 +183,8 @@ export interface Video {
 	/** Idioma de Kokoro: "es", "en-us", "en-gb", "fr-fr", "it", "pt-br", "ja", "cmn", "hi". */
 	lang?: string;
 	scenes: Escena[];
+	/** Segundo del video para la miniatura (por defecto, cuando la primera escena ya está completa). Sale sin subtítulos. */
+	miniaturaEn?: number;
 	/** Datos libres que se copian a salida/resumen.json. */
 	meta?: Record<string, unknown>;
 }
@@ -221,6 +224,7 @@ export interface Config {
 	musicas?: Record<string, Musica>;
 	/** Carpeta de los .mp4 (por defecto ./salida). */
 	salida?: string;
+	/** gl: por defecto 'angle' (GPU) en Mac con Apple Silicon y 'swangle' (CPU) en lo demás; si la GPU falla, reintenta con CPU. */
 	render?: {crf?: number; gl?: 'swangle' | 'angle' | 'egl' | 'swiftshader' | 'vulkan'; navegador?: string | null; concurrencia?: number | null; miniatura?: boolean};
 }
 

package/lib/config.mjs

@@ -5,16 +5,37 @@ import {pathToFileURL} from 'node:url';
 
 export const NOMBRES_CONFIG = ['morfeo.config.mjs', 'morfeo.config.js'];
 
+// Voces de Kokoro v1.0 (archivo voices-v1.0.bin)
+export const VOCES_KOKORO = 'af_alloy af_aoede af_bella af_heart af_jessica af_kore af_nicole af_nova af_river af_sarah af_sky am_adam am_echo am_eric am_fenrir am_liam am_michael am_onyx am_puck am_santa bf_alice bf_emma bf_isabella bf_lily bm_daniel bm_fable bm_george bm_lewis ef_dora em_alex em_santa ff_siwis hf_alpha hf_beta hm_omega hm_psi if_sara im_nicola jf_alpha jf_gongitsune jf_nezumi jf_tebukuro jm_kumo pf_dora pm_alex pm_santa zf_xiaobei zf_xiaoni zf_xiaoxiao zf_xiaoyi zm_yunjian zm_yunxi zm_yunxia zm_yunyang'.split(' ');
+
+/** Las voces más parecidas a un nombre mal escrito (para sugerir). */
+const parecidas = (nombre, lista, n = 3) => {
+	const d = (a, b) => {
+		const m = Array.from({length: a.length + 1}, (_, i) => [i, ...Array(b.length).fill(0)]);
+		for (let j = 1; j <= b.length; j++) m[0][j] = j;
+		for (let i = 1; i <= a.length; i++) for (let j = 1; j <= b.length; j++) m[i][j] = Math.min(m[i - 1][j] + 1, m[i][j - 1] + 1, m[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+		return m[a.length][b.length];
+	};
+	return [...lista].sort((a, b) => d(nombre, a) - d(nombre, b)).slice(0, n);
+};
+
 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 ESTILOS = ['datos-curiosos', 'explicativo', 'documental', 'ilustrado', 'historia', 'mesa', 'serie', 'infografia', '3d', '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'];
+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'];
 export const PROVEEDORES_VOZ = ['kokoro', 'elevenlabs', 'openai'];
 export const MUSICAS = ['lofi', 'lofi2', 'chillpop', 'synth', 'house', 'ballad', 'trap'];
 
 export class ErrorMorfeo extends Error {}
 
+/**
+ * WebGL por defecto: en Mac con Apple Silicon la tarjeta de video (angle) es estable y ~4 veces más rápida;
+ * en lo demás, por software (swangle), que funciona en cualquier computadora. Si angle falla, el render
+ * reintenta solo con swangle.
+ */
+export const glPorDefecto = () => (process.platform === 'darwin' && process.arch === 'arm64' ? 'angle' : 'swangle');
+
 /** Una carpeta de guiones: cada <id>.json o <id>.mjs es un video. */
 async function leerCarpeta(dir) {
 	const out = {};
@@ -84,7 +105,8 @@ export async function cargarProyecto(proyecto = process.cwd()) {
 	const errores = [];
 	const estilosPropios = cfg.estilos ?? {};
 	const estilo = cfg.estilo ?? 'datos-curiosos';
-	const ctx = {proyecto, marca, voces: cfg.voces ?? {}, musicas: cfg.musicas ?? {}, errores, estilo, estilosPropios};
+	const assetsDir = path.resolve(proyecto, cfg.assets ?? 'assets');
+	const ctx = {proyecto, marca, voces: cfg.voces ?? {}, musicas: cfg.musicas ?? {}, errores, estilo, estilosPropios, assetsDir};
 	if (!ESTILOS.includes(estilo) && !estilosPropios[estilo]) errores.push(`estilo "${estilo}" no existe. Opciones: ${[...ESTILOS, ...Object.keys(estilosPropios)].join(', ')}`);
 	const componentes = {};
 	for (const [nombre, ruta] of Object.entries(cfg.componentes ?? {})) {
@@ -125,14 +147,27 @@ export async function cargarProyecto(proyecto = process.cwd()) {
 		componentes,
 		render: {
 			crf: r.crf ?? 18,
-			gl: process.env.MORFEO_GL || process.env.REMOTION_GL || r.gl || 'swangle',
+			gl: process.env.MORFEO_GL || process.env.REMOTION_GL || r.gl || glPorDefecto(),
 			navegador: process.env.MORFEO_NAVEGADOR || r.navegador || null,
-			concurrencia: r.concurrencia ?? null,
+			concurrencia: r.concurrencia ?? null, // null = Morfeo elige según la máquina y el modo (ver render.mjs)
 			miniatura: r.miniatura ?? true,
 		},
 	};
 }
 
+const CAMPOS_ARCHIVO = new Set(['src', 'imagen']);
+/** Busca `src`/`imagen` que apunten a assets/ y avisa de los que no existen. */
+function revisarArchivos(x, assetsDir, err, ruta = '') {
+	if (Array.isArray(x)) return x.forEach((v, i) => revisarArchivos(v, assetsDir, err, `${ruta}[${i}]`));
+	if (!x || typeof x !== 'object') return;
+	for (const [k, v] of Object.entries(x)) {
+		if (CAMPOS_ARCHIVO.has(k) && typeof v === 'string' && !/^(https?:|data:)/.test(v)) {
+			const rel = v.replace(/^\.?\/?(assets\/)?/, '');
+			if (!fs.existsSync(path.join(assetsDir, rel))) err(`no existe assets/${rel} (lo pide ${ruta.replace(/^\./, '') || 'una capa'}.${k}). Ponlo en la carpeta assets/ o usa  generar: 'descripción'  para la IA`);
+		} else if (v && typeof v === 'object') revisarArchivos(v, assetsDir, err, `${ruta}.${k}`);
+	}
+}
+
 function validarCapas(capas, donde, err) {
 	if (!Array.isArray(capas)) return err(`${donde}: \`capas\` debe ser una lista`);
 	capas.forEach((c, i) => {
@@ -178,7 +213,13 @@ function normalizarVoz(voz, ctx, err, profundidad = 0) {
 			if (!/\.npy$/i.test(abs)) err(`la voz ${ref} debe ser un archivo .npy (estilo de voz Kokoro, forma 510×1×256)`);
 			else if (!fs.existsSync(abs)) err(`no existe el archivo de voz ${ref}`);
 			out.push([abs, peso]);
-		} else out.push([ref, peso]);
+		} else {
+			if (!VOCES_KOKORO.includes(ref)) {
+				const alias = Object.keys(ctx.voces);
+				err(`la voz "${ref}" no existe. ¿Quisiste decir ${parecidas(ref, [...alias, ...VOCES_KOKORO]).map((x) => `"${x}"`).join(', ')}? En español: em_alex, ef_dora, em_santa`);
+			}
+			out.push([ref, peso]);
+		}
 	}
 	return out;
 }
@@ -237,5 +278,7 @@ function validarVideo(id, v, ctx) {
 	if (v.voice != null) voice = normalizarVoz(v.voice, ctx, err);
 	else if (necesitaVoz) err('falta `voice` (p. ej. "em_alex", una mezcla [["em_alex", 0.6], ["am_michael", 0.4]], un .npy, o `audio` en cada escena)');
 	if (v.hud != null) validarCapas(v.hud, 'hud', err);
+	// archivos de assets/ que piden las escenas y el HUD: mejor avisar ahora que a mitad del render
+	revisarArchivos({scenes, hud: v.hud, tema: v.tema}, ctx.assetsDir, err);
 	return {...v, estilo, voice, music: normalizarMusica(v.music, ctx, err), scenes};
 }

package/lib/guion.mjs

@@ -13,14 +13,18 @@ export const ICONOS = [
 ];
 const COLORES = {blanco: '#FFFFFF', amarillo: '#FFD400', rojo: '#FF4050', verde: '#5ADC6E', cian: '#50DCFF'};
 
-export const slug = (s) =>
-	s
+/** id corto para el archivo: sin acentos, en minúsculas, hasta ~38 letras y sin cortar palabras. */
+export const slug = (s) => {
+	const base = s
 		.normalize('NFD')
-		.replace(/[̀-ͯ]/g, '')
+		.replace(/[\u0300-\u036f]/g, '')
 		.toLowerCase()
 		.replace(/[^a-z0-9]+/g, '-')
-		.replace(/^-+|-+$/g, '')
-		.slice(0, 40) || 'video';
+		.replace(/^-+|-+$/g, '');
+	if (base.length <= 38) return base || 'video';
+	const corto = base.slice(0, 39);
+	return corto.slice(0, Math.max(corto.lastIndexOf('-'), 12)).replace(/-+$/, '') || 'video';
+};
 
 const INSTRUCCIONES = `Eres guionista de videos cortos verticales (YouTube Shorts / TikTok / Reels) de 25 a 45 segundos.
 Escribes en el idioma que se te pida, con frases cortas, naturales y fáciles de decir en voz alta.

package/lib/render.mjs

@@ -1,6 +1,7 @@
 // Render: audio (Python) -> datos -> video (Remotion). También lista y Studio.
 import {spawn, spawnSync} from 'node:child_process';
 import crypto from 'node:crypto';
+import os from 'node:os';
 import fs from 'node:fs';
 import {createRequire} from 'node:module';
 import path from 'node:path';
@@ -205,37 +206,70 @@ export async function render({proyecto = process.cwd(), ids, todos = false, log
 	const chromiumOptions = {gl: p.render.gl};
 	const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
 	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(6, Math.floor(nucleos / 2))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
+	const sinTTY = !process.stdout.isTTY;
 	for (const [i, id] of lista.entries()) {
 		const t = Date.now();
 		const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
-		const composition = await selectComposition({serveUrl, id, inputProps, browserExecutable, chromiumOptions});
-		let ultimo = -1;
 		const mp4 = salidaDe(p, id);
-		await renderMedia({
-			serveUrl,
-			composition,
-			inputProps,
-			browserExecutable,
-			chromiumOptions,
-			codec: 'h264',
-			crf: p.render.crf,
-			audioBitrate: '192k',
-			imageFormat: 'jpeg',
-			jpegQuality: 92,
-			concurrency: p.render.concurrencia,
-			outputLocation: mp4,
-			onProgress: ({progress}) => {
-				alProgreso?.(id, progress);
-				const n = Math.floor(progress * 10);
-				if (n !== ultimo && process.stdout.isTTY) process.stdout.write(`\r[${i + 1}/${lista.length}] ${id}: video ${n * 10}%   `);
-				ultimo = n;
-			},
-		});
+		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: p.render.crf,
+					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}/${lista.length}] ${id}: video ${Math.round((n / paso) * 100)}%`);
+							else process.stdout.write(`\r[${i + 1}/${lista.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: el gancho ya completo
+			// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
 			jpg = path.join(p.salida, `${id}.jpg`);
-			await renderStill({serveUrl, composition, inputProps, browserExecutable, chromiumOptions, frame: Math.min(36, composition.durationInFrames - 1), imageFormat: 'jpeg', jpegQuality: 92, output: 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');

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "morfeo",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"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://github.com/UreckChan/morfeo#readme",
+	"homepage": "https://ureckchan.github.io/morfeo/",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/UreckChan/morfeo.git"

package/remotion/Short.tsx

@@ -30,7 +30,7 @@ import {temaDe} from './motor/tema';
 import {VideoConAudio} from './motor/Video';
 import {loadFont} from '@remotion/fonts';
 
-export type PropsShort = {id: string; videos?: Record<string, Datos>; marca?: TipoMarca; guias?: boolean; fuentes?: {familia: string; url: string}[]; estilos?: Record<string, any>};
+export type PropsShort = {id: string; videos?: Record<string, Datos>; marca?: TipoMarca; guias?: boolean; miniatura?: boolean; fuentes?: {familia: string; url: string}[]; estilos?: Record<string, any>};
 
 const ADELANTO_GANCHO = 0.4; // el gancho arranca ya animado: el fotograma 0 nunca está vacío
 const CIERRE_BUCLE = 0.5; // al final se funde con el fotograma 0 para que el video se repita sin corte
@@ -220,7 +220,7 @@ const Guias: React.FC = () => (
 	</AbsoluteFill>
 );
 
-export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean}> = ({d, T, guias}) => {
+export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean; miniatura?: boolean}> = ({d, T, guias, miniatura}) => {
 	const n = d.escenas.length;
 	let si = n - 1;
 	for (let i = 0; i < n; i++) if (T < d.escenas[i].t0 + d.escenas[i].dur) {
@@ -238,7 +238,7 @@ export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean}> = ({d,
 				<Fondo T={T} d={d} e={e} t={t} salida={si === n - 1 ? 0 : clamp((t - (e.dur - 0.12)) / 0.12)} />
 				<CapaEscena e={e} si={si} t={t} d={d} ultima={si === n - 1} />
 				{remate && <Destello t={t} semilla={d.indice} />}
-				<Subtitulos T={T} d={d} />
+				{miniatura ? null : <Subtitulos T={T} d={d} />}
 			</AbsoluteFill>
 			{e.tipo !== 'cta' && <Marca />}
 			{guias && <Guias />}
@@ -246,7 +246,7 @@ export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean}> = ({d,
 	);
 };
 
-export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, fuentes, estilos}) => {
+export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, miniatura, fuentes, estilos}) => {
 	const frame = useCurrentFrame();
 	const [listo, setListo] = useState(false);
 	const [handle] = useState(() => delayRender('Cargando fuentes'));
@@ -259,13 +259,13 @@ export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, fuentes,
 	const d = videos?.[id];
 	if (!d) throw new Error(`El video "${id}" no está preparado. Corre: npx morfeo render ${id}`);
 	if (!listo) return null;
-	if (d.estilo && d.estilo !== 'datos-curiosos') return <VideoConAudio d={d} frame={frame} marca={{...MARCA_VACIA, ...marca}} estilos={estilos} />;
+	if (d.estilo && d.estilo !== 'datos-curiosos') return <VideoConAudio d={d} frame={frame} marca={{...MARCA_VACIA, ...marca}} estilos={estilos} miniatura={miniatura} />;
 	const T = frame / FPS;
 	const kb = clamp((T - (d.duracion - CIERRE_BUCLE)) / CIERRE_BUCLE);
 	return (
 		<MarcaContexto.Provider value={{...MARCA_VACIA, ...marca}}>
 		<AbsoluteFill>
-			<Fotograma d={d} T={T} guias={guias} />
+			<Fotograma d={d} T={T} guias={guias} miniatura={miniatura} />
 			{kb > 0 && (
 				<AbsoluteFill style={{opacity: backOut(kb, 0)}}>
 					<Fotograma d={d} T={0} />

package/remotion/motor/Video.tsx

@@ -5,7 +5,7 @@ import {Avatar, MarcaContexto, useMarca} from '../piezas';
 import {FPS, W, clamp, easeIO, easeOut, lerp} from '../estilo';
 import type {Datos, Escena} from '../tipos';
 import {Capas} from './capas';
-import {FondoTema, Vineta} from './fondo';
+import {FondoTema, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
 import {mezclar, temaDe, type Tema} from './tema';
@@ -66,7 +66,7 @@ const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 	);
 };
 
-export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>}> = ({d, T, estilos}) => {
+export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean}> = ({d, T, estilos, miniatura}) => {
 	const tema = temaDe(d.estilo, d.tema, estilos);
 	const n = d.escenas.length;
 	let si = d.escenas.findIndex((e) => T < e.t0 + e.dur);
@@ -100,19 +100,21 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 			<AbsoluteFill style={estiloActual}>
 				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} />
 			</AbsoluteFill>
+			{/* la textura va quieta, fuera de la cámara: si se moviera con el zoom, cada cuadro sería distinto y el video pesaría 10 veces más */}
+			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
 			<Vineta fuerza={tema.vineta ?? 0} />
 			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
-			{e.tipo !== 'cta' ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} /> : null}
+			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} /> : null}
 			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
 		</AbsoluteFill>
 	);
 };
 
 /** Componente raíz de un video del motor de capas (con su audio). */
-export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>}> = ({d, frame, marca, estilos}) => (
+export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>; miniatura?: boolean}> = ({d, frame, marca, estilos, miniatura}) => (
 	<MarcaContexto.Provider value={marca}>
 		<AbsoluteFill>
-			<VideoMotor d={d} T={frame / FPS} estilos={estilos} />
+			<VideoMotor d={d} T={frame / FPS} estilos={estilos} miniatura={miniatura} />
 			<Audio src={staticFile(d.audio)} />
 		</AbsoluteFill>
 	</MarcaContexto.Provider>

package/remotion/motor/capas.tsx

@@ -14,6 +14,9 @@ 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');
+
 /** Posición, escala, giro y opacidad de una capa en el instante t (entrada, movimiento, salida). */
 function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	const t = ctx.t;
@@ -26,7 +29,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	let r = c.rotar ?? 0;
 	let o = c.opacidad ?? 1;
 	if (t < t0) return null; // con entrada 'ninguna' aparece de golpe en su momento
-	switch (c.entrada ?? 'escala') {
+	switch (c.entrada ?? entradaPorDefecto(c)) {
 		case 'aparecer':
 			o *= easeOut(p);
 			break;
@@ -185,6 +188,8 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			return <Tarjeta c={c} ctx={ctx} />;
 		case 'telefono':
 			return <Telefono c={c} ctx={ctx} />;
+		case 'ventana':
+			return <Ventana c={c} ctx={ctx} />;
 		case 'forma':
 			return <Forma c={c} ctx={ctx} />;
 		case 'icono': {
@@ -260,7 +265,7 @@ const TextoCapa: React.FC<{c: Capa; ctx: CtxEscena; fuente: string}> = ({c, ctx,
 		const vel = typeof c.escribir === 'number' ? c.escribir : 22; // letras por segundo
 		const n = Math.max(0, Math.floor((ctx.t - t0) * vel));
 		let cuenta = 0;
-		texto = texto.replace(/[^*]/g, (ch) => (cuenta++ < n ? ch : ch === '\n' ? '\n' : ''));
+		texto = texto.replace(/[^*]/g, (ch) => (cuenta++ < n ? ch : ch === '\n' ? '\n' : '')).replace(/\*\*/g, '');
 	}
 	const color = c.color ?? T.colores.texto;
 	const acento = c.acento ?? T.colores.acento;
@@ -398,7 +403,9 @@ const Telefono: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	const borde = ancho * 0.035;
 	return (
 		<div style={{width: ancho, height: alto, background: '#0A0A0C', borderRadius: ancho * 0.13, padding: borde, boxShadow: '0 30px 60px rgba(0,0,0,0.45), inset 0 0 0 3px #2A2A30', boxSizing: 'border-box'}}>
-			<div style={{position: 'relative', width: '100%', height: '100%', borderRadius: ancho * 0.1, overflow: 'hidden', background: c.pantalla ?? '#111'}}>
+			<div style={{position: 'relative', width: '100%', height: '100%', borderRadius: ancho * 0.1, overflow: 'hidden', background: c.pantalla ?? `linear-gradient(160deg, ${ctx.tema.colores.acento2}, ${ctx.tema.colores.acento} 60%, #111)`}}>
+				{/* sin imagen ni capas: una pantalla de app genérica en vez de un rectángulo negro */}
+				{!c.src && !c.capas?.length ? <PantallaGenerica ancho={ancho} t={ctx.t} /> : null}
 				{c.src ? (
 					/\.(mp4|webm|mov)$/i.test(c.src) ? (
 						<OffthreadVideo src={recurso(c.src)} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
@@ -418,6 +425,74 @@ const Telefono: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	);
 };
 
+/**
+ * Ventana circular (escotilla, lupa, mirilla): muestra una imagen o capas adentro, con borde metálico y remaches.
+ *   {tipo: 'ventana', diametro: 640, src: 'interior.png'}  o  {tipo: 'ventana', capas: [...]} (coordenadas desde el centro)
+ *   borde: 'metal' | 'ninguno' | '#color' · remaches · zoom: [inicio, fin] para acercar el contenido · fondo: color detrás
+ */
+const Ventana: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const d = c.diametro ?? 640;
+	const aro = c.borde === 'ninguno' ? 0 : c.grosor ?? Math.round(d * 0.06);
+	const metal = c.borde && c.borde !== 'metal' && c.borde !== 'ninguno' ? c.borde : null;
+	const t0 = cuando(c.en, ctx, 0);
+	const k = clamp((ctx.t - t0) / Math.max(0.5, ctx.dur - t0));
+	const zoom = Array.isArray(c.zoom) ? lerp(c.zoom[0], c.zoom[1], easeIO(k)) : c.zoom ?? 1;
+	const n = c.remaches === false ? 0 : c.remaches ?? 16;
+	const total = d + aro * 2;
+	return (
+		<div style={{position: 'relative', width: total, height: total}}>
+			<div
+				style={{
+					position: 'absolute',
+					inset: 0,
+					borderRadius: '50%',
+					background: metal ?? 'conic-gradient(from 210deg, #8C96A3, #E3E8EE, #7A8592, #C9D0D8, #6E7884, #DDE3EA, #8C96A3)',
+					boxShadow: '0 24px 50px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(0,0,0,0.35)',
+				}}
+			/>
+			<div style={{position: 'absolute', left: aro, top: aro, width: d, height: d, borderRadius: '50%', overflow: 'hidden', background: c.fondo ?? '#0C1A2A', boxShadow: 'inset 0 0 40px rgba(0,0,0,0.6)'}}>
+				<div style={{position: 'absolute', inset: 0, transform: `scale(${zoom})`}}>
+					{c.src ? <Img src={recurso(c.src)} style={{width: '100%', height: '100%', objectFit: 'cover'}} /> : null}
+					<div style={{position: 'absolute', left: '50%', top: '50%', width: 0, height: 0}}>
+						{(c.capas ?? []).map((h: Capa, i: number) => (
+							<CapaVista key={i} c={h} ctx={ctx} relativo i={i} />
+						))}
+					</div>
+				</div>
+				{/* brillo del vidrio */}
+				<div style={{position: 'absolute', inset: 0, borderRadius: '50%', background: 'radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 40%)'}} />
+			</div>
+			{Array.from({length: n}, (_, i) => {
+				const a = (i / n) * Math.PI * 2;
+				const r = d / 2 + aro / 2;
+				return <div key={i} style={{position: 'absolute', left: total / 2 + Math.cos(a) * r - aro * 0.16, top: total / 2 + Math.sin(a) * r - aro * 0.16, width: aro * 0.32, height: aro * 0.32, borderRadius: '50%', background: 'radial-gradient(circle at 35% 35%, #F2F5F8, #6E7884)'}} />;
+			})}
+		</div>
+	);
+};
+
+/** Pantalla de relleno: barra de app, un video con botón de play y renglones de texto. */
+const PantallaGenerica: React.FC<{ancho: number; t: number}> = ({ancho, t}) => {
+	const u = ancho / 100;
+	const pulso = 1 + 0.05 * Math.sin(t * 4);
+	return (
+		<div style={{position: 'absolute', inset: 0, padding: `${12 * u}px ${7 * u}px`, display: 'flex', flexDirection: 'column', gap: 4 * u}}>
+			<div style={{display: 'flex', alignItems: 'center', gap: 3 * u}}>
+				<div style={{width: 9 * u, height: 9 * u, borderRadius: '50%', background: 'rgba(255,255,255,0.85)'}} />
+				<div style={{flex: 1, height: 3 * u, borderRadius: 99, background: 'rgba(255,255,255,0.6)'}} />
+			</div>
+			<div style={{position: 'relative', height: 60 * u, borderRadius: 5 * u, background: 'rgba(0,0,0,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+				<div style={{width: 18 * u, height: 18 * u, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${pulso})`}}>
+					<div style={{width: 0, height: 0, borderStyle: 'solid', borderWidth: `${4.5 * u}px 0 ${4.5 * u}px ${7.5 * u}px`, borderColor: 'transparent transparent transparent #111', marginLeft: 1.5 * u}} />
+				</div>
+			</div>
+			{[90, 70, 80, 50].map((w, i) => (
+				<div key={i} style={{width: `${w}%`, height: 4 * u, borderRadius: 99, background: 'rgba(255,255,255,0.55)'}} />
+			))}
+		</div>
+	);
+};
+
 const Forma: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	const T = ctx.tema;
 	const color = c.color ?? T.colores.acento;

package/remotion/motor/fondo.tsx

@@ -110,8 +110,8 @@ export const Particulas: React.FC<{p: TParticulas; t: number; semilla: string}>
 };
 
 /** Ruido fino (película) o papel: un SVG fractal estable. */
-const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
-	<AbsoluteFill style={{opacity: tipo === 'papel' ? 0.35 : 0.12, mixBlendMode: 'multiply', pointerEvents: 'none'}}>
+export const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
+	<AbsoluteFill style={{opacity: tipo === 'papel' ? 0.22 : 0.1, mixBlendMode: 'multiply', pointerEvents: 'none'}}>
 		<svg width={W} height={H}>
 			<filter id={`tx-${tipo}`}>
 				<feTurbulence type="fractalNoise" baseFrequency={tipo === 'papel' ? 0.9 : 1.6} numOctaves={tipo === 'papel' ? 3 : 2} seed={3} />
@@ -139,7 +139,6 @@ export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla
 					}}
 				/>
 			) : null}
-			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
 			{tema.particulas ? <Particulas p={tema.particulas} t={t} semilla={semilla} /> : null}
 		</AbsoluteFill>
 	);

package/remotion/motor/plantillas.tsx

@@ -74,7 +74,9 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 		case 'eleccion': {
 			const ops: P[] = (p.opciones ?? []).map((o: any) => (typeof o === 'string' ? {texto: o} : o));
 			const out: Capa[] = [];
-			const yTit = p.y ?? 640;
+			// con subtítulos al centro (serie), la pregunta y los botones suben para no encimarse
+			const subsAlCentro = tema.subtitulos.tipo !== 'ninguno' && tema.subtitulos.y > 850 && tema.subtitulos.y < 1300;
+			const yTit = p.y ?? (subsAlCentro && (p.formato ?? 'cartas') === 'botones' ? 420 : 640);
 			if (p.pregunta) out.push({tipo: 'texto', texto: p.pregunta, x: 540, y: yTit, tam: p.tamPregunta ?? 84, maxAncho: 900, entrada: 'subir'});
 			if ((p.formato ?? 'cartas') === 'botones') {
 				ops.forEach((o, i) =>

package/remotion/motor/tema.ts

@@ -159,10 +159,11 @@ export const ESTILOS: Record<string, Tema> = {
 	'3d': {
 		fondo: {tipo: 'degradado', colores: ['#BFE3FF', '#EAF6FF']},
 		vineta: 0.1,
-		colores: {texto: '#FFFFFF', acento: '#FFD43B', acento2: '#FF5A36', suave: 'rgba(255,255,255,0.7)', tarjeta: 'rgba(20,20,20,0.75)', tarjetaTexto: '#FFFFFF', borde: '#141414'},
+		// cielo claro: el texto propio va oscuro; los subtítulos siguen blancos con contorno negro
+		colores: {texto: '#14233A', acento: '#FF8A00', acento2: '#FF5A36', suave: '#4F6278', tarjeta: 'rgba(20,20,20,0.78)', tarjetaTexto: '#FFFFFF', borde: '#141414'},
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
 		tituloMayusculas: true,
-		subtitulos: {tipo: 'palabra', y: 1000, tam: 76, maxPalabras: 1, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '', contorno: 10},
+		subtitulos: {tipo: 'palabra', y: 1400, tam: 76, maxPalabras: 1, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '', contorno: 10},
 		transicion: 'corte',
 		marca: 'esquina',
 		zoomLento: 1.0,
@@ -182,11 +183,15 @@ export const ESTILOS: Record<string, Tema> = {
 };
 
 const esObjeto = (x: unknown): x is Record<string, any> => !!x && typeof x === 'object' && !Array.isArray(x);
-/** Mezcla profunda: `b` gana sobre `a` (los arreglos se reemplazan completos). */
+/**
+ * Mezcla profunda: `b` gana sobre `a` (los arreglos se reemplazan completos).
+ * Solo `fondo` se reemplaza entero, porque cada tipo de fondo lleva campos distintos; lo demás
+ * (subtitulos, colores, particulas...) se combina: {subtitulos: {tipo: 'bloque'}} conserva color y tamaño.
+ */
 export const mezclar = <T,>(a: T, b: any): T => {
 	if (!esObjeto(b)) return a;
 	const out: any = {...a};
-	for (const [k, v] of Object.entries(b)) out[k] = esObjeto(v) && esObjeto(out[k]) && !('tipo' in v) ? mezclar(out[k], v) : v;
+	for (const [k, v] of Object.entries(b)) out[k] = k !== 'fondo' && esObjeto(v) && esObjeto(out[k]) ? mezclar(out[k], v) : v;
 	return out;
 };
 

package/remotion/motor/widgets.tsx

@@ -19,18 +19,18 @@ const animado = (c: C, ctx: CtxEscena, campo = 'valor', dur = 0.8) => {
 
 export const Barra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 	const T = ctx.tema;
-	const ancho = c.ancho ?? 560;
+	const ancho = c.ancho ?? 760;
 	const v = clamp(animado(c, ctx) / (c.max ?? 100));
 	const color = c.color ?? T.colores.acento;
 	return (
 		<div style={{width: ancho, background: c.fondo ?? T.colores.tarjeta, borderRadius: 16, padding: '14px 20px', boxShadow: '0 10px 26px rgba(0,0,0,0.25)', border: `3px solid ${c.borde ?? 'rgba(0,0,0,0.08)'}`, fontFamily: T.fuentes.texto}}>
 			{c.titulo || c.mostrar !== false ? (
 				<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, color: T.colores.tarjetaTexto}}>
-					<span style={{fontSize: c.tamTitulo ?? 28, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase'}}>{c.titulo ?? ''}</span>
-					{c.mostrar !== false ? <span style={{fontSize: 30, fontWeight: 800, color}}>{formatoNumero(v * (c.max ?? 100), c.decimales ?? 0)}{c.unidad ?? '%'}</span> : null}
+					<span style={{fontSize: c.tamTitulo ?? 34, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase'}}>{c.titulo ?? ''}</span>
+					{c.mostrar !== false ? <span style={{fontSize: 40, fontWeight: 800, color}}>{formatoNumero(v * (c.max ?? 100), c.decimales ?? 0)}{c.unidad ?? '%'}</span> : null}
 				</div>
 			) : null}
-			<div style={{height: c.alto ?? 24, background: c.pista ?? 'rgba(127,127,127,0.25)', borderRadius: 99, overflow: 'hidden'}}>
+			<div style={{height: c.alto ?? 30, background: c.pista ?? 'rgba(127,127,127,0.25)', borderRadius: 99, overflow: 'hidden'}}>
 				<div style={{width: `${v * 100}%`, height: '100%', background: color, borderRadius: 99, boxShadow: `0 0 14px ${color}`}} />
 			</div>
 		</div>