morfeo 0.3.0 → 0.3.1

package/remotion/kit/escenarios2d.tsx

@@ -0,0 +1,250 @@
+// Escenarios 2D listos (van DENTRO de un <svg>, normalmente como fondo de un `mundo` de 2160×1920).
+// Todos aceptan `ancho` (del mundo), `suelo` (altura del piso), `t` (para lo que se mueve) y `camara` (paralaje).
+// Combínalos con Persona2D, Multitud y Globo (kit/personas.tsx) y con las anotaciones del motor.
+//
+//   <CiudadNoche t={t} camara={camara} />   <Cuarto pared="#2E5A4C" />   <Campo t={t} />   <Calle t={t} />
+//   <Oficina />   <Mar t={t} profundo />
+import React from 'react';
+import {Cielo, ConoLuz, Estrellas, Montanas, Paralaje, Pasto, Pinos, Suelo, alturaSuelo, azarN, type Camara} from './ilustrado';
+
+type Base = {ancho?: number; suelo?: number; t?: number; camara?: Camara; semilla?: number};
+
+/** Edificios con ventanas (algunas encendidas que parpadean poco a poco). */
+const Edificios: React.FC<{x0: number; x1: number; base: number; alto: number; color: string; luz: string; t: number; semilla: number; n?: number}> = ({x0, x1, base, alto, color, luz, t, semilla, n = 9}) => {
+	const ancho = (x1 - x0) / n;
+	return (
+		<g>
+			{Array.from({length: n}, (_, i) => {
+				const s = semilla + i * 13;
+				const w = ancho * (0.7 + azarN(s) * 0.28);
+				const h = alto * (0.45 + azarN(s + 1) * 0.55);
+				const x = x0 + i * ancho + (ancho - w) / 2;
+				const cols = Math.max(2, Math.floor(w / 46));
+				const filas = Math.max(3, Math.floor(h / 62));
+				return (
+					<g key={i}>
+						<rect x={x} y={base - h} width={w} height={h + 400} fill={color} />
+						{Array.from({length: cols * filas}, (_, j) => {
+							const c = j % cols;
+							const f = Math.floor(j / cols);
+							const on = azarN(s + j * 3) > 0.55;
+							if (!on) return null;
+							const brillo = 0.75 + 0.25 * Math.sin(t * (0.3 + azarN(s + j) * 0.5) + j);
+							return <rect key={j} x={x + 14 + c * ((w - 28) / cols)} y={base - h + 22 + f * 62} width={(w - 28) / cols - 14} height={34} rx={3} fill={luz} opacity={brillo} />;
+						})}
+					</g>
+				);
+			})}
+		</g>
+	);
+};
+
+/** Ciudad de noche: cielo, estrellas, edificios en tres planos con ventanas, calle. */
+export const CiudadNoche: React.FC<Base & {luz?: string}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, luz = '#FFD27A'}) => (
+	<g>
+		<Paralaje camara={camara} profundidad={0.9}>
+			<Cielo id="cn-cielo" colores={['#070A1F', '#141B45', '#2B2A63', '#4A3A73']} />
+			<Estrellas t={t} n={80} y1={900} semilla={semilla} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.55}>
+			<Edificios x0={-500} x1={ancho + 500} base={suelo - 60} alto={900} color="#1B2350" luz="#6C77C9" t={t} semilla={semilla + 1} n={14} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.25}>
+			<Edificios x0={-400} x1={ancho + 400} base={suelo - 10} alto={1050} color="#141A3A" luz={luz} t={t} semilla={semilla + 2} n={10} />
+		</Paralaje>
+		<rect x={-800} y={suelo} width={ancho + 1600} height={800} fill="#20222C" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={14} fill="#3A3D4A" />
+		{Array.from({length: Math.ceil((ancho + 1600) / 240)}, (_, i) => (
+			<rect key={i} x={-800 + i * 240} y={suelo + 150} width={130} height={14} rx={7} fill="#E8C35A" opacity={0.7} />
+		))}
+	</g>
+);
+
+/** Interior: pared con zoclo, piso de madera, ventana, cuadro y lámpara con su cono de luz. */
+export const Cuarto: React.FC<Base & {pared?: string; piso?: string; noche?: boolean; ventana?: boolean; lampara?: boolean; cuadro?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, pared = '#2E5A4C', piso = '#7A4A2A', noche = true, ventana = true, lampara = true, cuadro = true}) => (
+	<g>
+		<rect x={-800} y={-800} width={ancho + 1600} height={suelo + 800} fill={pared} />
+		{/* papel tapiz: rombos sutiles */}
+		<g opacity={0.08} fill="#000">
+			{Array.from({length: 40 * 30}, (_, i) => {
+				const c = i % 40;
+				const f = Math.floor(i / 40);
+				return <path key={i} d={`M ${-800 + c * 110 + (f % 2) * 55} ${-800 + f * 80} l 18 26 l -18 26 l -18 -26 Z`} />;
+			})}
+		</g>
+		<rect x={-800} y={suelo - 140} width={ancho + 1600} height={140} fill="rgba(0,0,0,0.22)" />
+		<rect x={-800} y={suelo - 150} width={ancho + 1600} height={14} fill="rgba(255,255,255,0.12)" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill={piso} />
+		{Array.from({length: 30}, (_, i) => (
+			<rect key={i} x={-800} y={suelo + 30 + i * 46} width={ancho + 1600} height={3} fill="rgba(0,0,0,0.18)" />
+		))}
+		{ventana ? (
+			<g transform={`translate(${ancho * 0.72} ${suelo - 1000})`}>
+				<rect x={-20} y={-20} width={420} height={520} rx={10} fill="#E9E1D2" />
+				<rect width={380} height={480} fill={noche ? '#1A2350' : '#9FD4F5'} />
+				{noche ? <circle cx={270} cy={120} r={46} fill="#FFF4D6" /> : <circle cx={270} cy={120} r={54} fill="#FFE27A" />}
+				<rect x={186} width={8} height={480} fill="#E9E1D2" />
+				<rect y={236} width={380} height={8} fill="#E9E1D2" />
+			</g>
+		) : null}
+		{cuadro ? (
+			<g transform={`translate(${ancho * 0.3} ${suelo - 1050})`}>
+				<rect x={-16} y={-16} width={352} height={262} fill="#B8873A" />
+				<rect width={320} height={230} fill="#8FD0C4" />
+				<path d="M 0 230 L 90 120 L 170 190 L 240 110 L 320 230 Z" fill="#3E8A55" />
+				<circle cx={250} cy={60} r={26} fill="#F5D46A" />
+			</g>
+		) : null}
+		{lampara ? (
+			<g transform={`translate(${ancho * 0.12} ${suelo})`}>
+				<ConoLuz id="cuarto-cono" x={0} y={-640} ancho={720} largo={700} fuerza={0.4 + 0.03 * Math.sin(t * 2)} />
+				<rect x={-6} y={-600} width={12} height={600} fill="#2A2420" />
+				<ellipse cx={0} cy={0} rx={70} ry={14} fill="#2A2420" />
+				<path d="M -90 -640 L 90 -640 L 60 -760 L -60 -760 Z" fill="#F2D49B" />
+			</g>
+		) : null}
+	</g>
+);
+
+/** Campo abierto de día: cielo, sol, nubes que avanzan, montañas, árboles y pasto. */
+export const Campo: React.FC<Base & {tarde?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, tarde = false}) => (
+	<g>
+		<Paralaje camara={camara} profundidad={0.9}>
+			<Cielo id="campo-cielo" colores={tarde ? ['#F7B267', '#F4845F', '#F27059'] : ['#7EC8F2', '#B6E2F7', '#E8F6FC']} />
+			<circle cx={ancho * 0.75} cy={380} r={110} fill={tarde ? '#FFE3A3' : '#FFF1A8'} />
+			{[0, 1, 2, 3].map((i) => {
+				const x = ((azarN(semilla + i) * (ancho + 800) + t * (18 + i * 6)) % (ancho + 1200)) - 600;
+				const y = 220 + azarN(semilla + i + 9) * 380;
+				return (
+					<g key={i} transform={`translate(${x} ${y}) scale(${0.8 + azarN(i) * 0.6})`} fill="#fff" opacity={0.92}>
+						<circle cx={0} cy={0} r={60} />
+						<circle cx={70} cy={-20} r={75} />
+						<circle cx={150} cy={0} r={55} />
+						<rect x={0} y={0} width={150} height={55} />
+					</g>
+				);
+			})}
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.6}>
+			<Montanas base={suelo - 220} alto={500} semilla={semilla + 3} color={tarde ? '#B5656B' : '#8DB7C9'} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.3}>
+			<Pinos base={suelo - 60} alto={420} ancho={190} n={18} semilla={semilla + 7} color={tarde ? '#4E5B3A' : '#3E8A55'} />
+		</Paralaje>
+		<Suelo y={suelo} colores={tarde ? ['#8DA05A', '#55623A'] : ['#7CC45A', '#3E8A3E']} id="campo-suelo" />
+		<Pasto y={suelo} t={t} n={180} color={tarde ? '#6E7F44' : '#5AA845'} semilla={semilla + 11} />
+	</g>
+);
+
+/** Calle de día con banqueta, casas al fondo y postes. */
+export const Calle: React.FC<Base & {noche?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, noche = false}) => {
+	const casas = ['#F2E6D0', '#F7D9C4', '#DDE8F0', '#F4E3A1', '#E8D5F0'];
+	return (
+		<g>
+			<Paralaje camara={camara} profundidad={0.9}>
+				<Cielo id="calle-cielo" colores={noche ? ['#0B1033', '#232A63'] : ['#8FD0F5', '#DDF2FC']} />
+			</Paralaje>
+			<Paralaje camara={camara} profundidad={0.3}>
+				<g>
+					{Array.from({length: 8}, (_, i) => {
+						const x = -400 + i * ((ancho + 800) / 8);
+						const w = 300 + azarN(semilla + i) * 60;
+						const h = 320 + azarN(semilla + i + 3) * 140;
+						return (
+							<g key={i}>
+								<rect x={x} y={suelo - 120 - h} width={w} height={h} fill={casas[i % casas.length]} />
+								<path d={`M ${x - 20} ${suelo - 120 - h} L ${x + w / 2} ${suelo - 120 - h - 150} L ${x + w + 20} ${suelo - 120 - h} Z`} fill={['#D9533B', '#8A3B2A', '#4A5A7A'][i % 3]} />
+								<rect x={x + w * 0.4} y={suelo - 120 - 170} width={70} height={170} fill="#7A4E2D" />
+								<rect x={x + w * 0.1} y={suelo - 120 - h + 60} width={80} height={70} fill={noche ? '#FFD27A' : '#9AD4F5'} />
+								<rect x={x + w * 0.65} y={suelo - 120 - h + 60} width={80} height={70} fill={noche ? '#FFD27A' : '#9AD4F5'} />
+							</g>
+						);
+					})}
+				</g>
+			</Paralaje>
+			<rect x={-800} y={suelo - 120} width={ancho + 1600} height={120} fill="#C9C4BA" />
+			<rect x={-800} y={suelo - 124} width={ancho + 1600} height={10} fill="#E2DDD3" />
+			<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill="#3E4250" />
+			{Array.from({length: Math.ceil((ancho + 1600) / 260)}, (_, i) => (
+				<rect key={i} x={-800 + i * 260 - ((t * 0) % 260)} y={suelo + 210} width={140} height={16} rx={8} fill="#F2D04A" />
+			))}
+			{[0.15, 0.55, 0.92].map((f, i) => (
+				<g key={i} transform={`translate(${ancho * f} ${suelo - 120})`}>
+					<rect x={-8} y={-620} width={16} height={620} fill="#5A5F6B" />
+					<rect x={-8} y={-620} width={110} height={12} fill="#5A5F6B" />
+					<ellipse cx={100} cy={-602} rx={24} ry={10} fill={noche ? '#FFE9A8' : '#C9CED6'} />
+				</g>
+			))}
+		</g>
+	);
+};
+
+/** Oficina: pared clara, escritorio con monitor, planta y repisa. */
+export const Oficina: React.FC<Base> = ({ancho = 2160, suelo = 1500, t = 0}) => (
+	<g>
+		<rect x={-800} y={-800} width={ancho + 1600} height={suelo + 800} fill="#E8E4DC" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill="#B9A58A" />
+		<rect x={-800} y={suelo - 10} width={ancho + 1600} height={10} fill="#9C8A70" />
+		<g transform={`translate(${ancho * 0.62} ${suelo})`}>
+			<rect x={-360} y={-420} width={720} height={36} rx={8} fill="#8A5A3B" />
+			<rect x={-330} y={-384} width={30} height={384} fill="#6B4630" />
+			<rect x={300} y={-384} width={30} height={384} fill="#6B4630" />
+			<rect x={-150} y={-720} width={300} height={200} rx={14} fill="#22252E" />
+			<rect x={-136} y={-706} width={272} height={172} rx={8} fill="#3B7BE0" opacity={0.85 + 0.1 * Math.sin(t * 2)} />
+			<rect x={-20} y={-520} width={40} height={100} fill="#22252E" />
+			<rect x={-90} y={-430} width={180} height={14} rx={5} fill="#22252E" />
+		</g>
+		<g transform={`translate(${ancho * 0.2} ${suelo})`}>
+			<path d="M -70 0 L 70 0 L 55 -150 L -55 -150 Z" fill="#C9653E" />
+			{[-50, -20, 10, 40].map((x, i) => (
+				<ellipse key={i} cx={x} cy={-230 - (i % 2) * 40} rx={36} ry={90} fill="#3E8A55" transform={`rotate(${(i - 1.5) * 18} ${x} -160)`} />
+			))}
+		</g>
+		<g transform={`translate(${ancho * 0.3} ${suelo - 1100})`}>
+			<rect x={-200} y={0} width={400} height={20} fill="#8A5A3B" />
+			{['#E04A4A', '#2F6FE0', '#F2B632', '#2FA36B'].map((c, i) => (
+				<rect key={i} x={-180 + i * 50} y={-130 + (i % 2) * 20} width={40} height={130 - (i % 2) * 20} fill={c} />
+			))}
+		</g>
+	</g>
+);
+
+/** Mar: superficie con olas o fondo marino con rayos de luz y burbujas (`profundo`). */
+export const Mar: React.FC<Base & {profundo?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, profundo = false}) => {
+	if (profundo)
+		return (
+			<g>
+				<Cielo id="mar-fondo" colores={['#0E5AA0', '#073A70', '#031A38']} />
+				<g style={{mixBlendMode: 'screen'}} opacity={0.18} filter="url(#kit-lejos)">
+					{Array.from({length: 9}, (_, i) => {
+						const x = -300 + i * ((ancho + 600) / 9) + Math.sin(t * 0.4 + i) * 40;
+						return <polygon key={i} points={`${x},-400 ${x + 90},-400 ${x + 260},${suelo + 200} ${x + 60},${suelo + 200}`} fill="#BFE3FF" />;
+					})}
+				</g>
+				{Array.from({length: 40}, (_, i) => {
+					const s = semilla + i;
+					const y = ((suelo + 300 - ((t * (40 + azarN(s) * 60) + azarN(s + 1) * 2000) % 2400)) as number);
+					return <circle key={i} cx={azarN(s + 2) * ancho + Math.sin(t + i) * 12} cy={y} r={3 + azarN(s + 3) * 7} fill="none" stroke="rgba(200,235,255,0.5)" strokeWidth={2} />;
+				})}
+				<path d={`M -800 ${suelo + 120} ${Array.from({length: 30}, (_, i) => `L ${-800 + i * 140} ${suelo + 100 + Math.sin(i * 1.3) * 30}`).join(' ')} L ${ancho + 800} ${suelo + 900} L -800 ${suelo + 900} Z`} fill="#0A2440" />
+			</g>
+		);
+	const ola = (y: number, amp: number, fase: number, color: string) => {
+		let d = `M -800 ${y}`;
+		for (let x = -800; x <= ancho + 800; x += 40) d += ` L ${x} ${y + Math.sin(x / 120 + t * 1.6 + fase) * amp}`;
+		return <path d={`${d} L ${ancho + 800} ${y + 1200} L -800 ${y + 1200} Z`} fill={color} />;
+	};
+	return (
+		<g>
+			<Paralaje camara={camara} profundidad={0.9}>
+				<Cielo id="mar-cielo" colores={['#7EC8F2', '#CDEBFA']} />
+				<circle cx={ancho * 0.25} cy={420} r={100} fill="#FFF1A8" />
+			</Paralaje>
+			{ola(suelo - 180, 10, 0, '#4FA7E0')}
+			{ola(suelo - 80, 16, 1.4, '#2E86C9')}
+			{ola(suelo + 40, 22, 2.6, '#1E6AA8')}
+		</g>
+	);
+};
+
+export {alturaSuelo};

package/remotion/kit/index.ts

@@ -1,7 +1,14 @@
 // Kits de Morfeo: piezas para armar las escenas a medida de un video dentro de tus `componentes`.
 //   import {Cielo, Pinos, Paralaje} from 'morfeo/kit';          (2D ilustrado, dentro de un <svg>)
-//   import {Lienzo3D, Terreno, Tubo, Mesa, Pila} from 'morfeo/kit';   (3D: maqueta de día o mesa con luz cálida)
+//   import {Persona2D, Multitud, Globo, CiudadNoche, Cuarto} from 'morfeo/kit';   (personajes y escenarios 2D)
+//   import {Lienzo3D, Persona3D, Ciudad, Terreno, Tubo, Mesa, Pila} from 'morfeo/kit';   (3D: de día o con luz cálida)
+//   import {Maqueta, Modelo, Persona, Coche, Trafico, Corte} from 'morfeo/kit';   (diorama low-poly)
+//   import {GraficaBarras, GraficaLinea, Comparacion, Lupa} from 'morfeo/kit';   (datos 2D)
 export * from './ilustrado';
+export * from './personas';
+export * from './escenarios2d';
 export * from './tres';
-export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
+export * from './mundo3d';
+export * from './datos';
 export * from './diorama';
+export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';

package/remotion/kit/mundo3d.tsx

@@ -0,0 +1,251 @@
+// Más piezas 3D para `Lienzo3D` (kit/tres.tsx): personas low-poly con cara y expresiones (Persona3D), ciudad, cuarto y camino.
+// `Persona` (kit/diorama.tsx) es la figura de maqueta (casco, chaleco); `Persona3D` es la de historias, con expresiones.
+// Mismo estilo que Arbol/Casa: geometría facetada y materiales mate. Todo depende de props y de `t`.
+//
+//   <Persona3D pos={[0, 0, 2]} t={t} ropa="#2F6FE0" expresion="sorpresa" pose="señalar" />
+//   <Ciudad t={t} noche />   <Cuarto3D />   <Camino largo={30} />   (el coche es `Coche` de kit/diorama.tsx)
+import React from 'react';
+import * as THREE from 'three';
+import {azarN} from './ilustrado';
+import type {Expresion, Pose} from './personas';
+import {grupo, type Pieza, type V3} from './tres';
+
+const Mate: React.FC<{c: string; r?: number; m?: number; e?: number}> = ({c, r = 0.8, m = 0, e = 0}) => (
+	<meshStandardMaterial color={c} roughness={r} metalness={m} emissive={e ? c : '#000000'} emissiveIntensity={e} flatShading />
+);
+
+/** Ángulos (grados) de brazos y piernas por pose; los brazos rotan en el plano del cuerpo (z) y hacia adelante (x). */
+function pose3d(pose: Pose, t: number, fase: number) {
+	switch (pose) {
+		case 'caminar': {
+			const p = Math.sin(t * 7 + fase);
+			return {bi: [p * 30, 8], bd: [-p * 30, 8], pi: -p * 28, pd: p * 28, sube: Math.abs(Math.cos(t * 7 + fase)) * 0.05};
+		}
+		case 'señalar':
+			return {bi: [0, 6], bd: [-80, 10], pi: 0, pd: 0, sube: 0};
+		case 'brazosArriba':
+			return {bi: [0, 160 + Math.sin(t * 6 + fase) * 10], bd: [0, 160 + Math.sin(t * 6 + fase + 1) * 10], pi: 0, pd: 0, sube: Math.abs(Math.sin(t * 6 + fase)) * 0.06};
+		case 'pensar':
+			return {bi: [-40, 12], bd: [-110, 20], pi: 0, pd: 0, sube: 0};
+		case 'cruzado':
+			return {bi: [-75, 35], bd: [-75, 35], pi: 0, pd: 0, sube: 0};
+		case 'sentado':
+			return {bi: [-45, 10], bd: [-45, 10], pi: -85, pd: -85, sube: -0.38};
+		default:
+			return {bi: [Math.sin(t * 1.5 + fase) * 3, 6], bd: [-Math.sin(t * 1.5 + fase) * 3, 6], pi: 0, pd: 0, sube: 0};
+	}
+}
+
+/**
+ * Persona low-poly de ~1.8 unidades de alto (pies en y = 0). Cara con ojos y boca según `expresion`;
+ * `habla` = intervalos [inicio, fin] en segundos en que mueve la boca.
+ */
+export const Persona3D: React.FC<
+	Pieza & {
+		t?: number;
+		piel?: string;
+		pelo?: string;
+		ropa?: string;
+		pantalon?: string;
+		expresion?: Expresion;
+		pose?: Pose;
+		estados?: {en: number; expresion?: Expresion; pose?: Pose}[];
+		habla?: [number, number][];
+		semilla?: number;
+		cabezaGrande?: boolean;
+	}
+> = ({t = 0, piel = '#E8B48F', pelo = '#2B1B12', ropa = '#2F6FE0', pantalon = '#2E3A59', expresion: e0 = 'neutral', pose: p0 = 'parado', estados = [], habla = [], semilla = 0, cabezaGrande = true, ...p}) => {
+	let expresion = e0;
+	let pose = p0;
+	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;
+		}
+	const fase = azarN(semilla + 5) * 6.28;
+	const P = pose3d(pose, t, fase);
+	const R = Math.PI / 180;
+	const hc = cabezaGrande ? 0.36 : 0.26; // radio de la cabeza
+	const parpadea = (t + azarN(semilla) * 3) % 3.4 < 0.12 || expresion === 'dormido';
+	const hablando = habla.some(([a, b]) => t >= a && t <= b);
+	const boca = hablando ? 0.03 + 0.05 * Math.abs(Math.sin(t * 13)) : expresion === 'sorpresa' || expresion === 'miedo' ? 0.06 : 0.018;
+	const ancho = expresion === 'feliz' ? 0.13 : expresion === 'triste' || expresion === 'enojado' ? 0.09 : 0.08;
+	const curva = expresion === 'feliz' ? -0.02 : expresion === 'triste' ? 0.02 : 0;
+	const ceja = expresion === 'enojado' ? 0.35 : expresion === 'triste' || expresion === 'miedo' ? -0.35 : 0;
+	const brazo = (lado: 1 | -1, [adelante, afuera]: number[]) => (
+		<group position={[lado * 0.27, 1.12, 0]} rotation={[adelante * R, 0, lado * afuera * R]}>
+			<mesh position={[0, -0.27, 0]} castShadow>
+				<capsuleGeometry args={[0.075, 0.42, 4, 8]} />
+				<Mate c={ropa} />
+			</mesh>
+			<mesh position={[0, -0.55, 0]} castShadow>
+				<sphereGeometry args={[0.08, 10, 8]} />
+				<Mate c={piel} />
+			</mesh>
+		</group>
+	);
+	const pierna = (lado: 1 | -1, ang: number) => (
+		<group position={[lado * 0.11, 0.62, 0]} rotation={[ang * R, 0, 0]}>
+			<mesh position={[0, -0.3, 0]} castShadow>
+				<capsuleGeometry args={[0.09, 0.44, 4, 8]} />
+				<Mate c={pantalon} />
+			</mesh>
+			<mesh position={[0, -0.6, 0.06]} castShadow>
+				<boxGeometry args={[0.16, 0.08, 0.26]} />
+				<Mate c="#2A2420" />
+			</mesh>
+		</group>
+	);
+	return (
+		<group {...grupo(p)}>
+			<group position={[0, P.sube, 0]}>
+				{pierna(-1, P.pi)}
+				{pierna(1, P.pd)}
+				<mesh position={[0, 0.92, 0]} castShadow>
+					<capsuleGeometry args={[0.24, 0.4, 4, 10]} />
+					<Mate c={ropa} />
+				</mesh>
+				{brazo(-1, P.bi)}
+				{brazo(1, P.bd)}
+				<group position={[0, 1.38 + hc * 0.75, 0]} rotation={[0, Math.sin(t * 0.9 + fase) * 0.12, pose === 'pensar' ? -0.12 : 0]}>
+					<mesh castShadow>
+						<icosahedronGeometry args={[hc, 1]} />
+						<Mate c={piel} />
+					</mesh>
+					{/* pelo: casquete encima */}
+					<mesh position={[0, hc * 0.28, -hc * 0.06]} scale={[1.04, 0.72, 1.04]} castShadow>
+						<icosahedronGeometry args={[hc, 1]} />
+						<Mate c={pelo} />
+					</mesh>
+					{/* ojos */}
+					{[-1, 1].map((l) => (
+						<group key={l} position={[l * hc * 0.36, hc * 0.08, hc * 0.9]}>
+							{parpadea ? (
+								<mesh scale={[1, 0.18, 0.4]}>
+									<sphereGeometry args={[hc * 0.16, 10, 8]} />
+									<Mate c="#1E1410" />
+								</mesh>
+							) : (
+								<>
+									<mesh scale={[1, 1.15, 0.45]}>
+										<sphereGeometry args={[hc * 0.19, 12, 10]} />
+										<Mate c="#FFFFFF" r={0.4} />
+									</mesh>
+									<mesh position={[0, -hc * 0.01, hc * 0.07]} scale={[1, 1, 0.5]}>
+										<sphereGeometry args={[hc * (expresion === 'sorpresa' || expresion === 'miedo' ? 0.07 : 0.1), 10, 8]} />
+										<Mate c="#1E1410" r={0.3} />
+									</mesh>
+								</>
+							)}
+							<mesh position={[0, hc * 0.27, hc * 0.03]} rotation={[0, 0, -l * ceja]}>
+								<boxGeometry args={[hc * 0.32, hc * 0.06, hc * 0.06]} />
+								<Mate c={pelo} />
+							</mesh>
+						</group>
+					))}
+					{/* boca */}
+					<mesh position={[0, -hc * 0.38 + curva, hc * 0.92]} rotation={[0, 0, 0]}>
+						<boxGeometry args={[ancho * (hc / 0.36), boca * (hc / 0.36) * 1.4, 0.03]} />
+						<Mate c="#5A1E1E" />
+					</mesh>
+				</group>
+			</group>
+		</group>
+	);
+};
+
+/** Ciudad: manzanas de edificios con ventanas (encendidas de noche), en una cuadrícula alrededor del centro. */
+export const Ciudad: React.FC<Pieza & {t?: number; noche?: boolean; filas?: number; columnas?: number; separacion?: number; semilla?: number; hueco?: number}> = ({t = 0, noche = false, filas = 4, columnas = 6, separacion = 4.2, semilla = 0, hueco = 1, ...p}) => {
+	const colores = noche ? ['#2A2F55', '#323A66', '#262B4A'] : ['#E8DCC8', '#CFD8E3', '#F2E6D0', '#D9C7B0'];
+	return (
+		<group {...grupo(p)}>
+			{Array.from({length: filas * columnas}, (_, i) => {
+				const f = Math.floor(i / columnas);
+				const c = i % columnas;
+				// deja libre la calle del centro (columna central) para la acción
+				if (Math.abs(c - (columnas - 1) / 2) < hueco * 0.5) return null;
+				const s = semilla + i * 7;
+				const alto = 2 + azarN(s) * 6;
+				const w = 2.2 + azarN(s + 1) * 1.2;
+				const x = (c - (columnas - 1) / 2) * separacion;
+				const z = -f * separacion - 2;
+				const luz = noche ? 0.5 + 0.5 * Math.sin(t * 0.4 + i) : 0;
+				return (
+					<group key={i} position={[x, 0, z]}>
+						<mesh position={[0, alto / 2, 0]} castShadow receiveShadow>
+							<boxGeometry args={[w, alto, w]} />
+							<Mate c={colores[i % colores.length]} />
+						</mesh>
+						{Array.from({length: Math.floor(alto / 0.7)}, (_, k) => (
+							<mesh key={k} position={[0, 0.5 + k * 0.7, w / 2 + 0.01]}>
+								<boxGeometry args={[w * 0.75, 0.28, 0.02]} />
+								<Mate c={noche ? (azarN(s + k) > 0.45 ? '#FFD27A' : '#1A1E36') : '#8EC5E8'} e={noche && azarN(s + k) > 0.45 ? 0.6 + luz * 0.3 : 0} r={0.3} />
+							</mesh>
+						))}
+					</group>
+				);
+			})}
+			<mesh position={[0, 0, -filas * separacion * 0.5]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+				<planeGeometry args={[columnas * separacion + 20, filas * separacion + 30]} />
+				<Mate c={noche ? '#1E2030' : '#9AA0A8'} />
+			</mesh>
+		</group>
+	);
+};
+
+/** Calle recta a lo largo de z, con líneas pintadas y banquetas. */
+export const Camino: React.FC<Pieza & {largo?: number; ancho?: number; color?: string}> = ({largo = 30, ancho = 4, color = '#3E4250', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, -largo / 2 + 4]} receiveShadow>
+			<planeGeometry args={[ancho, largo]} />
+			<Mate c={color} />
+		</mesh>
+		{Array.from({length: Math.floor(largo / 2.2)}, (_, i) => (
+			<mesh key={i} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.02, 3 - i * 2.2]}>
+				<planeGeometry args={[0.14, 1.1]} />
+				<Mate c="#F2D04A" />
+			</mesh>
+		))}
+		{[-1, 1].map((l) => (
+			<mesh key={l} position={[l * (ancho / 2 + 0.5), 0.08, -largo / 2 + 4]} receiveShadow castShadow>
+				<boxGeometry args={[1, 0.16, largo]} />
+				<Mate c="#C9C4BA" />
+			</mesh>
+		))}
+	</group>
+);
+
+/** Cuarto (interior abierto hacia la cámara): piso, dos paredes, ventana y lámpara de techo. */
+export const Cuarto3D: React.FC<Pieza & {ancho?: number; fondo?: number; alto?: number; pared?: string; piso?: string; noche?: boolean}> = ({ancho = 10, fondo = 8, alto = 4.5, pared = '#2E5A4C', piso = '#7A4A2A', noche = true, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+			<planeGeometry args={[ancho, fondo]} />
+			<Mate c={piso} />
+		</mesh>
+		<mesh position={[0, alto / 2, -fondo / 2]} receiveShadow>
+			<boxGeometry args={[ancho, alto, 0.2]} />
+			<Mate c={pared} />
+		</mesh>
+		<mesh position={[-ancho / 2, alto / 2, 0]} receiveShadow>
+			<boxGeometry args={[0.2, alto, fondo]} />
+			<Mate c={new THREE.Color(pared).multiplyScalar(0.85).getStyle()} />
+		</mesh>
+		<group position={[ancho * 0.2, alto * 0.55, -fondo / 2 + 0.12]}>
+			<mesh>
+				<boxGeometry args={[1.8, 1.5, 0.05]} />
+				<Mate c="#E9E1D2" />
+			</mesh>
+			<mesh position={[0, 0, 0.03]}>
+				<boxGeometry args={[1.6, 1.3, 0.02]} />
+				<Mate c={noche ? '#1A2350' : '#9FD4F5'} e={noche ? 0.1 : 0.3} />
+			</mesh>
+		</group>
+		<mesh position={[0, alto - 0.1, 0]}>
+			<cylinderGeometry args={[0.35, 0.5, 0.25, 16]} />
+			<Mate c="#F2D49B" e={0.5} />
+		</mesh>
+		<pointLight position={[0, alto - 0.5, 0]} intensity={noche ? 6 : 2} distance={12} color="#FFD9A0" castShadow />
+	</group>
+);
+
+export type {V3};