morfeo 0.3.0 → 0.3.1

package/remotion/kit/personas.tsx

@@ -0,0 +1,439 @@
+// Personajes 2D planos (estilo de las series ilustradas): cuerpo, cara con expresiones, poses, parpadeo,
+// respiración y boca que se mueve cuando hablan. Van DENTRO de un <svg>; el origen (0, 0) son los pies.
+//
+//   <Persona2D x={700} y={1500} alto={520} t={t} pelo="#2B1B12" ropa="#2F6FE0" expresion="feliz" pose="señalar" />
+//   <Persona2D ... estados={[{en: cuando('miedo'), expresion: 'miedo'}, {en: cuando('corre'), pose: 'caminar'}]} />
+//   <Persona2D ... habla={[[cuando('hola'), cuando('fin')]]} />            (la boca se mueve en esos intervalos)
+//   <Persona2D ... silueta="#141A33" />                                  (figura negra, sin cara: multitudes, misterio)
+//
+// Todo depende de `t` (segundos): nada se anima solo.
+import React from 'react';
+import {azarN} from './ilustrado';
+
+export type Expresion = 'neutral' | 'feliz' | 'triste' | 'enojado' | 'sorpresa' | 'miedo' | 'dormido' | 'pensativo';
+export type Pose = 'parado' | 'caminar' | 'señalar' | 'brazosArriba' | 'sentado' | 'pensar' | 'cruzado';
+export type Peinado = 'corto' | 'largo' | 'chongo' | 'rizado' | 'calvo' | 'cresta';
+export type Accesorio = 'lentes' | 'sombrero' | 'gorra' | 'casco' | 'audifonos' | 'moño';
+
+export const PIELES = ['#F6D2B4', '#E8B48F', '#C98E66', '#A86B45', '#7A4A2E', '#5A341F'];
+export const PELOS = ['#2B1B12', '#4A2C17', '#7A4A22', '#C98A3A', '#E6C36B', '#9A9A9A', '#1A1A1A', '#B5452E'];
+export const ROPAS = ['#2F6FE0', '#E04A4A', '#2FA36B', '#F2B632', '#8B5BD6', '#F07A3A', '#3A3F4B', '#E86AA6', '#25A8C9'];
+
+export type Persona2DProps = {
+	x?: number;
+	y?: number;
+	/** Alto total en px (de los pies a la coronilla). */
+	alto?: number;
+	t?: number;
+	piel?: string;
+	pelo?: string;
+	peinado?: Peinado;
+	ropa?: string;
+	pantalon?: string;
+	zapatos?: string;
+	complexion?: 'delgada' | 'normal' | 'ancha';
+	accesorio?: Accesorio | null;
+	colorAccesorio?: string;
+	expresion?: Expresion;
+	pose?: Pose;
+	/** Cambios en el tiempo: [{en: segundos, expresion?, pose?}] (usa `cuando('palabra')` para calcular `en`). */
+	estados?: {en: number; expresion?: Expresion; pose?: Pose}[];
+	/** Intervalos [inicio, fin] en segundos en que habla (la boca se mueve). */
+	habla?: [number, number][];
+	/** Hacia dónde mira: -1 izquierda … 1 derecha. */
+	mirar?: number;
+	/** Voltear horizontalmente (mira hacia el otro lado). */
+	voltear?: boolean;
+	/** Toda la figura de un solo color, sin cara. */
+	silueta?: string;
+	/** Varía el parpadeo y el balanceo entre personajes. */
+	semilla?: number;
+	/** Rubor en las mejillas. */
+	rubor?: boolean;
+};
+
+const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+const RAD = Math.PI / 180;
+
+/** Ángulos de brazos y piernas por pose (grados). Brazo: [hombro hacia afuera, codo hacia adentro]. */
+function poseDe(pose: Pose, t: number, fase: number) {
+	const vaiven = Math.sin(t * 1.6 + fase);
+	switch (pose) {
+		case 'caminar': {
+			const p = Math.sin(t * 7.5 + fase);
+			return {bi: [8 - p * 22, 10], bd: [8 + p * 22, 10], pi: p * 20, pd: -p * 20, sube: Math.abs(Math.cos(t * 7.5 + fase)) * 8, sentado: false};
+		}
+		case 'señalar':
+			return {bi: [8 + vaiven * 2, 6], bd: [100 + Math.sin(t * 3 + fase) * 4, 0], pi: 0, pd: 0, sube: 0, sentado: false};
+		case 'brazosArriba':
+			return {bi: [155 + Math.sin(t * 6 + fase) * 10, -10], bd: [155 + Math.sin(t * 6 + fase + 1.2) * 10, -10], pi: 0, pd: 0, sube: Math.abs(Math.sin(t * 6 + fase)) * 10, sentado: false};
+		case 'pensar':
+			return {bi: [20, 95], bd: [25, 150], pi: 0, pd: 0, sube: 0, sentado: false};
+		case 'cruzado':
+			return {bi: [22, 120], bd: [22, 120], pi: 0, pd: 0, sube: 0, sentado: false};
+		case 'sentado':
+			return {bi: [18, 55], bd: [18, 55], pi: 0, pd: 0, sube: 0, sentado: true};
+		default:
+			return {bi: [7 + vaiven * 2, 8], bd: [7 - vaiven * 2, 8], pi: 0, pd: 0, sube: 0, sentado: false};
+	}
+}
+
+/** Brazo de dos tramos con la mano al final. `lado` 1 = derecho (x positivo), -1 = izquierdo. */
+const Brazo: React.FC<{lado: 1 | -1; hombro: number; codo: number; ancho: number; largo: number; ropa: string; piel: string}> = ({lado, hombro, codo, ancho, largo, ropa, piel}) => {
+	const a1 = -lado * hombro;
+	const a2 = lado * codo;
+	const l = largo / 2;
+	return (
+		<g transform={`rotate(${a1})`}>
+			<rect x={-ancho / 2} y={-ancho / 3} width={ancho} height={l + ancho / 3} rx={ancho / 2} fill={ropa} />
+			<g transform={`translate(0 ${l}) rotate(${a2})`}>
+				<rect x={-ancho / 2 + 2} y={-ancho / 3} width={ancho - 4} height={l + ancho / 3} rx={ancho / 2} fill={ropa} />
+				<circle cx={0} cy={l + 4} r={ancho * 0.55} fill={piel} />
+			</g>
+		</g>
+	);
+};
+
+/** Ojos, cejas, boca y mejillas según la expresión. */
+const Cara: React.FC<{expresion: Expresion; t: number; habla: boolean; parpadea: boolean; mirar: number; rubor: boolean; enojo: number}> = ({expresion, t, habla, parpadea, mirar, rubor, enojo}) => {
+	const ex = 24;
+	const ey = -6;
+	const cerrados = expresion === 'dormido' || parpadea;
+	const px = mirar * 4.5;
+	const pupila = expresion === 'sorpresa' || expresion === 'miedo' ? 4.2 : 6.2;
+	// cejas: [inclinación, altura]
+	const ceja: Record<Expresion, [number, number]> = {neutral: [0, 0], feliz: [-6, -2], triste: [16, 2], enojado: [-24, 4], sorpresa: [0, -8], miedo: [18, -5], dormido: [0, 3], pensativo: [8, -3]};
+	const [inc, alt] = ceja[expresion];
+	const abre = habla ? 0.25 + 0.75 * Math.abs(Math.sin(t * 13)) * (0.6 + 0.4 * Math.abs(Math.sin(t * 5.3))) : 0;
+	let boca: React.ReactNode;
+	if (abre > 0.05 && expresion !== 'dormido') {
+		boca = <ellipse cx={0} cy={30} rx={11} ry={3 + abre * 10} fill="#5A1E1E" />;
+	} else {
+		switch (expresion) {
+			case 'feliz':
+				boca = <path d="M -14 24 Q 0 40 14 24 Z" fill="#5A1E1E" />;
+				break;
+			case 'triste':
+				boca = <path d="M -12 34 Q 0 24 12 34" stroke="#3A1A12" strokeWidth={4} fill="none" strokeLinecap="round" />;
+				break;
+			case 'enojado':
+				boca = <path d="M -13 32 Q 0 26 13 32" stroke="#3A1A12" strokeWidth={5} fill="none" strokeLinecap="round" />;
+				break;
+			case 'sorpresa':
+				boca = <ellipse cx={0} cy={31} rx={8} ry={10} fill="#5A1E1E" />;
+				break;
+			case 'miedo':
+				boca = <path d="M -14 32 q 3.5 -5 7 0 t 7 0 t 7 0 t 7 0" stroke="#3A1A12" strokeWidth={3.5} fill="none" strokeLinecap="round" />;
+				break;
+			case 'dormido':
+				boca = <ellipse cx={0} cy={30} rx={5} ry={4} fill="#5A1E1E" opacity={0.8} />;
+				break;
+			case 'pensativo':
+				boca = <path d="M -6 30 L 12 27" stroke="#3A1A12" strokeWidth={4} strokeLinecap="round" />;
+				break;
+			default:
+				boca = <path d="M -10 29 Q 0 34 10 29" stroke="#3A1A12" strokeWidth={4} fill="none" strokeLinecap="round" />;
+		}
+	}
+	return (
+		<g>
+			{[-1, 1].map((l) =>
+				cerrados ? (
+					<path key={l} d={`M ${l * ex - 11} ${ey} Q ${l * ex} ${ey + (expresion === 'feliz' ? -7 : 6)} ${l * ex + 11} ${ey}`} stroke="#2A1A12" strokeWidth={4} fill="none" strokeLinecap="round" />
+				) : (
+					<g key={l}>
+						<ellipse cx={l * ex} cy={ey} rx={12.5} ry={expresion === 'sorpresa' || expresion === 'miedo' ? 15 : 13.5} fill="#fff" />
+						<circle cx={l * ex + px} cy={ey + 1} r={pupila} fill="#1E1410" />
+						<circle cx={l * ex + px + 2} cy={ey - 2} r={1.8} fill="#fff" />
+					</g>
+				),
+			)}
+			{[-1, 1].map((l) => (
+				<path key={`c${l}`} d={`M ${l * ex - 12} ${ey - 20 + alt} L ${l * ex + 12} ${ey - 20 + alt}`} transform={`rotate(${l * inc} ${l * ex} ${ey - 20 + alt})`} stroke="#2A1A12" strokeWidth={5} strokeLinecap="round" />
+			))}
+			{boca}
+			{rubor || expresion === 'feliz' || enojo > 0 ? (
+				<>
+					<ellipse cx={-36} cy={16} rx={10} ry={6} fill={enojo > 0 ? `rgba(225,60,40,${0.35 + 0.35 * enojo})` : 'rgba(235,120,110,0.35)'} />
+					<ellipse cx={36} cy={16} rx={10} ry={6} fill={enojo > 0 ? `rgba(225,60,40,${0.35 + 0.35 * enojo})` : 'rgba(235,120,110,0.35)'} />
+				</>
+			) : null}
+			{expresion === 'miedo' || expresion === 'triste' ? <path d="M 50 -24 q -6 10 0 14 q 6 -4 0 -14 Z" fill="#7FC8FF" opacity={0.9} /> : null}
+		</g>
+	);
+};
+
+const Pelo: React.FC<{peinado: Peinado; color: string; r: number; capa: 'atras' | 'frente'}> = ({peinado, color, r, capa}) => {
+	if (peinado === 'calvo') return null;
+	if (capa === 'atras') {
+		if (peinado === 'largo') return <path d={`M ${-r - 6} -6 Q ${-r - 10} ${r * 1.6} ${-r * 0.4} ${r * 1.7} L ${r * 0.4} ${r * 1.7} Q ${r + 10} ${r * 1.6} ${r + 6} -6 Z`} fill={color} />;
+		if (peinado === 'chongo') return <circle cx={0} cy={-r - 14} r={r * 0.42} fill={color} />;
+		return null;
+	}
+	switch (peinado) {
+		case 'rizado':
+			return (
+				<g fill={color}>
+					{Array.from({length: 9}, (_, i) => {
+						const a = Math.PI + (i / 8) * Math.PI;
+						return <circle key={i} cx={Math.cos(a) * r * 0.92} cy={Math.sin(a) * r * 0.92 - 4} r={r * 0.3} />;
+					})}
+				</g>
+			);
+		case 'cresta':
+			return <path d={`M ${-r * 0.3} ${-r * 0.75} L 0 ${-r * 1.45} L ${r * 0.3} ${-r * 0.75} Z`} fill={color} />;
+		case 'largo':
+			return <path d={`M ${-r - 4} 0 Q ${-r} ${-r * 1.15} 0 ${-r * 1.08} Q ${r} ${-r * 1.15} ${r + 4} 0 Q ${r * 0.5} ${-r * 0.55} ${-r * 0.1} ${-r * 0.62} Q ${-r * 0.6} ${-r * 0.5} ${-r - 4} 0 Z`} fill={color} />;
+		default:
+			return <path d={`M ${-r - 3} -4 Q ${-r - 2} ${-r * 1.12} 0 ${-r * 1.06} Q ${r + 2} ${-r * 1.12} ${r + 3} -4 Q ${r * 0.7} ${-r * 0.6} ${r * 0.1} ${-r * 0.68} Q ${-r * 0.5} ${-r * 0.62} ${-r - 3} -4 Z`} fill={color} />;
+	}
+};
+
+const Accesorio: React.FC<{tipo: Accesorio; color?: string; r: number}> = ({tipo, color, r}) => {
+	switch (tipo) {
+		case 'lentes':
+			return (
+				<g stroke={color ?? '#1A1A1A'} strokeWidth={4.5} fill="rgba(255,255,255,0.12)">
+					<circle cx={-24} cy={-6} r={17} />
+					<circle cx={24} cy={-6} r={17} />
+					<path d="M -7 -8 Q 0 -13 7 -8" fill="none" />
+				</g>
+			);
+		case 'sombrero':
+			return (
+				<g fill={color ?? '#E3C27A'}>
+					<ellipse cx={0} cy={-r * 0.72} rx={r * 1.75} ry={r * 0.32} />
+					<path d={`M ${-r * 0.85} ${-r * 0.75} Q ${-r * 0.8} ${-r * 1.65} 0 ${-r * 1.6} Q ${r * 0.8} ${-r * 1.65} ${r * 0.85} ${-r * 0.75} Z`} />
+					<rect x={-r * 0.86} y={-r * 0.98} width={r * 1.72} height={r * 0.16} fill="#8A3B2A" />
+				</g>
+			);
+		case 'gorra':
+			return (
+				<g fill={color ?? '#E04A4A'}>
+					<path d={`M ${-r} ${-r * 0.45} Q ${-r} ${-r * 1.2} 0 ${-r * 1.18} Q ${r} ${-r * 1.2} ${r} ${-r * 0.45} Z`} />
+					<ellipse cx={r * 0.55} cy={-r * 0.45} rx={r * 0.85} ry={r * 0.16} />
+				</g>
+			);
+		case 'casco':
+			return (
+				<g fill={color ?? '#F5C518'}>
+					<path d={`M ${-r * 1.02} ${-r * 0.42} Q ${-r * 1.02} ${-r * 1.25} 0 ${-r * 1.22} Q ${r * 1.02} ${-r * 1.25} ${r * 1.02} ${-r * 0.42} Z`} />
+					<rect x={-r * 1.18} y={-r * 0.5} width={r * 2.36} height={r * 0.16} rx={r * 0.08} />
+					<rect x={-r * 0.1} y={-r * 1.22} width={r * 0.2} height={r * 0.72} fill="rgba(0,0,0,0.12)" />
+				</g>
+			);
+		case 'audifonos':
+			return (
+				<g fill={color ?? '#2A2A33'}>
+					<path d={`M ${-r * 1.05} 0 Q ${-r * 1.1} ${-r * 1.35} 0 ${-r * 1.32} Q ${r * 1.1} ${-r * 1.35} ${r * 1.05} 0`} stroke={color ?? '#2A2A33'} strokeWidth={9} fill="none" />
+					<rect x={-r * 1.2} y={-r * 0.25} width={r * 0.34} height={r * 0.6} rx={r * 0.12} />
+					<rect x={r * 0.86} y={-r * 0.25} width={r * 0.34} height={r * 0.6} rx={r * 0.12} />
+				</g>
+			);
+		case 'moño':
+			return (
+				<g fill={color ?? '#E86AA6'} transform={`translate(${r * 0.55} ${-r * 0.92})`}>
+					<path d="M 0 0 L -22 -14 L -22 14 Z" />
+					<path d="M 0 0 L 22 -14 L 22 14 Z" />
+					<circle r={7} />
+				</g>
+			);
+	}
+	return null;
+};
+
+/** Un personaje plano de cuerpo completo. Los pies quedan en (x, y). */
+export const Persona2D: React.FC<Persona2DProps> = ({
+	x = 0,
+	y = 0,
+	alto = 480,
+	t = 0,
+	piel = PIELES[1],
+	pelo = PELOS[0],
+	peinado = 'corto',
+	ropa = ROPAS[0],
+	pantalon = '#2E3A59',
+	zapatos = '#2A2420',
+	complexion = 'normal',
+	accesorio = null,
+	colorAccesorio,
+	expresion: exp0 = 'neutral',
+	pose: pose0 = 'parado',
+	estados = [],
+	habla = [],
+	mirar = 0,
+	voltear = false,
+	silueta,
+	semilla = 0,
+	rubor = false,
+}) => {
+	// estado actual y desde cuándo (para el pequeño rebote al cambiar)
+	let expresion = exp0;
+	let pose = pose0;
+	let desde = -99;
+	for (const e of [...estados].sort((a, b) => a.en - b.en)) {
+		if (t >= e.en) {
+			if (e.expresion) expresion = e.expresion;
+			if (e.pose) pose = e.pose;
+			desde = e.en;
+		}
+	}
+	const fase = azarN(semilla + 3) * 6.28;
+	const P = poseDe(pose, t, fase);
+	const k = alto / 400; // el cuerpo se dibuja en 400 unidades de alto
+	const ancho = complexion === 'ancha' ? 1.3 : complexion === 'delgada' ? 0.82 : 1;
+	const respira = 1 + 0.014 * Math.sin(t * 2.4 + fase);
+	const rebote = desde > -99 ? 1 + 0.06 * Math.exp(-(t - desde) * 9) * Math.cos((t - desde) * 26) : 1;
+	const periodo = 3.1 + azarN(semilla + 7) * 1.6;
+	const parpadea = (t + azarN(semilla + 11) * periodo) % periodo < 0.13;
+	const hablando = habla.some(([a, b]) => t >= a && t <= b);
+	const enojo = expresion === 'enojado' ? clamp01((t - desde) / 0.6) : 0;
+	const temblor = expresion === 'miedo' ? Math.sin(t * 40) * 1.6 : 0;
+	const cadera = P.sentado ? 70 : 112;
+	const torsoAlto = 140;
+	const hombroY = -(cadera + torsoAlto - 18);
+	const cabezaR = 64;
+	const cabezaY = -(cadera + torsoAlto + cabezaR - 6);
+	const tw = 118 * ancho;
+	const c = (col: string) => silueta ?? col;
+	return (
+		<g transform={`translate(${x + temblor} ${y}) scale(${(voltear ? -1 : 1) * k * rebote} ${k * rebote})`}>
+			{/* sombra de contacto */}
+			<ellipse cx={0} cy={4} rx={tw * 0.7} ry={12} fill="rgba(0,0,0,0.22)" />
+			<g transform={`translate(0 ${-P.sube})`}>
+				{/* piernas */}
+				{P.sentado ? (
+					<g fill={c(pantalon)}>
+						<rect x={-tw * 0.42} y={-cadera} width={tw * 0.36} height={cadera} rx={16} />
+						<rect x={tw * 0.06} y={-cadera} width={tw * 0.36} height={cadera} rx={16} />
+						<ellipse cx={-tw * 0.24} cy={-4} rx={26} ry={12} fill={c(zapatos)} />
+						<ellipse cx={tw * 0.24} cy={-4} rx={26} ry={12} fill={c(zapatos)} />
+					</g>
+				) : (
+					[-1, 1].map((l) => (
+						<g key={l} transform={`translate(${l * tw * 0.22} ${-cadera}) rotate(${l < 0 ? P.pi : P.pd})`}>
+							<rect x={-tw * 0.17} y={0} width={tw * 0.34} height={cadera - 6} rx={14} fill={c(pantalon)} />
+							<ellipse cx={l * 6} cy={cadera - 6} rx={26} ry={12} fill={c(zapatos)} />
+						</g>
+					))
+				)}
+				{/* brazo de atrás (izquierdo) */}
+				<g transform={`translate(${-tw / 2 + 6} ${hombroY})`}>
+					<Brazo lado={-1} hombro={P.bi[0]} codo={P.bi[1]} ancho={30 * Math.min(1.15, ancho)} largo={150} ropa={c(ropa)} piel={c(piel)} />
+				</g>
+				{/* torso */}
+				<g transform={`translate(0 ${-cadera}) scale(1 ${respira})`}>
+					<rect x={-tw / 2} y={-torsoAlto} width={tw} height={torsoAlto + 8} rx={tw * 0.32} fill={c(ropa)} />
+					{silueta ? null : <path d={`M ${-tw * 0.18} ${-torsoAlto + 2} Q 0 ${-torsoAlto + 26} ${tw * 0.18} ${-torsoAlto + 2}`} fill={piel} />}
+				</g>
+				{/* brazo de enfrente (derecho) */}
+				<g transform={`translate(${tw / 2 - 6} ${hombroY})`}>
+					<Brazo lado={1} hombro={P.bd[0]} codo={P.bd[1]} ancho={30 * Math.min(1.15, ancho)} largo={150} ropa={c(ropa)} piel={c(piel)} />
+				</g>
+				{/* cabeza */}
+				<g transform={`translate(0 ${cabezaY + (expresion === 'triste' ? 4 : 0)}) rotate(${pose === 'pensar' ? -6 : Math.sin(t * 1.3 + fase) * 1.5})`}>
+					{silueta ? null : <Pelo peinado={peinado} color={pelo} r={cabezaR} capa="atras" />}
+					<rect x={-14} y={cabezaR - 14} width={28} height={24} fill={c(piel)} />
+					<circle r={cabezaR} fill={c(piel)} />
+					{silueta ? null : (
+						<>
+							<ellipse cx={-cabezaR + 2} cy={4} rx={9} ry={13} fill={piel} />
+							<ellipse cx={cabezaR - 2} cy={4} rx={9} ry={13} fill={piel} />
+							<Cara expresion={expresion} t={t} habla={hablando} parpadea={parpadea} mirar={mirar} rubor={rubor} enojo={enojo} />
+							<Pelo peinado={peinado} color={pelo} r={cabezaR} capa="frente" />
+							{accesorio ? <Accesorio tipo={accesorio} color={colorAccesorio} r={cabezaR} /> : null}
+						</>
+					)}
+				</g>
+			</g>
+		</g>
+	);
+};
+
+/** Varias personas en filas (público, fila, pueblo): colores y alturas variados, de atrás hacia adelante. */
+export const Multitud: React.FC<{
+	x?: number;
+	y?: number;
+	ancho?: number;
+	filas?: number;
+	porFila?: number;
+	alto?: number;
+	t?: number;
+	pose?: Pose;
+	expresion?: Expresion;
+	silueta?: string;
+	semilla?: number;
+}> = ({x = 0, y = 0, ancho = 1000, filas = 2, porFila = 6, alto = 300, t = 0, pose = 'parado', expresion = 'neutral', silueta, semilla = 0}) => (
+	<g>
+		{Array.from({length: filas}, (_, f) => {
+			const fila = filas - 1 - f; // la de atrás primero
+			const escala = 1 - fila * 0.14;
+			return Array.from({length: porFila}, (_, i) => {
+				const s = semilla + fila * 31 + i * 7;
+				const px = x - ancho / 2 + ((i + 0.5 + (fila % 2) * 0.5) / porFila) * ancho + (azarN(s) - 0.5) * 30;
+				return (
+					<Persona2D
+						key={`${fila}-${i}`}
+						x={px}
+						y={y - fila * alto * 0.22}
+						alto={alto * escala * (0.88 + azarN(s + 1) * 0.24)}
+						t={t}
+						semilla={s}
+						piel={PIELES[Math.floor(azarN(s + 2) * PIELES.length)]}
+						pelo={PELOS[Math.floor(azarN(s + 3) * PELOS.length)]}
+						peinado={(['corto', 'largo', 'chongo', 'rizado', 'calvo'] as Peinado[])[Math.floor(azarN(s + 4) * 5)]}
+						ropa={ROPAS[Math.floor(azarN(s + 5) * ROPAS.length)]}
+						pose={pose}
+						expresion={expresion}
+						silueta={silueta ? (fila > 0 ? silueta : silueta) : undefined}
+						mirar={(azarN(s + 6) - 0.5) * 1.4}
+					/>
+				);
+			});
+		})}
+	</g>
+);
+
+/**
+ * Globo de diálogo. (x, y) es la punta de la cola (la boca de quien habla); el globo queda arriba.
+ * `pensar` lo dibuja como nube de pensamiento. Aparece en `en` y se va en `hasta` (segundos).
+ */
+export const Globo: React.FC<{x: number; y: number; texto: string; ancho?: number; tam?: number; lado?: 'izq' | 'der'; pensar?: boolean; t?: number; en?: number; hasta?: number; fondo?: string; color?: string}> = ({
+	x,
+	y,
+	texto,
+	ancho = 420,
+	tam = 34,
+	lado = 'der',
+	pensar = false,
+	t = 1,
+	en = 0,
+	hasta = Infinity,
+	fondo = '#FFFFFF',
+	color = '#141414',
+}) => {
+	// entra en `en` y se va en `hasta` (se encoge en 0.25 s)
+	const k = Math.min(clamp01((t - en) / 0.3), clamp01((hasta - t) / 0.25));
+	if (k <= 0) return null;
+	const lineas = Math.max(1, Math.ceil((texto.length * tam * 0.55) / (ancho - 50)));
+	const alto = lineas * tam * 1.25 + 44;
+	const bx = lado === 'der' ? x - 40 : x - ancho + 40;
+	const by = y - 46 - alto;
+	const s = 0.6 + 0.4 * (1 - Math.pow(1 - k, 3)) + Math.sin(k * Math.PI) * 0.06;
+	return (
+		<g transform={`translate(${x} ${y}) scale(${s}) translate(${-x} ${-y})`} opacity={clamp01(k * 3)}>
+			{pensar ? (
+				<>
+					<circle cx={x} cy={y - 10} r={8} fill={fondo} />
+					<circle cx={x + (lado === 'der' ? 10 : -10)} cy={y - 32} r={13} fill={fondo} />
+				</>
+			) : (
+				<path d={`M ${x} ${y} L ${x + (lado === 'der' ? 10 : -10)} ${by + alto - 4} L ${x + (lado === 'der' ? 46 : -46)} ${by + alto - 4} Z`} fill={fondo} />
+			)}
+			<rect x={bx} y={by} width={ancho} height={alto} rx={pensar ? alto / 2 : 28} fill={fondo} style={{filter: 'drop-shadow(0 6px 10px rgba(0,0,0,0.25))'}} />
+			<foreignObject x={bx + 20} y={by + 16} width={ancho - 40} height={alto - 28}>
+				<div style={{fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: tam, lineHeight: 1.22, color, textAlign: 'center'}}>{texto}</div>
+			</foreignObject>
+		</g>
+	);
+};

package/remotion/kit/tres.tsx

@@ -14,7 +14,7 @@ import {azarN} from './ilustrado';
 
 export {Objeto3D} from '../motor/objetos3d';
 
-type V3 = [number, number, number];
+export type V3 = [number, number, number];
 const suave = (x: number) => {
 	const c = Math.max(0, Math.min(1, x));
 	return c * c * (3 - 2 * c);
@@ -250,9 +250,9 @@ export const Lienzo3D: React.FC<{
 	);
 };
 
-type Pieza = {pos?: V3; rot?: V3; escala?: number};
+export type Pieza = {pos?: V3; rot?: V3; escala?: number};
 const RAD = Math.PI / 180;
-const grupo = (p: Pieza) => ({position: p.pos ?? ([0, 0, 0] as V3), rotation: (p.rot ?? [0, 0, 0]).map((g) => g * RAD) as V3, scale: p.escala ?? 1});
+export const grupo = (p: Pieza) => ({position: p.pos ?? ([0, 0, 0] as V3), rotation: (p.rot ?? [0, 0, 0]).map((g) => g * RAD) as V3, scale: p.escala ?? 1});
 
 /** Bloque de color mate: la pieza base para cajas, muros, banquetas, cualquier cosa. */
 export const Bloque: React.FC<Pieza & {tam: V3; color: string; rugosidad?: number; metal?: number; opacidad?: number; radio?: number}> = ({tam, color, rugosidad = 0.8, metal = 0, opacidad, ...p}) => (

package/remotion/motor/capas.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import {Img, OffthreadVideo} from 'remotion';
 import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
-import {H, W, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
+import {H, W, ancho, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
 import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
 import {FICHAS, Fichas} from './fichas';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
@@ -284,6 +284,30 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 	}
 };
 
+/**
+ * Tamaño de letra que cabe: si la palabra más larga no entra en el ancho disponible, o el texto ocuparía más de
+ * `maxLineas` renglones (3 por defecto), se achica. `ajustar: false` lo apaga. Mide con la fuente ya cargada.
+ */
+function tamQueCabe(c: Capa, texto: string, fuente: string, T: CtxEscena['tema']): number {
+	let tam: number = c.tam ?? 96;
+	if (c.ajustar === false || !texto) return tam;
+	const relleno = c.fondo ? 60 : 0;
+	const disponible = (typeof c.ancho === 'number' ? c.ancho : typeof c.maxAncho === 'number' ? c.maxAncho : 940) - relleno;
+	const peso = c.peso ?? (fuente === T.fuentes.titulo ? 800 : 600);
+	const limpio = texto.replace(/\*/g, '');
+	try {
+		const palabras = limpio.split(/\s+/).filter(Boolean);
+		const masLarga = Math.max(...palabras.map((w) => ancho(w, fuente, tam, peso)));
+		if (masLarga > disponible) tam *= disponible / masLarga;
+		const maxLineas = c.maxLineas ?? 3;
+		const lineas = limpio.split('\n').reduce((n, l) => n + Math.max(1, Math.ceil((ancho(l, fuente, tam, peso) * 1.08) / disponible)), 0);
+		if (lineas > maxLineas) tam *= Math.sqrt(maxLineas / lineas);
+	} catch {
+		// la fuente aún no está cargada (p. ej. en el editor): se queda el tamaño pedido
+	}
+	return Math.max(28, Math.floor(tam));
+}
+
 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);
@@ -300,11 +324,12 @@ const TextoCapa: React.FC<{c: Capa; ctx: CtxEscena; fuente: string}> = ({c, ctx,
 	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;
+	const tam = tamQueCabe(c, texto, fuente, T);
 	return (
 		<div
 			style={{
 				fontFamily: fuente,
-				fontSize: c.tam ?? 96,
+				fontSize: tam,
 				fontWeight: c.peso ?? (fuente === T.fuentes.titulo ? 800 : 600),
 				lineHeight: c.interlineado ?? 1.05,
 				color,