morfeo 0.1.1 → 0.1.3

package/lib/recursos.mjs

@@ -0,0 +1,310 @@
+// Biblioteca de recursos 2D y 3D: busca un término (en español) en bibliotecas abiertas, lo descarga
+// una sola vez a ~/.morfeo/biblioteca y lo convierte en una capa de imagen o de modelo.
+//
+//   {tipo: 'recurso', buscar: 'tubería', estilo: '3d'}          3D low-poly (Kenney; Poly Pizza si hay clave)
+//   {tipo: 'recurso', buscar: 'silla', estilo: 'realista'}      3D realista con texturas (Poly Haven)
+//   {tipo: 'recurso', buscar: 'cohete', estilo: '2d', variante: 'clay'}   ilustración 2D (Iconify)
+//
+// Fuentes y licencias:
+//   Kenney (espejo github.com/ETdoFresh/kenney.nl)  CC0 · ~1.400 modelos .glb
+//   Poly Haven (polyhaven.com)                      CC0 · ~500 modelos glTF con texturas · "Powered by Poly Haven"
+//   Iconify (iconify.design)                        MIT / Apache / CC0 / CC BY según el set · 200 mil+ íconos
+//   Poly Pizza (poly.pizza, opcional)               CC0 / CC-BY · 10 mil+ modelos · necesita POLYPIZZA_API_KEY
+import fs from 'node:fs';
+import path from 'node:path';
+import {ErrorMorfeo} from './config.mjs';
+import {HOME} from './entorno.mjs';
+import {traducir} from './diccionario.mjs';
+
+export const BIBLIOTECA = path.join(HOME, 'biblioteca');
+const UA = {'user-agent': 'morfeo (https://github.com/UreckChan/morfeo)'};
+const UNA_SEMANA = 7 * 24 * 3600 * 1000;
+
+// Variantes 2D: cada una es un set (o grupo de sets) de Iconify con la misma línea gráfica.
+export const VARIANTES_2D = {
+	color: ['fluent-color', 'glyphs-poly', 'icon-park', 'marketeq', 'withicons-suite'],
+	clay: ['withicons-clay'],
+	glass: ['withicons-glass'],
+	kawaii: ['withicons-kawaii'],
+	retro: ['withicons-retro'],
+	pastel: ['withicons-pastel'],
+	sticker: ['withicons-sticker'],
+	skeuo: ['withicons-skeuo'],
+	plush: ['withicons-plush'],
+	anime: ['withicons-anime'],
+	luxe: ['withicons-luxe'],
+	chrome: ['withicons-chrome'],
+	liquid: ['withicons-liquid'],
+	bauhaus: ['withicons-bauhaus'],
+	brutal: ['withicons-brutal'],
+	gothic: ['withicons-gothic'],
+	linea: ['ph', 'mdi', 'iconoir', 'tabler', 'lucide'],
+	// ilustración plana con muchísimos animales y objetos: último respaldo 2D antes de pasar a 3D
+	plano: ['fluent-emoji-flat', 'noto'],
+};
+
+async function pedirJSON(url, opciones = {}) {
+	let res;
+	try {
+		res = await fetch(url, {...opciones, headers: {...UA, ...(opciones.headers ?? {})}});
+	} catch (e) {
+		throw new ErrorMorfeo(`No pude conectar con ${new URL(url).host}: ${e.message}`);
+	}
+	if (!res.ok) throw new ErrorMorfeo(`${new URL(url).host} respondió ${res.status} para ${url}`);
+	return res.json();
+}
+
+async function bajar(url, destino) {
+	if (fs.existsSync(destino) && fs.statSync(destino).size > 0) return destino;
+	const res = await fetch(url, {headers: UA});
+	if (!res.ok) throw new ErrorMorfeo(`No pude descargar ${url} (${res.status})`);
+	fs.mkdirSync(path.dirname(destino), {recursive: true});
+	fs.writeFileSync(destino + '.part', Buffer.from(await res.arrayBuffer()));
+	fs.renameSync(destino + '.part', destino);
+	return destino;
+}
+
+/** Índice en caché (se renueva cada semana; si no hay internet, usa el que haya). */
+async function indice(nombre, obtener) {
+	const f = path.join(BIBLIOTECA, `${nombre}.json`);
+	if (fs.existsSync(f) && Date.now() - fs.statSync(f).mtimeMs < UNA_SEMANA) return JSON.parse(fs.readFileSync(f, 'utf8'));
+	try {
+		const datos = await obtener();
+		fs.mkdirSync(BIBLIOTECA, {recursive: true});
+		fs.writeFileSync(f, JSON.stringify(datos));
+		return datos;
+	} catch (e) {
+		if (fs.existsSync(f)) return JSON.parse(fs.readFileSync(f, 'utf8'));
+		throw e;
+	}
+}
+
+/** "bathroomSinkSquare" / "Barrel_01" → ["bathroom", "sink", "square", "barrel"] */
+const palabras = (s) =>
+	String(s)
+		.replace(/([a-z])([A-Z])/g, '$1 $2')
+		.toLowerCase()
+		.split(/[^a-z]+/)
+		.filter(Boolean);
+
+/** Singular aproximado en inglés: "pipes" → "pipe", "boxes" → "box", "glass" se queda. */
+const singular = (w) => (w.length > 4 && /(ches|shes|xes|sses)$/.test(w) ? w.slice(0, -2) : w.length > 3 && /[^s]s$/.test(w) ? w.slice(0, -1) : w);
+
+/**
+ * Puntaje de un nombre contra una búsqueda en inglés. Todas las palabras buscadas deben aparecer
+ * (plural = singular); gana el nombre corto cuyo sustantivo principal (la última palabra) es lo buscado.
+ */
+function puntaje(nombrePalabras, consulta) {
+	const q = palabras(consulta).map(singular);
+	const n = nombrePalabras.map(singular);
+	if (!q.length || !n.length) return 0;
+	let p = 0;
+	for (const w of q) {
+		if (n.includes(w)) p += 10;
+		else if (w.length >= 4 && n.some((x) => x.length >= 4 && (x.startsWith(w) || w.startsWith(x)))) p += 4;
+		else return 0;
+	}
+	if (n[n.length - 1] === q[q.length - 1]) p += 6; // "modular pipe" > "pipe wrench" al buscar "pipe"
+	return p - n.length * 0.6;
+}
+
+// ---------------------------------------------------------------- Kenney (3D low-poly, CC0)
+const KENNEY_REPO = 'ETdoFresh/kenney.nl';
+const kenneyIndice = () =>
+	indice('kenney', async () => {
+		const arbol = await pedirJSON(`https://api.github.com/repos/${KENNEY_REPO}/git/trees/master?recursive=1`);
+		return arbol.tree
+			.filter((n) => /\.glb$/i.test(n.path))
+			.map((n) => ({ruta: n.path, nombre: n.path.split('/').pop().replace(/\.glb$/i, ''), kit: n.path.split('/')[0]}));
+	});
+
+async function buscarKenney(consultas) {
+	const idx = await kenneyIndice();
+	const out = [];
+	for (const [i, q] of consultas.entries())
+		for (const m of idx) {
+			const p = puntaje(palabras(m.nombre), q);
+			if (p > 0) out.push({fuente: 'kenney', id: m.ruta, nombre: m.nombre, coleccion: m.kit, licencia: 'CC0', puntaje: p - i * 3, tipo: 'modelo'});
+		}
+	return out;
+}
+
+async function bajarKenney(r) {
+	const url = `https://raw.githubusercontent.com/${KENNEY_REPO}/master/${r.id.split('/').map(encodeURIComponent).join('/')}`;
+	const local = path.join(BIBLIOTECA, 'kenney', r.id.replace(/[^A-Za-z0-9._/-]/g, '_'));
+	await bajar(url, local);
+	return {archivos: [local], principal: local, credito: `${r.nombre} · Kenney (kenney.nl) · CC0`};
+}
+
+// ---------------------------------------------------------------- Poly Haven (3D realista, CC0)
+const polyhavenIndice = () => indice('polyhaven', () => pedirJSON('https://api.polyhaven.com/assets?t=models'));
+
+async function buscarPolyhaven(consultas) {
+	const idx = await polyhavenIndice();
+	const out = [];
+	for (const [i, q] of consultas.entries())
+		for (const [id, v] of Object.entries(idx)) {
+			const nombre = palabras(`${v.name} ${id}`);
+			const extra = palabras([...(v.tags ?? []), ...(v.categories ?? [])].join(' '));
+			const p = Math.max(puntaje(nombre, q), puntaje([...nombre, ...extra], q) - 6);
+			if (p > 0) out.push({fuente: 'polyhaven', id, nombre: v.name, coleccion: (v.categories ?? [])[0] ?? '', licencia: 'CC0', puntaje: p - i * 3, tipo: 'modelo'});
+		}
+	return out;
+}
+
+async function bajarPolyhaven(r, resolucion = '1k') {
+	const f = await pedirJSON(`https://api.polyhaven.com/files/${encodeURIComponent(r.id)}`);
+	const g = f.gltf?.[resolucion] ?? f.gltf?.['1k'] ?? Object.values(f.gltf ?? {})[0];
+	if (!g?.gltf) throw new ErrorMorfeo(`Poly Haven no tiene glTF para ${r.id}`);
+	const dir = path.join(BIBLIOTECA, 'polyhaven', r.id);
+	const principal = await bajar(g.gltf.url, path.join(dir, path.basename(new URL(g.gltf.url).pathname)));
+	const archivos = [principal];
+	for (const [rel, info] of Object.entries(g.gltf.include ?? {})) archivos.push(await bajar(info.url, path.join(dir, rel)));
+	return {archivos, principal, base: dir, credito: `${r.nombre} · Poly Haven (polyhaven.com) · CC0`};
+}
+
+// ---------------------------------------------------------------- Iconify (2D)
+async function buscarIconify(consultas, variante = 'color') {
+	const sets = VARIANTES_2D[variante] ?? VARIANTES_2D.color;
+	const out = [];
+	for (const [i, q] of consultas.entries()) {
+		const r = await pedirJSON(`https://api.iconify.design/search?query=${encodeURIComponent(q)}&limit=48&prefixes=${sets.join(',')}`);
+		for (const [j, icono] of (r.icons ?? []).entries()) {
+			const [prefijo, nombre] = icono.split(':');
+			const col = r.collections?.[prefijo] ?? {};
+			const p = puntaje(palabras(nombre), q);
+			out.push({fuente: 'iconify', id: icono, nombre, coleccion: col.name ?? prefijo, licencia: col.license?.title ?? '?', puntaje: (p || 1) - i * 3 - j * 0.05, tipo: 'imagen', mono: !col.palette});
+		}
+	}
+	return out;
+}
+
+async function bajarIconify(r, color) {
+	const [prefijo, nombre] = r.id.split(':');
+	const params = r.mono ? `?height=512&color=${encodeURIComponent(color ?? '#ffffff')}` : '?height=512';
+	const local = path.join(BIBLIOTECA, 'iconify', prefijo, `${nombre}${r.mono ? '-' + (color ?? '#ffffff').replace('#', '') : ''}.svg`);
+	await bajar(`https://api.iconify.design/${prefijo}/${nombre}.svg${params}`, local);
+	return {archivos: [local], principal: local, credito: `${nombre} · ${r.coleccion} (Iconify) · ${r.licencia}`};
+}
+
+// ---------------------------------------------------------------- Poly Pizza (3D, opcional con clave)
+async function buscarPolypizza(consultas) {
+	const clave = process.env.POLYPIZZA_API_KEY;
+	if (!clave) return [];
+	const out = [];
+	for (const [i, q] of consultas.entries()) {
+		const r = await pedirJSON(`https://api.poly.pizza/v1/search/${encodeURIComponent(q)}?limit=24`, {headers: {'X-Auth-Token': clave}});
+		const lista = Array.isArray(r) ? r : r.results ?? r.Results ?? [];
+		for (const [j, m] of lista.entries())
+			if (m.Download)
+				out.push({fuente: 'polypizza', id: m.ID, nombre: m.Title, coleccion: m.Creator?.Username ?? '', licencia: m.Licence ?? m.License ?? '?', puntaje: 8 - i * 3 - j * 0.1, tipo: 'modelo', url: m.Download, autor: m.Creator?.Username});
+	}
+	return out;
+}
+
+async function bajarPolypizza(r) {
+	const local = path.join(BIBLIOTECA, 'polypizza', `${String(r.id).replace(/[^A-Za-z0-9_-]/g, '_')}.glb`);
+	await bajar(r.url, local);
+	const cc0 = /cc0|public/i.test(r.licencia);
+	return {archivos: [local], principal: local, credito: cc0 ? `${r.nombre} · Poly Pizza · CC0` : `"${r.nombre}" by ${r.autor} (poly.pizza) ${r.licencia}`};
+}
+
+// ---------------------------------------------------------------- búsqueda y descarga
+/** Orden de fuentes por estilo. */
+const FUENTES = {'3d': ['kenney', 'polypizza', 'polyhaven'], realista: ['polyhaven', 'polypizza', 'kenney'], '2d': ['iconify']};
+
+/**
+ * Busca un término en las bibliotecas.
+ * @returns {Promise<Array<{fuente, id, nombre, coleccion, licencia, tipo}>>} ordenados del mejor al peor
+ */
+export async function buscarRecursos(termino, {estilo = '3d', variante, fuente} = {}) {
+	const {buscar} = traducir(termino);
+	const fuentes = fuente ? [fuente] : FUENTES[estilo] ?? FUENTES['3d'];
+	const todos = [];
+	for (const f of fuentes) {
+		try {
+			const r = f === 'kenney' ? await buscarKenney(buscar) : f === 'polyhaven' ? await buscarPolyhaven(buscar) : f === 'polypizza' ? await buscarPolypizza(buscar) : await buscarIconify(buscar, variante);
+			// el orden de las fuentes pesa: la primera fuente con resultados buenos gana
+			todos.push(...r.map((x) => ({...x, puntaje: x.puntaje - fuentes.indexOf(f) * 6})));
+		} catch (e) {
+			if (fuente) throw e; // con fuente explícita, el error importa; si no, se prueba la siguiente
+		}
+	}
+	const vistos = new Set();
+	return todos
+		.sort((a, b) => b.puntaje - a.puntaje)
+		.filter((r) => (vistos.has(r.fuente + r.id) ? false : vistos.add(r.fuente + r.id)));
+}
+
+/** Descarga un resultado. Devuelve {principal, archivos, base?, credito}. */
+export async function bajarRecurso(r, {color} = {}) {
+	if (r.fuente === 'kenney') return bajarKenney(r);
+	if (r.fuente === 'polyhaven') return bajarPolyhaven(r);
+	if (r.fuente === 'polypizza') return bajarPolypizza(r);
+	return bajarIconify(r, color);
+}
+
+/**
+ * Cambia cada {tipo: 'recurso'} del video por una capa de modelo o imagen ya descargada en public/assets/biblioteca.
+ * Devuelve {video, creditos}.
+ */
+export async function resolverRecursos(video, assetsPublico, log = console.log) {
+	const creditos = new Set();
+	const resolver = async (c) => {
+		const {tipo, buscar, estilo = '3d', variante, fuente, indice: n = 0, color, ...resto} = c;
+		if (!buscar) throw new ErrorMorfeo('Una capa {tipo: "recurso"} necesita `buscar` (por ejemplo, buscar: "tubería")');
+		let res = await buscarRecursos(buscar, {estilo, variante, fuente});
+		// sin resultados: primero se prueba el mismo estilo con otra línea gráfica (2d glass → 2d color → otras
+		// variantes), y luego los otros estilos. Así un 2D no termina siendo un modelo realista si hay otro 2D.
+		if (!res.length && !fuente) {
+			const intentos =
+				estilo === '2d'
+					? [...Object.keys(VARIANTES_2D).filter((v) => v !== (variante ?? 'color') && v !== 'linea').map((v) => ['2d', v]), ['3d'], ['realista']]
+					: [...['3d', 'realista'].filter((e) => e !== estilo).map((e) => [e]), ['2d', variante]];
+			for (const [otro, otraVariante] of intentos) {
+				res = await buscarRecursos(buscar, {estilo: otro, variante: otraVariante});
+				if (res.length) {
+					log(`    "${buscar}" no está en ${estilo}${variante ? ' ' + variante : ''}; uso ${otro}${otraVariante && otro === '2d' ? ' ' + otraVariante : ''}`);
+					break;
+				}
+			}
+		}
+		// nada en ninguna biblioteca: se avisa y la capa se omite (el video se hace igual)
+		if (!res.length) {
+			log(`    ⚠ No encontré "${buscar}" en ninguna biblioteca; omito esa capa. Prueba un sinónimo o escríbelo en inglés:  npx morfeo recursos buscar "${buscar}"`);
+			return null;
+		}
+		const r = res[Math.min(n, res.length - 1)];
+		const d = await bajarRecurso(r, {color});
+		creditos.add(d.credito);
+		// se copia a public/assets/biblioteca/<fuente>/... conservando la carpeta (los glTF de Poly Haven traen texturas aparte)
+		const base = d.base ?? path.dirname(d.principal);
+		for (const a of d.archivos) {
+			const destino = path.join(assetsPublico, 'biblioteca', path.relative(BIBLIOTECA, a));
+			if (!fs.existsSync(destino)) {
+				fs.mkdirSync(path.dirname(destino), {recursive: true});
+				fs.copyFileSync(a, destino);
+			}
+		}
+		const src = path.relative(path.join(assetsPublico), path.join(assetsPublico, 'biblioteca', path.relative(BIBLIOTECA, d.principal))).split(path.sep).join('/');
+		log(`    recurso "${buscar}" → ${r.nombre} (${r.fuente})`);
+		return r.tipo === 'modelo'
+			? // modelos externos: cámara más cerca y menos luz ambiente para que no se vean chicos ni deslavados
+			  {tipo: 'modelo', src, ancho: 620, alto: 620, girar3d: [0, 30, 0], levantar: true, distancia: 4.3, camaraY: 0.9, luzAmbiente: 0.25, reflejos: 0.45, luz: 1.6, ...resto}
+			: {tipo: 'imagen', src, ancho: 460, sombra: true, ...resto};
+		void base;
+	};
+	const recorrer = async (x) => {
+		if (Array.isArray(x)) return (await Promise.all(x.map(recorrer))).filter((v) => v !== null);
+		if (!x || typeof x !== 'object') return x;
+		if (x.tipo === 'recurso') return resolver(x);
+		const out = {};
+		for (const [k, v] of Object.entries(x)) out[k] = await recorrer(v);
+		// un grupo cuya capa repetida no se encontró tampoco se dibuja
+		if (x.tipo === 'grupo' && x.capa && out.capa === null) return null;
+		return out;
+	};
+	const scenes = await recorrer(video.scenes);
+	const hud = await recorrer(video.hud ?? []);
+	return {video: {...video, scenes, hud}, creditos: [...creditos]};
+}

package/lib/render.mjs

@@ -10,6 +10,7 @@ import {ENTRADA_REMOTION, FUENTES, MODELOS, PY_DIR, modelosListos, pythonVenv, v
 import {asegurarNavegador} from './navegador.mjs';
 import {generarImagenes} from './imagenes.mjs';
 import {ponerPoses, prepararPersonajes} from './personajes.mjs';
+import {resolverRecursos} from './recursos.mjs';
 import {sintetizarVoces} from './voces.mjs';
 import {transcribir, whisperListo} from './whisper.mjs';
 
@@ -157,12 +158,16 @@ export async function preparar({proyecto = process.cwd(), ids, log = console.log
 	const datos = {};
 	const poses = await prepararPersonajes(p, path.join(publico, 'assets'), log);
 	const trabajos = path.join(p.trabajo, 'trabajos');
+	const creditos = {};
 	fs.mkdirSync(trabajos, {recursive: true});
 	for (const [i, id] of (ids ?? todos).entries()) {
 		const original = p.videos[id];
 		if (!original) throw new ErrorMorfeo(`No existe el video "${id}". Usa: npx morfeo lista`);
 		log(`[${i + 1}/${(ids ?? todos).length}] ${id}: audio...`);
-		const conImagenes = await generarImagenes(ponerPoses(original, poses), p.imagenes, path.join(p.trabajo, 'cache', 'imagenes'), path.join(publico, 'assets'), log);
+		const conRecursos = await resolverRecursos(ponerPoses(original, poses), path.join(publico, 'assets'), log);
+		creditos[id] = conRecursos.creditos;
+		guardarCreditos(p, id, conRecursos.creditos);
+		const conImagenes = await generarImagenes(conRecursos.video, p.imagenes, path.join(p.trabajo, 'cache', 'imagenes'), path.join(publico, 'assets'), log);
 		const video = await sintetizarVoces(id, conImagenes, path.join(p.trabajo, 'cache', 'voces'), log);
 		const job = path.join(trabajos, `${id}.json`);
 		const base = {id, video, indice: todos.indexOf(id), publico, modelos: MODELOS};
@@ -176,7 +181,7 @@ export async function preparar({proyecto = process.cwd(), ids, log = console.log
 		python(job);
 		datos[id] = datosDe(publico, id);
 	}
-	return {p, publico, marca, extras, datos};
+	return {p, publico, marca, extras, datos, creditos};
 }
 
 /**
@@ -281,12 +286,33 @@ export async function render({proyecto = process.cwd(), ids, todos = false, log
 }
 
 /** <salida>/resumen.json: título, archivo y duración de cada video hecho (útil para publicar). */
+/** Créditos de los recursos de cada video (.morfeo/creditos/<id>.json), para el resumen y el archivo de créditos. */
+function guardarCreditos(p, id, lista) {
+	const dir = path.join(p.trabajo, 'creditos');
+	fs.mkdirSync(dir, {recursive: true});
+	fs.writeFileSync(path.join(dir, `${id}.json`), JSON.stringify(lista ?? []));
+}
+const creditosDe = (p, id) => {
+	try {
+		return JSON.parse(fs.readFileSync(path.join(p.trabajo, 'creditos', `${id}.json`), 'utf8'));
+	} catch {
+		return [];
+	}
+};
+
 function escribirResumen(p) {
 	const publico = path.join(p.trabajo, 'public');
 	const filas = Object.entries(p.videos)
 		.filter(([id]) => fs.existsSync(salidaDe(p, id)))
-		.map(([id, v]) => ({id, titulo: v.title ?? id, archivo: `${id}.mp4`, duracion: datosDe(publico, id)?.duracion ?? null, ...(v.meta ? {meta: v.meta} : {})}));
+		.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} : {})};
+		});
 	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);
+	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'));
 }
 
 /** Abre Remotion Studio con los videos ya preparados (para verlos y ajustar en vivo). */

package/package.json

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

package/plantilla/videos.mjs

@@ -10,6 +10,7 @@ const C = '#50DCFF'; // cian
 
 export default defineVideos({
 	cielo: {
+		estilo: 'datos-curiosos', // sus escenas (title, text, icon...) son del estilo clásico
 		title: '¿Por qué el cielo es azul? 🌤️ | Dato curioso',
 		voice: 'narrador', // alias de morfeo.config.mjs (o directo: 'em_alex')
 		music: 'lofi', // lofi, lofi2, chillpop, synth, house, ballad, trap, un archivo './musica/x.mp3' o false

package/remotion/motor/Video.tsx

@@ -30,7 +30,7 @@ const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string}>
 	return (
 		<AbsoluteFill>
 			<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
-				<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} />
+				<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} ctx={ctx} />
 			</AbsoluteFill>
 			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + temblor}px, ${-cy}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
 				<Capas capas={capasDe(e.tipo, p, temaEsc, marca)} ctx={ctx} />

package/remotion/motor/capas.tsx

@@ -7,6 +7,7 @@ import {H, W, backOut, clamp, easeIO, easeOut, lerp} from '../estilo';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
+import {Escenario} from './escenarios';
 import {componente, nombresComponentes} from './registro';
 import {Barra, Chat, Estado, Globo, ImagenCambia, Medidor, Noticia, Onda, Seguir, Votacion} from './widgets';
 
@@ -219,6 +220,15 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			);
 		case 'grupo':
 			return <Grupo c={c} ctx={ctx} />;
+		case 'escenario': {
+			const {tipo, nombre, x, y, en, hasta, entrada, salida, z, ...props} = c;
+			const t0 = cuando(en, ctx, 0);
+			return (
+				<div style={{width: W, height: H}}>
+					<Escenario nombre={nombre} {...props} t={ctx.t - t0} dur={ctx.dur} cuando={(e: unknown) => cuando(e, ctx) - t0} />
+				</div>
+			);
+		}
 		case 'escena3d':
 			return <Escena3D c={c} ctx={ctx} />;
 		case 'personaje':

package/remotion/motor/escenarios/Bosque.tsx

@@ -0,0 +1,157 @@
+// Bosque de noche ilustrado, 1080×1920, por capas: cielo, estrellas, luna con halo, montañas,
+// tres filas de pinos, colina con pasto y luciérnagas. Con `paneo` las capas se mueven a distinta
+// velocidad (paralaje). La luna puede tener cara y cantar: luna: {cara: true, cantar: 'palabra', bajar: 'palabra'}.
+import React from 'react';
+
+type Props = {
+	t: number;
+	dur: number;
+	cuando: (en: unknown) => number;
+	paneo?: number;
+	luna?: {x?: number; y?: number; cara?: boolean; cantar?: string; bajar?: string; a?: [number, number]};
+	luciernagas?: boolean;
+};
+
+const W = 1080;
+const H = 1920;
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp(x);
+	return c * c * (3 - 2 * c);
+};
+const azar = (n: number) => {
+	const x = Math.sin(n * 127.1) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+/** Fila de pinos como un solo trazado (más liviano que muchos elementos). */
+function pinos(base: number, alto: number, ancho: number, n: number, semilla: number) {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const cx = (i / (n - 1)) * (W + 400) - 200 + (azar(semilla + i) - 0.5) * ancho * 0.6;
+		const h = alto * (0.75 + azar(semilla + i * 3) * 0.5);
+		const w = ancho * (0.8 + azar(semilla + i * 7) * 0.4);
+		// tres pisos de ramas
+		for (let p = 0; p < 3; p++) {
+			const top = base - h + p * h * 0.26;
+			const bot = base - h * 0.32 + p * h * 0.22;
+			const ww = w * (0.55 + p * 0.25);
+			d += `M${cx} ${top} L${cx + ww / 2} ${bot} L${cx - ww / 2} ${bot} Z `;
+		}
+		d += `M${cx - w * 0.06} ${base - h * 0.12} h${w * 0.12} v${h * 0.14} h${-w * 0.12} Z `;
+	}
+	return d;
+}
+
+export function Bosque({t, dur, cuando, paneo = 0, luna = {}, luciernagas = true}: Props) {
+	const k = suave(t / Math.max(1, dur));
+	const p = (f: number) => -paneo * f * k; // paralaje: lo lejano se mueve menos
+	// luna: posición (puede bajar) y canto
+	const lx0 = luna.x ?? 800;
+	const ly0 = luna.y ?? 470;
+	const kb = luna.bajar ? suave((t - cuando(luna.bajar)) / 1.8) : 0;
+	const lx = lx0 + ((luna.a?.[0] ?? lx0) - lx0) * kb;
+	const ly = ly0 + ((luna.a?.[1] ?? ly0) - ly0) * kb;
+	const canta = luna.cantar ? t >= cuando(luna.cantar) : false;
+	const boca = canta ? 6 + Math.abs(Math.sin(t * 9)) * 14 : 0;
+
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<linearGradient id="cielo" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#0B1033" />
+					<stop offset="0.5" stopColor="#252063" />
+					<stop offset="0.78" stopColor="#5B3C7E" />
+					<stop offset="1" stopColor="#8E5A86" />
+				</linearGradient>
+				<radialGradient id="halo">
+					<stop offset="0" stopColor="rgba(255,240,200,0.55)" />
+					<stop offset="1" stopColor="rgba(255,240,200,0)" />
+				</radialGradient>
+				<linearGradient id="colina" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#1F3B3A" />
+					<stop offset="1" stopColor="#0E1E22" />
+				</linearGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#cielo)" />
+			{/* estrellas que titilan */}
+			{Array.from({length: 70}, (_, i) => {
+				const x = azar(i) * W;
+				const y = azar(i + 100) * 1100;
+				const r = 1.2 + azar(i + 200) * 2.4;
+				const o = 0.35 + 0.65 * Math.abs(Math.sin(t * (1 + azar(i + 300) * 2) + i));
+				return <circle key={i} cx={x + p(0.05)} cy={y} r={r} fill="#FFFFFF" opacity={o} />;
+			})}
+			{/* luna */}
+			<g transform={`translate(${lx + p(0.1)} ${ly})`}>
+				<circle r={260} fill="url(#halo)" />
+				<circle r={110} fill="#FFF4D6" />
+				<circle cx={-34} cy={-26} r={16} fill="rgba(210,190,150,0.45)" />
+				<circle cx={38} cy={30} r={22} fill="rgba(210,190,150,0.4)" />
+				<circle cx={18} cy={-48} r={9} fill="rgba(210,190,150,0.4)" />
+				{luna.cara ? (
+					<g>
+						{canta ? (
+							<>
+								<path d="M-42 -8 Q-30 -18 -18 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+								<path d="M18 -8 Q30 -18 42 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+							</>
+						) : (
+							<>
+								<circle cx={-30} cy={-10} r={8} fill="#6B5236" />
+								<circle cx={30} cy={-10} r={8} fill="#6B5236" />
+							</>
+						)}
+						<ellipse cx={0} cy={34} rx={canta ? 14 : 16} ry={canta ? boca : 4} fill={canta ? '#7A3B3B' : '#6B5236'} />
+						<circle cx={-58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+						<circle cx={58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+					</g>
+				) : null}
+			</g>
+			{/* notas musicales cuando canta */}
+			{canta
+				? Array.from({length: 6}, (_, i) => {
+						const fase = ((t - cuando(luna.cantar) + i * 0.45) % 2.7) / 2.7;
+						const x = lx - 160 - fase * 260 + Math.sin(fase * 9 + i) * 40;
+						const y = ly + 60 + fase * 420;
+						return (
+							<text key={i} x={x} y={y} fontSize={70} fill="#FFE9A8" opacity={Math.sin(fase * Math.PI)} fontFamily="sans-serif">
+								{i % 2 ? '♪' : '♫'}
+							</text>
+						);
+					})
+				: null}
+			{/* montañas lejanas */}
+			<path transform={`translate(${p(0.15)} 0)`} d="M-200 1250 L80 980 L300 1150 L560 920 L820 1120 L1040 960 L1300 1180 L1300 1500 L-200 1500 Z" fill="#2E2A5A" opacity={0.9} />
+			{/* pinos lejanos, medios y cercanos */}
+			<path transform={`translate(${p(0.3)} 0)`} d={pinos(1330, 300, 150, 12, 1)} fill="#263A55" />
+			<path transform={`translate(${p(0.55)} 0)`} d={pinos(1420, 380, 200, 9, 20)} fill="#1A2E3F" />
+			{/* colina */}
+			<path transform={`translate(${p(0.8)} 0)`} d="M-300 1500 Q300 1380 700 1460 Q1050 1520 1400 1440 L1400 1920 L-300 1920 Z" fill="url(#colina)" />
+			{/* pasto */}
+			<g transform={`translate(${p(0.8)} 0)`}>
+				{Array.from({length: 60}, (_, i) => {
+					const x = -200 + i * 26;
+					const y = 1470 + Math.sin(i * 0.7) * 22;
+					const viento = Math.sin(t * 2 + i * 0.4) * 5;
+					return <path key={i} d={`M${x} ${y + 30} Q${x + viento} ${y + 10} ${x + 4 + viento * 1.6} ${y - 6}`} stroke="#2E5A4E" strokeWidth={5} fill="none" strokeLinecap="round" />;
+				})}
+			</g>
+			<path transform={`translate(${p(1)} 0)`} d={pinos(1950, 620, 320, 5, 40)} fill="#0C1A24" />
+			{/* luciérnagas */}
+			{luciernagas
+				? Array.from({length: 14}, (_, i) => {
+						const x = azar(i + 500) * W + Math.sin(t * 0.8 + i) * 40;
+						const y = 1250 + azar(i + 600) * 450 + Math.cos(t * 0.6 + i) * 30;
+						const o = 0.3 + 0.7 * Math.abs(Math.sin(t * 1.7 + i * 2));
+						return (
+							<g key={i} opacity={o}>
+								<circle cx={x} cy={y} r={14} fill="rgba(255,236,120,0.25)" />
+								<circle cx={x} cy={y} r={4} fill="#FFF3A0" />
+							</g>
+						);
+					})
+				: null}
+		</svg>
+	);
+}