morfeo 0.4.0 → 0.5.1

package/lib/guion.mjs

@@ -170,7 +170,7 @@ export async function esquemaMotor() {
 		claves: z.array(z.string()).nullable(),
 	});
 	const cierre = z.object({pide: z.enum(['comenta', 'comparte', 'sigue']), say: z.string(), palabra: z.string().nullable(), a: z.string().nullable()});
-	return z.object({id: z.string(), title: z.string(), formula: z.enum(IDS_FORMULA), music: z.enum(MUSICAS), scenes: z.array(escena), cierre});
+	return z.object({id: z.string(), title: z.string(), formula: z.enum(IDS_FORMULA), music: z.enum(MUSICAS), descripcion: z.string(), tags: z.array(z.string()), hooks: z.array(z.string()), scenes: z.array(escena), cierre});
 }
 
 /** De la salida de la IA (motor de capas) al formato de escenas de morfeo. */
@@ -266,6 +266,51 @@ export function aEscena(e) {
 	return out;
 }
 
+/**
+ * Investiga el tema en la web antes de escribir (búsqueda del servidor de Claude): devuelve notas con cada dato y su
+ * fuente, y la lista de fuentes que de verdad se consultaron (las URLs de los resultados de búsqueda citados).
+ * @returns {Promise<{notas: string, fuentes: {texto: string, url: string}[]}>}
+ */
+export async function investigar(client, Anthropic, tema, {idioma = 'español de México', modelo = MODELO_GUION, log = () => {}} = {}) {
+	const messages = [
+		{
+			role: 'user',
+			content: `Investiga para un video corto vertical sobre: ${tema}
+
+Busca en la web y junta 8 a 12 datos concretos, sorprendentes y verificables (cifras, fechas, nombres, lugares), cada uno
+con la fuente donde lo leíste (nombre del medio o institución y URL). Prefiere fuentes primarias u oficiales. Si dos
+fuentes no coinciden, dilo. No inventes nada que no esté en una fuente.
+Responde en ${idioma} con una lista: "- dato · fuente (URL)".`,
+		},
+	];
+	const vistas = new Map();
+	let texto = '';
+	// la búsqueda corre en el servidor; si el turno se pausa (pause_turn), se reenvía para que continúe
+	for (let vuelta = 0; vuelta < 6; vuelta++) {
+		const res = await client.messages.create({
+			model: modelo,
+			max_tokens: 16000,
+			tools: [{type: 'web_search_20260209', name: 'web_search', max_uses: 8}],
+			messages,
+		});
+		for (const b of res.content) {
+			if (b.type === 'web_search_tool_result' && Array.isArray(b.content)) for (const r of b.content) if (r.url) vistas.set(r.url, r.title ?? r.url);
+			if (b.type === 'text') {
+				texto += b.text;
+				for (const c of b.citations ?? []) if (c.url) vistas.set(c.url, c.title ?? vistas.get(c.url) ?? c.url);
+			}
+		}
+		if (res.stop_reason === 'refusal') throw new ErrorMorfeo('Claude no quiso investigar ese tema.');
+		if (res.stop_reason !== 'pause_turn') break;
+		log('    (sigue buscando…)');
+		messages.push({role: 'assistant', content: res.content});
+	}
+	if (!texto.trim()) throw new ErrorMorfeo('La investigación no devolvió datos; intenta otra vez o sin --investigar.');
+	// solo las fuentes que aparecen en las notas (las que de verdad respaldan un dato)
+	const fuentes = [...vistas].filter(([url]) => texto.includes(url) || texto.includes(new URL(url).hostname)).map(([url, titulo]) => ({texto: titulo, url}));
+	return {notas: texto.trim(), fuentes: fuentes.length ? fuentes : [...vistas].slice(0, 8).map(([url, titulo]) => ({texto: titulo, url}))};
+}
+
 /**
  * Pide a Claude un video completo.
  * @param {{tema?: string, texto?: string, idioma?: string, duracion?: number, tono?: string, estilo?: string, imagenes?: boolean, voz?: any, modelo?: string}} o
@@ -283,10 +328,25 @@ export async function guionConIA(o) {
 		throw new ErrorMorfeo('Falta la dependencia @anthropic-ai/sdk (npm install @anthropic-ai/sdk zod)');
 	}
 	const client = new Anthropic();
+	// --investigar: primero los datos con su fuente (búsqueda web), luego el guion se escribe solo con esos datos
+	let investigacion = null;
+	if (o.investigar && !o.texto) {
+		(o.log ?? console.log)('Investigando el tema en la web (cada dato con su fuente)...');
+		try {
+			investigacion = await investigar(client, Anthropic, o.tema, {idioma: o.idioma ?? 'español de México', modelo: o.modelo ?? MODELO_GUION, log: o.log ?? console.log});
+		} catch (e) {
+			if (e instanceof ErrorMorfeo) throw e;
+			if (e instanceof Anthropic.APIError) throw new ErrorMorfeo(`La búsqueda web falló (${e.status}): ${e.message}. Intenta sin --investigar.`);
+			throw e;
+		}
+	}
 	const idioma = o.idioma ?? 'español de México';
-	const pedido = o.texto
+	const pedidoBase = o.texto
 		? `Convierte este guion en escenas. Respeta su contenido y su orden; puedes partir frases largas.\n\n<guion>\n${o.texto}\n</guion>`
 		: `Escribe un video sobre: ${o.tema}`;
+	const pedido = investigacion
+		? `${pedidoBase}\n\nUsa SOLO estos datos investigados (no agregues cifras que no estén aquí):\n<investigacion>\n${investigacion.notas}\n</investigacion>`
+		: pedidoBase;
 	// ~45 s por defecto: los videos de referencia rondan el minuto y ninguna idea pasa de ~5 s (lib/estructura.mjs)
 	const forzada = o.formula ? formulaDe(o.formula) : null;
 	if (o.formula && !forzada) throw new ErrorMorfeo(`La fórmula "${o.formula}" no existe. Opciones: ${IDS_FORMULA.join(', ')}`);
@@ -304,7 +364,7 @@ export async function guionConIA(o) {
 			model: o.modelo ?? MODELO_GUION,
 			max_tokens: 16000,
 			system: motor ? INSTRUCCIONES_MOTOR : INSTRUCCIONES,
-			messages: [{role: 'user', content: `${pedido}\n\n${extra.join('\n')}\nEn "id" pon un identificador corto en minúsculas sin espacios. En "title" el título para publicar (con un emoji). En "music" el estilo de música que mejor le quede.`}],
+			messages: [{role: 'user', content: `${pedido}\n\n${extra.join('\n')}\nEn "id" pon un identificador corto en minúsculas sin espacios. En "title" el título para publicar (con un emoji). En "music" el estilo de música que mejor le quede. En "descripcion" el texto del post (1–2 frases). En "tags" 3–5 etiquetas sin #. En "hooks" 3 primeras frases alternativas al gancho, distintas entre sí, para probar otra versión.`}],
 			output_config: {format: zodOutputFormat(motor ? await esquemaMotor() : await esquema())},
 		});
 	} catch (e) {
@@ -321,7 +381,7 @@ export async function guionConIA(o) {
 		const scenes = g.scenes.map((e) => aEscenaMotor(e, !!o.imagenes));
 		const c = g.cierre;
 		const cta = !c || c.pide === 'sigue' ? {type: 'cta', ...(c?.say ? {say: c.say} : {})} : {type: 'cta', pide: c.pide, say: c.say, ...(c.palabra ? {palabra: c.palabra} : {}), ...(c.a ? {a: c.a} : {})};
-		return {id: slug(g.id || g.title), video: {estilo: o.estilo, formula: forzada?.id ?? g.formula, title: g.title, voice: o.voz ?? 'em_alex', music: g.music, scenes: [...scenes, cta]}};
+		return {id: slug(g.id || g.title), video: {estilo: o.estilo, formula: forzada?.id ?? g.formula, title: g.title, descripcion: g.descripcion, tags: g.tags, hooks: g.hooks, ...(investigacion?.fuentes.length ? {fuentes: investigacion.fuentes} : {}), voice: o.voz ?? 'em_alex', music: g.music, scenes: [...scenes, cta]}};
 	}
 	const scenes = g.scenes.map(aEscena);
 	if (scenes[0]?.type !== 'title') scenes.unshift({type: 'title', say: scenes[0]?.say ?? g.title, rows: [[g.title.toUpperCase().slice(0, 14), '#FFD400', 200]], icon: 'question'});

package/lib/hoja.mjs

@@ -1,6 +1,7 @@
 // `morfeo hoja <id>`: hoja de contacto (PNG con cuadros repartidos en el tiempo) para revisar un video de un vistazo.
 // El ffmpeg que trae Remotion viene recortado (sin los filtros `tile` ni `fps`), así que cada cuadro se pide como
 // PNG sin predicción por una tubería y la hoja se arma aquí con zlib.
+import {ZONAS} from './calidad.mjs';
 import {spawnSync} from 'node:child_process';
 import fs from 'node:fs';
 import {createRequire} from 'node:module';
@@ -62,10 +63,11 @@ function leerPng(b, w, h) {
 }
 
 /**
- * @param {{video: string, salida?: string, cols?: number, filas?: number, desde?: number, hasta?: number, ancho?: number}} op
+ * @param {{video: string, salida?: string, cols?: number, filas?: number, desde?: number, hasta?: number, ancho?: number, zona?: boolean}} op
+ *   zona: pinta en rojo lo que tapan los botones de TikTok/Reels/Shorts
  * @returns {string} ruta del PNG
  */
-export function hoja({video, salida, cols = 5, filas = 3, desde = 0, hasta, ancho = 216}) {
+export function hoja({video, salida, cols = 5, filas = 3, desde = 0, hasta, ancho = 216, zona = false}) {
 	// rutas absolutas: ffmpeg corre desde la carpeta de sus DLL, así que una ruta relativa no se encontraría
 	video = path.resolve(video);
 	if (salida) salida = path.resolve(salida);
@@ -87,6 +89,19 @@ export function hoja({video, salida, cols = 5, filas = 3, desde = 0, hasta, anch
 		const r = spawnSync(ffmpeg, ['-v', 'error', '-ss', t.toFixed(3), '-i', video, '-frames:v', '1', '-vf', `scale=${w}:${h}`, '-f', 'image2pipe', '-c:v', 'png', '-pred', 'none', '-pix_fmt', 'rgb24', '-'], {maxBuffer: 64 * 1024 * 1024, cwd});
 		if (r.status !== 0 || !r.stdout?.length) continue;
 		const px = leerPng(r.stdout, w, h);
+		if (zona) {
+			// tinte rojo en las zonas que tapan las apps (escala de 1080×1920 al tamaño del cuadro)
+			const ex = w / 1080;
+			const ey = h / 1920;
+			for (const z of ZONAS)
+				for (let y = Math.floor(z.y0 * ey); y < Math.min(h, Math.ceil(z.y1 * ey)); y++)
+					for (let x = Math.floor(z.x0 * ex); x < Math.min(w, Math.ceil(z.x1 * ex)); x++) {
+						const k = (y * w + x) * 3;
+						px[k] = Math.round(px[k] * 0.55 + 255 * 0.45);
+						px[k + 1] = Math.round(px[k + 1] * 0.55);
+						px[k + 2] = Math.round(px[k + 2] * 0.55);
+					}
+		}
 		const x0 = (i % cols) * w;
 		const y0 = Math.floor(i / cols) * h;
 		for (let y = 0; y < h; y++) px.copy(lienzo, (y0 + y) * (1 + W * 3) + 1 + x0 * 3, y * w * 3, (y + 1) * w * 3);

package/lib/palabras.mjs

@@ -35,7 +35,7 @@ function momentosDe(x, ruta, out) {
 		if (p) out.push([`${ruta}.${k}`, p]);
 	}
 	// lo que vive dentro de una capa: sus capas, su capa repetida, cambios, poses, items, líneas, movimientos
-	for (const k of ['capas', 'capa', 'cambios', 'poses', 'items', 'lineas', 'mover', 'escalar', 'opciones', 'capasPantalla'])
+	for (const k of ['capas', 'capa', 'cambios', 'poses', 'items', 'lineas', 'mover', 'escalar', 'opciones', 'capasPantalla', 'hitos', 'notificaciones'])
 		if (x[k] != null) momentosDe(x[k], `${ruta}.${k}`, out);
 }
 

package/lib/render.mjs

@@ -208,12 +208,31 @@ export async function preparar({proyecto = process.cwd(), ids, log = console.log
 	return {p, publico, marca, extras, datos, creditos, fallidos};
 }
 
+// ¿El video dibuja con WebGL? Capas 3D del motor o componentes del proyecto que usan Three.js / Lienzo3D.
+export function usaWebGL(p, id) {
+	const v = p.videos[id];
+	if (!v) return false;
+	const texto = JSON.stringify(v);
+	if (/"tipo":"(modelo|escena3d)"/.test(texto)) return true;
+	for (const [nombre, ruta] of Object.entries(p.componentes ?? {})) {
+		if (!texto.includes(`"nombre":"${nombre}"`)) continue;
+		try {
+			if (/Lienzo3D|ThreeCanvas|@react-three|from ['"]three['"]/.test(fs.readFileSync(ruta, 'utf8'))) return true;
+		} catch {
+			return true;
+		}
+	}
+	return false;
+}
+
 /**
  * Genera los videos. Sin ids: los que aún no existen en la carpeta de salida.
  * @param {{proyecto?: string, ids?: string[], todos?: boolean, log?: (m: string) => void, alProgreso?: (id: string, p: number) => void}} o
  * @returns {Promise<{id: string, mp4: string, jpg: string | null, segundos: number}[]>}
  */
-export async function render({proyecto = process.cwd(), ids, todos = false, soloFallidos = false, log = console.log, alProgreso} = {}) {
+export async function render({proyecto = process.cwd(), ids, todos = false, soloFallidos = false, previa = null, log = console.log, alProgreso} = {}) {
+	// previa: solo el gancho (las primeras escenas, hasta `previa` segundos o ~8 s) en "<título> (previa).mp4", sin miniatura
+	if (previa && !ids?.length) throw new ErrorMorfeo('Dime qué video:  npx morfeo previa mi-video');
 	cargarEnv(proyecto);
 	const p = await cargarProyecto(proyecto);
 	const loteArchivo = path.join(p.trabajo, 'ultimo-lote.json');
@@ -266,9 +285,15 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 			const t = Date.now();
 			try {
 			const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
-			const mp4 = salidaDe(p, id);
+			const mp4 = previa ? salidaDe(p, id).replace(/\.mp4$/, ' (previa).mp4') : salidaDe(p, id);
+			// tramo de la previa: hasta el final de la 2.ª escena (gancho + la que sigue), entre 4 y 8 s, o lo que se pida
+			const d0 = datos[id];
+			const finPrevia = typeof previa === 'number' ? previa : Math.min(8, Math.max(4, (d0.escenas[1] ?? d0.escenas[0]).t0 + (d0.escenas[1] ?? d0.escenas[0]).dur));
 			let gl = p.render.gl;
-			let concurrencia = concurrenciaBase;
+			// WebGL con GPU y muchas pestañas: alguna se queda "pegada" y sus cuadros salen con rótulos o subtítulos de
+			// cuadros anteriores (medido en Windows + RTX 3060: 9 pestañas → 0–54 cuadros malos de 270; 4 → 41–81; 2–3 → 0
+			// en 24 pruebas, casi igual de rápido). Solo se limita si el video usa 3D y nadie fijó la concurrencia.
+			let concurrencia = gl === 'angle' && p.render.concurrencia == null && usaWebGL(p, id) ? Math.min(concurrenciaBase, 3) : 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++) {
@@ -289,6 +314,7 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 						jpegQuality: 92,
 						concurrency: concurrencia,
 						outputLocation: mp4,
+						...(previa ? {frameRange: [0, Math.min(composition.durationInFrames - 1, Math.round(finPrevia * composition.fps))]} : {}),
 						onProgress: ({progress}) => {
 							alProgreso?.(id, progress);
 							// con terminal: cada 10 % en la misma línea; sin terminal (logs, CI): cada 25 %
@@ -314,7 +340,7 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 				}
 			}
 			let jpg = null;
-			if (p.render.miniatura) {
+			if (p.render.miniatura && !previa) {
 				// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
 				jpg = salidaDe(p, id, 'jpg');
 				const d = datos[id];
@@ -324,6 +350,17 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 				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});
 			}
+			// portada: el mismo cuadro con el título grande y la marca (`portada: 'texto'` o el título sin emojis; false = sin portada)
+			const vid = p.videos[id];
+			if (!previa && p.render.portada !== false && vid.portada !== false && jpg) {
+				const textoPortada = typeof vid.portada === 'string' ? vid.portada : String(vid.title ?? id).replace(/[\p{Extended_Pictographic}\uFE0F\u200D]/gu, '').replace(/\s*[|·].*$/, '').trim();
+				const d = datos[id];
+				const e0 = d.escenas[0];
+				const seg = vid.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, portada: textoPortada};
+				await renderStill({serveUrl, composition: {...composition, props: {...composition.props, portada: textoPortada}}, inputProps: props, browserExecutable, chromiumOptions: {gl}, frame, imageFormat: 'jpeg', jpegQuality: 92, output: salidaDe(p, id, 'jpg').replace(/\.jpg$/, ' (portada).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)}      `);
@@ -337,6 +374,7 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 	} finally {
 		soltar();
 	}
+	if (previa) return hechos;
 	return terminarLote(p, loteArchivo, hechos, fallidos, log);
 }
 
@@ -438,7 +476,18 @@ function escribirResumen(p) {
 		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];
+		const fuentes = (v.fuentes ?? []).map((x) => (typeof x === 'string' ? `- ${x}` : `- ${x.texto ?? ''}${x.url ? ` · ${x.url}` : ''}`));
+		const ganchos = (v.hooks ?? []).map((h, i) => `${i + 1}. ${h}`);
+		const lineas = [
+			v.title ?? f.id,
+			'',
+			...(v.descripcion ? [v.descripcion, ''] : []),
+			...(tags ? [tags] : []),
+			...(fuentes.length ? ['', 'Fuentes:', ...fuentes] : []),
+			...creditos,
+			// lo de abajo no va en el post: ganchos para probar otra versión del inicio
+			...(ganchos.length ? ['', '———', 'Ganchos de reserva (para otra versión):', ...ganchos] : []),
+		];
 		fs.writeFileSync(salidaDe(p, f.id, 'txt'), lineas.join('\n').trim() + '\n');
 	}
 	if (conCreditos.length)

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "morfeo",
-	"version": "0.4.0",
+	"version": "0.5.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://morfeo-docs-two.vercel.app/",
+	"homepage": "https://morfeo.ureck.dev/",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/UreckChan/morfeo.git"

package/plantilla/AGENTS.md

@@ -0,0 +1,54 @@
+# Instrucciones para la IA (Claude Code, Codex u otra)
+
+Este es un proyecto de **Morfeo**: videos verticales animados (Shorts, TikTok, Reels) desde código. Tú eres quien
+los hace: la persona te pide un tema y tú le devuelves el video terminado. Habla con ella en su idioma, sin jerga
+técnica. Nunca publiques nada por ella: le entregas los archivos y ella decide dónde subirlos.
+
+Comandos de referencia: `npx morfeo ayuda`. Tipos de todo lo que existe: `node_modules/morfeo/index.d.ts`.
+
+## Cuando diga «Configúrame» (o es la primera vez)
+
+1. Revisa que haya Node 18.17+ (`node -v`). Si falta, dile cómo instalarlo y espera.
+2. `npm install` en esta carpeta.
+3. `npx morfeo instalar --si` (Python, voces gratis, navegador; tarda unos minutos la primera vez). Si algo falla,
+   lee el mensaje, arréglalo y vuelve a correrlo. `npx morfeo doctor` dice qué falta.
+4. `npx morfeo estilo`: abre una página para que elija nombre, siglas, colores, letra, voz, ritmo y frase de cierre.
+   Espera a que diga que guardó (crea `estilo.json`).
+5. Si quiere su voz de ElevenLabs: que pegue su clave en `.env` como `ELEVENLABS_API_KEY=…` (cópialo de `.env.example`;
+   nunca escribas tú la clave ni la pongas en el chat). Para investigar con Claude desde la terminal, `ANTHROPIC_API_KEY`.
+6. Haz un video de prueba (`npx morfeo render ejemplo-2d`) y dile dónde quedó.
+
+## Cuando diga «Hazme un video sobre…»
+
+1. **Investiga.** Busca los datos en la web y quédate solo con lo que puedas respaldar con una fuente (medio,
+   institución, URL). Si no puedes buscar, usa `npx morfeo guion "tema" --investigar` (necesita `ANTHROPIC_API_KEY`).
+   Si dudas de una cifra, dila en general o quítala.
+2. **Elige la fórmula** que mejor le queda al tema: `npx morfeo formulas` (construiste, mito, misterio, serie,
+   biografía, experimento, demuéstralo, roast…). Si hay una base para esa fórmula, empieza de ahí:
+   `npx morfeo nuevo-video <id> --formula <fórmula>` (bases: serie, mito, escalada, biografia, construiste; o
+   `--look 2d` / `--look 3d`). Si no, `npx morfeo guion "tema" --formula <fórmula>` o escribe el guion a mano en
+   `guiones/<id>.mjs` (mira los ejemplos de `guiones/`).
+3. **Escribe el guion** siguiendo la fórmula y estas reglas:
+   - Gancho en los primeros 2 s, en segunda persona o con una cifra imposible. Nada de "hoy te voy a contar".
+   - Una idea por escena (2–5 s de voz). Pregunta antes de revelar. Sube la apuesta hacia el final.
+   - `say` es lo que dice la voz (cifras con letra); `show` el subtítulo con cifras.
+   - Rótulos cortos en 2–4 escenas (`rotulo`, con `rotuloEstilo` sello/paso/pixel si va), `claves` en cada escena.
+   - Cierre que pide algo: `{type: 'cta', pide: 'comenta', palabra: 'X'}` o `pide: 'comparte', a: 'tu amigo que…'`.
+   - `title`, `descripcion`, `tags`, `hooks` (3 ganchos de reserva) y `fuentes` (cada dato con su fuente).
+4. **Enséñale el guion** (texto de cada escena, en limpio) y espera su visto bueno o sus cambios.
+5. **Enséñale el gancho:** `npx morfeo previa <id>` renderiza solo los primeros segundos. Si no le convence, cámbialo
+   (tiene 3 ganchos de reserva en `hooks`).
+6. **Renderiza:** `npx morfeo render <id>`.
+7. **Revisa antes de entregar:**
+   - `npx morfeo revisar <id>`: estructura, que la voz haya dicho el guion y que nada quede bajo los botones de la app.
+   - `npx morfeo hoja <id> --zona`: mira la hoja de contacto (es una imagen); lo pintado en rojo es lo que tapan las apps.
+   - Si algo se ve mal (texto encimado, objeto cortado, cuadro vacío), arréglalo y vuelve a renderizar.
+8. **Entrega:** en `salida/` quedan `<título>.mp4`, `<título>.jpg` (miniatura), `<título> (portada).jpg` y
+   `<título>.txt` (texto del post, etiquetas, fuentes y ganchos de reserva). Dile eso y nada más.
+
+## Reglas
+
+- No inventes datos. No copies videos de otros: se toma la forma, no el contenido.
+- Emojis solo como último recurso; mejor objetos 2D/3D (`{tipo: 'recurso', buscar: 'volcán', estilo: '3d'}`).
+- Un render a la vez. Si un render falla, lee el error (Morfeo explica qué falta) y corrígelo.
+- No toques `node_modules/`. Lo de la persona vive en `guiones/`, `escenas/`, `assets/`, `estilo.json` y `morfeo.config.mjs`.

package/plantilla/CLAUDE.md

@@ -0,0 +1,5 @@
+# Instrucciones para Claude Code
+
+Las instrucciones de este proyecto están en AGENTS.md (las mismas para cualquier IA):
+
+@AGENTS.md

package/python/musica.py

@@ -179,11 +179,97 @@ def efecto(nombre, rng):
         x = 0.22 * pop(180, 90, 0.16)
         add(x, 0.1 * lp(rng.standard_normal(int(0.06 * SR)), 1200), 0)
         return x
+    if nombre in EFECTOS_EXTRA: return EFECTOS_EXTRA[nombre](rng)
     return 0.14 * pop()
 
 
+def _env(n, ataque=0.004, cola=6.0):
+    t = np.arange(n) / SR
+    return np.minimum(1, t / ataque) * np.exp(-t * cola)
+
+
+def _tono(f, d, cola=8.0, armonicos=(1,)):
+    n = int(d * SR); t = np.arange(n) / SR
+    x = sum(np.sin(2 * np.pi * f * h * t) / (i + 1) for i, h in enumerate(armonicos))
+    return x * _env(n, 0.003, cola)
+
+
+def _teclas(rng):
+    """Ráfaga de teclas de máquina: 7 clics secos con espaciado irregular."""
+    x = np.zeros(int(0.9 * SR)); t = 0.0
+    for _ in range(7):
+        c = hp(rng.standard_normal(int(0.012 * SR)), 2500) * _env(int(0.012 * SR), 0.0005, 300)
+        add(x, 0.14 * c, t); t += 0.07 + rng.random() * 0.07
+    return x
+
+
+def _radio(rng):
+    """Estática de radio con un pitido de sintonía."""
+    n = int(0.7 * SR)
+    ruido = hp(lp(rng.standard_normal(n), 3500), 400) * 0.25 * np.minimum(1, np.arange(n) / (0.03 * SR)) * np.linspace(1, 0.2, n)
+    add(ruido, 0.08 * _tono(1200, 0.25, 4), 0.2)
+    return ruido
+
+
+def _obturador(rng):
+    """Obturador de cámara: dos clics mecánicos."""
+    x = np.zeros(int(0.25 * SR))
+    for t, f in ((0.0, 1800), (0.07, 1300)):
+        c = lp(hp(rng.standard_normal(int(0.02 * SR)), 900), f * 3) * _env(int(0.02 * SR), 0.0004, 220)
+        add(x, 0.5 * c, t)
+    return x
+
+
+def _notificacion(rng):
+    """Notificación del teléfono: dos notas que suben."""
+    x = np.zeros(int(0.5 * SR))
+    add(x, 0.18 * _tono(nf(84), 0.25, 14, (1, 2)), 0)
+    add(x, 0.18 * _tono(nf(91), 0.35, 10, (1, 2)), 0.11)
+    return x
+
+
+def _latido(rng):
+    """Latido: dos golpes graves (lub-dub)."""
+    x = np.zeros(int(0.7 * SR))
+    add(x, 0.5 * _tono(55, 0.18, 22), 0)
+    add(x, 0.35 * _tono(48, 0.16, 24), 0.2)
+    return lp(x, 300)
+
+
+def _alarma(rng):
+    """Alarma: tres pitidos cuadrados."""
+    x = np.zeros(int(0.9 * SR))
+    for i in range(3):
+        n = int(0.16 * SR); t = np.arange(n) / SR
+        b = np.sign(np.sin(2 * np.pi * 1600 * t)) * 0.09 * np.minimum(1, (n - np.arange(n)) / (0.01 * SR))
+        add(x, lp(b, 5000), i * 0.27)
+    return x
+
+
+def _reloj(rng):
+    """Tic-tac de reloj: tic agudo y tac grave."""
+    x = np.zeros(int(1.0 * SR))
+    for i in range(2):
+        add(x, 0.45 * tick(0.02), i * 0.5)
+        add(x, 0.3 * lp(tick(0.025), 1500), i * 0.5 + 0.25)
+    return x
+
+
+def _caja(rng):
+    """Caja registradora: campanita y cajón que se abre."""
+    x = np.zeros(int(0.9 * SR))
+    add(x, 0.25 * bell(nf(96), 0.7), 0.0)
+    cajon = lp(rng.standard_normal(int(0.25 * SR)), 900) * _env(int(0.25 * SR), 0.01, 10) * 0.25
+    add(x, cajon, 0.12)
+    return x
+
+
+EFECTOS_EXTRA = {"teclas": _teclas, "radio": _radio, "obturador": _obturador, "notificacion": _notificacion, "latido": _latido, "alarma": _alarma, "reloj": _reloj, "caja": _caja}
+
+
 # sonido por defecto según cómo entra o qué es la capa (sonido: false lo apaga; sonido: "x" lo cambia)
-SONIDO_TIPO = {"sello": "golpe", "dato": "tick", "contador": "tick", "nombre": "pop", "accion": "pop", "chip": "pop", "insignia": "pop"}
+SONIDO_TIPO = {"sello": "golpe", "dato": "tick", "contador": "tick", "nombre": "pop", "accion": "pop", "chip": "pop", "insignia": "pop",
+               "bloqueo": "notificacion", "llamada": "notificacion", "vigilancia": "radio", "terminal": "teclas", "calendario": "reloj", "fecha": "golpe", "noticia": "radio", "recuento": "tick", "cronometro": "reloj"}
 SONIDO_ENTRADA = {"rebote": "pop", "caer": "golpe", "deslizar-izq": "whoosh", "deslizar-der": "whoosh", "deslizar-arriba": "whoosh", "deslizar-abajo": "whoosh", "girar": "whoosh"}
 
 

package/remotion/Short.tsx

@@ -27,10 +27,11 @@ import {MARCA_VACIA, type Datos, type Escena, type Marca as TipoMarca} from './t
 import {Capas} from './motor/capas';
 import {capasDe} from './motor/plantillas';
 import {temaDe} from './motor/tema';
+import {Portada} from './motor/portada';
 import {VideoConAudio} from './motor/Video';
 import {loadFont} from '@remotion/fonts';
 
-export type PropsShort = {id: string; videos?: Record<string, Datos>; marca?: TipoMarca; guias?: boolean; miniatura?: 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; portada?: string; 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
@@ -246,7 +247,7 @@ export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean; miniatur
 	);
 };
 
-export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, miniatura, fuentes, estilos}) => {
+export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, miniatura, portada, fuentes, estilos}) => {
 	const frame = useCurrentFrame();
 	const [listo, setListo] = useState(false);
 	const [handle] = useState(() => delayRender('Cargando fuentes'));
@@ -259,6 +260,13 @@ export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, miniatura
 	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 (portada)
+		return (
+			<AbsoluteFill>
+				{d.estilo && d.estilo !== 'datos-curiosos' ? <VideoConAudio d={d} frame={frame} marca={{...MARCA_VACIA, ...marca}} estilos={estilos} miniatura sinMarca /> : <Fotograma d={d} T={frame / FPS} miniatura />}
+				<Portada texto={portada} marca={{...MARCA_VACIA, ...marca}} />
+			</AbsoluteFill>
+		);
 	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);

package/remotion/motor/Video.tsx

@@ -383,7 +383,7 @@ const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 	);
 };
 
-export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean}> = ({d, T, estilos, miniatura}) => {
+export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean; sinMarca?: boolean}> = ({d, T, estilos, miniatura, sinMarca}) => {
 	const tema = temaDe(d.estilo, d.tema, estilos);
 	const n = d.escenas.length;
 	let si = d.escenas.findIndex((e) => T < e.t0 + e.dur);
@@ -459,18 +459,18 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 			<Vineta fuerza={tema.vineta ?? 0} color={tema.post?.vinetaColor} />
 			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
 			{d.serie && e.tipo !== 'cta' ? <Serie texto={d.serie} tema={tema} /> : null}
-			{e.tipo !== 'cta' ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
+			{e.tipo !== 'cta' && !sinMarca ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
 			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} claves={e.p.claves} /> : null}
-			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
+			{e.tipo !== 'cta' && !sinMarca ? <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>; miniatura?: boolean}> = ({d, frame, marca, estilos, miniatura}) => (
+export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>; miniatura?: boolean; sinMarca?: boolean}> = ({d, frame, marca, estilos, miniatura, sinMarca}) => (
 	<MarcaContexto.Provider value={marca}>
 		<AbsoluteFill>
-			<VideoMotor d={d} T={frame / FPS} estilos={estilos} miniatura={miniatura} />
+			<VideoMotor d={d} T={frame / FPS} estilos={estilos} miniatura={miniatura} sinMarca={sinMarca} />
 			<Audio src={staticFile(d.audio)} />
 		</AbsoluteFill>
 	</MarcaContexto.Provider>

package/remotion/motor/historias.tsx

@@ -367,9 +367,13 @@ export const Tierra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 	const pin = clamp((t - (c.girar === false ? 0.2 : (c.duracion ?? 1.8) * 0.85)) / 0.35);
 	const X = cx + px * R;
 	const Y = cx - py * R;
+	// `acercar: 4`: después del pin, la cámara vuela hacia el sitio (el globo crece alrededor del pin)
+	const tPin = c.girar === false ? 0.2 : (c.duracion ?? 1.8) * 0.85;
+	const vuelo = c.acercar ? easeIO(clamp((t - tPin - 0.6) / (c.duracionVuelo ?? 1.2))) : 0;
+	const zoom = 1 + ((c.acercar ?? 1) - 1) * vuelo;
 	const color = c.color ?? '#E5484D';
 	return (
-		<div style={{position: 'relative', width: tam, height: tam}}>
+		<div style={{position: 'relative', width: tam, height: tam, transform: `scale(${zoom})`, transformOrigin: `${X}px ${Y}px`}}>
 			<svg width={tam} height={tam} style={{overflow: 'visible'}}>
 				<defs>
 					<radialGradient id="tierra-mar" cx="38%" cy="32%" r="75%">
@@ -390,7 +394,7 @@ export const Tierra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 				<circle cx={cx} cy={cx} r={R} fill="url(#tierra-mar)" />
 				<g clipPath="url(#tierra-disco)">
 					{caminos.map((d, i) => (
-						<path key={i} d={d} fill="#6FBF73" stroke="#4E9A55" strokeWidth={1.2} strokeLinejoin="round" />
+						<path key={i} d={d} fill="#6FBF73" stroke="#4E9A55" strokeWidth={1.2} strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
 					))}
 				</g>
 				<circle cx={cx} cy={cx} r={R} fill="url(#tierra-luz)" />
@@ -411,9 +415,48 @@ export const Tierra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 	);
 };
 
-export const HISTORIAS = ['tierra', 'bloqueo', 'llamada', 'recuento', 'capitulo', 'vigilancia', 'cintillo', 'fecha', 'calendario', 'dividida'];
+/**
+ * Línea de tiempo vertical: la línea se dibuja hacia abajo y cada hito entra en su palabra (`en`), con el año en
+ * grande y su texto. `hitos: [{anio: 1963, texto: 'Nace en Taiwán', en: 'nació'}]`, `color`, `ancho`. El último que
+ * ya entró queda resaltado.
+ */
+export const Linea: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const hitos: C[] = c.hitos ?? [];
+	const color = c.color ?? ctx.tema.colores.acento;
+	const paso = c.paso ?? 190;
+	const tiempos = hitos.map((h, i) => cuando(h.en, ctx, 0.3 + i * 0.8));
+	const visibles = tiempos.filter((t0) => ctx.t >= t0).length;
+	const ultimo = visibles - 1;
+	// la línea llega hasta el último hito que ya entró (y avanza mientras entra)
+	const kUlt = ultimo >= 0 ? easeOut(clamp((ctx.t - tiempos[ultimo]) / 0.4)) : 0;
+	const largo = ultimo >= 0 ? (ultimo - 1 + kUlt) * paso + paso * 0.15 : 0;
+	return (
+		<div style={{position: 'relative', width: c.ancho ?? 820, height: hitos.length * paso, fontFamily: 'Montserrat, sans-serif'}}>
+			<div style={{position: 'absolute', left: 38, top: 30, width: 8, height: (hitos.length - 1) * paso, borderRadius: 4, background: 'rgba(255,255,255,0.18)'}} />
+			<div style={{position: 'absolute', left: 38, top: 30, width: 8, height: Math.max(0, largo + paso * 0.85), borderRadius: 4, background: color}} />
+			{hitos.map((h, i) => {
+				const k = easeOut(clamp((ctx.t - tiempos[i]) / 0.4));
+				if (k <= 0) return null;
+				const actual = i === ultimo;
+				return (
+					<div key={i} style={{position: 'absolute', left: 0, top: i * paso, display: 'flex', alignItems: 'flex-start', gap: 34, opacity: k, transform: `translateX(${(1 - k) * 40}px)`}}>
+						<div style={{width: 84, height: 84, borderRadius: '50%', background: actual ? color : '#1B1B1F', border: `6px solid ${color}`, boxShadow: actual ? `0 0 24px ${color}` : undefined, transform: `scale(${resorte(k, 0.3)})`, flex: 'none'}} />
+						<div style={{paddingTop: 2}}>
+							<div style={{color: actual ? color : '#FFFFFF', fontWeight: 900, fontSize: 64, lineHeight: 1}}>{h.anio ?? h.titulo}</div>
+							{h.texto ? <div style={{color: '#FFFFFF', fontWeight: 700, fontSize: 36, marginTop: 6, maxWidth: (c.ancho ?? 820) - 140, textShadow: '0 2px 10px rgba(0,0,0,0.5)'}}>{h.texto}</div> : null}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export const HISTORIAS = ['linea', 'tierra', 'bloqueo', 'llamada', 'recuento', 'capitulo', 'vigilancia', 'cintillo', 'fecha', 'calendario', 'dividida'];
 export const Historias: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 	switch (c.tipo) {
+		case 'linea':
+			return <Linea c={c} ctx={ctx} />;
 		case 'tierra':
 			return <Tierra c={c} ctx={ctx} />;
 		case 'bloqueo':

package/remotion/motor/portada.tsx

@@ -0,0 +1,44 @@
+// Portada del video (salida/<título> (portada).jpg): el cuadro de la miniatura con el título grande abajo, la palabra
+// clave en color y la marca arriba. Distinta de la miniatura (que es el cuadro limpio): la portada es la que se ve en
+// el perfil y en la cuadrícula del canal, así que el título tiene que leerse en chiquito.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {ANTON, ancho} from '../estilo';
+import {Avatar, MarcaContexto} from '../piezas';
+import type {Marca} from '../tipos';
+import {partesResaltadas} from './util';
+
+export const Portada: React.FC<{texto: string; marca: Marca; acento?: string}> = ({texto, marca, acento = marca.color ?? '#FFD400'}) => {
+	const letra = marca.letra ?? ANTON;
+	const limpio = texto.replace(/\*/g, '').toUpperCase();
+	// sin *palabra*, se resalta la última palabra larga
+	const marcado = texto.includes('*') ? texto : texto.replace(/([^\s]{5,})(?![\s\S]*\s[^\s]{5,})/, '*$1*');
+	let tam = 150;
+	try {
+		// en 2–3 renglones de 940 px
+		const w = ancho(limpio, letra, tam, 400);
+		if (w > 940 * 2.6) tam = Math.max(84, Math.floor((tam * 940 * 2.6) / w));
+	} catch {}
+	return (
+		<MarcaContexto.Provider value={marca}>
+			<AbsoluteFill>
+				<AbsoluteFill style={{background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.92) 100%)'}} />
+				{marca.nombre || marca.logo ? (
+					<div style={{position: 'absolute', left: 56, top: 110, display: 'flex', alignItems: 'center', gap: 18}}>
+						<div style={{position: 'relative', width: 96, height: 96}}>
+							<Avatar x={0} y={0} size={88} aro={5} />
+						</div>
+						{marca.nombre ? <div style={{fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 44, color: '#FFFFFF', textShadow: '0 3px 12px rgba(0,0,0,0.6)'}}>{marca.nombre}</div> : null}
+					</div>
+				) : null}
+				<div style={{position: 'absolute', left: 60, right: 60, bottom: 230, fontFamily: letra, fontSize: tam, lineHeight: 1.02, color: '#FFFFFF', textTransform: 'uppercase', textShadow: '0 8px 30px rgba(0,0,0,0.6)', WebkitTextStroke: `${Math.round(tam * 0.04)}px #000`, paintOrder: 'stroke fill'}}>
+					{partesResaltadas(marcado).map(([p, r], i) => (
+						<span key={i} style={r ? {color: acento} : undefined}>
+							{p}
+						</span>
+					))}
+				</div>
+			</AbsoluteFill>
+		</MarcaContexto.Provider>
+	);
+};