morfeo 0.0.0-stage → 0.1.1

package/remotion/escenas.tsx

@@ -0,0 +1,430 @@
+// Un componente por cada tipo de escena de videos.py. Todos son funciones puras del tiempo `t`
+// (segundos desde que empieza la escena), así se pueden congelar o repetir sin problema.
+import React from 'react';
+import {random} from 'remotion';
+import {
+	AMARILLO,
+	ANTON,
+	BLANCO,
+	FPS,
+	MONO,
+	MORADO,
+	NEGRO,
+	ROJO,
+	VERDE,
+	W,
+	ajustar,
+	ancho,
+	backOut,
+	easeIO,
+	easeOut,
+	clamp,
+	lerp,
+	mezclaColor,
+} from './estilo';
+import {Avatar, Pastilla, Resplandor, Texto, tamIcono, useMarca} from './piezas';
+import type {Escena, Fila} from './tipos';
+
+export type PropsEscena = {e: Escena; t: number; si: number; resplandor: string};
+
+const temblor = (t: number, semilla: string, amt = 10): [number, number] => {
+	const f = Math.floor(t * FPS);
+	if (f % 9 >= 2) return [0, 0];
+	return [(random(`${semilla}x${f}`) * 2 - 1) * amt, (random(`${semilla}y${f}`) * 2 - 1) * amt * 0.6];
+};
+
+const Lienzo: React.FC<{children: React.ReactNode}> = ({children}) => (
+	<svg style={{position: 'absolute', left: 0, top: 0, overflow: 'visible'}} width={W} height={1920}>
+		{children}
+	</svg>
+);
+
+// ---------- title: el gancho ----------
+const Title: React.FC<PropsEscena> = ({e, t, si}) => {
+	const p = e.p;
+	const marca = useMarca();
+	const rows: Fila[] = p.rows;
+	let y = 400;
+	const filas = rows.map(([s, col, size0], i) => {
+		const size = ajustar(s, size0);
+		const sc = backOut((t - i * 0.15) / 0.45);
+		const ultima = i === rows.length - 1;
+		const [jx, jy] = ultima ? temblor(t, `t${si}`) : [0, 0];
+		y += i ? size * 0.55 : 0;
+		const el = <Texto key={i} x={W / 2 + jx} y={y + jy} s={s} size={size} color={col} stroke={ultima ? 12 : 9} escala={sc} rot={ultima ? -3 : 0} />;
+		y += size * 0.62;
+		return el;
+	});
+	const ic = p.icon ?? 'question';
+	const s4 = backOut((t - 0.6) / 0.5);
+	return (
+		<>
+			<Pastilla cx={W / 2} cy={230} s={p.tag ?? marca.etiqueta} fondo={ROJO} />
+			{filas}
+		</>
+	);
+};
+
+// ---------- year: año que cuenta hacia arriba ----------
+const Year: React.FC<PropsEscena> = ({e, t}) => {
+	const p = e.p;
+	const pr = easeOut(t / 0.9);
+	const yr = p.year - 9 + Math.round(9 * pr);
+	const s = backOut((t - 1.1) / 0.45);
+	const s2 = backOut((t - 1.5) / 0.45);
+	return (
+		<>
+			<Pastilla cx={W / 2} cy={230} s={p.pre ?? 'EN'} fondo={MORADO} />
+			<Texto x={W / 2} y={470} s={String(yr)} size={280} color={AMARILLO} stroke={12} escala={1 + 0.08 * (1 - pr)} />
+			{p.sub && <Texto x={W / 2} y={820} s={p.sub} size={ajustar(p.sub, 150)} color={BLANCO} stroke={10} escala={s} rot={-2} />}
+		</>
+	);
+};
+
+// ---------- text: renglones grandes (con tachado opcional) ----------
+const Text: React.FC<PropsEscena> = ({e, t}) => {
+	const rows: Fila[] = e.p.rows;
+	const sizes = rows.map(([s, , z]) => ajustar(s, z));
+	const total = sizes.reduce((a, s) => a + s * 1.05, 0);
+	let y = 760 - total / 2;
+	const finVoz = e.habla[1];
+	const textos: React.ReactNode[] = [];
+	const rayas: React.ReactNode[] = [];
+	rows.forEach(([s, col], i) => {
+		const size = sizes[i];
+		y += size * 0.525;
+		textos.push(<Texto key={i} x={W / 2} y={y} s={s} size={size} color={col} stroke={11} escala={backOut((t - i * 0.18) / 0.42)} rot={i % 2 ? -2 : 2} />);
+		if (e.p.strike) {
+			const k = easeOut((t - (finVoz * 0.55 + i * 0.12)) / 0.25);
+			if (k > 0) {
+				const ww = ancho(s, ANTON, size) + 60;
+				const x0 = W / 2 - ww / 2;
+				rayas.push(<line key={i} x1={x0} y1={y + size * 0.15} x2={x0 + ww * k} y2={y + size * 0.15 - size * 0.3 * k} stroke={ROJO} strokeWidth={22} strokeLinecap="round" />);
+			}
+		}
+		y += size * 0.525;
+	});
+	return (
+		<>
+			{textos}
+			<Lienzo>{rayas}</Lienzo>
+		</>
+	);
+};
+
+// ---------- icon: ícono grande con brillo + etiqueta ----------
+const Icon: React.FC<PropsEscena> = ({e, t}) => {
+	const p = e.p;
+	const color = p.color ?? AMARILLO;
+	return (
+		<>
+			<Texto x={W / 2} y={1180} s={p.label} size={ajustar(p.label, 140)} color={color} stroke={11} escala={backOut((t - 0.35) / 0.42)} rot={-2} />
+		</>
+	);
+};
+
+// ---------- compare: A -> B con destello ----------
+const Compare: React.FC<PropsEscena> = ({e, t}) => {
+	const p = e.p;
+	const at = e.ev.at !== undefined ? e.ev.at - 0.2 : 1.2;
+	const [[a, ca], [b, cb]] = [p.a, p.b];
+	const [sa, sb] = p.sizes ?? [170, 200];
+	const fa = ajustar(a, sa);
+	const pa = easeOut((t - 0.45) / 0.5);
+	const y0 = 470 + fa * 0.55;
+	const y1 = lerp(y0, 860, pa);
+	const s2 = backOut((t - at) / 0.45);
+	const cy = 1100;
+	return (
+		<>
+			<Texto x={W / 2} y={470} s={a} size={fa} color={ca} stroke={12} escala={backOut(t / 0.4)} rot={3} />
+			<Lienzo>
+				{pa > 0 && <rect x={W / 2 - 16} y={y0} width={32} height={y1 - y0} fill={BLANCO} />}
+				{pa > 0.95 && <polygon points={`${W / 2 - 50},850 ${W / 2 + 50},850 ${W / 2},920`} fill={BLANCO} />}
+				{s2 > 0.01 &&
+					Array.from({length: 12}, (_, i) => {
+						const ang = (i * Math.PI) / 6 + t * 0.6;
+						const r0 = 230;
+						const r1 = 230 + 120 * s2;
+						return (
+							<line key={i} x1={W / 2 + Math.cos(ang) * r0} y1={cy + Math.sin(ang) * r0} x2={W / 2 + Math.cos(ang) * r1} y2={cy + Math.sin(ang) * r1} stroke={cb} strokeWidth={14} strokeLinecap="round" />
+						);
+					})}
+			</Lienzo>
+			{s2 > 0.01 && <Texto x={W / 2} y={cy} s={b} size={ajustar(b, sb)} color={cb} stroke={12} escala={s2} rot={-3} />}
+		</>
+	);
+};
+
+// ---------- card: ventana de código cuyo valor cambia con glitch ----------
+const Card: React.FC<PropsEscena> = ({e, t, si}) => {
+	const p = e.p;
+	const tswap = e.ev.at ?? e.habla[1] * 0.5;
+	const [x0, y0, x1, y1] = [90, 330, 990, 1110];
+	const swapped = t >= tswap;
+	const k = t - tswap;
+	const fl = p.flash ?? '¡CAMBIÓ!';
+	const jx = swapped && k < 0.5 ? (random(`c${si}-${Math.floor(t * FPS)}`) * 2 - 1) * 8 : 0;
+	return (
+		<>
+			<div style={{position: 'absolute', left: x0 + 12, top: y0 + 16, width: x1 - x0, height: y1 - y0, borderRadius: 34, background: NEGRO}} />
+			<div
+				style={{
+					position: 'absolute',
+					left: x0,
+					top: y0,
+					width: x1 - x0,
+					height: y1 - y0,
+					borderRadius: 34,
+					background: '#161624',
+					border: '4px solid #46466E',
+					boxSizing: 'border-box',
+				}}
+			/>
+			{['#FF5F56', '#FFBD2E', '#27C93F'].map((c, i) => (
+				<div key={c} style={{position: 'absolute', left: x0 + 40 + i * 50, top: y0 + 34, width: 32, height: 32, borderRadius: 16, background: c}} />
+			))}
+			<Texto x={x0 + 230} y={y0 + 50} s={p.file ?? 'main.c'} size={30} fuente="mono" peso={500} color="#9696BE" ancla="izquierda" sombra={false} />
+			{(p.rows as [string, string | null, string | null][]).map(([lab, antes, despues], i) => {
+				const y = y0 + 190 + i * 170;
+				if (antes === null) return <Texto key={i} x={x0 + 60} y={y} s={lab} size={44} fuente="mono" peso={500} color="#6E78A0" ancla="izquierda" sombra={false} />;
+				const v = (swapped ? despues : antes) ?? '';
+				const vx = x0 + 60 + ancho(lab, MONO, 60, 700) + 18;
+				let fv = 60;
+				while (vx + ancho(v, MONO, fv, 700) > x1 - 40 && fv > 20) fv -= 4;
+				const wv = ancho(v, MONO, fv, 700);
+				return (
+					<React.Fragment key={i}>
+						<Texto x={x0 + 60} y={y} s={lab} size={60} fuente="mono" color="#78C8FF" ancla="izquierda" sombra={false} />
+						{swapped && k < 1.6 && <div style={{position: 'absolute', left: vx - 14, top: y - 46, width: wv + 28, height: 92, borderRadius: 12, background: '#781428'}} />}
+						<Texto x={vx} y={y} s={v} size={fv} fuente="mono" color={swapped ? ROJO : '#FFC878'} ancla="izquierda" sombra={false} />
+					</React.Fragment>
+				);
+			})}
+			{swapped && <Texto x={W / 2 + jx} y={1240} s={fl} size={ajustar(fl, 130)} color={ROJO} stroke={10} escala={backOut(k / 0.35)} rot={4} />}
+		</>
+	);
+};
+
+// ---------- dialog: ventana "¿...?" donde el cursor da clic en NO ----------
+const Cursor: React.FC<{cx: number; cy: number}> = ({cx, cy}) => {
+	const pts: [number, number][] = [
+		[0, 0],
+		[0, 70],
+		[18, 54],
+		[32, 86],
+		[46, 80],
+		[32, 48],
+		[56, 48],
+	];
+	const str = (dx: number) => pts.map(([x, y]) => `${cx + x + dx},${cy + y + dx}`).join(' ');
+	return (
+		<Lienzo>
+			<polygon points={str(5)} fill={NEGRO} />
+			<polygon points={str(0)} fill={BLANCO} stroke={NEGRO} strokeWidth={3} strokeLinejoin="round" />
+		</Lienzo>
+	);
+};
+
+const Dialog: React.FC<PropsEscena> = ({e, t}) => {
+	const p = e.p;
+	const tclick = (e.ev.click ?? e.habla[1] * 0.6) - 0.15;
+	const s = backOut(t / 0.4);
+	const [cx, cy] = [W / 2, 700];
+	const [bx0, bx1, by0, by1] = [cx - (cx - 150) * s, cx + (930 - cx) * s, cy - (cy - 420) * s, cy + (980 - cy) * s];
+	const pressed = t >= tclick;
+	const kc = t - tclick;
+	const off = pressed && kc < 0.15 ? 6 : 0;
+	const cp = easeIO((t - 0.4) / Math.max(0.1, tclick - 0.5));
+	const [q1, q2] = p.q;
+	const r = 30 + kc * 260;
+	return (
+		<>
+			<div style={{position: 'absolute', left: bx0 + 12, top: by0 + 16, width: bx1 - bx0, height: by1 - by0, borderRadius: 30, background: NEGRO}} />
+			<div style={{position: 'absolute', left: bx0, top: by0, width: bx1 - bx0, height: by1 - by0, borderRadius: 30, background: '#F0F0F8', overflow: 'hidden'}}>
+				{s >= 0.98 && <div style={{height: 90, background: '#3C3C5A'}} />}
+			</div>
+			{s >= 0.98 && (
+				<>
+					<Texto x={W / 2} y={by0 + 46} s={p.title ?? 'ADVERTENCIA'} size={38} fuente="mont" peso={900} color={BLANCO} sombra={false} />
+					<Texto x={W / 2} y={640} s={q1} size={62} fuente="mont" color="#1E1E32" sombra={false} />
+					<Texto x={W / 2} y={720} s={q2} size={62} fuente="mont" color="#1E1E32" sombra={false} />
+					<div style={{position: 'absolute', left: 210, top: 820, width: 290, height: 110, borderRadius: 24, background: '#C8C8D2'}} />
+					<Texto x={355} y={875} s="SÍ" size={64} color="#5A5A64" sombra={false} />
+					<div style={{position: 'absolute', left: 580, top: 820 + off, width: 290, height: 110, borderRadius: 24, background: pressed ? VERDE : '#28AA50'}} />
+					<Texto x={725} y={875 + off} s="NO" size={64} color={BLANCO} sombra={false} />
+					{pressed && kc < 0.5 && (
+						<Lienzo>
+							<circle cx={740} cy={880} r={r} fill="none" stroke={VERDE} strokeWidth={8} opacity={1 - kc * 2} />
+						</Lienzo>
+					)}
+					<Cursor cx={lerp(300, 740, cp)} cy={lerp(1150, 890, cp)} />
+					{pressed && <Texto x={W / 2} y={1150} s={p.result ?? '¡SE QUEDA!'} size={130} color={VERDE} stroke={10} escala={backOut(kc / 0.4)} rot={-4} />}
+				</>
+			)}
+		</>
+	);
+};
+
+// ---------- aliens: fila de invasores pixel ----------
+const Aliens: React.FC<PropsEscena> = ({e, t}) => {
+	const {n, label} = e.p;
+	const muchos = n > 11;
+	return (
+		<>
+			<div style={{position: 'absolute', left: W / 2 - 60, top: 1180, width: 120, height: 40, background: VERDE}} />
+			<div style={{position: 'absolute', left: W / 2 - 14, top: 1150, width: 28, height: 35, background: VERDE}} />
+			<Texto x={W / 2} y={330} s={label} size={ajustar(label, 150)} color={muchos ? AMARILLO : ROJO} stroke={11} escala={backOut(t / 0.4)} rot={-2} />
+		</>
+	);
+};
+
+// ---------- memory: cartucho + barra de memoria ----------
+const Memory: React.FC<PropsEscena> = ({e, t}) => {
+	const s = backOut(t / 0.4);
+	const [cx, cy] = [W / 2, 640];
+	const [w, h] = [520 * s, 560 * s];
+	const k = easeIO((t - 0.8) / 1.8);
+	const [x0, x1, y] = [140, 940, 1060];
+	return (
+		<>
+			{s > 0.02 && (
+				<>
+					<div style={{position: 'absolute', left: cx - w / 2 + 14, top: cy - h / 2 + 16, width: w, height: h, background: NEGRO}} />
+					<div style={{position: 'absolute', left: cx - w / 2, top: cy - h / 2, width: w, height: h, background: '#787887'}} />
+					<div style={{position: 'absolute', left: cx - w / 2 + 50 * s, top: cy - h / 2 + 60 * s, width: w - 100 * s, height: h / 2 + 80 * s - 60 * s, background: '#32323C'}} />
+					{Array.from({length: 8}, (_, i) => (
+						<div key={i} style={{position: 'absolute', left: cx - w / 2 + (40 + i * 60) * s, top: cy + h / 2 - 60 * s, width: 30 * s, height: 60 * s, background: '#C8AA50'}} />
+					))}
+					{s > 0.9 && <Texto x={cx} y={cy - 40} s={e.p.label ?? '40 KB'} size={140} color={AMARILLO} stroke={8} />}
+				</>
+			)}
+			<div style={{position: 'absolute', left: x0, top: y, width: x1 - x0, height: 70, borderRadius: 20, background: '#28283C'}} />
+			{k > 0 && <div style={{position: 'absolute', left: x0 + 8, top: y + 8, width: (x1 - x0 - 16) * k * 0.97, height: 54, borderRadius: 14, background: mezclaColor(VERDE, ROJO, k)}} />}
+			<Texto x={W / 2} y={y + 130} s={`MEMORIA ${Math.floor(97 * k)}%`} size={44} fuente="mont" peso={900} color={BLANCO} sombra={false} />
+		</>
+	);
+};
+
+// ---------- morph: la nube se vuelve arbusto ----------
+const Morph: React.FC<PropsEscena> = ({e, t}) => {
+	const at = (e.ev.at ?? e.habla[1] * 0.5) - 0.1;
+	const k = easeIO((t - at) / 0.9);
+	const gy = 1180;
+	return (
+		<>
+			<div style={{position: 'absolute', left: 0, top: gy + 60, width: W, height: 340, background: '#784628'}} />
+			<div style={{position: 'absolute', left: 0, top: gy + 40, width: W, height: 30, background: '#46AA46'}} />
+			{k > 0.98 ? (
+				<Texto x={W / 2} y={450} s="¿ARBUSTO?" size={150} color={VERDE} stroke={11} escala={backOut((t - at - 0.9) / 0.4)} rot={-3} />
+			) : (
+				<Texto x={W / 2} y={330} s="MISMO DIBUJO" size={120} color={BLANCO} stroke={10} escala={backOut(t / 0.4)} />
+			)}
+		</>
+	);
+};
+
+// ---------- cta: cierre con avatar y botón de seguir ----------
+const Cta: React.FC<PropsEscena> = ({t, resplandor}) => {
+	const marca = useMarca();
+	const s = backOut(t / 0.45);
+	const pulso = 1 + 0.03 * Math.sin(t * 6);
+	const av = Math.round(380 * Math.max(0.05, s) * pulso);
+	const s2 = backOut((t - 0.6) / 0.4);
+	const [bw, bh] = [460 * s2, 130 * s2];
+	const cy = 1060 + (t > 1.6 && t < 1.8 ? 8 : 0);
+	const siguiendo = t > 1.7;
+	const s3 = easeOut((t - 0.9) / 0.4);
+	return (
+		<>
+			{s > 0.02 && (
+				<>
+					<Resplandor cx={W / 2} cy={560} rx={270} ry={270} color={resplandor} fuerza={0.55 * Math.min(1, s)} />
+					<Avatar x={W / 2 - av / 2 - 10} y={560 - av / 2 - 10} size={av} aro={10} />
+				</>
+			)}
+			{marca.nombre && <Texto x={W / 2} y={880} s={marca.nombre} size={Math.min(170, Math.floor((170 * (W - 120)) / ancho(marca.nombre, ANTON, 170)))} color={BLANCO} stroke={12} escala={backOut((t - 0.25) / 0.4)} />}
+			{s2 > 0.01 && (
+				<>
+					<div style={{position: 'absolute', left: W / 2 - bw / 2 + 10, top: cy - bh / 2 + 14, width: bw, height: bh, borderRadius: bh / 2, background: NEGRO}} />
+					<div style={{position: 'absolute', left: W / 2 - bw / 2, top: cy - bh / 2, width: bw, height: bh, borderRadius: bh / 2, background: siguiendo ? '#3C3C46' : ROJO}} />
+					{s2 > 0.9 && <Texto x={W / 2} y={cy} s={siguiendo ? marca.siguiendo : marca.seguir} size={72} color={BLANCO} sombra={false} />}
+				</>
+			)}
+			{s3 > 0 && marca.redes && (
+				<Texto x={W / 2} y={1210 + 20 * (1 - s3)} s={marca.redes} size={40} fuente="mont" color="#E6E1FF" sombra={false} opacidad={s3} />
+			)}
+		</>
+	);
+};
+
+export const ESCENAS: Record<string, React.FC<PropsEscena>> = {
+	title: Title,
+	year: Year,
+	text: Text,
+	icon: Icon,
+	compare: Compare,
+	card: Card,
+	dialog: Dialog,
+	aliens: Aliens,
+	memory: Memory,
+	morph: Morph,
+	cta: Cta,
+};
+
+// ---------- lo que va en 3D (Three.js) ----------
+// Cada escena dice qué íconos voxel lleva y dónde (en píxeles de la pantalla), más los halos de luz detrás.
+export type Icono3D = {nombre: string; cx: number; cy: number; u: number; color?: string; giro?: number; fase?: number};
+export type Halo = {cx: number; cy: number; r: number; color: string; fuerza: number};
+
+export const capa3D = (e: Escena, t: number): {iconos: Icono3D[]; halos: Halo[]} => {
+	const p = e.p;
+	const iconos: Icono3D[] = [];
+	const halos: Halo[] = [];
+	switch (e.tipo) {
+		case 'title': {
+			const ic = p.icon ?? 'question';
+			const s4 = backOut((t - 0.6) / 0.5);
+			if (s4 > 0.01) iconos.push({nombre: ic, cx: W / 2, cy: 1080 + Math.sin(t * 4) * 14, u: tamIcono(ic, 190) * s4, giro: 1 - clamp((t - 0.6) / 0.6)});
+			break;
+		}
+		case 'year': {
+			const s2 = backOut((t - 1.5) / 0.45);
+			if (p.icon && s2 > 0.01) iconos.push({nombre: p.icon, cx: W / 2, cy: 1100, u: tamIcono(p.icon, 180) * s2, giro: 1 - clamp((t - 1.5) / 0.6)});
+			break;
+		}
+		case 'icon': {
+			const s = backOut(t / 0.45);
+			const color = p.color ?? AMARILLO;
+			halos.push({cx: W / 2, cy: 750, r: 330, color, fuerza: 0.43 * Math.min(1, s)});
+			if (s > 0.01) iconos.push({nombre: p.icon, cx: W / 2, cy: 760 + Math.sin(t * 4) * 18, u: tamIcono(p.icon, 430) * s, giro: 1 - clamp(t / 0.7)});
+			break;
+		}
+		case 'aliens': {
+			const {n, speed} = p;
+			const muchos = n > 11;
+			const cols = muchos ? 11 : n;
+			const u = muchos ? 9 : 22;
+			const cw = 7 * u + (muchos ? u * 3 : u * 5);
+			const span = cols * cw;
+			const xOff = Math.sin(t * speed) * ((980 - span) / 2);
+			const yBase = 520 + (muchos ? t * 30 : t * 60);
+			const alt = Math.floor(t * speed * 1.5) % 2;
+			for (let k = 0; k < n; k++) {
+				const r = Math.floor(k / cols);
+				const c = k % cols;
+				iconos.push({nombre: 'alien', cx: W / 2 - span / 2 + cw * (c + 0.5) + xOff, cy: yBase + r * (8 * u + 24) + (alt ? u * 0.4 : 0), u, fase: k * 0.7});
+			}
+			break;
+		}
+		case 'morph': {
+			const at = (e.ev.at ?? e.habla[1] * 0.5) - 0.1;
+			const k = easeIO((t - at) / 0.9);
+			iconos.push({nombre: 'cloud', cx: W / 2, cy: lerp(620, 1150, k), u: 60, color: mezclaColor('#FAFAFF', '#46C850', easeIO((t - at + 0.2) / 0.5))});
+			break;
+		}
+		default:
+			break;
+	}
+	return {iconos, halos};
+};

package/remotion/estilo.ts

@@ -0,0 +1,73 @@
+// La fórmula visual de los shorts: medidas, paleta, fuentes y curvas de animación.
+import {loadFont} from '@remotion/fonts';
+import {measureText} from '@remotion/layout-utils';
+import {staticFile} from 'remotion';
+
+export const W = 1080;
+export const H = 1920;
+export const FPS = 30;
+
+// Paleta
+export const AMARILLO = '#FFD400'; // lo importante
+export const ROJO = '#FF4050'; // errores y problemas
+export const VERDE = '#5ADC6E'; // soluciones
+export const BLANCO = '#FFFFFF';
+export const CIAN = '#50DCFF';
+export const MORADO = '#5A3CAA';
+export const NEGRO = '#000000';
+
+// Zonas seguras de Shorts / TikTok / Reels (lo que tapa la interfaz de cada app)
+export const SEGURO = {arriba: 200, abajo: 370, derecha: 160, izquierda: 60};
+export const SUB_Y = 1420; // altura de los subtítulos
+export const SUB_ANCHO = 880; // ancho máximo: no se mete bajo los botones de la derecha
+
+// Fondo: degradado oscuro + resplandor; cambia según el número del video
+// [arriba, abajo, resplandor]
+export const FONDOS: [string, string, string][] = [
+	['#180E30', '#080614', '#462882'],
+	['#0A1830', '#040814', '#1E508C'],
+	['#280C1E', '#0C040E', '#82285A'],
+	['#0A221E', '#040C0C', '#1E6E5A'],
+	['#1E160A', '#0A0804', '#825A1E'],
+];
+export const fondoDe = (indice: number) => FONDOS[indice % FONDOS.length];
+
+// Fuentes (licencia libre OFL)
+export const ANTON = 'Anton';
+export const MONT = 'Montserrat';
+export const MONO = 'JetBrains Mono';
+export const fuentesListas = Promise.all([
+	loadFont({family: ANTON, url: staticFile('fuentes/Anton.ttf')}),
+	loadFont({family: MONT, url: staticFile('fuentes/Montserrat.ttf'), weight: '100 900'}),
+	loadFont({family: MONO, url: staticFile('fuentes/JetBrainsMono.ttf'), weight: '100 800'}),
+]);
+
+// Curvas
+export const clamp = (x: number, a = 0, b = 1) => Math.max(a, Math.min(b, x));
+export const easeOut = (x: number) => 1 - (1 - clamp(x)) ** 3;
+export const easeIO = (x: number) => {
+	const c = clamp(x);
+	return 3 * c * c - 2 * c * c * c;
+};
+/** Rebote "back-out": crece, se pasa un poco y regresa. */
+export const backOut = (x: number, s = 1.9) => {
+	const c = clamp(x) - 1;
+	return c * c * ((s + 1) * c + s) + 1;
+};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+export const mezclaColor = (c1: string, c2: string, t: number) => {
+	const p = (c: string) => [1, 3, 5].map((i) => parseInt(c.slice(i, i + 2), 16));
+	const a = p(c1);
+	const b = p(c2);
+	return `rgb(${a.map((v, i) => Math.round(lerp(v, b[i], clamp(t)))).join(',')})`;
+};
+
+// Medidas de texto
+export const ancho = (text: string, fontFamily: string, fontSize: number, fontWeight: number | string = 400) =>
+	measureText({text, fontFamily, fontSize, fontWeight: String(fontWeight), validateFontIsLoaded: true}).width;
+
+/** Achica el tamaño hasta que el texto quepa en `maxw` (igual que el motor anterior). */
+export const ajustar = (s: string, size: number, maxw = 980) => {
+	while (ancho(s, ANTON, size) > maxw && size > 40) size -= 6;
+	return size;
+};