morfeo 0.0.0-stage → 0.1.0

package/remotion/motor/tema.ts

@@ -0,0 +1,202 @@
+// Estilos del motor de capas. Un estilo es un "tema": fondo, colores, fuentes, subtítulos y transiciones.
+// Cada video elige uno (estilo: 'documental') y puede cambiar lo que quiera con `tema: {...}`.
+// En morfeo.config.mjs puedes crear los tuyos: estilos: {'mi-estilo': {base: 'explicativo', colores: {...}}}.
+import {ANTON, MONO, MONT} from '../estilo';
+
+export type Fondo =
+	| {tipo: 'color'; color: string}
+	| {tipo: 'degradado'; colores: string[]; angulo?: number}
+	| {tipo: 'imagen'; src: string; oscurecer?: number; desenfoque?: number}
+	| {tipo: 'video'; src: string; oscurecer?: number};
+
+export type Particulas = {tipo: 'burbujas' | 'polvo' | 'estrellas' | 'nieve' | 'confeti' | 'ninguna'; cantidad?: number; color?: string};
+
+export type Tema = {
+	fondo: Fondo;
+	/** Efectos sobre el fondo */
+	rayos?: {color: string; fuerza?: number}; // rayos de luz desde arriba (agua, bosque)
+	foco?: {color: string; x?: number; y?: number; radio?: number; fuerza?: number}; // luz puntual (mesa, escenario)
+	vineta?: number; // oscurecer bordes 0..1
+	textura?: 'papel' | 'grano' | 'ninguna';
+	particulas?: Particulas;
+	colores: {
+		texto: string;
+		acento: string; // palabra resaltada, números importantes
+		acento2: string;
+		suave: string; // texto secundario
+		tarjeta: string; // fondo de tarjetas/chips
+		tarjetaTexto: string;
+		borde: string;
+	};
+	fuentes: {titulo: string; texto: string; mono: string};
+	tituloMayusculas: boolean;
+	subtitulos: {
+		tipo: 'karaoke' | 'pop' | 'bloque' | 'palabra' | 'ninguno';
+		mayusculas?: boolean;
+		contorno?: number;
+		fondo?: string; // caja detrás de la frase (karaoke)
+		y: number; // centro vertical (px de 1920)
+		tam: number;
+		color: string; // palabras ya dichas
+		pendiente: string; // palabras por decir
+		resalte: string; // caja de la palabra actual ('' = sin caja)
+		maxPalabras: number;
+	};
+	transicion: 'corte' | 'fundido' | 'deslizar' | 'zoom';
+	marca: 'esquina' | 'arriba' | 'ninguna';
+	/** Movimiento suave de cámara por defecto en cada escena (zoom de 1 a este valor). */
+	zoomLento: number;
+};
+
+const SUB_BASE = {tipo: 'karaoke' as const, y: 330, tam: 54, maxPalabras: 7};
+
+export const ESTILOS: Record<string, Tema> = {
+	// Fondo papel claro, titulares negros con acento rojo, etiquetas mono, tarjetas de interfaz (tutoriales)
+	explicativo: {
+		fondo: {tipo: 'color', color: '#ECE6DC'},
+		textura: 'papel',
+		vineta: 0.12,
+		colores: {texto: '#141414', acento: '#E0302A', acento2: '#2D6BFF', suave: '#8A8378', tarjeta: '#FFFFFF', tarjetaTexto: '#141414', borde: '#141414'},
+		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {...SUB_BASE, y: 300, color: '#141414', pendiente: 'rgba(20,20,20,0.28)', resalte: ''},
+		transicion: 'deslizar',
+		marca: 'esquina',
+		zoomLento: 1.03,
+	},
+	// Fondo azul profundo con rayos de luz y burbujas; datos en chips (naturaleza, ciencia, océano)
+	documental: {
+		fondo: {tipo: 'degradado', colores: ['#0E4A86', '#062A52', '#020C1C']},
+		rayos: {color: 'rgba(160,210,255,0.16)', fuerza: 1},
+		vineta: 0.45,
+		particulas: {tipo: 'burbujas', cantidad: 26},
+		colores: {texto: '#FFFFFF', acento: '#7FE3FF', acento2: '#FF5A5A', suave: 'rgba(255,255,255,0.55)', tarjeta: 'rgba(8,20,40,0.78)', tarjetaTexto: '#FFFFFF', borde: '#7FE3FF'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: false,
+		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.42)', resalte: '#2C7BE5'},
+		transicion: 'fundido',
+		marca: 'esquina',
+		zoomLento: 1.06,
+	},
+	// Escenarios ilustrados (bosque, ciudad): el fondo suele ser una imagen tuya; cielo de atardecer por defecto
+	ilustrado: {
+		fondo: {tipo: 'degradado', colores: ['#5B3A7A', '#C7746A', '#F2B27A']},
+		vineta: 0.3,
+		particulas: {tipo: 'polvo', cantidad: 18},
+		colores: {texto: '#FFFFFF', acento: '#FFE27A', acento2: '#FF6B6B', suave: 'rgba(255,255,255,0.55)', tarjeta: 'rgba(20,14,30,0.75)', tarjetaTexto: '#FFFFFF', borde: '#FFFFFF'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: false,
+		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '#3D5AFE'},
+		transicion: 'corte',
+		marca: 'esquina',
+		zoomLento: 1.08,
+	},
+	// Historias de misterio: interiores oscuros, siluetas, letreros "DÍA 10"
+	historia: {
+		fondo: {tipo: 'degradado', colores: ['#1C2A2A', '#0E1414']},
+		vineta: 0.6,
+		foco: {color: 'rgba(255,214,140,0.22)', x: 540, y: 700, radio: 700},
+		particulas: {tipo: 'polvo', cantidad: 14},
+		colores: {texto: '#FFFFFF', acento: '#FFD66B', acento2: '#FF4A4A', suave: 'rgba(255,255,255,0.5)', tarjeta: 'rgba(0,0,0,0.6)', tarjetaTexto: '#FFD66B', borde: '#FFD66B'},
+		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.4)', resalte: ''},
+		transicion: 'corte',
+		marca: 'esquina',
+		zoomLento: 1.05,
+	},
+	// Objetos sobre una mesa con foco de luz, contadores tipo LCD (dinero, crecimiento, comparaciones)
+	mesa: {
+		fondo: {tipo: 'degradado', colores: ['#2A1A10', '#120A06'], angulo: 180},
+		foco: {color: 'rgba(255,200,120,0.30)', x: 540, y: 820, radio: 760, fuerza: 1},
+		vineta: 0.7,
+		textura: 'grano',
+		colores: {texto: '#FFFFFF', acento: '#FFD24A', acento2: '#5CFF7A', suave: 'rgba(255,255,255,0.5)', tarjeta: 'rgba(10,8,6,0.85)', tarjetaTexto: '#FFD24A', borde: '#3A2A1A'},
+		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.4)', resalte: '#2C7BE5'},
+		transicion: 'fundido',
+		marca: 'esquina',
+		zoomLento: 1.04,
+	},
+	// El de los shorts clásicos (morado oscuro, Anton, amarillo): para capas dentro de 'datos-curiosos'
+	'datos-curiosos': {
+		fondo: {tipo: 'degradado', colores: ['#180E30', '#080614']},
+		vineta: 0,
+		colores: {texto: '#FFFFFF', acento: '#FFD400', acento2: '#FF4050', suave: '#E6E1FF', tarjeta: '#1E1E2A', tarjetaTexto: '#FFFFFF', borde: '#FFD400'},
+		fuentes: {titulo: ANTON, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {...SUB_BASE, tipo: 'pop', y: 1420, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: ''},
+		transicion: 'corte',
+		marca: 'arriba',
+		zoomLento: 1,
+	},
+	// Series animadas con personaje (capítulos, retos, "comenta"): cuarto morado, subtítulos en bloque al centro
+	serie: {
+		fondo: {tipo: 'degradado', colores: ['#5B3FA0', '#3A2470']},
+		vineta: 0.25,
+		colores: {texto: '#FFFFFF', acento: '#FF3B5C', acento2: '#FF3B5C', suave: 'rgba(255,255,255,0.7)', tarjeta: '#FFFFFF', tarjetaTexto: '#141414', borde: '#141414'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {tipo: 'bloque', y: 1080, tam: 62, maxPalabras: 4, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '#FF3B5C', contorno: 8},
+		transicion: 'corte',
+		marca: 'ninguna',
+		zoomLento: 1.02,
+	},
+	// Infografía plana (cuerpo, ciencia, comparaciones): gris claro, encabezado y subtítulos abajo en caja
+	infografia: {
+		fondo: {tipo: 'degradado', colores: ['#EEEDEA', '#E2E1DC']},
+		vineta: 0.08,
+		colores: {texto: '#1B1B1F', acento: '#E5484D', acento2: '#2D6BFF', suave: '#8A8A93', tarjeta: '#FFFFFF', tarjetaTexto: '#1B1B1F', borde: '#1B1B1F'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {tipo: 'karaoke', y: 1500, tam: 48, maxPalabras: 4, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.45)', resalte: '', fondo: '#1B1B1F'},
+		transicion: 'corte',
+		marca: 'esquina',
+		zoomLento: 1.0,
+	},
+	// Escenas 3D (construcción, cómo funciona por dentro): una palabra grande a la vez
+	'3d': {
+		fondo: {tipo: 'degradado', colores: ['#BFE3FF', '#EAF6FF']},
+		vineta: 0.1,
+		colores: {texto: '#FFFFFF', acento: '#FFD43B', acento2: '#FF5A36', suave: 'rgba(255,255,255,0.7)', tarjeta: 'rgba(20,20,20,0.75)', tarjetaTexto: '#FFFFFF', borde: '#141414'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {tipo: 'palabra', y: 1000, tam: 76, maxPalabras: 1, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: '', contorno: 10},
+		transicion: 'corte',
+		marca: 'esquina',
+		zoomLento: 1.0,
+	},
+	// Oscuro y limpio, para lo que sea
+	minimal: {
+		fondo: {tipo: 'degradado', colores: ['#15151C', '#08080C']},
+		vineta: 0.3,
+		colores: {texto: '#FFFFFF', acento: '#8B7BFF', acento2: '#FF6B8B', suave: 'rgba(255,255,255,0.5)', tarjeta: '#1E1E28', tarjetaTexto: '#FFFFFF', borde: '#33334A'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: false,
+		subtitulos: {...SUB_BASE, color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.35)', resalte: '#8B7BFF'},
+		transicion: 'fundido',
+		marca: 'esquina',
+		zoomLento: 1.03,
+	},
+};
+
+const esObjeto = (x: unknown): x is Record<string, any> => !!x && typeof x === 'object' && !Array.isArray(x);
+/** Mezcla profunda: `b` gana sobre `a` (los arreglos se reemplazan completos). */
+export const mezclar = <T,>(a: T, b: any): T => {
+	if (!esObjeto(b)) return a;
+	const out: any = {...a};
+	for (const [k, v] of Object.entries(b)) out[k] = esObjeto(v) && esObjeto(out[k]) && !('tipo' in v) ? mezclar(out[k], v) : v;
+	return out;
+};
+
+/** Tema final: estilo base (o uno propio del config, que puede heredar con `base`) + ajustes del video. */
+export function temaDe(estilo: string | undefined, ajustes: Record<string, any> | undefined, propios: Record<string, any> = {}): Tema {
+	const resolver = (nombre: string, n = 0): Tema => {
+		if (ESTILOS[nombre]) return ESTILOS[nombre];
+		const p = propios[nombre];
+		if (p && n < 5) return mezclar(resolver(p.base ?? 'minimal', n + 1), p);
+		return ESTILOS.minimal;
+	};
+	return mezclar(resolver(estilo ?? 'minimal'), ajustes ?? {});
+}

package/remotion/motor/util.ts

@@ -0,0 +1,66 @@
+// Utilidades del motor de capas: tiempos por palabra, rutas de recursos y formato de números.
+import {staticFile} from 'remotion';
+import type {Tema} from './tema';
+
+export type CtxEscena = {
+	t: number; // segundos desde que empezó la escena
+	dur: number;
+	habla: [number, number];
+	palabras: [string, number, number][];
+	tema: Tema;
+	semilla: string;
+	inicios?: number[]; // inicio de cada escena (para el HUD: cambios en {escena: n})
+};
+
+const norm = (s: string) =>
+	s
+		.normalize('NFD')
+		.replace(/[̀-ͯ]/g, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9]/g, '');
+
+/**
+ * Momento (s, relativo a la escena) de `en`: un número de segundos, una palabra de lo que dice la voz
+ * (se busca la primera que empiece así; "orca" encuentra "orcas"), "inicio", "voz" (cuando empieza a hablar)
+ * o "fin" (cuando termina de hablar). Con "palabra+0.3" se suma un ajuste.
+ */
+export function cuando(en: unknown, c: CtxEscena, porDefecto = 0): number {
+	if (en == null) return porDefecto;
+	if (typeof en === 'number') return en;
+	if (typeof en !== 'string') return porDefecto;
+	const m = en.match(/^(.*?)([+-]\d+(?:\.\d+)?)?$/);
+	const base = (m?.[1] ?? en).trim();
+	const ajuste = m?.[2] ? Number(m[2]) : 0;
+	if (base === 'inicio' || base === '') return ajuste;
+	if (base === 'voz') return c.habla[0] + ajuste;
+	if (base === 'fin') return c.habla[1] + ajuste;
+	const n = norm(base);
+	const p = c.palabras.find(([w]) => norm(w).startsWith(n));
+	if (p) return p[1] + ajuste;
+	return (c.habla[0] + c.habla[1]) / 2 + ajuste; // no la encontró: a media frase
+}
+
+/** Ruta de un recurso: URL tal cual, o archivo de la carpeta assets/ del proyecto. */
+export const recurso = (src: string) => (/^(https?:|data:)/.test(src) ? src : staticFile(`assets/${src.replace(/^\.?\/?(assets\/)?/, '')}`));
+
+/** 1234567.5 -> "1.234.567,5" (separadores en español; configurables). */
+export function formatoNumero(v: number, decimales = 0, miles = '.', decimal = ',') {
+	const fijo = Math.abs(v).toFixed(decimales);
+	const [ent, dec] = fijo.split('.');
+	const conMiles = ent.replace(/\B(?=(\d{3})+(?!\d))/g, miles);
+	return `${v < 0 ? '-' : ''}${conMiles}${dec ? decimal + dec : ''}`;
+}
+
+/** "Hola *mundo*" -> [["Hola ", false], ["mundo", true]] */
+export const partesResaltadas = (s: string): [string, boolean][] =>
+	s
+		.split(/(\*[^*]+\*)/)
+		.filter(Boolean)
+		.map((p) => (p.startsWith('*') && p.endsWith('*') ? [p.slice(1, -1), true] : [p, false]));
+
+/** Número pseudoaleatorio estable en [0, 1) a partir de una semilla. */
+export const azar = (semilla: string) => {
+	let h = 2166136261;
+	for (let i = 0; i < semilla.length; i++) h = Math.imul(h ^ semilla.charCodeAt(i), 16777619);
+	return ((h >>> 0) % 100000) / 100000;
+};

package/remotion/motor/widgets.tsx

@@ -0,0 +1,248 @@
+// Capas de interfaz para series, infografías e historias interactivas:
+//   barra (progreso con %), medidor (aguja), votacion (resultados), estado (barra del teléfono: hora, batería, día),
+//   noticia (cintillo de noticiero), chat (comentarios en vivo), onda (audio), globo (diálogo), seguir (botón de seguir).
+import React from 'react';
+import {Img} from 'remotion';
+import {backOut, clamp, easeOut, lerp} from '../estilo';
+import {Avatar, useMarca} from '../piezas';
+import {azar, cuando, formatoNumero, recurso, type CtxEscena} from './util';
+
+type C = Record<string, any>;
+const oscuro = (ctx: CtxEscena) => ctx.tema.colores.texto === '#FFFFFF';
+
+/** Valor animado desde el inicio de la capa (o desde el valor anterior si viene de un cambio del HUD). */
+const animado = (c: C, ctx: CtxEscena, campo = 'valor', dur = 0.8) => {
+	const t0 = cuando(c.en, ctx, 0) + (c.__cambio ?? 0);
+	const k = easeOut(clamp((ctx.t - t0) / (c.duracion ?? dur)));
+	return lerp(c[`__${campo}Previo`] ?? c.desde ?? 0, c[campo] ?? 0, k);
+};
+
+export const Barra: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const ancho = c.ancho ?? 560;
+	const v = clamp(animado(c, ctx) / (c.max ?? 100));
+	const color = c.color ?? T.colores.acento;
+	return (
+		<div style={{width: ancho, background: c.fondo ?? T.colores.tarjeta, borderRadius: 16, padding: '14px 20px', boxShadow: '0 10px 26px rgba(0,0,0,0.25)', border: `3px solid ${c.borde ?? 'rgba(0,0,0,0.08)'}`, fontFamily: T.fuentes.texto}}>
+			{c.titulo || c.mostrar !== false ? (
+				<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, color: T.colores.tarjetaTexto}}>
+					<span style={{fontSize: c.tamTitulo ?? 28, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase'}}>{c.titulo ?? ''}</span>
+					{c.mostrar !== false ? <span style={{fontSize: 30, fontWeight: 800, color}}>{formatoNumero(v * (c.max ?? 100), c.decimales ?? 0)}{c.unidad ?? '%'}</span> : null}
+				</div>
+			) : null}
+			<div style={{height: c.alto ?? 24, background: c.pista ?? 'rgba(127,127,127,0.25)', borderRadius: 99, overflow: 'hidden'}}>
+				<div style={{width: `${v * 100}%`, height: '100%', background: color, borderRadius: 99, boxShadow: `0 0 14px ${color}`}} />
+			</div>
+		</div>
+	);
+};
+
+export const Medidor: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const tam = c.tam ?? 420;
+	const min = c.min ?? 0;
+	const max = c.max ?? 100;
+	const v = animado(c, ctx, 'valor', 1.1);
+	const k = clamp((v - min) / (max - min));
+	const ang = -225 + k * 270; // de -225° a 45°
+	const r = tam / 2 - 26;
+	const punto = (a: number, rr = r) => [tam / 2 + Math.cos((a * Math.PI) / 180) * rr, tam / 2 + Math.sin((a * Math.PI) / 180) * rr];
+	const arco = (a0: number, a1: number, color: string) => {
+		const [x0, y0] = punto(a0);
+		const [x1, y1] = punto(a1);
+		return <path d={`M ${x0} ${y0} A ${r} ${r} 0 ${a1 - a0 > 180 ? 1 : 0} 1 ${x1} ${y1}`} stroke={color} strokeWidth={22} fill="none" strokeLinecap="round" />;
+	};
+	const zonas: [number, string][] = c.zonas ?? [[0.6, '#2BB673'], [0.85, '#F5B841'], [1, '#E5484D']];
+	let previo = 0;
+	const [nx, ny] = punto(ang, r - 40);
+	return (
+		<div style={{position: 'relative', width: tam, height: tam, background: c.fondo ?? '#FFFFFF', borderRadius: '50%', border: `6px solid ${c.borde ?? '#1B1B1F'}`, boxShadow: '0 16px 30px rgba(0,0,0,0.25)'}}>
+			<svg width={tam} height={tam} style={{position: 'absolute', left: -6, top: -6}}>
+				{zonas.map(([hasta, color], i) => {
+					const el = arco(-225 + previo * 270, -225 + hasta * 270, color);
+					previo = hasta;
+					return <React.Fragment key={i}>{el}</React.Fragment>;
+				})}
+				<line x1={tam / 2} y1={tam / 2} x2={nx} y2={ny} stroke="#1B1B1F" strokeWidth={10} strokeLinecap="round" />
+				<circle cx={tam / 2} cy={tam / 2} r={18} fill="#1B1B1F" />
+			</svg>
+			<div style={{position: 'absolute', left: 0, right: 0, bottom: tam * 0.16, textAlign: 'center', fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: tam * 0.13, color: '#1B1B1F'}}>
+				{formatoNumero(v, c.decimales ?? 0)}
+				<div style={{fontSize: tam * 0.055, fontWeight: 700, color: '#666'}}>{c.unidad ?? ''}</div>
+			</div>
+		</div>
+	);
+};
+
+export const Votacion: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const t0 = cuando(c.en, ctx, 0);
+	const k = easeOut(clamp((ctx.t - t0 - 0.2) / 1));
+	const opciones: C[] = c.opciones ?? [];
+	return (
+		<div style={{width: c.ancho ?? 820, fontFamily: T.fuentes.texto, color: T.colores.texto}}>
+			{c.cabecera ? <div style={{textAlign: 'center', fontFamily: T.fuentes.mono, fontSize: 26, letterSpacing: 4, color: T.colores.suave, marginBottom: 18}}>{c.cabecera}</div> : null}
+			{c.titulo ? <div style={{textAlign: 'center', fontSize: 64, fontWeight: 900, lineHeight: 1.1, marginBottom: 40, textTransform: 'uppercase'}}>{c.titulo}</div> : null}
+			{opciones.map((o, i) => (
+				<div key={i} style={{marginBottom: 34}}>
+					<div style={{display: 'flex', justifyContent: 'space-between', fontSize: 50, fontWeight: 900}}>
+						<span>{o.texto}</span>
+						<span style={{color: o.color ?? (i === 0 ? T.colores.acento2 : T.colores.suave)}}>{Math.round((o.valor ?? 0) * k)}%</span>
+					</div>
+					<div style={{height: 16, background: 'rgba(127,127,127,0.25)', borderRadius: 99, marginTop: 10}}>
+						<div style={{width: `${(o.valor ?? 0) * k}%`, height: '100%', background: o.color ?? (i === 0 ? T.colores.texto : T.colores.suave), borderRadius: 99}} />
+					</div>
+					{o.sub ? <div style={{fontSize: 26, color: T.colores.suave, marginTop: 8}}>{o.sub}</div> : null}
+				</div>
+			))}
+		</div>
+	);
+};
+
+/** Barra de estado del teléfono a lo ancho: día, hora, batería y aviso. */
+export const Estado: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const color = c.color ?? (oscuro(ctx) ? '#FFFFFF' : '#141414');
+	const bat = c.bateria ?? 80;
+	return (
+		<div style={{width: c.ancho ?? 1000, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', fontFamily: T.fuentes.mono, color}}>
+			<div>
+				{c.dia ? <div style={{fontSize: 24, opacity: 0.7, letterSpacing: 2}}>{c.dia}</div> : null}
+				<div style={{fontSize: c.tam ?? 64, fontWeight: 800, lineHeight: 1}}>{c.hora ?? '12:00'}</div>
+			</div>
+			<div style={{textAlign: 'right', fontSize: 22, letterSpacing: 2, opacity: 0.85}}>
+				<div style={{display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end'}}>
+					BATERÍA
+					<div style={{width: 46, height: 22, border: `3px solid ${color}`, borderRadius: 5, padding: 2, boxSizing: 'border-box'}}>
+						<div style={{width: `${bat}%`, height: '100%', background: bat < 20 ? '#E5484D' : color, borderRadius: 2}} />
+					</div>
+					{bat}%
+				</div>
+				{c.aviso ? (
+					<div style={{marginTop: 8}}>
+						{c.aviso} {c.contador != null ? <span style={{background: '#E5484D', color: '#fff', borderRadius: 6, padding: '0 8px', marginLeft: 6}}>{c.contador}</span> : null}
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
+};
+
+/** Rótulo de noticiero: etiqueta roja, titular y cintillo que corre. */
+export const Noticia: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const ancho = c.ancho ?? 900;
+	const corre = (ctx.t * (c.velocidad ?? 140)) % (ancho * 2);
+	return (
+		<div style={{width: ancho, fontFamily: T.fuentes.texto, boxShadow: '0 12px 30px rgba(0,0,0,0.35)'}}>
+			{c.vivo ? <div style={{display: 'inline-block', background: '#E5484D', color: '#fff', fontWeight: 900, fontSize: 24, padding: '4px 12px', marginBottom: 6}}>EN VIVO</div> : null}
+			<div style={{background: '#E5484D', color: '#fff', fontWeight: 900, fontSize: 30, padding: '8px 18px', letterSpacing: 1}}>{c.etiqueta ?? 'ÚLTIMA HORA'}</div>
+			<div style={{background: '#FFFFFF', color: '#111', fontWeight: 900, fontSize: 40, padding: '14px 18px', lineHeight: 1.15}}>{c.titular}</div>
+			{c.cintillo ? (
+				<div style={{background: '#B5121B', color: '#fff', fontWeight: 700, fontSize: 26, padding: '8px 0', overflow: 'hidden', whiteSpace: 'nowrap'}}>
+					<span style={{display: 'inline-block', transform: `translateX(${ancho - corre}px)`}}>{c.cintillo}</span>
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+/** Chat en vivo: los mensajes van apareciendo de abajo hacia arriba. */
+export const Chat: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const t0 = cuando(c.en, ctx, 0);
+	const cada = c.cada ?? 0.45;
+	const msgs: C[] = c.mensajes ?? [];
+	const n = Math.max(0, Math.min(msgs.length, Math.floor((ctx.t - t0) / cada) + 1));
+	const visibles = msgs.slice(Math.max(0, n - (c.maximo ?? 6)), n);
+	const colores = ['#FF7AB6', '#7AD7FF', '#B6FF7A', '#FFD27A', '#C9A2FF'];
+	return (
+		<div style={{width: c.ancho ?? 420, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 8, fontFamily: T.fuentes.texto, fontSize: c.tam ?? 28}}>
+			{visibles.map((m, i) => (
+				<div key={n - visibles.length + i} style={{background: 'rgba(0,0,0,0.45)', color: '#fff', borderRadius: 12, padding: '6px 14px', opacity: i === visibles.length - 1 ? clamp((ctx.t - t0 - (n - 1) * cada) / 0.2) : 1}}>
+					<b style={{color: colores[(m.usuario ?? '').length % colores.length]}}>{m.usuario}</b> {m.texto}
+				</div>
+			))}
+		</div>
+	);
+};
+
+/** Onda de audio: barras que se mueven mientras habla (o siempre, con `siempre`). */
+export const Onda: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const n = c.barras ?? 28;
+	const alto = c.alto ?? 90;
+	const hablando = c.siempre || (ctx.t >= ctx.habla[0] && ctx.t <= ctx.habla[1]);
+	return (
+		<div style={{display: 'flex', alignItems: 'center', gap: 5, height: alto, width: c.ancho ?? 380}}>
+			{Array.from({length: n}, (_, i) => {
+				const base = 0.15 + 0.85 * Math.abs(Math.sin(ctx.t * (6 + azar(`o${i}`) * 9) + i));
+				const h = hablando ? base : 0.12;
+				return <div key={i} style={{flex: 1, height: `${h * 100}%`, background: c.color ?? '#B9C3FF', borderRadius: 99}} />;
+			})}
+		</div>
+	);
+};
+
+/** Globo de diálogo o etiqueta con pico. */
+export const Globo: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const fondo = c.fondo ?? '#FFFFFF';
+	const cola = c.cola ?? 'abajo';
+	const pico: React.CSSProperties =
+		cola === 'izq'
+			? {left: -22, top: '50%', marginTop: -14, borderWidth: '14px 24px 14px 0', borderColor: `transparent ${fondo} transparent transparent`}
+			: cola === 'der'
+				? {right: -22, top: '50%', marginTop: -14, borderWidth: '14px 0 14px 24px', borderColor: `transparent transparent transparent ${fondo}`}
+				: cola === 'arriba'
+					? {top: -22, left: '30%', borderWidth: '0 16px 24px 16px', borderColor: `transparent transparent ${fondo} transparent`}
+					: {bottom: -22, left: '30%', borderWidth: '24px 16px 0 16px', borderColor: `${fondo} transparent transparent transparent`};
+	return (
+		<div style={{position: 'relative', background: fondo, color: c.color ?? '#141414', borderRadius: 18, padding: '14px 26px', fontFamily: T.fuentes.texto, fontWeight: 800, fontSize: c.tam ?? 40, maxWidth: c.maxAncho ?? 600, boxShadow: '0 10px 24px rgba(0,0,0,0.25)', border: c.borde ? `4px solid ${c.borde}` : undefined}}>
+			{c.texto}
+			{cola !== 'ninguna' ? <div style={{position: 'absolute', width: 0, height: 0, borderStyle: 'solid', ...pico}} /> : null}
+		</div>
+	);
+};
+
+/** Tarjeta de "seguir": avatar, usuario y botón que cambia a "Siguiendo" (con dedo que lo pulsa). */
+export const Seguir: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const marca = useMarca();
+	const T = ctx.tema;
+	const t0 = cuando(c.en, ctx, 0);
+	const tc = t0 + (c.pulsar ?? 1);
+	const pulsado = ctx.t >= tc;
+	const dedo = clamp((ctx.t - t0 - 0.3) / (tc - t0 - 0.3));
+	return (
+		<div style={{position: 'relative', display: 'flex', alignItems: 'center', gap: 18, background: '#FFFFFF', borderRadius: 24, padding: '16px 22px', boxShadow: '0 14px 30px rgba(0,0,0,0.3)', fontFamily: T.fuentes.texto}}>
+			<div style={{position: 'relative', width: 84, height: 84}}>
+				<Avatar x={0} y={0} size={76} aro={4} />
+			</div>
+			<div style={{color: '#111'}}>
+				<div style={{fontSize: 34, fontWeight: 800}}>{c.usuario ?? `@${marca.nombre.replace(/\s+/g, '').toLowerCase()}`}</div>
+				{c.texto ? <div style={{fontSize: 22, color: '#666'}}>{c.texto}</div> : null}
+			</div>
+			<div style={{marginLeft: 16, background: pulsado ? '#EDEDED' : T.colores.acento2, color: pulsado ? '#111' : '#fff', fontWeight: 800, fontSize: 28, borderRadius: 12, padding: '12px 22px', transform: `scale(${pulsado ? backOut(clamp((ctx.t - tc) / 0.3)) : 1})`}}>
+				{pulsado ? `${marca.siguiendo.charAt(0)}${marca.siguiendo.slice(1).toLowerCase()} ✓` : marca.seguir}
+			</div>
+			{dedo < 1 || ctx.t < tc + 0.5 ? <div style={{position: 'absolute', right: 10 - (1 - dedo) * 120, bottom: -60 - (1 - dedo) * 120, fontSize: 80, opacity: ctx.t > tc + 0.5 ? 0 : 1}}>👆</div> : null}
+		</div>
+	);
+};
+
+/** Imagen que se transforma en otra (rayos X, antes/después): fundido, barrido o círculo que se abre. */
+export const ImagenCambia: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ca = c.cambiarA;
+	const tc = cuando(ca.en, ctx, ctx.habla[1] * 0.5);
+	const k = easeOut(clamp((ctx.t - tc) / (ca.duracion ?? 0.6)));
+	const ancho = c.ancho ?? 500;
+	const efecto = ca.efecto ?? 'fundido';
+	const clip = efecto === 'barrido' ? `inset(0 ${(1 - k) * 100}% 0 0)` : efecto === 'circulo' ? `circle(${k * 75}% at 50% 50%)` : undefined;
+	return (
+		<div style={{position: 'relative', width: ancho}}>
+			<Img src={recurso(c.src)} style={{width: ancho, display: 'block'}} />
+			<Img src={recurso(ca.src)} style={{position: 'absolute', left: 0, top: 0, width: ancho, display: 'block', opacity: efecto === 'fundido' ? k : k > 0 ? 1 : 0, clipPath: clip}} />
+		</div>
+	);
+};
+
+export {Img};