morfeo 0.2.1 → 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);
@@ -26,7 +26,20 @@ const mezcla = (a: V3, b: V3, k: number): V3 => [a[0] + (b[0] - a[0]) * k, a[1]
  * escena; sin `a` se acerca un poco sola (`deriva`, 0.06 = 6 % del camino hacia lo que mira). `corte` salta sin viaje.
  */
 export type Toma3D = {pos: V3; mirar?: V3; fov?: number; a?: {pos?: V3; mirar?: V3; fov?: number}; viaje?: number; corte?: boolean; deriva?: number};
-type Estado = {pos: V3; mirar: V3; fov: number};
+export type Estado = {pos: V3; mirar: V3; fov: number};
+
+/**
+ * Dónde cae un punto 3D en la pantalla (1080×1920) con la cámara de este cuadro. Devuelve {x, y, visible}:
+ * `visible` es falso si el punto queda detrás de la cámara. Sirve para pegar etiquetas 2D a objetos 3D.
+ */
+export function proyectar(estado: Estado, punto: V3, ancho = 1080, alto = 1920): {x: number; y: number; visible: boolean} {
+	const cam = new THREE.PerspectiveCamera(estado.fov, ancho / alto, 0.1, 400);
+	cam.position.set(...estado.pos);
+	cam.lookAt(...estado.mirar);
+	cam.updateMatrixWorld(true);
+	const v = new THREE.Vector3(...punto).project(cam);
+	return {x: ((v.x + 1) / 2) * ancho, y: ((1 - v.y) / 2) * alto, visible: v.z < 1 && v.z > -1};
+}
 
 /** Cámara del cuadro actual. `tomas[i]` es la de la escena i+1; si falta, se conserva la anterior. */
 export function camara3D(tomas: (Toma3D | undefined | null)[], escena: number, tEscena: number, inicios?: number[]): Estado {
@@ -85,10 +98,104 @@ const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	return null;
 };
 
+/** Luz del cielo según la hora (0–24): mediodía claro, atardecer naranja, noche azul con luna. */
+type Cielo = {fondo: string; sol: string; fuerzaSol: number; arriba: string; abajo: string; fuerzaHemi: number; entorno: number; altura: number};
+const CIELOS: [number, Cielo][] = [
+	[0, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+	[6, {fondo: '#F6C7A0', sol: '#FFB27A', fuerzaSol: 1.4, arriba: '#FFE1C2', abajo: '#9C8A70', fuerzaHemi: 0.8, entorno: 0.4, altura: 0.25}],
+	[9, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[16, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[18.5, {fondo: '#F4A26B', sol: '#FF8A3D', fuerzaSol: 1.8, arriba: '#FFD2A8', abajo: '#8A6A55', fuerzaHemi: 0.75, entorno: 0.38, altura: 0.22}],
+	[20.5, {fondo: '#2A2F55', sol: '#8FA4FF', fuerzaSol: 0.6, arriba: '#6474B8', abajo: '#20233A', fuerzaHemi: 0.55, entorno: 0.2, altura: 0.6}],
+	[24, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+];
+const HORAS: Record<string, number> = {amanecer: 6.5, manana: 10, mañana: 10, dia: 12, día: 12, tarde: 16, atardecer: 18.5, noche: 22};
+const colorMezcla = (a: string, b: string, k: number) => '#' + new THREE.Color(a).lerp(new THREE.Color(b), k).getHexString();
+/** Cielo y luces para una hora (número 0–24 o 'dia', 'atardecer', 'noche'...). */
+export function cieloDeHora(hora: number | string): Cielo {
+	const h = (((typeof hora === 'string' ? HORAS[hora] ?? 12 : hora) % 24) + 24) % 24;
+	let i = CIELOS.findIndex(([x]) => x > h);
+	if (i <= 0) i = CIELOS.length - 1;
+	const [h0, a] = CIELOS[i - 1];
+	const [h1, b] = CIELOS[i];
+	const k = suave((h - h0) / (h1 - h0));
+	const n = (x: number, y: number) => x + (y - x) * k;
+	return {fondo: colorMezcla(a.fondo, b.fondo, k), sol: colorMezcla(a.sol, b.sol, k), fuerzaSol: n(a.fuerzaSol, b.fuerzaSol), arriba: colorMezcla(a.arriba, b.arriba, k), abajo: colorMezcla(a.abajo, b.abajo, k), fuerzaHemi: n(a.fuerzaHemi, b.fuerzaHemi), entorno: n(a.entorno, b.entorno), altura: n(a.altura, b.altura)};
+}
+
+/** Activa el recorte por planos (para `Corte`, la vista de rayos X). */
+const Recorte: React.FC = () => {
+	const {gl} = useThree();
+	useLayoutEffect(() => {
+		gl.localClippingEnabled = true;
+	}, [gl]);
+	return null;
+};
+
+/**
+ * Etiqueta pegada a un punto 3D: pastilla de color con una flecha que apunta al objeto. Sigue al objeto cuando la
+ * cámara se mueve. `escena` (1, 2...) la limita a esa escena; `en`/`hasta` son segundos desde que empieza.
+ */
+export type Etiqueta3D = {
+	pos: V3;
+	texto: string;
+	escena?: number | number[];
+	en?: number;
+	hasta?: number;
+	color?: string;
+	colorTexto?: string;
+	/** Hacia dónde sale la pastilla desde el objeto. */
+	lado?: 'arriba' | 'abajo' | 'izq' | 'der';
+	/** Largo de la flecha (px). */
+	largo?: number;
+	tam?: number;
+	inclinar?: number;
+};
+
+const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; escena: number; tEscena: number}> = ({etiquetas, estado, escena, tEscena}) => (
+	<>
+		{etiquetas.map((e, i) => {
+			const escenas = e.escena == null ? null : ([] as number[]).concat(e.escena);
+			if (escenas && !escenas.includes(escena)) return null;
+			const t = tEscena - (e.en ?? 0.2);
+			if (t < 0 || (e.hasta != null && tEscena > e.hasta)) return null;
+			const p = proyectar(estado, e.pos);
+			if (!p.visible) return null;
+			const lado = e.lado ?? 'arriba';
+			const largo = e.largo ?? 110;
+			const tam = e.tam ?? 40;
+			const k = Math.min(1, t / 0.35);
+			const pop = 1 - Math.exp(-7 * k) * Math.cos(k * 7.5);
+			const flecha = largo * Math.min(1, t / 0.25);
+			const [dx, dy] = lado === 'arriba' ? [0, -1] : lado === 'abajo' ? [0, 1] : lado === 'izq' ? [-1, 0] : [1, 0];
+			const fx = p.x + dx * flecha;
+			const fy = p.y + dy * flecha;
+			const color = e.color ?? '#2D7BFF';
+			const ang = (Math.atan2(-dy, -dx) * 180) / Math.PI;
+			const transform = lado === 'arriba' ? 'translate(-50%, -100%)' : lado === 'abajo' ? 'translate(-50%, 0)' : lado === 'izq' ? 'translate(-100%, -50%)' : 'translate(0, -50%)';
+			return (
+				<React.Fragment key={i}>
+					<svg width={1080} height={1920} style={{position: 'absolute', left: 0, top: 0, pointerEvents: 'none'}}>
+						<line x1={fx} y1={fy} x2={p.x - dx * 6} y2={p.y - dy * 6} stroke={color} strokeWidth={9} strokeLinecap="round" />
+						<g transform={`translate(${p.x} ${p.y}) rotate(${ang})`}>
+							<path d="M 0 0 L -30 -17 L -30 17 Z" fill={color} />
+						</g>
+					</svg>
+					<div style={{position: 'absolute', left: fx, top: fy, transform: `${transform} scale(${pop}) rotate(${e.inclinar ?? -3}deg)`, transformOrigin: 'center', background: color, color: e.colorTexto ?? '#FFFFFF', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: tam, padding: `${tam * 0.22}px ${tam * 0.5}px`, borderRadius: tam * 0.3, border: '4px solid rgba(255,255,255,0.95)', boxShadow: '0 8px 18px rgba(0,0,0,0.3)', whiteSpace: 'nowrap', letterSpacing: 0.5}}>
+						{e.texto}
+					</div>
+				</React.Fragment>
+			);
+		})}
+	</>
+);
+
 /**
  * El lienzo del mundo 3D (1080×1920). `luz`:
  *   'dia'     cielo claro, sol con sombras suaves (maquetas, cortes de terreno, low-poly)
  *   'calida'  cuarto oscuro con un foco cálido desde arriba y su cono visible (mesa, dinero, objetos)
+ * `hora` (0–24 o 'atardecer', 'noche'...) cambia el cielo y el sol de la luz 'dia'; anímala para pasar de día a noche.
+ * `etiquetas`: pastillas con flecha pegadas a puntos 3D (siguen al objeto con la cámara).
  */
 export const Lienzo3D: React.FC<{
 	tomas: (Toma3D | undefined | null)[];
@@ -96,25 +203,32 @@ export const Lienzo3D: React.FC<{
 	tEscena?: number;
 	inicios?: number[];
 	luz?: 'dia' | 'calida';
+	hora?: number | string;
 	fondo?: string;
 	niebla?: [number, number];
 	sol?: V3;
 	foco?: V3;
+	etiquetas?: Etiqueta3D[];
+	/** Encima del 3D, en coordenadas de pantalla (texto, tarjetas). */
+	encima?: React.ReactNode;
 	children: React.ReactNode;
-}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], children}) => {
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', hora, fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], etiquetas, encima, children}) => {
 	const estado = camara3D(tomas, escena, tEscena, inicios);
-	const color = fondo ?? (luz === 'dia' ? '#BFE3FF' : '#120A06');
+	const cielo = cieloDeHora(hora ?? 12);
+	const color = fondo ?? (luz === 'dia' ? cielo.fondo : '#120A06');
+	const posSol: V3 = [sol[0], sol[1] * cielo.altura + 1.5, sol[2]];
 	return (
-		<div style={{width: 1080, height: 1920}}>
+		<div style={{position: 'relative', width: 1080, height: 1920}}>
 			<ThreeCanvas width={1080} height={1920} shadows gl={{antialias: true}} camera={{fov: estado.fov, position: estado.pos, near: 0.1, far: 400}}>
 				<color attach="background" args={[color]} />
 				{niebla ? <fog attach="fog" args={[color, niebla[0], niebla[1]]} /> : null}
 				<Camara estado={estado} />
+				<Recorte />
 				{luz === 'dia' ? (
 					<>
-						<Entorno fuerza={0.55} />
-						<hemisphereLight args={['#ffffff', '#b9a98a', 1.05]} />
-						<directionalLight position={sol} intensity={2.3} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
+						<Entorno fuerza={cielo.entorno} />
+						<hemisphereLight args={[cielo.arriba, cielo.abajo, cielo.fuerzaHemi]} />
+						<directionalLight position={posSol} color={cielo.sol} intensity={cielo.fuerzaSol} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
 					</>
 				) : (
 					<>
@@ -130,13 +244,15 @@ export const Lienzo3D: React.FC<{
 				)}
 				{children}
 			</ThreeCanvas>
+			{etiquetas?.length ? <EtiquetasPantalla etiquetas={etiquetas} estado={estado} escena={escena} tEscena={tEscena} /> : null}
+			{encima}
 		</div>
 	);
 };
 
-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/Video.tsx

@@ -129,26 +129,32 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	const limpio = texto.replace(/\*/g, '');
 	const fuente = tema.fuentes.titulo;
 	// cabe en 940 px: se achica si hace falta (el ancho se mide con la fuente ya cargada)
-	let tam = e.p.rotuloTam ?? 104;
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 104;
 	try {
 		const w = ancho(may ? limpio.toUpperCase() : limpio, fuente, tam, 900);
 		if (w > 940) tam = Math.max(56, Math.floor((tam * 940) / w));
 	} catch {}
 	const claro = tema.colores.texto !== '#FFFFFF';
-	const contorno = !claro && (S.contorno ?? 0) > 0;
+	const estilo = e.p.rotuloEstilo ?? tema.rotulo?.estilo ?? 'normal';
+	const contorno = estilo === 'contorno' || (estilo === 'normal' && !claro && (S.contorno ?? 0) > 0);
+	const grosor = estilo === 'contorno' ? Math.max(8, Math.round(tam * 0.11)) : S.contorno;
+	const pastilla = estilo === 'pastilla';
+	const inclinar = e.p.rotuloInclinar ?? tema.rotulo?.inclinar ?? (pastilla ? -3 : 0);
+	const y = tema.rotulo?.y ?? (abajo ? 1470 : 330);
 	return (
-		<div style={{position: 'absolute', left: 50, width: W - 100, top: abajo ? 1470 : 330, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)})`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
+		<div style={{position: 'absolute', left: 50, width: W - 100, top: y, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)}) rotate(${inclinar}deg)`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
 			<span
 				style={{
 					fontFamily: fuente,
 					fontWeight: 900,
-					fontSize: tam,
+					fontSize: pastilla ? tam * 0.82 : tam,
 					lineHeight: 1.05,
-					color: tema.colores.texto,
+					color: pastilla || estilo === 'contorno' ? '#FFFFFF' : tema.colores.texto,
 					textTransform: may ? 'uppercase' : undefined,
-					WebkitTextStroke: contorno ? `${S.contorno}px #000` : undefined,
+					WebkitTextStroke: contorno ? `${grosor}px #1B1B1F` : undefined,
 					paintOrder: 'stroke fill',
-					textShadow: claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+					textShadow: pastilla ? undefined : estilo === 'contorno' ? '0 7px 0 rgba(0,0,0,0.28)' : claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+					...(pastilla ? {display: 'inline-block', background: '#1E1F24', padding: `${tam * 0.12}px ${tam * 0.32}px`, borderRadius: tam * 0.22, boxShadow: '0 10px 24px rgba(0,0,0,0.3)', border: '4px solid rgba(255,255,255,0.9)'} : {}),
 				}}
 			>
 				{partesResaltadas(texto).map(([p, r], i) => (