morfeo 0.2.1 → 0.3.1

package/remotion/kit/datos.tsx

@@ -0,0 +1,180 @@
+// Gráficas 2D que se dibujan solas (van DENTRO de un <svg>): barras, línea, comparación y lupa.
+// `t` es el tiempo y `en` el momento en que empiezan (segundos); todo se anima con el tiempo.
+//
+//   <GraficaBarras x={140} y={700} ancho={800} alto={500} t={t} en={1} datos={[['0 m', 100], ['1 m', 50], ['2 m', 25]]} />
+//   <GraficaLinea x={140} y={700} ancho={800} alto={420} t={t} puntos={[100, 50, 25, 12]} etiquetas={['0', '1', '2', '3']} />
+//   <Comparacion x={540} y={1300} t={t} a={['ANTES', 10]} b={['DESPUÉS', 27.4]} unidad="kg" />
+//   <Lupa x={540} y={900} radio={220} t={t}> ...lo que se ve aumentado... </Lupa>
+import React from 'react';
+
+const k = (t: number, en: number, dur: number) => {
+	const x = Math.max(0, Math.min(1, (t - en) / dur));
+	return 1 - (1 - x) ** 3;
+};
+const fmt = (v: number, dec = 0) => v.toLocaleString('es-MX', {minimumFractionDigits: dec, maximumFractionDigits: dec});
+
+type Comun = {x: number; y: number; t: number; en?: number; color?: string; texto?: string; fuente?: string};
+
+/** Barras horizontales: [etiqueta, valor]. La más grande ocupa todo el ancho; el valor cuenta mientras crece. */
+export const GraficaBarras: React.FC<Comun & {ancho?: number; alto?: number; datos: [string, number][]; unidad?: string; colores?: string[]; decimales?: number; maximo?: number}> = ({
+	x,
+	y,
+	t,
+	en = 0,
+	ancho = 820,
+	alto = 480,
+	datos,
+	unidad = '',
+	color = '#F2B632',
+	colores,
+	texto = '#FFFFFF',
+	fuente = 'JetBrains Mono, monospace',
+	decimales = 0,
+	maximo,
+}) => {
+	const max = maximo ?? Math.max(...datos.map(([, v]) => v), 1);
+	const fila = alto / datos.length;
+	const etiqueta = 150;
+	return (
+		<g transform={`translate(${x} ${y})`}>
+			{datos.map(([e, v], i) => {
+				const p = k(t, en + i * 0.18, 0.9);
+				const w = (ancho - etiqueta - 150) * (v / max) * p;
+				return (
+					<g key={i} transform={`translate(0 ${i * fila})`} opacity={Math.min(1, p * 4)}>
+						<text x={etiqueta - 20} y={fila * 0.42} textAnchor="end" dominantBaseline="middle" fontFamily={fuente} fontSize={fila * 0.32} fill={texto} opacity={0.75}>
+							{e}
+						</text>
+						<rect x={etiqueta} y={fila * 0.18} width={Math.max(4, w)} height={fila * 0.48} rx={fila * 0.1} fill={colores?.[i] ?? color} />
+						<text x={etiqueta + w + 16} y={fila * 0.42} dominantBaseline="middle" fontFamily={fuente} fontWeight={700} fontSize={fila * 0.32} fill={texto}>
+							{fmt(v * p, decimales)}
+							{unidad}
+						</text>
+					</g>
+				);
+			})}
+		</g>
+	);
+};
+
+/** Línea que se dibuja de izquierda a derecha, con puntos y etiquetas en el eje. */
+export const GraficaLinea: React.FC<Comun & {ancho?: number; alto?: number; puntos: number[]; etiquetas?: string[]; minimo?: number; maximo?: number; relleno?: boolean; dur?: number}> = ({
+	x,
+	y,
+	t,
+	en = 0,
+	ancho = 820,
+	alto = 420,
+	puntos,
+	etiquetas = [],
+	color = '#F07A3A',
+	texto = '#FFFFFF',
+	fuente = 'JetBrains Mono, monospace',
+	minimo,
+	maximo,
+	relleno = true,
+	dur = 1.4,
+}) => {
+	const mn = minimo ?? Math.min(0, ...puntos);
+	const mx = maximo ?? Math.max(...puntos);
+	const px = (i: number) => (i / Math.max(1, puntos.length - 1)) * ancho;
+	const py = (v: number) => alto - ((v - mn) / Math.max(1e-6, mx - mn)) * alto;
+	const p = k(t, en, dur);
+	const d = puntos.map((v, i) => `${i ? 'L' : 'M'} ${px(i)} ${py(v)}`).join(' ');
+	const largo = puntos.slice(1).reduce((s, v, i) => s + Math.hypot(px(i + 1) - px(i), py(v) - py(puntos[i])), 0);
+	const id = `linea-${Math.round(x)}-${Math.round(y)}`;
+	return (
+		<g transform={`translate(${x} ${y})`}>
+			<line x1={0} y1={alto} x2={ancho} y2={alto} stroke={texto} strokeOpacity={0.35} strokeWidth={3} />
+			<line x1={0} y1={0} x2={0} y2={alto} stroke={texto} strokeOpacity={0.35} strokeWidth={3} />
+			{relleno ? (
+				<>
+					<defs>
+						<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+							<stop offset="0" stopColor={color} stopOpacity={0.35} />
+							<stop offset="1" stopColor={color} stopOpacity={0} />
+						</linearGradient>
+						<clipPath id={`${id}-c`}>
+							<rect x={0} y={-50} width={ancho * p} height={alto + 100} />
+						</clipPath>
+					</defs>
+					<path d={`${d} L ${ancho} ${alto} L 0 ${alto} Z`} fill={`url(#${id})`} clipPath={`url(#${id}-c)`} />
+				</>
+			) : null}
+			<path d={d} fill="none" stroke={color} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={largo} strokeDashoffset={largo * (1 - p)} />
+			{puntos.map((v, i) =>
+				px(i) <= ancho * p + 1 ? <circle key={i} cx={px(i)} cy={py(v)} r={11} fill={color} stroke="#fff" strokeWidth={4} /> : null,
+			)}
+			{etiquetas.map((e, i) => (
+				<text key={i} x={px(i)} y={alto + 44} textAnchor="middle" fontFamily={fuente} fontSize={28} fill={texto} opacity={0.7}>
+					{e}
+				</text>
+			))}
+		</g>
+	);
+};
+
+/** Dos columnas que crecen hasta su valor (antes / después, A contra B), con el número contando encima. */
+export const Comparacion: React.FC<Comun & {a: [string, number]; b: [string, number]; unidad?: string; alto?: number; colorA?: string; colorB?: string; decimales?: number}> = ({
+	x,
+	y,
+	t,
+	en = 0,
+	a,
+	b,
+	unidad = '',
+	alto = 520,
+	colorA = '#8A8F9C',
+	colorB = '#2FD08A',
+	texto = '#FFFFFF',
+	fuente = 'Montserrat, sans-serif',
+	decimales = 0,
+}) => {
+	const max = Math.max(a[1], b[1], 1e-6);
+	const col = (lbl: string, v: number, c: string, dx: number, retraso: number) => {
+		const p = k(t, en + retraso, 1.1);
+		const h = (alto * v * p) / max;
+		return (
+			<g transform={`translate(${dx} 0)`}>
+				<rect x={-90} y={-h} width={180} height={Math.max(2, h)} rx={18} fill={c} />
+				<text x={0} y={-h - 28} textAnchor="middle" fontFamily={fuente} fontWeight={900} fontSize={64} fill={texto}>
+					{fmt(v * p, decimales)}
+					<tspan fontSize={34}>{unidad}</tspan>
+				</text>
+				<text x={0} y={56} textAnchor="middle" fontFamily={fuente} fontWeight={800} fontSize={36} fill={texto} opacity={0.8}>
+					{lbl}
+				</text>
+			</g>
+		);
+	};
+	return (
+		<g transform={`translate(${x} ${y})`}>
+			<line x1={-280} y1={0} x2={280} y2={0} stroke={texto} strokeOpacity={0.4} strokeWidth={4} />
+			{col(a[0], a[1], colorA, -150, 0)}
+			{col(b[0], b[1], colorB, 150, 0.5)}
+		</g>
+	);
+};
+
+/** Lupa: aro con mango; dentro se ve `children` (lo que dibujes, normalmente más grande). Entra con un pequeño rebote. */
+export const Lupa: React.FC<{x: number; y: number; radio?: number; t: number; en?: number; fondo?: string; children?: React.ReactNode}> = ({x, y, radio = 220, t, en = 0, fondo = '#F4E6D8', children}) => {
+	const p = k(t, en, 0.5);
+	const s = 0.6 + 0.4 * p + Math.sin(Math.min(1, (t - en) / 0.5) * Math.PI) * 0.05;
+	const id = `lupa-${Math.round(x)}-${Math.round(y)}`;
+	if (p <= 0) return null;
+	return (
+		<g transform={`translate(${x} ${y}) scale(${s})`} opacity={Math.min(1, p * 3)}>
+			<defs>
+				<clipPath id={id}>
+					<circle r={radio} />
+				</clipPath>
+			</defs>
+			<rect x={radio * 0.62} y={radio * 0.62} width={radio * 0.3} height={radio * 0.95} rx={radio * 0.12} transform={`rotate(-45 ${radio * 0.77} ${radio * 0.62})`} fill="#5A3A28" />
+			<circle r={radio} fill={fondo} />
+			<g clipPath={`url(#${id})`}>{children}</g>
+			<circle r={radio} fill="none" stroke="#E9EDF2" strokeWidth={radio * 0.11} />
+			<circle r={radio * 1.05} fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth={4} />
+			<path d={`M ${-radio * 0.55} ${-radio * 0.35} A ${radio * 0.7} ${radio * 0.7} 0 0 1 ${-radio * 0.2} ${-radio * 0.62}`} stroke="rgba(255,255,255,0.7)" strokeWidth={10} fill="none" strokeLinecap="round" />
+		</g>
+	);
+};

package/remotion/kit/diorama.tsx

@@ -0,0 +1,489 @@
+// Kit diorama: maqueta 3D low-poly flotante con corte de tierra, personajes, tráfico, rayos X y modelos .glb.
+// Va dentro de un <Lienzo3D>. Todo depende de `t` (segundos): nada corre solo.
+//
+//   <Maqueta ancho={20} fondo={14} />                       isla con estratos, pasto y flores
+//   <Modelo src={props.coche.src} pos={[0, 0, 2]} tam={2} animacion t={t} />   un .glb (o un recurso resuelto)
+//   <Persona pos={[1, 0, 3]} pose="saludar" t={t} />        trabajador low-poly
+//   <Trafico camino={[[-9, 0, 2], [9, 0, 2]]} n={8} t={t} pluma={{d: 9, cerrada: [[2, 6]]}} />
+//   <Corte k={abrir}> <Tinaco /> </Corte>                   rayos X: abre lo que envuelve
+import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {continueRender, delayRender} from 'remotion';
+import * as THREE from 'three';
+import {clone as clonarEsqueleto} from 'three/examples/jsm/utils/SkeletonUtils.js';
+import {cargarGltf} from '../motor/modelo3d';
+import {recurso} from '../motor/util';
+import {azarN} from './ilustrado';
+import {Piedras} from './tres';
+
+type V3 = [number, number, number];
+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});
+const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+
+/**
+ * Maqueta flotante: una isla de `ancho`×`fondo` con estratos de tierra a la vista en los cuatro lados, pasto, flores,
+ * matas y piedritas. La superficie queda en y = 0. `hueco` deja un rectángulo sin pasto (para río, calle, alberca).
+ */
+export const Maqueta: React.FC<
+	Pieza & {
+		ancho?: number;
+		fondo?: number;
+		capas?: [string, number][];
+		pasto?: string;
+		flores?: number;
+		matas?: number;
+		colores?: string[];
+		semilla?: number;
+		/** Zonas sin flores ni matas: [x, z, ancho, fondo]. */
+		libres?: [number, number, number, number][];
+	}
+> = ({ancho = 20, fondo = 14, capas = [['#79C24F', 0.4], ['#9A6A45', 1.6], ['#7D553A', 1.4], ['#8C8580', 1.2]], pasto, flores = 60, matas = 140, colores = ['#B57BE8', '#FFD23F', '#FF6B6B', '#FFFFFF'], semilla = 0, libres = [], ...p}) => {
+	const libre = (x: number, z: number) => libres.some(([lx, lz, la, lf]) => Math.abs(x - lx) < la / 2 && Math.abs(z - lz) < lf / 2);
+	const total = capas.reduce((a, [, g]) => a + g, 0);
+	const refMatas = useRef<THREE.InstancedMesh>(null);
+	const refFlores = useRef<THREE.InstancedMesh>(null);
+	const refTallos = useRef<THREE.InstancedMesh>(null);
+	const puntos = (n: number, s: number) =>
+		Array.from({length: n}, (_, i) => [(azarN(s + i * 2) - 0.5) * (ancho - 0.6), (azarN(s + i * 2 + 1) - 0.5) * (fondo - 0.6)] as [number, number]).filter(([x, z]) => !libre(x, z));
+	useLayoutEffect(() => {
+		const o = new THREE.Object3D();
+		const m = refMatas.current;
+		if (m) {
+			const lista = puntos(matas, semilla + 11);
+			lista.forEach(([x, z], i) => {
+				o.position.set(x, 0.12, z);
+				o.rotation.set(0, azarN(semilla + i * 13) * 6, 0);
+				const k = 0.6 + azarN(semilla + i * 7) * 0.8;
+				o.scale.set(k, k * (1 + azarN(semilla + i) * 0.8), k);
+				o.updateMatrix();
+				m.setMatrixAt(i, o.matrix);
+			});
+			m.count = lista.length;
+			m.instanceMatrix.needsUpdate = true;
+		}
+		const f = refFlores.current;
+		const tl = refTallos.current;
+		if (f && tl) {
+			const lista = puntos(flores, semilla + 97);
+			const c = new THREE.Color();
+			lista.forEach(([x, z], i) => {
+				const alto = 0.25 + azarN(semilla + i * 5) * 0.25;
+				o.position.set(x, alto / 2, z);
+				o.rotation.set(0, 0, 0);
+				o.scale.set(1, alto / 0.4, 1);
+				o.updateMatrix();
+				tl.setMatrixAt(i, o.matrix);
+				o.position.set(x, alto + 0.05, z);
+				o.scale.setScalar(0.8 + azarN(semilla + i * 3) * 0.6);
+				o.updateMatrix();
+				f.setMatrixAt(i, o.matrix);
+				f.setColorAt(i, c.set(colores[i % colores.length]));
+			});
+			f.count = lista.length;
+			tl.count = lista.length;
+			f.instanceMatrix.needsUpdate = true;
+			tl.instanceMatrix.needsUpdate = true;
+			if (f.instanceColor) f.instanceColor.needsUpdate = true;
+		}
+	}, [ancho, fondo, matas, flores, semilla, JSON.stringify(libres), colores.join()]);
+	let y = 0;
+	return (
+		<group {...grupo(p)}>
+			{capas.map(([color, grosor], i) => {
+				const centro = y - grosor / 2;
+				y -= grosor;
+				return (
+					<mesh key={i} position={[0, centro, 0]} receiveShadow castShadow={i === 0}>
+						<boxGeometry args={[ancho, grosor, fondo]} />
+						<meshStandardMaterial color={i === 0 && pasto ? pasto : color} roughness={0.95} />
+					</mesh>
+				);
+			})}
+			{/* piedritas en las cuatro caras */}
+			<Piedras z={fondo / 2 + 0.01} ancho={ancho} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(ancho * 2.4)} semilla={semilla + 3} />
+			<group rotation={[0, Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 41} />
+			</group>
+			<group rotation={[0, -Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 77} />
+			</group>
+			<instancedMesh ref={refMatas} args={[undefined as any, undefined as any, matas]} castShadow frustumCulled={false}>
+				<coneGeometry args={[0.07, 0.32, 4]} />
+				<meshStandardMaterial color={pasto ?? '#5FAE3C'} roughness={0.9} flatShading />
+			</instancedMesh>
+			<instancedMesh ref={refTallos} args={[undefined as any, undefined as any, flores]} frustumCulled={false}>
+				<cylinderGeometry args={[0.018, 0.018, 0.4, 4]} />
+				<meshStandardMaterial color="#3E8A35" roughness={0.9} />
+			</instancedMesh>
+			<instancedMesh ref={refFlores} args={[undefined as any, undefined as any, flores]} castShadow frustumCulled={false}>
+				<icosahedronGeometry args={[0.09, 0]} />
+				<meshStandardMaterial roughness={0.7} flatShading />
+			</instancedMesh>
+		</group>
+	);
+};
+
+/**
+ * Un modelo .glb dentro del lienzo: tuyo (`src: 'castor.glb'` en assets/) o un recurso de la biblioteca
+ * (`src: props.coche`, lo que deja `{tipo: 'recurso', buscar: 'coche'}` en las props del componente).
+ * Se escala para que su lado mayor mida `tam` y se apoya en y = 0. `animacion` reproduce los clips del archivo
+ * sincronizados con `t` (true = todos, o el nombre de uno).
+ */
+export const Modelo: React.FC<Pieza & {src: string | {src: string}; tam?: number; t?: number; animacion?: boolean | string; velocidad?: number; color?: string; sombras?: boolean}> = ({src, tam = 1, t = 0, animacion, velocidad = 1, color, sombras = true, ...p}) => {
+	const ruta = typeof src === 'string' ? src : src.src;
+	const url = recurso(ruta);
+	const [g, setG] = useState<{obj: THREE.Object3D; mixer: THREE.AnimationMixer | null} | null>(null);
+	const [handle] = useState(() => delayRender(`Cargando modelo ${ruta}`));
+	useEffect(() => {
+		cargarGltf(url)
+			.then((gl) => {
+				const copia = clonarEsqueleto(gl.scene) as THREE.Object3D;
+				const caja = new THREE.Box3().setFromObject(copia);
+				const t3 = caja.getSize(new THREE.Vector3());
+				const k = tam / Math.max(t3.x, t3.y, t3.z, 0.0001);
+				const centro = caja.getCenter(new THREE.Vector3());
+				const envoltura = new THREE.Group();
+				copia.position.set(-centro.x, -caja.min.y, -centro.z);
+				envoltura.add(copia);
+				envoltura.scale.setScalar(k);
+				copia.traverse((o: any) => {
+					if (o.isMesh) {
+						o.castShadow = sombras;
+						o.receiveShadow = sombras;
+						if (color) {
+							o.material = o.material.clone();
+							o.material.color = new THREE.Color(color);
+						}
+					}
+				});
+				let mixer: THREE.AnimationMixer | null = null;
+				if (animacion && gl.animations.length) {
+					mixer = new THREE.AnimationMixer(copia);
+					const clips = animacion === true ? gl.animations : gl.animations.filter((a) => a.name === animacion || a.name.toLowerCase().includes(String(animacion).toLowerCase()));
+					for (const clip of clips.length ? clips : gl.animations.slice(0, 1)) mixer.clipAction(clip).play();
+				}
+				setG({obj: envoltura, mixer});
+				continueRender(handle);
+			})
+			.catch((e) => {
+				continueRender(handle);
+				throw new Error(`No pude cargar el modelo ${ruta}: ${e.message}`);
+			});
+	}, [url, handle, tam, color, String(animacion)]);
+	useLayoutEffect(() => {
+		g?.mixer?.setTime(Math.max(0, t) * velocidad);
+	});
+	return <group {...grupo(p)}>{g ? <primitive object={g.obj} /> : null}</group>;
+};
+
+const MAT = (color: string, r = 0.8) => <meshStandardMaterial color={color} roughness={r} flatShading />;
+
+/**
+ * Persona low-poly (trabajador con casco y chaleco por defecto). Mide ~1.6 de alto con `escala` 1.
+ * `pose`: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'celebrar'. `t` mueve brazos y piernas.
+ */
+export const Persona: React.FC<Pieza & {t?: number; pose?: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'señalar' | 'celebrar'; piel?: string; ropa?: string; chaleco?: string | false; casco?: string | false; pantalon?: string}> = ({
+	t = 0,
+	pose = 'parado',
+	piel = '#F2C19B',
+	ropa = '#3A6EC8',
+	chaleco = '#FF7A1A',
+	casco = '#FFC928',
+	pantalon = '#2E3A59',
+	...p
+}) => {
+	const paso = pose === 'caminar' ? Math.sin(t * 9) * 0.6 : 0;
+	const respira = Math.sin(t * 2.2) * 0.015;
+	let brazoI = 0.15;
+	let brazoD = -0.15;
+	if (pose === 'saludar') brazoD = -2.6 + Math.sin(t * 10) * 0.35;
+	if (pose === 'celebrar') {
+		brazoI = 2.7 + Math.sin(t * 9) * 0.2;
+		brazoD = -2.7 - Math.sin(t * 9) * 0.2;
+	}
+	if (pose === 'senalar' || pose === 'señalar') brazoD = -1.55;
+	if (pose === 'caminar') {
+		brazoI = -paso * 0.8;
+		brazoD = paso * 0.8;
+	}
+	const salto = pose === 'celebrar' ? Math.abs(Math.sin(t * 9)) * 0.12 : pose === 'caminar' ? Math.abs(Math.sin(t * 9)) * 0.04 : 0;
+	const brazo = (lado: 1 | -1, ang: number, adelante = 0) => (
+		<group position={[0.3 * lado, 1.18, 0]} rotation={[pose === 'caminar' ? ang : adelante, 0, pose === 'caminar' ? 0 : ang]}>
+			<mesh position={[0, -0.26, 0]} castShadow>
+				<boxGeometry args={[0.14, 0.52, 0.14]} />
+				{MAT(chaleco ? ropa : ropa)}
+			</mesh>
+			<mesh position={[0, -0.56, 0]} castShadow>
+				<sphereGeometry args={[0.085, 8, 6]} />
+				{MAT(piel)}
+			</mesh>
+		</group>
+	);
+	return (
+		<group {...grupo(p)}>
+			<group position={[0, salto + respira, 0]}>
+				{/* piernas */}
+				{[-1, 1].map((l) => (
+					<group key={l} position={[0.12 * l, 0.62, 0]} rotation={[l * paso, 0, 0]}>
+						<mesh position={[0, -0.3, 0]} castShadow>
+							<boxGeometry args={[0.17, 0.6, 0.18]} />
+							{MAT(pantalon)}
+						</mesh>
+						<mesh position={[0, -0.6, 0.05]} castShadow>
+							<boxGeometry args={[0.19, 0.08, 0.28]} />
+							{MAT('#3B2A20')}
+						</mesh>
+					</group>
+				))}
+				{/* torso y chaleco */}
+				<mesh position={[0, 0.95, 0]} castShadow>
+					<boxGeometry args={[0.48, 0.62, 0.28]} />
+					{MAT(ropa)}
+				</mesh>
+				{chaleco ? (
+					<mesh position={[0, 0.93, 0]} castShadow>
+						<boxGeometry args={[0.5, 0.5, 0.3]} />
+						{MAT(chaleco)}
+					</mesh>
+				) : null}
+				{chaleco ? (
+					<mesh position={[0, 0.88, 0.152]}>
+						<boxGeometry args={[0.5, 0.06, 0.01]} />
+						<meshStandardMaterial color="#E8F2F5" roughness={0.3} emissive="#ffffff" emissiveIntensity={0.15} />
+					</mesh>
+				) : null}
+				{brazo(-1, brazoI)}
+				{brazo(1, brazoD, pose === 'senalar' || pose === 'señalar' ? -1.4 : 0)}
+				{/* cabeza */}
+				<mesh position={[0, 1.42, 0]} castShadow>
+					<sphereGeometry args={[0.22, 12, 10]} />
+					{MAT(piel, 0.7)}
+				</mesh>
+				{[-1, 1].map((l) => (
+					<mesh key={l} position={[0.08 * l, 1.45, 0.2]}>
+						<sphereGeometry args={[0.028, 6, 6]} />
+						<meshStandardMaterial color="#1B1B1F" />
+					</mesh>
+				))}
+				{casco ? (
+					<group position={[0, 1.55, 0]}>
+						<mesh castShadow>
+							<sphereGeometry args={[0.24, 12, 8, 0, Math.PI * 2, 0, Math.PI / 2]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+						<mesh position={[0, 0, 0.06]}>
+							<cylinderGeometry args={[0.3, 0.3, 0.035, 14]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+					</group>
+				) : null}
+			</group>
+		</group>
+	);
+};
+
+/** Coche low-poly (2 de largo). Para tráfico sin descargar nada. */
+export const Coche: React.FC<Pieza & {color?: string; techo?: string; t?: number; rueda?: number}> = ({color = '#E8533B', techo = '#1F3550', t = 0, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.38, 0]} castShadow receiveShadow>
+			<boxGeometry args={[2, 0.45, 0.95]} />
+			{MAT(color, 0.5)}
+		</mesh>
+		<mesh position={[-0.1, 0.78, 0]} castShadow>
+			<boxGeometry args={[1.1, 0.38, 0.86]} />
+			{MAT(techo, 0.4)}
+		</mesh>
+		{[
+			[0.65, 0.48],
+			[-0.65, 0.48],
+			[0.65, -0.48],
+			[-0.65, -0.48],
+		].map(([x, z], i) => (
+			<mesh key={i} position={[x, 0.18, z]} rotation={[Math.PI / 2, t * 6, 0]} castShadow>
+				<cylinderGeometry args={[0.19, 0.19, 0.14, 10]} />
+				{MAT('#1E1E22', 0.9)}
+			</mesh>
+		))}
+		{[0.2, -0.2].map((z, i) => (
+			<mesh key={i} position={[1.005, 0.42, z * 1.6]}>
+				<boxGeometry args={[0.02, 0.1, 0.16]} />
+				<meshStandardMaterial color="#FFF6C8" emissive="#FFF2B0" emissiveIntensity={0.6} />
+			</mesh>
+		))}
+	</group>
+);
+
+const COLORES_COCHE = ['#E8533B', '#2D7BFF', '#2BB673', '#F5B841', '#8E5BD9', '#FF7EB6', '#F2F2F2', '#33363D'];
+
+/**
+ * Tráfico: `n` coches (o lo que dibuje `pieza`) que avanzan por `camino` a `velocidad` (u/s) con `separacion`.
+ * `pluma`: una barrera a `d` unidades del inicio del camino; mientras está cerrada (intervalos [desde, hasta] en
+ * segundos) los coches que no la han cruzado se detienen y hacen fila. Todo se calcula de `t`: es determinista.
+ */
+export const Trafico: React.FC<{
+	camino: V3[];
+	t: number;
+	n?: number;
+	velocidad?: number;
+	separacion?: number;
+	desfase?: number;
+	pluma?: {d: number; cerrada: [number, number][]};
+	colores?: string[];
+	pieza?: (i: number, color: string, t: number) => React.ReactNode;
+	semilla?: number;
+}> = ({camino, t, n = 8, velocidad = 2.2, separacion = 2.8, desfase = 0, pluma, colores = COLORES_COCHE, pieza, semilla = 0}) => {
+	const curva = useMemo(() => new THREE.CatmullRomCurve3(camino.map((p) => new THREE.Vector3(...p)), false, 'catmullrom', 0.02), [JSON.stringify(camino)]);
+	const L = curva.getLength();
+	// posición libre de cada coche (sin pluma), sin dar la vuelta: el coche 0 va adelante
+	const libre = (i: number, tt: number) => velocidad * tt + desfase - i * separacion;
+	const filas = (pluma?.cerrada ?? []).map(() => 0); // cuántos coches hacen fila en cada cierre
+	const pos: number[] = [];
+	for (let i = 0; i < n; i++) {
+		let retraso = 0; // segundos que este coche lleva detenido
+		if (pluma)
+			pluma.cerrada.forEach(([c0, c1], k) => {
+				const enCierre = libre(i, c0) - retraso * velocidad;
+				// la siguiente pluma por delante (la pluma está en d, d + L, d + 2L... porque el camino se repite)
+				const pl = pluma.d + Math.ceil((enCierre - pluma.d) / L) * L;
+				const lugar = pl - filas[k] * separacion;
+				const llega = c0 + Math.max(0, (lugar - enCierre) / velocidad);
+				if (llega >= c1) return; // llega cuando ya abrió
+				filas[k]++;
+				if (t > llega) retraso += Math.min(t, c1) - llega;
+			});
+		let s = libre(i, t) - retraso * velocidad;
+		if (pos.length) s = Math.min(s, pos[pos.length - 1] - separacion);
+		pos.push(s);
+	}
+	return (
+		<group>
+			{pos.map((s, i) => {
+				const u = ((s % L) + L) % L / L;
+				const p = curva.getPointAt(u);
+				const d = curva.getTangentAt(u);
+				const ang = Math.atan2(-d.z, d.x);
+				const color = colores[(i + semilla) % colores.length];
+				// aparecen y desaparecen encogiéndose en los extremos del camino (no saltan de un lado a otro)
+				const borde = suave(Math.min(u * L, (1 - u) * L) / (separacion * 0.45));
+				if (borde <= 0.01) return null;
+				return (
+					<group key={i} position={p} rotation={[0, ang, 0]} scale={borde}>
+						{pieza ? pieza(i, color, t) : <Coche color={color} t={t} />}
+					</group>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Pluma (barrera) de caseta: `abierta` 0..1 la levanta. El brazo mide `largo` y apunta a +x. */
+export const Pluma: React.FC<Pieza & {abierta?: number; largo?: number}> = ({abierta = 0, largo = 3.2, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.5, 0]} castShadow>
+			<boxGeometry args={[0.4, 1, 0.4]} />
+			{MAT('#FFC928', 0.5)}
+		</mesh>
+		<group position={[0, 0.85, 0]} rotation={[0, 0, (suave(abierta) * 80 * Math.PI) / 180]}>
+			{Array.from({length: 8}, (_, i) => (
+				<mesh key={i} position={[(i + 0.5) * (largo / 8), 0, 0]} castShadow>
+					<boxGeometry args={[largo / 8, 0.12, 0.12]} />
+					{MAT(i % 2 ? '#FFFFFF' : '#E5484D', 0.5)}
+				</mesh>
+			))}
+		</group>
+	</group>
+);
+
+/**
+ * Rayos X: recorta lo que envuelve con un plano para ver adentro. `k` (0..1) abre el corte (anímalo con el tiempo).
+ * `eje`: hacia dónde se abre ('z' quita la mitad de enfrente). Lo que va adentro (agua, flotador) ponlo fuera de <Corte>.
+ */
+export const Corte: React.FC<{k: number; eje?: 'x' | 'y' | 'z'; centro?: number; tam?: number; children: React.ReactNode}> = ({k, eje = 'z', centro = 0, tam = 2, children}) => {
+	const ref = useRef<THREE.Group>(null);
+	const plano = useMemo(() => new THREE.Plane(), []);
+	useLayoutEffect(() => {
+		const n = eje === 'x' ? new THREE.Vector3(-1, 0, 0) : eje === 'y' ? new THREE.Vector3(0, -1, 0) : new THREE.Vector3(0, 0, -1);
+		// k = 0: el plano queda fuera (no recorta); k = 1: corta por `centro`
+		const d = centro + (1 - suave(k)) * tam;
+		const mundo = new THREE.Vector3();
+		ref.current?.getWorldPosition(mundo);
+		const off = eje === 'x' ? mundo.x : eje === 'y' ? mundo.y : mundo.z;
+		plano.set(n, d + off);
+		ref.current?.traverse((o: any) => {
+			if (!o.isMesh) return;
+			const mats = Array.isArray(o.material) ? o.material : [o.material];
+			for (const m of mats) {
+				m.clippingPlanes = k > 0 ? [plano] : null;
+				m.side = THREE.DoubleSide;
+			}
+		});
+	});
+	return <group ref={ref}>{children}</group>;
+};
+
+/** Gotas de agua que caen de `de` a `a` (por un tubo transparente o de una llave). */
+export const Gotas: React.FC<{de: V3; a: V3; t: number; n?: number; velocidad?: number; color?: string; tam?: number}> = ({de, a, t, n = 6, velocidad = 1.4, color = '#4FB3FF', tam = 0.09}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => {
+			const k = (t * velocidad + i / n) % 1;
+			return (
+				<mesh key={i} position={[de[0] + (a[0] - de[0]) * k, de[1] + (a[1] - de[1]) * k, de[2] + (a[2] - de[2]) * k]} scale={[1, 1.4, 1]}>
+					<sphereGeometry args={[tam, 8, 6]} />
+					<meshStandardMaterial color={color} roughness={0.15} emissive={color} emissiveIntensity={0.35} transparent opacity={0.9} />
+				</mesh>
+			);
+		})}
+	</group>
+);
+
+/** Confeti 3D que estalla en `pos` cuando `t` pasa de `en`. */
+export const Confeti3D: React.FC<{pos: V3; t: number; en: number; n?: number; colores?: string[]}> = ({pos, t, en, n = 60, colores = ['#FFC400', '#FF5A8A', '#4FB3FF', '#5ADC6E', '#FFFFFF']}) => {
+	const dt = t - en;
+	if (dt < 0 || dt > 3) return null;
+	return (
+		<group position={pos}>
+			{Array.from({length: n}, (_, i) => {
+				const ang = azarN(i) * Math.PI * 2;
+				const v = 2 + azarN(i * 3) * 3;
+				const vy = 4 + azarN(i * 5) * 4;
+				const x = Math.cos(ang) * v * dt;
+				const z = Math.sin(ang) * v * dt;
+				const y = vy * dt - 4.9 * dt * dt * 0.6;
+				return (
+					<mesh key={i} position={[x, y, z]} rotation={[dt * 8 + i, dt * 6, i]}>
+						<boxGeometry args={[0.12, 0.02, 0.07]} />
+						<meshStandardMaterial color={colores[i % colores.length]} roughness={0.5} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Linterna: un foco con su cono visible, de `pos` hacia `mirar` (escenas de noche). */
+export const Linterna: React.FC<{pos: V3; mirar: V3; color?: string; fuerza?: number; angulo?: number}> = ({pos, mirar, color = '#FFF1C2', fuerza = 6, angulo = 0.38}) => {
+	const objetivo = useMemo(() => new THREE.Object3D(), []);
+	useLayoutEffect(() => {
+		objetivo.position.set(...mirar);
+		objetivo.updateMatrixWorld();
+	});
+	const dir = new THREE.Vector3(...mirar).sub(new THREE.Vector3(...pos));
+	const largo = dir.length();
+	const q = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, -1, 0), dir.clone().normalize());
+	const medio = new THREE.Vector3(...pos).add(dir.clone().multiplyScalar(0.5));
+	return (
+		<group>
+			<primitive object={objetivo} />
+			<spotLight position={pos} target={objetivo} angle={angulo} penumbra={0.6} decay={0} intensity={fuerza} color={color} castShadow />
+			<mesh position={medio} quaternion={q}>
+				<coneGeometry args={[Math.tan(angulo) * largo, largo, 32, 1, true]} />
+				<meshBasicMaterial color={color} transparent opacity={0.09} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+			</mesh>
+		</group>
+	);
+};