morfeo 0.1.3 → 0.2.0

package/python/preparar.py

@@ -255,7 +255,7 @@ def preparar(job):
     subs = [dict(a=round(c[0][1], 3), b=round(c[-1][2], 3), w=[[x[0].upper(), round(x[1], 3), round(x[2], 3)] for x in c])
             for ws in WORDS for c in trozos(ws)]
     datos = dict(id=vid, titulo=v.get("title", vid), indice=job.get("indice", 0), duracion=round(sum(durs), 3),
-                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [],
+                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [], mundo=v.get("mundo") or [], serie=v.get("serie"),
                  audio=f"v/{vid}/mix.wav", whisper=reales, escenas=escenas, subtitulos=subs)
     json.dump(datos, open(os.path.join(outdir, "datos.json"), "w", encoding="utf-8"), ensure_ascii=False, indent=1)
     print(f"    tiempos por palabra: {'Whisper' if reales else 'reparto por frase'} ({reales}/{len(TIM)} escenas)", flush=True)

package/remotion/estilo.ts

@@ -54,6 +54,19 @@ export const backOut = (x: number, s = 1.9) => {
 	const c = clamp(x) - 1;
 	return c * c * ((s + 1) * c + s) + 1;
 };
+/** Resorte amortiguado normalizado a 0..1: llega rápido, se pasa un poco y se asienta. `rebote` 0 = sin pasarse. */
+export const resorte = (x: number, rebote = 0.35) => {
+	const c = clamp(x);
+	if (c >= 1) return 1;
+	return 1 - Math.exp(-7.5 * c) * Math.cos(c * Math.PI * (1.2 + rebote * 3.2));
+};
+/** Frenado fuerte: casi todo el recorrido en el primer tercio (movimiento "seco", editorial). */
+export const easeOutExpo = (x: number) => {
+	const c = clamp(x);
+	return c >= 1 ? 1 : 1 - 2 ** (-10 * c);
+};
+/** Ruido suave determinista en -1..1 (suma de senos con fases distintas): temblores y derivas de cámara. */
+export const ruido = (t: number, semilla = 0) => (Math.sin(t * 1.7 + semilla) + Math.sin(t * 2.9 + semilla * 2.3) * 0.6 + Math.sin(t * 5.3 + semilla * 4.1) * 0.3) / 1.9;
 export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
 export const mezclaColor = (c1: string, c2: string, t: number) => {
 	const p = (c: string) => [1, 3, 5].map((i) => parseInt(c.slice(i, i + 2), 16));

package/remotion/kit/ilustrado.tsx

@@ -0,0 +1,220 @@
+// Kit ilustrado 2D: piezas SVG para armar el mundo de un video (bosque, noche, campo) en un componente propio.
+// Todas van DENTRO de un <svg> y dependen solo de sus props (y de `t` en segundos): nada se anima solo.
+//
+//   import {Filtros, Cielo, Estrellas, Luna, Montanas, Pinos, Suelo, Pasto, Luciernagas, Paralaje, Texturizado} from 'morfeo/kit';
+//
+// Un mundo se dibuja más grande que el cuadro (p. ej. 2160×1920) y la cámara lo recorre con la `toma` de cada escena.
+// `Paralaje` mueve cada plano según la cámara: lo lejano casi no se mueve y lo cercano se mueve de más.
+import React from 'react';
+
+export const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+export const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+/** Número pseudoaleatorio estable en [0, 1) a partir de un entero. */
+export const azarN = (n: number) => {
+	const x = Math.sin(n * 127.1 + 11.7) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+export type Camara = {x: number; y: number; zoom: number; giro: number};
+
+/**
+ * Filtros compartidos (ponlo una vez dentro del <svg>):
+ *   url(#kit-grano)  motas oscuras recortadas a la figura (papel, pelaje, tierra)
+ *   url(#kit-brillo) resplandor suave alrededor (luna, luciérnagas, luces)
+ *   url(#kit-lejos)  desenfoque leve para lo que queda fuera de foco
+ */
+export const Filtros: React.FC<{grano?: number}> = ({grano = 0.55}) => (
+	<defs>
+		<filter id="kit-grano" x="-5%" y="-5%" width="110%" height="110%">
+			<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" result="ruido" />
+			<feColorMatrix in="ruido" type="matrix" values={`0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  ${grano} 0 0 0 ${-grano * 0.32}`} result="motas" />
+			<feComposite in="motas" in2="SourceAlpha" operator="in" result="recorte" />
+			<feMerge>
+				<feMergeNode in="SourceGraphic" />
+				<feMergeNode in="recorte" />
+			</feMerge>
+		</filter>
+		<filter id="kit-brillo" x="-60%" y="-60%" width="220%" height="220%">
+			<feGaussianBlur stdDeviation="14" result="b" />
+			<feMerge>
+				<feMergeNode in="b" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+		<filter id="kit-lejos" x="-10%" y="-10%" width="120%" height="120%">
+			<feGaussianBlur stdDeviation="5" />
+		</filter>
+	</defs>
+);
+
+/** Grupo con grano recortado a sus figuras. Úsalo en personajes y objetos, no en fondos enormes (cuesta render). */
+export const Texturizado: React.FC<{children: React.ReactNode}> = ({children}) => <g filter="url(#kit-grano)">{children}</g>;
+
+/**
+ * Plano con paralaje. `profundidad`: 0 = pegado al mundo, 1 = fijo en pantalla (infinitamente lejos),
+ * negativo = primer plano (se mueve más que el mundo). Sin `camara` no hace nada.
+ */
+export const Paralaje: React.FC<{camara?: Camara; profundidad: number; children: React.ReactNode}> = ({camara, profundidad, children}) => {
+	if (!camara || !profundidad) return <g>{children}</g>;
+	return <g transform={`translate(${(camara.x - 540) * profundidad} ${(camara.y - 960) * profundidad * 0.6})`}>{children}</g>;
+};
+
+/** Cielo en degradado vertical. Dale margen de sobra (x0, x1, y0) para que la cámara nunca vea el borde. */
+export const Cielo: React.FC<{id?: string; colores: string[]; x0?: number; x1?: number; y0?: number; y1?: number}> = ({id = 'kit-cielo', colores, x0 = -1200, x1 = 3400, y0 = -900, y1 = 1920}) => (
+	<>
+		<defs>
+			<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+				{colores.map((c, i) => (
+					<stop key={i} offset={i / Math.max(1, colores.length - 1)} stopColor={c} />
+				))}
+			</linearGradient>
+		</defs>
+		<rect x={x0} y={y0} width={x1 - x0} height={y1 - y0} fill={`url(#${id})`} />
+	</>
+);
+
+/** Estrellas que titilan. */
+export const Estrellas: React.FC<{t: number; n?: number; x0?: number; x1?: number; y0?: number; y1?: number; semilla?: number}> = ({t, n = 90, x0 = -400, x1 = 2600, y0 = -300, y1 = 1100, semilla = 0}) => (
+	<g>
+		{Array.from({length: n}, (_, i) => {
+			const s = semilla + i;
+			const o = 0.3 + 0.7 * Math.abs(Math.sin(t * (0.8 + azarN(s + 300) * 1.8) + i));
+			return <circle key={i} cx={x0 + azarN(s) * (x1 - x0)} cy={y0 + azarN(s + 100) * (y1 - y0)} r={1.2 + azarN(s + 200) * 2.6} fill="#fff" opacity={o} />;
+		})}
+	</g>
+);
+
+/** Luna con halo y cráteres; con `cara` tiene ojos y boca, y con `canta` (0..1) abre la boca al ritmo. */
+export const Luna: React.FC<{x: number; y: number; r?: number; t?: number; cara?: boolean; canta?: number}> = ({x, y, r = 110, t = 0, cara, canta = 0}) => {
+	const u = r / 110;
+	const boca = canta > 0 ? (6 + Math.abs(Math.sin(t * 9)) * 14) * canta : 0;
+	return (
+		<g transform={`translate(${x} ${y}) scale(${u})`}>
+			<defs>
+				<radialGradient id="kit-halo">
+					<stop offset="0" stopColor="rgba(255,240,200,0.6)" />
+					<stop offset="1" stopColor="rgba(255,240,200,0)" />
+				</radialGradient>
+			</defs>
+			<circle r={300} fill="url(#kit-halo)" />
+			<g filter="url(#kit-grano)">
+				<circle r={110} fill="#FFF4D6" />
+				<circle cx={-34} cy={-26} r={16} fill="rgba(210,190,150,0.45)" />
+				<circle cx={38} cy={30} r={22} fill="rgba(210,190,150,0.4)" />
+				<circle cx={18} cy={-48} r={9} fill="rgba(210,190,150,0.4)" />
+			</g>
+			{cara ? (
+				<g>
+					{canta > 0.5 ? (
+						<>
+							<path d="M-42 -8 Q-30 -18 -18 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+							<path d="M18 -8 Q30 -18 42 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+						</>
+					) : (
+						<>
+							<circle cx={-30} cy={-10} r={8} fill="#6B5236" />
+							<circle cx={30} cy={-10} r={8} fill="#6B5236" />
+						</>
+					)}
+					<ellipse cx={0} cy={34} rx={canta > 0.5 ? 14 : 16} ry={canta > 0.5 ? boca : 4} fill={canta > 0.5 ? '#7A3B3B' : '#6B5236'} />
+					<circle cx={-58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+					<circle cx={58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+				</g>
+			) : null}
+		</g>
+	);
+};
+
+/** Cordillera: una silueta de picos irregulares entre x0 y x1, con la base en `base`. */
+export const Montanas: React.FC<{base: number; alto: number; x0?: number; x1?: number; picos?: number; semilla?: number; color: string}> = ({base, alto, x0 = -600, x1 = 2800, picos = 9, semilla = 0, color}) => {
+	let d = `M${x0} ${base + 400} L${x0} ${base}`;
+	for (let i = 0; i <= picos; i++) {
+		const x = x0 + ((x1 - x0) * i) / picos;
+		const h = alto * (0.45 + azarN(semilla + i * 5) * 0.55);
+		d += ` L${x - (x1 - x0) / picos / 2} ${base - h} L${x} ${base - h * 0.35}`;
+	}
+	return <path d={`${d} L${x1} ${base + 400} Z`} fill={color} />;
+};
+
+/** Fila de pinos como un solo trazado (liviano). */
+export const Pinos: React.FC<{base: number; alto: number; ancho: number; n: number; x0?: number; x1?: number; semilla?: number; color: string}> = ({base, alto, ancho, n, x0 = -500, x1 = 2700, semilla = 0, color}) => {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const cx = x0 + ((x1 - x0) * i) / Math.max(1, n - 1) + (azarN(semilla + i) - 0.5) * ancho * 0.6;
+		const h = alto * (0.75 + azarN(semilla + i * 3) * 0.5);
+		const w = ancho * (0.8 + azarN(semilla + i * 7) * 0.4);
+		for (let p = 0; p < 3; p++) {
+			const top = base - h + p * h * 0.26;
+			const bot = base - h * 0.32 + p * h * 0.22;
+			const ww = w * (0.55 + p * 0.25);
+			d += `M${cx} ${top} L${cx + ww / 2} ${bot} L${cx - ww / 2} ${bot} Z `;
+		}
+		d += `M${cx - w * 0.06} ${base - h * 0.12} h${w * 0.12} v${h * 0.16} h${-w * 0.12} Z `;
+	}
+	return <path d={d} fill={color} />;
+};
+
+/** Suelo ondulado: una loma suave de x0 a x1 que baja hasta `fondo`. `y(x)` da la altura del suelo en un punto. */
+export const alturaSuelo = (x: number, y: number, onda = 28) => y + Math.sin(x / 310) * onda + Math.sin(x / 127 + 1.3) * onda * 0.3;
+export const Suelo: React.FC<{y: number; x0?: number; x1?: number; fondo?: number; onda?: number; id?: string; colores: [string, string]}> = ({y, x0 = -800, x1 = 3000, fondo = 2600, onda = 28, id = 'kit-suelo', colores}) => {
+	let d = `M${x0} ${fondo}`;
+	for (let x = x0; x <= x1; x += 40) d += ` L${x} ${alturaSuelo(x, y, onda)}`;
+	return (
+		<>
+			<defs>
+				<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor={colores[0]} />
+					<stop offset="0.55" stopColor={colores[1]} />
+				</linearGradient>
+			</defs>
+			<path d={`${d} L${x1} ${fondo} Z`} fill={`url(#${id})`} />
+		</>
+	);
+};
+
+/** Briznas de pasto sobre el suelo, que se mecen con el viento. */
+export const Pasto: React.FC<{y: number; t: number; n?: number; x0?: number; x1?: number; alto?: number; onda?: number; semilla?: number; color: string; grosor?: number}> = ({y, t, n = 160, x0 = -400, x1 = 2600, alto = 46, onda = 28, semilla = 0, color, grosor = 5}) => {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const x = x0 + ((x1 - x0) * (i + azarN(semilla + i) * 0.9)) / n;
+		const h = alto * (0.5 + azarN(semilla + i * 3) * 0.8);
+		const viento = Math.sin(t * 1.6 + x / 140) * h * 0.22 + (azarN(semilla + i * 9) - 0.5) * h * 0.5;
+		const by = alturaSuelo(x, y, onda) + 6;
+		d += `M${x} ${by} Q${x + viento * 0.3} ${by - h * 0.6} ${x + viento} ${by - h} `;
+	}
+	return <path d={d} stroke={color} strokeWidth={grosor} strokeLinecap="round" fill="none" />;
+};
+
+/** Luciérnagas: puntos cálidos que flotan y parpadean. */
+export const Luciernagas: React.FC<{t: number; n?: number; x0?: number; x1?: number; y0?: number; y1?: number; semilla?: number; color?: string}> = ({t, n = 26, x0 = 0, x1 = 2160, y0 = 1000, y1 = 1700, semilla = 0, color = '#FFE98A'}) => (
+	<g filter="url(#kit-brillo)">
+		{Array.from({length: n}, (_, i) => {
+			const s = semilla + i;
+			const x = x0 + azarN(s) * (x1 - x0) + Math.sin(t * (0.4 + azarN(s + 50) * 0.5) + i) * 40;
+			const y = y0 + azarN(s + 20) * (y1 - y0) + Math.cos(t * (0.3 + azarN(s + 70) * 0.5) + i * 2) * 30;
+			const o = 0.25 + 0.75 * Math.abs(Math.sin(t * (0.9 + azarN(s + 90)) + i * 1.7));
+			return <circle key={i} cx={x} cy={y} r={3 + azarN(s + 40) * 3} fill={color} opacity={o} />;
+		})}
+	</g>
+);
+
+/** Sombra de contacto: una elipse oscura y suave bajo los pies de algo. */
+export const Sombra: React.FC<{x: number; y: number; ancho: number; fuerza?: number}> = ({x, y, ancho, fuerza = 0.35}) => (
+	<ellipse cx={x} cy={y} rx={ancho / 2} ry={ancho * 0.09} fill={`rgba(0,0,0,${fuerza})`} filter="url(#kit-lejos)" />
+);
+
+/** Cono de luz (lámpara, luna, linterna) desde (x, y) hacia abajo, girado `angulo` grados. */
+export const ConoLuz: React.FC<{id?: string; x: number; y: number; ancho: number; largo: number; angulo?: number; color?: string; fuerza?: number}> = ({id = 'kit-cono', x, y, ancho, largo, angulo = 0, color = '#FFE8B0', fuerza = 0.35}) => (
+	<g transform={`rotate(${angulo} ${x} ${y})`} style={{mixBlendMode: 'screen'}}>
+		<defs>
+			<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0" stopColor={color} stopOpacity={fuerza} />
+				<stop offset="1" stopColor={color} stopOpacity="0" />
+			</linearGradient>
+		</defs>
+		<polygon points={`${x - 30},${y} ${x + 30},${y} ${x + ancho / 2},${y + largo} ${x - ancho / 2},${y + largo}`} fill={`url(#${id})`} filter="url(#kit-lejos)" />
+	</g>
+);

package/remotion/kit/index.ts

@@ -0,0 +1,6 @@
+// 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)
+export * from './ilustrado';
+export * from './tres';
+export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';

package/remotion/kit/tres.tsx

@@ -0,0 +1,328 @@
+// Kit 3D: piezas de Three.js para armar el mundo de un video (maqueta en corte, mesa con foco de luz) en un componente propio.
+//
+//   import {Lienzo3D, Terreno, Tubo, Arbol, Casa, Mesa, Pila} from 'morfeo/kit';
+//
+// Todo el mundo va en UN solo <Lienzo3D> (Chrome aguanta ~16 contextos WebGL: no pongas un lienzo por objeto).
+// La cámara se mueve por `tomas`: una por escena; viaja desde donde terminó la anterior y luego deriva despacio.
+// Nada usa useFrame: todo depende de las props (`t`, `tEscena`), como pide Remotion.
+import {useThree} from '@react-three/fiber';
+import {ThreeCanvas} from '@remotion/three';
+import React, {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import * as THREE from 'three';
+import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
+import {azarN} from './ilustrado';
+
+export {Objeto3D} from '../motor/objetos3d';
+
+type V3 = [number, number, number];
+const suave = (x: number) => {
+	const c = Math.max(0, Math.min(1, x));
+	return c * c * (3 - 2 * c);
+};
+const mezcla = (a: V3, b: V3, k: number): V3 => [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k, a[2] + (b[2] - a[2]) * k];
+
+/**
+ * Toma de cámara de una escena: dónde está (`pos`) y a dónde mira (`mirar`). Con `a` se mueve hasta ahí durante la
+ * 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};
+
+/** 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 {
+	const de = (i: number): Toma3D => {
+		for (let j = Math.min(i, tomas.length - 1); j >= 0; j--) if (tomas[j]) return tomas[j]!;
+		return {pos: [6, 4, 8]};
+	};
+	const inicio = (i: number): Estado => ({pos: de(i).pos, mirar: de(i).mirar ?? [0, 0, 0], fov: de(i).fov ?? 38});
+	const final = (i: number): Estado => {
+		const tm = tomas[i] ? de(i) : ({...de(i), a: undefined} as Toma3D);
+		const a = inicio(i);
+		if (tm.a) return {pos: tm.a.pos ?? a.pos, mirar: tm.a.mirar ?? a.mirar, fov: tm.a.fov ?? a.fov};
+		return {...a, pos: mezcla(a.pos, a.mirar, tm.deriva ?? 0.06)};
+	};
+	const i = Math.max(0, escena - 1);
+	const tm = de(i);
+	const dur = inicios && inicios[i + 1] != null ? inicios[i + 1] - inicios[i] : 5;
+	const viaje = tm.corte || i === 0 || !tomas[i] ? 0 : tm.viaje ?? Math.min(1.2, dur * 0.5);
+	const a = inicio(i);
+	const b = final(i);
+	const kd = Math.max(0, Math.min(1, (tEscena - viaje * 0.6) / Math.max(0.01, dur - viaje * 0.6)));
+	const kq = tm.a ? suave(kd) : kd;
+	const actual: Estado = {pos: mezcla(a.pos, b.pos, kq), mirar: mezcla(a.mirar, b.mirar, kq), fov: a.fov + (b.fov - a.fov) * kq};
+	if (viaje <= 0 || tEscena >= viaje) return actual;
+	const o = final(i - 1);
+	const kv = suave(tEscena / viaje);
+	return {pos: mezcla(o.pos, actual.pos, kv), mirar: mezcla(o.mirar, actual.mirar, kv), fov: o.fov + (actual.fov - o.fov) * kv};
+}
+
+const Camara: React.FC<{estado: Estado}> = ({estado}) => {
+	const {camera} = useThree();
+	useLayoutEffect(() => {
+		camera.position.set(...estado.pos);
+		camera.lookAt(...estado.mirar);
+		const p = camera as THREE.PerspectiveCamera;
+		if (p.isPerspectiveCamera) {
+			p.fov = estado.fov;
+			p.updateProjectionMatrix();
+		}
+	});
+	return null;
+};
+
+const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
+	const {gl, scene} = useThree();
+	useEffect(() => {
+		const pmrem = new THREE.PMREMGenerator(gl);
+		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+		scene.environment = tex;
+		scene.environmentIntensity = fuerza;
+		return () => {
+			tex.dispose();
+			pmrem.dispose();
+		};
+	}, [gl, scene, fuerza]);
+	return null;
+};
+
+/**
+ * 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)
+ */
+export const Lienzo3D: React.FC<{
+	tomas: (Toma3D | undefined | null)[];
+	escena?: number;
+	tEscena?: number;
+	inicios?: number[];
+	luz?: 'dia' | 'calida';
+	fondo?: string;
+	niebla?: [number, number];
+	sol?: V3;
+	foco?: V3;
+	children: React.ReactNode;
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], children}) => {
+	const estado = camara3D(tomas, escena, tEscena, inicios);
+	const color = fondo ?? (luz === 'dia' ? '#BFE3FF' : '#120A06');
+	return (
+		<div style={{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} />
+				{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={0.22} />
+						<ambientLight color="#6A4630" intensity={0.55} />
+						<spotLight position={foco} angle={0.52} penumbra={0.85} decay={0} intensity={3.4} color="#FFDDAA" castShadow shadow-mapSize={[2048, 2048]} shadow-bias={-0.0004} />
+						{/* cono de luz visible */}
+						<mesh position={[foco[0], foco[1] / 2, foco[2]]}>
+							<coneGeometry args={[foco[1] * 0.56, foco[1], 48, 1, true]} />
+							<meshBasicMaterial color="#FFD9A0" transparent opacity={0.055} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+						</mesh>
+					</>
+				)}
+				{children}
+			</ThreeCanvas>
+		</div>
+	);
+};
+
+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});
+
+/** 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}) => (
+	<mesh {...grupo(p)} castShadow receiveShadow>
+		<boxGeometry args={tam} />
+		<meshStandardMaterial color={color} roughness={rugosidad} metalness={metal} transparent={opacidad != null} opacity={opacidad ?? 1} />
+	</mesh>
+);
+
+/**
+ * Terreno en corte: capas apiladas hacia abajo desde y = 0 (pasto, tierra, roca...). La cara de enfrente (z = fondo / 2)
+ * queda a la vista para mostrar lo que hay bajo tierra. capas: [[color, grosor], ...]
+ */
+export const Terreno: React.FC<Pieza & {ancho?: number; fondo?: number; capas?: [string, number][]}> = ({ancho = 22, fondo = 9, capas = [['#6CC04A', 0.35], ['#8A5A3B', 3.2], ['#77726E', 3]], ...p}) => {
+	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={color} roughness={0.95} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Piedritas incrustadas en la cara del corte, para que la tierra no se vea plana. */
+export const Piedras: React.FC<{n?: number; ancho?: number; y0?: number; y1?: number; z: number; color?: string; semilla?: number}> = ({n = 40, ancho = 22, y0 = -0.6, y1 = -6, z, color = '#6B4530', semilla = 0}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => (
+			<mesh key={i} position={[(azarN(semilla + i) - 0.5) * ancho * 0.96, y0 + (y1 - y0) * azarN(semilla + i * 3 + 1), z]} rotation={[0, 0, azarN(semilla + i * 7) * 3]} scale={[1, 0.7, 0.25]}>
+				<icosahedronGeometry args={[0.08 + azarN(semilla + i * 5) * 0.14, 0]} />
+				<meshStandardMaterial color={color} roughness={1} flatShading />
+			</mesh>
+		))}
+	</group>
+);
+
+/** Árbol low-poly: tronco y dos copas facetadas. */
+export const Arbol: React.FC<Pieza & {semilla?: number; color?: string}> = ({semilla = 0, color = '#3F9B3A', ...p}) => {
+	const k = 0.85 + azarN(semilla) * 0.4;
+	return (
+		<group {...grupo(p)}>
+			<group scale={k} rotation={[0, azarN(semilla + 1) * 6, 0]}>
+				<mesh position={[0, 0.55, 0]} castShadow>
+					<cylinderGeometry args={[0.11, 0.17, 1.1, 7]} />
+					<meshStandardMaterial color="#7A4E2D" roughness={0.9} flatShading />
+				</mesh>
+				<mesh position={[0, 1.45, 0]} castShadow>
+					<icosahedronGeometry args={[0.72, 0]} />
+					<meshStandardMaterial color={color} roughness={0.85} flatShading />
+				</mesh>
+				<mesh position={[0.28, 1.95, 0.1]} castShadow>
+					<icosahedronGeometry args={[0.46, 0]} />
+					<meshStandardMaterial color={color} roughness={0.85} flatShading />
+				</mesh>
+			</group>
+		</group>
+	);
+};
+
+/** Arbusto: una bola facetada aplastada. */
+export const Arbusto: React.FC<Pieza & {color?: string}> = ({color = '#4FAE45', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.3, 0]} scale={[1, 0.7, 1]} castShadow>
+			<icosahedronGeometry args={[0.5, 1]} />
+			<meshStandardMaterial color={color} roughness={0.9} flatShading />
+		</mesh>
+	</group>
+);
+
+/** Casa sencilla: cuerpo, techo a cuatro aguas, puerta y ventana. Mide ~2.4 de ancho; la base queda en y = 0. */
+export const Casa: React.FC<Pieza & {color?: string; techo?: string}> = ({color = '#F2E6D0', techo = '#D9533B', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.8, 0]} castShadow receiveShadow>
+			<boxGeometry args={[2.4, 1.6, 2]} />
+			<meshStandardMaterial color={color} roughness={0.85} />
+		</mesh>
+		<mesh position={[0, 2.05, 0]} rotation={[0, Math.PI / 4, 0]} castShadow>
+			<coneGeometry args={[1.95, 0.95, 4]} />
+			<meshStandardMaterial color={techo} roughness={0.8} flatShading />
+		</mesh>
+		<mesh position={[-0.5, 0.5, 1.01]}>
+			<boxGeometry args={[0.5, 1, 0.04]} />
+			<meshStandardMaterial color="#7A4E2D" roughness={0.8} />
+		</mesh>
+		<mesh position={[0.55, 0.95, 1.01]}>
+			<boxGeometry args={[0.6, 0.5, 0.04]} />
+			<meshStandardMaterial color="#9AD4F5" roughness={0.3} />
+		</mesh>
+	</group>
+);
+
+/**
+ * Tubo que pasa por `puntos`. `agua` (0..1) lo llena desde el primer punto: anímalo con el tiempo para que el agua avance.
+ * El tubo es translúcido para que se vea lo que lleva dentro.
+ */
+export const Tubo: React.FC<{puntos: V3[]; radio?: number; color?: string; agua?: number; colorAgua?: string; opacidad?: number}> = ({puntos, radio = 0.22, color = '#E3E5EA', agua = 0, colorAgua = '#1E8BFF', opacidad = 0.34}) => {
+	const llave = JSON.stringify(puntos);
+	const SEG = 220;
+	const RADIAL = 14;
+	const [exterior, interior] = useMemo(() => {
+		const curva = new THREE.CatmullRomCurve3(
+			puntos.map((p) => new THREE.Vector3(...p)),
+			false,
+			'catmullrom',
+			0.06,
+		);
+		return [new THREE.TubeGeometry(curva, SEG, radio, RADIAL, false), new THREE.TubeGeometry(curva, SEG, radio * 0.8, RADIAL, false)];
+	}, [llave, radio]);
+	const k = Math.max(0, Math.min(1, agua));
+	useLayoutEffect(() => {
+		interior.setDrawRange(0, Math.floor(k * SEG) * RADIAL * 6);
+	});
+	return (
+		<group>
+			{k > 0 ? (
+				<mesh geometry={interior}>
+					<meshStandardMaterial color={colorAgua} roughness={0.25} emissive={colorAgua} emissiveIntensity={0.55} />
+				</mesh>
+			) : null}
+			<mesh geometry={exterior} castShadow>
+				<meshStandardMaterial color={color} roughness={0.35} transparent opacity={opacidad} depthWrite={false} />
+			</mesh>
+		</group>
+	);
+};
+
+/** Superficie de agua (río, lago, charco). */
+export const Agua: React.FC<Pieza & {tam: [number, number]; color?: string}> = ({tam, color = '#3AA7FF', ...p}) => (
+	<mesh {...grupo(p)} receiveShadow>
+		<boxGeometry args={[tam[0], 0.06, tam[1]]} />
+		<meshStandardMaterial color={color} roughness={0.15} metalness={0.1} transparent opacity={0.9} />
+	</mesh>
+);
+
+/** Mesa de madera redonda y grande: el piso de las escenas con foco de luz. La superficie queda en y = 0. */
+export const Mesa: React.FC<{radio?: number; color?: string}> = ({radio = 14, color = '#6B4226'}) => (
+	<mesh position={[0, -0.25, 0]} receiveShadow>
+		<cylinderGeometry args={[radio, radio, 0.5, 64]} />
+		<meshStandardMaterial color={color} roughness={0.62} metalness={0.05} />
+	</mesh>
+);
+
+/**
+ * Pilas de monedas o billetes. `n` = cuántas piezas se ven (anímalo para que la pila crezca); se reparten en
+ * columnas de `porColumna`, acomodadas en una rejilla alrededor de `pos`.
+ */
+export const Pila: React.FC<{forma?: 'moneda' | 'billete'; n: number; max?: number; porColumna?: number; pos?: V3; color?: string; separacion?: number; semilla?: number}> = ({forma = 'moneda', n, max = 400, porColumna = 24, pos = [0, 0, 0], color, separacion, semilla = 0}) => {
+	const ref = useRef<THREE.InstancedMesh>(null);
+	const moneda = forma === 'moneda';
+	const alto = moneda ? 0.1 : 0.04;
+	const paso = separacion ?? (moneda ? 1.15 : 1.9);
+	useLayoutEffect(() => {
+		const m = ref.current;
+		if (!m) return;
+		const cols = Math.ceil(max / porColumna);
+		const lado = Math.ceil(Math.sqrt(cols));
+		const o = new THREE.Object3D();
+		for (let i = 0; i < max; i++) {
+			const c = Math.floor(i / porColumna);
+			const nivel = i % porColumna;
+			// las columnas se llenan del centro hacia afuera
+			const cx = (c % lado) - (lado - 1) / 2;
+			const cz = Math.floor(c / lado) - (lado - 1) / 2;
+			o.position.set(cx * paso + (azarN(semilla + i) - 0.5) * 0.07, alto / 2 + nivel * (alto + 0.004), cz * (moneda ? paso : paso * 0.55) + (azarN(semilla + i * 3) - 0.5) * 0.07);
+			o.rotation.set(0, azarN(semilla + i * 7) * (moneda ? 6.28 : 0.16) - (moneda ? 0 : 0.08), 0);
+			o.updateMatrix();
+			m.setMatrixAt(i, o.matrix);
+		}
+		m.instanceMatrix.needsUpdate = true;
+	}, [max, porColumna, paso, moneda, alto, semilla]);
+	useLayoutEffect(() => {
+		if (ref.current) ref.current.count = Math.max(0, Math.min(max, Math.floor(n)));
+	});
+	return (
+		<group position={pos}>
+			<instancedMesh ref={ref} args={[undefined as any, undefined as any, max]} castShadow receiveShadow frustumCulled={false}>
+				{moneda ? <cylinderGeometry args={[0.5, 0.5, alto, 28]} /> : <boxGeometry args={[1.7, alto, 0.8]} />}
+				<meshStandardMaterial color={color ?? (moneda ? '#E8B64A' : '#7DBB86')} roughness={moneda ? 0.3 : 0.8} metalness={moneda ? 0.85 : 0.02} />
+			</instancedMesh>
+		</group>
+	);
+};