morfeo 0.0.0-stage → 0.1.1

package/remotion/motor/capas.tsx

@@ -0,0 +1,622 @@
+// Motor de capas: cada escena es una lista de capas (imagen, texto, contador, chip, tarjeta, teléfono,
+// forma, grupo...) con su posición y sus animaciones. Las coordenadas son del lienzo 1080×1920.
+import React from 'react';
+import {Img, OffthreadVideo} from 'remotion';
+import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
+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 {componente, nombresComponentes} from './registro';
+import {Barra, Chat, Estado, Globo, ImagenCambia, Medidor, Noticia, Onda, Seguir, Votacion} from './widgets';
+
+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;
+	const t0 = cuando(c.en, ctx, 0);
+	const dur = c.duracionEntrada ?? ENTRADA_DUR;
+	const p = dur > 0 ? clamp((t - t0) / dur) : t >= t0 ? 1 : 0;
+	let x = c.x ?? (relativo ? 0 : W / 2);
+	let y = c.y ?? (relativo ? 0 : H / 2);
+	let s = c.escala ?? 1;
+	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 ?? entradaPorDefecto(c)) {
+		case 'aparecer':
+			o *= easeOut(p);
+			break;
+		case 'escala':
+			s *= easeOut(p);
+			o *= clamp(p * 3);
+			break;
+		case 'rebote':
+			s *= backOut(p);
+			break;
+		case 'deslizar-izq':
+			x -= (1 - easeOut(p)) * W;
+			break;
+		case 'deslizar-der':
+			x += (1 - easeOut(p)) * W;
+			break;
+		case 'deslizar-arriba':
+			y += (1 - easeOut(p)) * H * 0.6;
+			break;
+		case 'deslizar-abajo':
+			y -= (1 - easeOut(p)) * H * 0.6;
+			break;
+		case 'caer':
+			y -= (1 - backOut(p, 1.2)) * 700;
+			o *= clamp(p * 4);
+			break;
+		case 'girar':
+			r += (1 - easeOut(p)) * -200;
+			s *= easeOut(p);
+			break;
+		case 'subir':
+			y += (1 - easeOut(p)) * 80;
+			o *= easeOut(p);
+			break;
+	}
+	// movimiento: mover: {a: [x, y], en?, duracion?, curva?: 'suave' | 'lineal'}
+	const mv = c.mover;
+	if (mv?.a) {
+		const m0 = cuando(mv.en, ctx, t0);
+		const md = mv.duracion ?? Math.max(0.3, ctx.dur - m0);
+		const k = clamp((t - m0) / md);
+		const f = mv.curva === 'lineal' ? k : easeIO(k);
+		x = lerp(x, mv.a[0] ?? x, f);
+		y = lerp(y, mv.a[1] ?? y, f);
+	}
+	// escalar: {a: 1.5, en?, duracion?}
+	const es = c.escalar;
+	if (es?.a != null) {
+		const e0 = cuando(es.en, ctx, t0);
+		const k = easeIO(clamp((t - e0) / (es.duracion ?? 0.6)));
+		s *= lerp(1, es.a / (c.escala ?? 1), k);
+	}
+	if (c.girar) r += c.girar * (t - t0); // grados por segundo
+	if (c.flotar) {
+		const a = c.flotar === true ? 14 : c.flotar;
+		const fase = azar(ctx.semilla + (c.id ?? c.src ?? c.texto ?? '')) * 6.28;
+		y += Math.sin(t * 1.8 + fase) * a;
+		r += Math.sin(t * 1.3 + fase) * (a / 10);
+	}
+	if (c.latir) s *= 1 + 0.04 * Math.sin(t * 7);
+	// salida: hasta: palabra o segundos; sale con la animación `salida` (aparecer = desvanecer)
+	if (c.hasta != null) {
+		const h = cuando(c.hasta, ctx, ctx.dur);
+		const q = clamp((t - h) / 0.35);
+		if (q >= 1) return null;
+		if (q > 0) {
+			const sal = c.salida ?? 'aparecer';
+			if (sal === 'escala') s *= 1 - easeOut(q);
+			else if (sal === 'deslizar-izq') x -= easeOut(q) * W;
+			else if (sal === 'deslizar-der') x += easeOut(q) * W;
+			else if (sal === 'subir') y -= easeOut(q) * 300;
+			o *= 1 - q;
+		}
+	}
+	if (s <= 0.001 || o <= 0.001) return null;
+	return {x, y, s, r, o};
+}
+
+const sombra = (c: Capa) => (c.sombra === false ? undefined : c.sombra === true || c.sombra == null ? 'drop-shadow(0 18px 24px rgba(0,0,0,0.35))' : c.sombra);
+
+/**
+ * Cambios en el tiempo (sobre todo para el HUD): cambios: [{en: 'palabra' | segundos | {escena: 3}, valor: 15}, ...].
+ * Los números (valor, a) se animan desde el valor anterior; lo demás cambia de golpe.
+ */
+function aplicarCambios(c: Capa, ctx: CtxEscena): Capa {
+	if (!Array.isArray(c.cambios) || !c.cambios.length) return c;
+	const momento = (en: any) => (en && typeof en === 'object' && en.escena != null ? ctx.inicios?.[en.escena - 1] ?? 0 : cuando(en, ctx, 0));
+	const lista = c.cambios.map((k: any) => ({...k, __t: momento(k.en)})).sort((a: any, b: any) => a.__t - b.__t);
+	let actual: Capa = {...c};
+	let previo: Capa = c;
+	for (const k of lista) {
+		if (ctx.t < k.__t) break;
+		previo = actual;
+		const {en, __t, ...resto} = k;
+		actual = {...actual, ...resto, __cambio: __t - cuando(c.en, ctx, 0)};
+		if (typeof resto.valor === 'number') actual.__valorPrevio = previo.valor ?? 0;
+		if (c.tipo === 'contador' && typeof resto.a === 'number') actual = {...actual, de: previo.a ?? previo.de ?? 0, en: __t, duracion: resto.duracion ?? 0.8};
+	}
+	return actual;
+}
+
+/** Una capa con su animación aplicada. */
+export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i?: number}> = ({c: c0, ctx, relativo = false, i = 0}) => {
+	const c = aplicarCambios(c0, ctx);
+	const a = animar(c, ctx, relativo);
+	if (!a) return null;
+	const ancla = c.ancla === 'izquierda' ? '0%' : c.ancla === 'derecha' ? '-100%' : '-50%';
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				left: a.x,
+				top: a.y,
+				transform: `translate(${ancla}, -50%) scale(${a.s}) rotate(${a.r}deg)${c.voltear ? ' scaleX(-1)' : ''}`,
+				transformOrigin: c.ancla === 'izquierda' ? 'left center' : c.ancla === 'derecha' ? 'right center' : 'center',
+				opacity: a.o,
+				filter: [c.tipo === 'imagen' || c.tipo === 'emoji' ? sombra(c) : undefined, c.desenfoque ? `blur(${c.desenfoque}px)` : undefined].filter(Boolean).join(' ') || undefined,
+				zIndex: c.z ?? i,
+			}}
+		>
+			<Contenido c={c} ctx={ctx} />
+		</div>
+	);
+};
+
+const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const fuente = (f?: string) => (f === 'mono' ? T.fuentes.mono : f === 'texto' ? T.fuentes.texto : f === 'titulo' || !f ? T.fuentes.titulo : f);
+	switch (c.tipo) {
+		case 'imagen':
+			if (c.cambiarA) return <ImagenCambia c={c} ctx={ctx} />;
+			return <Img src={recurso(c.src)} style={{width: c.ancho ?? 500, height: c.alto ?? 'auto', display: 'block', borderRadius: c.redondo ? '50%' : c.radio ?? 0, objectFit: 'cover'}} />;
+		case 'video':
+			return <OffthreadVideo src={recurso(c.src)} muted style={{width: c.ancho ?? 600, height: c.alto ?? 'auto', display: 'block', borderRadius: c.radio ?? 0}} />;
+		case 'texto':
+			return <TextoCapa c={c} ctx={ctx} fuente={fuente(c.fuente)} />;
+		case 'contador':
+			return <Contador c={c} ctx={ctx} />;
+		case 'chip':
+			return <Chip c={c} ctx={ctx} />;
+		case 'etiqueta':
+			return (
+				<div style={{fontFamily: T.fuentes.mono, fontSize: c.tam ?? 34, color: c.color ?? T.colores.suave, whiteSpace: 'pre', letterSpacing: 0.5}}>
+					{c.texto}
+				</div>
+			);
+		case 'numero': {
+			const tam = c.tam ?? 96;
+			return (
+				<div style={{width: tam, height: tam, background: c.fondo ?? T.colores.texto, color: c.color ?? (T.colores.texto === '#FFFFFF' ? '#000' : '#fff'), fontFamily: T.fuentes.titulo, fontSize: tam * 0.62, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: c.radio ?? 8}}>
+					{c.texto ?? c.valor}
+				</div>
+			);
+		}
+		case 'tarjeta':
+			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': {
+			const u = tamIcono(c.nombre, c.tam ?? 300);
+			const lado = (c.tam ?? 300) * 1.2;
+			return (
+				<div style={{position: 'relative', width: lado, height: lado}}>
+					<Icono nombre={c.nombre} cx={lado / 2} cy={lado / 2} u={u} color={c.color} />
+				</div>
+			);
+		}
+		case 'emoji':
+			return <div style={{fontSize: c.tam ?? 220, lineHeight: 1}}>{c.texto}</div>;
+		case 'marca': {
+			const tam = c.tam ?? 200;
+			return (
+				<div style={{position: 'relative', width: tam + 20, height: tam + 20}}>
+					<Avatar x={0} y={0} size={tam} aro={10} />
+				</div>
+			);
+		}
+		case 'particulas':
+			return (
+				<div style={{position: 'relative', width: W, height: H}}>
+					<Particulas p={{tipo: c.particulas ?? 'polvo', cantidad: c.cantidad, color: c.color}} t={ctx.t} semilla={ctx.semilla} />
+				</div>
+			);
+		case 'grupo':
+			return <Grupo c={c} ctx={ctx} />;
+		case 'escena3d':
+			return <Escena3D c={c} ctx={ctx} />;
+		case 'personaje':
+			return <Personaje c={c} ctx={ctx} />;
+		case 'barra':
+			return <Barra c={c} ctx={ctx} />;
+		case 'medidor':
+			return <Medidor c={c} ctx={ctx} />;
+		case 'votacion':
+			return <Votacion c={c} ctx={ctx} />;
+		case 'estado':
+			return <Estado c={c} ctx={ctx} />;
+		case 'noticia':
+			return <Noticia c={c} ctx={ctx} />;
+		case 'chat':
+			return <Chat c={c} ctx={ctx} />;
+		case 'onda':
+			return <Onda c={c} ctx={ctx} />;
+		case 'globo':
+			return <Globo c={c} ctx={ctx} />;
+		case 'seguir':
+			return <Seguir c={c} ctx={ctx} />;
+		case 'modelo':
+			return <Modelo3D c={c} ctx={ctx} />;
+		case 'componente': {
+			const Comp = componente(c.nombre);
+			if (!Comp) throw new Error(`No hay un componente llamado "${c.nombre}". Regístralo en morfeo.config.mjs → componentes. Disponibles: ${nombresComponentes().join(', ') || 'ninguno'}`);
+			const t0 = cuando(c.en, ctx, 0);
+			return <Comp {...(c.props ?? {})} t={ctx.t - t0} dur={ctx.dur} palabras={ctx.palabras} tema={ctx.tema} cuando={(en: unknown) => cuando(en, ctx) - t0} />;
+		}
+		default:
+			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
+	}
+};
+
+const TextoCapa: React.FC<{c: Capa; ctx: CtxEscena; fuente: string}> = ({c, ctx, fuente}) => {
+	const T = ctx.tema;
+	const may = c.mayusculas ?? (fuente === T.fuentes.titulo && T.tituloMayusculas);
+	let texto: string = String(c.texto ?? '');
+	if (may) texto = texto.toUpperCase();
+	// escribir: aparece letra por letra
+	if (c.escribir) {
+		const t0 = cuando(c.en, ctx, 0);
+		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' : '')).replace(/\*\*/g, '');
+	}
+	const color = c.color ?? T.colores.texto;
+	const acento = c.acento ?? T.colores.acento;
+	const contorno = c.contorno ? `${c.contorno}px ${c.colorContorno ?? '#000'}` : undefined;
+	return (
+		<div
+			style={{
+				fontFamily: fuente,
+				fontSize: c.tam ?? 96,
+				fontWeight: c.peso ?? (fuente === T.fuentes.titulo ? 800 : 600),
+				lineHeight: c.interlineado ?? 1.05,
+				color,
+				textAlign: c.alinear ?? 'center',
+				maxWidth: c.maxAncho ?? 940,
+				whiteSpace: 'pre-wrap',
+				WebkitTextStroke: contorno,
+				paintOrder: 'stroke fill',
+				textShadow: c.sombra === false ? undefined : c.sombra ?? (color === '#FFFFFF' || color === '#fff' ? '0 6px 18px rgba(0,0,0,0.45)' : undefined),
+				background: c.fondo,
+				padding: c.fondo ? c.relleno ?? '10px 26px' : undefined,
+				borderRadius: c.fondo || c.borde ? c.radio ?? 14 : undefined,
+				border: c.borde ? `${c.grosor ?? 5}px solid ${c.borde}` : undefined,
+				width: c.ancho ?? (c.maxAncho === 'auto' ? undefined : 'max-content'),
+				boxSizing: 'border-box',
+				letterSpacing: c.espaciado,
+			}}
+		>
+			{partesResaltadas(texto).map(([s, r], i) =>
+				r ? (
+					<span key={i} style={{color: acento, ...(c.subrayado ? {textDecoration: 'underline', textDecorationThickness: 8, textUnderlineOffset: 10} : {})}}>
+						{s}
+					</span>
+				) : (
+					<React.Fragment key={i}>{s}</React.Fragment>
+				),
+			)}
+		</div>
+	);
+};
+
+const Contador: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const t0 = cuando(c.en, ctx, 0);
+	const dur = c.duracion ?? Math.max(0.6, ctx.habla[1] - t0);
+	const k = clamp((ctx.t - t0) / dur);
+	const de = c.de ?? 0;
+	const a = c.a ?? c.valor ?? 0;
+	let v: number;
+	if (c.curva === 'exponencial' && de > 0 && a > 0) v = de * Math.pow(a / de, k);
+	else v = lerp(de, a, c.curva === 'lineal' ? k : easeOut(k));
+	const txt = `${c.prefijo ?? ''}${formatoNumero(v, c.decimales ?? 0, c.miles ?? '.', c.decimal ?? ',')}`;
+	const sufijo = c.sufijo ?? '';
+	const formato = c.formato ?? 'grande';
+	if (formato === 'lcd')
+		return (
+			<div style={{background: c.fondo ?? '#0B0B0B', border: `4px solid ${T.colores.borde}`, borderRadius: 14, padding: '10px 28px', fontFamily: T.fuentes.mono, fontWeight: 800, fontSize: c.tam ?? 78, color: c.color ?? T.colores.acento, textShadow: `0 0 18px ${c.color ?? T.colores.acento}`, whiteSpace: 'pre'}}>
+				{txt}
+				{sufijo}
+			</div>
+		);
+	if (formato === 'chip') return <Chip c={{...c, texto: txt, unidad: sufijo.trim()}} ctx={ctx} />;
+	return (
+		<div style={{fontFamily: T.fuentes.titulo, fontWeight: 900, fontSize: c.tam ?? 200, color: c.color ?? T.colores.acento, lineHeight: 1, whiteSpace: 'pre', textShadow: '0 10px 30px rgba(0,0,0,0.35)'}}>
+			{txt}
+			<span style={{fontSize: (c.tam ?? 200) * 0.45}}>{sufijo}</span>
+		</div>
+	);
+};
+
+const Chip: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const tam = c.tam ?? 64;
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'baseline',
+				gap: 10,
+				background: c.fondo ?? T.colores.tarjeta,
+				border: `3px solid ${c.borde ?? 'rgba(255,255,255,0.12)'}`,
+				borderRadius: 16,
+				padding: `${tam * 0.18}px ${tam * 0.4}px`,
+				fontFamily: T.fuentes.texto,
+				fontWeight: 800,
+				fontSize: tam,
+				color: c.color ?? T.colores.acento,
+				whiteSpace: 'pre',
+				boxShadow: '0 12px 30px rgba(0,0,0,0.35)',
+			}}
+		>
+			{c.texto}
+			{c.unidad ? <span style={{fontSize: tam * 0.5, color: T.colores.suave, fontWeight: 600}}>{c.unidad}</span> : null}
+		</div>
+	);
+};
+
+const Check: React.FC<{hecho: number; color: string; tam: number}> = ({hecho, color, tam}) => (
+	<div style={{width: tam, height: tam, borderRadius: tam * 0.25, border: `4px solid ${color}`, background: hecho > 0 ? color : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: tam * 0.7, fontWeight: 900, transform: `scale(${hecho > 0 ? backOut(hecho) : 1})`}}>
+		{hecho > 0 ? '✓' : ''}
+	</div>
+);
+
+const Tarjeta: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const ancho = c.ancho ?? 680;
+	const items: any[] = c.items ?? [];
+	const t0 = cuando(c.en, ctx, 0);
+	return (
+		<div style={{width: ancho, background: c.fondo ?? T.colores.tarjeta, color: T.colores.tarjetaTexto, borderRadius: 22, padding: '34px 40px', boxShadow: '0 22px 50px rgba(0,0,0,0.25)', border: c.borde ? `4px solid ${c.borde}` : undefined, fontFamily: T.fuentes.texto}}>
+			{c.cabecera ? <div style={{fontFamily: T.fuentes.mono, fontSize: 26, color: T.colores.suave, marginBottom: 10}}>{c.cabecera}</div> : null}
+			{c.titulo ? <div style={{fontSize: c.tamTitulo ?? 52, fontWeight: 800, marginBottom: items.length ? 22 : 0, lineHeight: 1.1}}>{partesResaltadas(c.titulo).map(([s, r], i) => (r ? <span key={i} style={{color: T.colores.acento}}>{s}</span> : s))}</div> : null}
+			{c.texto ? <div style={{fontSize: 38, lineHeight: 1.3, color: T.colores.tarjetaTexto}}>{c.texto}</div> : null}
+			{items.map((it, i) => {
+				const item = typeof it === 'string' ? {texto: it} : it;
+				// cada renglón aparece en su palabra (o escalonado) y se palomea en `check`
+				const ti = cuando(item.en, ctx, t0 + 0.25 + i * 0.18);
+				const vis = clamp((ctx.t - ti) / 0.3);
+				const tc = item.check === true ? ti + 0.3 : item.check != null && item.check !== false ? cuando(item.check, ctx, ti) : null;
+				const hecho = tc == null ? 0 : clamp((ctx.t - tc) / 0.3);
+				if (vis <= 0) return null;
+				return (
+					<div key={i} style={{display: 'flex', alignItems: 'center', gap: 20, fontSize: c.tamItems ?? 42, fontWeight: 700, padding: '10px 0', opacity: vis, transform: `translateX(${(1 - easeOut(vis)) * 40}px)`}}>
+						{c.checks !== false ? <Check hecho={hecho} color={item.color ?? T.colores.acento} tam={(c.tamItems ?? 42) * 1.05} /> : null}
+						<span>{item.texto}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+const Telefono: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 470;
+	const alto = ancho * 2.05;
+	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 ?? `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'}} />
+					) : (
+						<Img src={recurso(c.src)} style={{width: '100%', height: '100%', objectFit: 'cover'}} />
+					)
+				) : null}
+				{/* las capas de la pantalla usan coordenadas relativas a su centro */}
+				<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 style={{position: 'absolute', top: borde, left: '50%', transform: 'translateX(-50%)', width: ancho * 0.28, height: ancho * 0.065, background: '#000', borderRadius: 99}} />
+			</div>
+		</div>
+	);
+};
+
+/**
+ * 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;
+	const w = c.ancho ?? 200;
+	const h = c.alto ?? (c.forma === 'linea' || c.forma === 'flecha' ? 10 : w);
+	if (c.forma === 'flecha') {
+		// largo animado: crece desde la izquierda al entrar
+		const t0 = cuando(c.en, ctx, 0);
+		const k = easeOut(clamp((ctx.t - t0) / 0.45));
+		return (
+			<svg width={w} height={60} style={{overflow: 'visible'}}>
+				<line x1={0} y1={30} x2={w * k - 20} y2={30} stroke={color} strokeWidth={c.grosor ?? 12} strokeLinecap="round" />
+				{k > 0.6 ? <polygon points={`${w * k},30 ${w * k - 46},6 ${w * k - 46},54`} fill={color} /> : null}
+			</svg>
+		);
+	}
+	return (
+		<div
+			style={{
+				width: w,
+				height: h,
+				background: c.relleno === false ? 'transparent' : color,
+				border: c.borde ? `${c.grosor ?? 6}px ${c.punteado ? 'dashed' : 'solid'} ${c.borde}` : undefined,
+				borderRadius: c.forma === 'circulo' ? '50%' : c.radio ?? (c.forma === 'linea' ? h / 2 : 0),
+				opacity: c.transparencia ?? 1,
+				boxShadow: c.brillo ? `0 0 ${c.brillo}px ${color}` : undefined,
+			}}
+		/>
+	);
+};
+
+/**
+ * Grupo: varias capas que se mueven juntas (sus x, y son relativas al grupo), o una capa repetida:
+ *   {tipo: 'grupo', repetir: 8, disposicion: 'circulo', radio: 320, capa: {tipo: 'imagen', src: 'ballena.png'}}
+ * disposiciones: circulo, fila, columna, cuadricula, pila, aleatorio. `retraso`: segundos entre cada copia.
+ */
+const Grupo: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	let hijos: Capa[] = c.capas ?? [];
+	if (c.repetir && c.capa) {
+		const n = c.repetir;
+		const esp = c.espacio ?? 140;
+		const t0 = cuando(c.en, ctx, 0);
+		hijos = Array.from({length: n}, (_, i) => {
+			let x = 0;
+			let y = 0;
+			let rot = 0;
+			switch (c.disposicion ?? 'fila') {
+				case 'circulo': {
+					const ang = (i / n) * Math.PI * 2 + ((c.giroInicial ?? 0) * Math.PI) / 180;
+					x = Math.cos(ang) * (c.radio ?? 300);
+					y = Math.sin(ang) * (c.radio ?? 300);
+					if (c.orientar) rot = (ang * 180) / Math.PI + (c.orientar === true ? 0 : c.orientar);
+					break;
+				}
+				case 'fila':
+					x = (i - (n - 1) / 2) * esp;
+					break;
+				case 'columna':
+					y = (i - (n - 1) / 2) * esp;
+					break;
+				case 'cuadricula': {
+					const cols = c.columnas ?? Math.ceil(Math.sqrt(n));
+					const filas = Math.ceil(n / cols);
+					x = ((i % cols) - (cols - 1) / 2) * esp;
+					y = (Math.floor(i / cols) - (filas - 1) / 2) * (c.espacioV ?? esp);
+					break;
+				}
+				case 'pila':
+					y = -i * (c.espacio ?? 14);
+					x = (azar(`${ctx.semilla}p${i}`) - 0.5) * (c.desorden ?? 6);
+					break;
+				case 'aleatorio': {
+					const [aw, ah] = c.area ?? [900, 1400];
+					x = (azar(`${ctx.semilla}x${i}`) - 0.5) * aw;
+					y = (azar(`${ctx.semilla}y${i}`) - 0.5) * ah;
+					rot = c.girarAzar ? (azar(`${ctx.semilla}r${i}`) - 0.5) * c.girarAzar : 0;
+					break;
+				}
+			}
+			return {...c.capa, id: `${c.capa.id ?? 'r'}${i}`, x: x + (c.capa.x ?? 0), y: y + (c.capa.y ?? 0), rotar: (c.capa.rotar ?? 0) + rot, en: c.capa.en ?? t0 + i * (c.retraso ?? 0.06)};
+		});
+	}
+	return (
+		<div style={{position: 'relative', width: 0, height: 0}}>
+			{hijos.map((h, i) => (
+				<CapaVista key={i} c={h} ctx={ctx} relativo i={i} />
+			))}
+		</div>
+	);
+};
+
+/**
+ * Personaje con poses: pose inicial y cambios en palabras ({en: 'enamorado', pose: 'feliz'}).
+ * Al cambiar de pose rebota un poco; con `hablar` se mueve mientras suena la voz.
+ */
+const Personaje: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const poses: Record<string, string> = c.__poses ?? {};
+	let pose = c.pose ?? Object.keys(poses)[0];
+	let desde = cuando(c.en, ctx, 0);
+	for (const k of [...(c.poses ?? [])].map((k: any) => ({...k, t: cuando(k.en, ctx, 0)})).sort((a: any, b: any) => a.t - b.t)) {
+		if (ctx.t >= k.t) {
+			pose = k.pose;
+			desde = k.t;
+		}
+	}
+	const src = poses[pose];
+	if (!src) throw new Error(`El personaje "${c.nombre}" no tiene la pose "${pose}". Tiene: ${Object.keys(poses).join(', ')}`);
+	const rebote = desde > cuando(c.en, ctx, 0) ? 1 + 0.08 * (1 - easeOut(clamp((ctx.t - desde) / 0.35))) : 1;
+	const habla = c.hablar && ctx.t >= ctx.habla[0] && ctx.t <= ctx.habla[1] ? Math.sin(ctx.t * 17) * 0.018 : 0;
+	return (
+		<Img
+			src={recurso(src)}
+			style={{width: c.ancho ?? 560, display: 'block', transform: `scale(${rebote}, ${rebote * (1 + habla)})`, transformOrigin: 'bottom center', filter: 'drop-shadow(0 14px 18px rgba(0,0,0,0.25))'}}
+		/>
+	);
+};
+
+/** Todas las capas de una escena. */
+export const Capas: React.FC<{capas: Capa[]; ctx: CtxEscena}> = ({capas, ctx}) => (
+	<>
+		{capas.map((c, i) => (
+			<CapaVista key={i} c={c} ctx={ctx} i={i} />
+		))}
+	</>
+);
+
+export {useMarca};