morfeo 0.1.1 → 0.1.3

package/remotion/motor/objetos3d.tsx

@@ -0,0 +1,548 @@
+// Catálogo de objetos 3D hechos en código (Three.js), para no depender de emojis:
+//   {tipo: 'modelo', forma: 'corazon'}   (todas las capas `modelo` aceptan color, metal, rugosidad, girar3d...)
+// Cada objeto mide ~2 unidades y viene centrado. Materiales con brillo: se ven bien con los reflejos del entorno.
+import React, {useMemo} from 'react';
+import * as THREE from 'three';
+
+export const OBJETOS_3D = [
+	'corazon', 'estrella', 'rayo', 'diamante', 'trofeo', 'cohete', 'foco', 'reloj', 'planeta', 'arbol',
+	'nube', 'regalo', 'llave', 'candado', 'casa', 'libro', 'globo', 'medalla', 'escudo', 'pin',
+	// construcción (aceptan opciones: ver más abajo)
+	'tuberia', 'muro', 'viga', 'columna', 'escalera', 'losa', 'tanque', 'suelo',
+] as const;
+
+type M = {color?: string; metal?: number; rugosidad?: number};
+const Mat: React.FC<{c: string; m?: number; r?: number; e?: number; o?: number} & M> = ({c, m = 0.1, r = 0.4, e = 0, o, color, metal, rugosidad}) => (
+	<meshStandardMaterial color={color ?? c} metalness={metal ?? m} roughness={rugosidad ?? r} emissive={color ?? c} emissiveIntensity={e} transparent={o != null} opacity={o ?? 1} />
+);
+
+/** Extrusión con bisel a partir de una figura 2D. */
+const Extruido: React.FC<{figura: THREE.Shape; prof?: number} & M & {c: string; m?: number; r?: number; e?: number}> = ({figura, prof = 0.45, ...mat}) => {
+	const geo = useMemo(() => {
+		const g = new THREE.ExtrudeGeometry(figura, {depth: prof, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 6, curveSegments: 24});
+		g.center();
+		return g;
+	}, [figura, prof]);
+	return (
+		<mesh geometry={geo}>
+			<Mat {...mat} />
+		</mesh>
+	);
+};
+
+const figuraCorazon = () => {
+	const s = new THREE.Shape();
+	s.moveTo(0, -1);
+	s.bezierCurveTo(-0.2, -0.75, -1.1, -0.35, -1.1, 0.25);
+	s.bezierCurveTo(-1.1, 0.8, -0.45, 1.05, 0, 0.6);
+	s.bezierCurveTo(0.45, 1.05, 1.1, 0.8, 1.1, 0.25);
+	s.bezierCurveTo(1.1, -0.35, 0.2, -0.75, 0, -1);
+	return s;
+};
+const figuraEstrella = (puntas = 5, ext = 1.1, int = 0.48) => {
+	const s = new THREE.Shape();
+	for (let i = 0; i < puntas * 2; i++) {
+		const r = i % 2 ? int : ext;
+		const a = (i / (puntas * 2)) * Math.PI * 2 + Math.PI / 2;
+		if (i === 0) s.moveTo(Math.cos(a) * r, Math.sin(a) * r);
+		else s.lineTo(Math.cos(a) * r, Math.sin(a) * r);
+	}
+	s.closePath();
+	return s;
+};
+const figuraRayo = () => {
+	const s = new THREE.Shape();
+	[[0.25, 1.1], [-0.55, -0.05], [-0.05, -0.05], [-0.3, -1.1], [0.6, 0.15], [0.1, 0.15], [0.45, 1.1]].forEach(([x, y], i) => (i ? s.lineTo(x, y) : s.moveTo(x, y)));
+	s.closePath();
+	return s;
+};
+const figuraEscudo = () => {
+	const s = new THREE.Shape();
+	s.moveTo(0, 1.05);
+	s.bezierCurveTo(0.45, 0.85, 0.8, 0.9, 0.95, 0.85);
+	s.bezierCurveTo(1.0, 0.0, 0.6, -0.7, 0, -1.1);
+	s.bezierCurveTo(-0.6, -0.7, -1.0, 0.0, -0.95, 0.85);
+	s.bezierCurveTo(-0.8, 0.9, -0.45, 0.85, 0, 1.05);
+	return s;
+};
+
+/** Torno: perfil [radio, altura] girado alrededor del eje Y (copas, focos, globos). */
+const Torno: React.FC<{perfil: [number, number][]} & M & {c: string; m?: number; r?: number; e?: number; o?: number}> = ({perfil, ...mat}) => {
+	const geo = useMemo(() => new THREE.LatheGeometry(perfil.map(([x, y]) => new THREE.Vector2(x, y)), 48), [perfil]);
+	return (
+		<mesh geometry={geo}>
+			<Mat {...mat} />
+		</mesh>
+	);
+};
+
+/**
+ * Tubería por puntos con codos redondeados. Opciones: puntos [[x,y,z]...], radio, material ('pvc' | 'cobre' | 'acero' | 'vidrio'),
+ * agua (true: gotas que fluyen por dentro; con vidrio se ven), velocidad, colorAgua.
+ */
+const Tuberia: React.FC<{t: number; o: Record<string, any>} & M> = ({t, o, ...m}) => {
+	const puntos: [number, number, number][] = o.puntos ?? [[-1.7, 1.2, 0], [-1.7, -0.4, 0], [-0.7, -0.9, 0], [0.3, -0.4, 0], [0.3, 0.3, 0], [1.8, 0.3, 0]];
+	const radio = o.radio ?? 0.16;
+	const curva = useMemo(() => new THREE.CatmullRomCurve3(puntos.map((p) => new THREE.Vector3(...p)), false, 'catmullrom', 0.08), [JSON.stringify(puntos)]);
+	const geo = useMemo(() => new THREE.TubeGeometry(curva, 220, radio, 24, false), [curva, radio]);
+	const mats: Record<string, {c: string; m: number; r: number; o?: number}> = {pvc: {c: '#E8ECEF', m: 0.05, r: 0.35}, cobre: {c: '#C77A45', m: 0.85, r: 0.3}, acero: {c: '#9AA4B2', m: 0.85, r: 0.3}, vidrio: {c: '#7FB8DE', m: 0.15, r: 0.05, o: 0.5}};
+	const mat = mats[o.material ?? (o.agua ? 'vidrio' : 'pvc')] ?? mats.pvc;
+	const n = o.gotas ?? 28;
+	const vel = o.velocidad ?? 0.18;
+	return (
+		<group>
+			<mesh geometry={geo}>
+				<Mat c={mat.c} m={mat.m} r={mat.r} o={mat.o} {...m} />
+			</mesh>
+			{/* bridas en las uniones */}
+			{puntos.slice(1, -1).map((p, i) => (
+				<mesh key={i} position={p}>
+					<sphereGeometry args={[radio * 1.18, 20, 20]} />
+					<Mat c={mat.c} m={mat.m} r={mat.r} o={mat.o} />
+				</mesh>
+			))}
+			{o.agua
+				? Array.from({length: n}, (_, i) => {
+						const k = (((t * vel + i / n) % 1) + 1) % 1;
+						const p = curva.getPointAt(k);
+						return (
+							<mesh key={i} position={[p.x, p.y, p.z]}>
+								<sphereGeometry args={[radio * 0.62, 14, 14]} />
+								<Mat c={o.colorAgua ?? '#2E86FF'} e={0.25} r={0.15} />
+							</mesh>
+						);
+					})
+				: null}
+		</group>
+	);
+};
+
+/** Muro de ladrillos. Opciones: ancho, alto (en ladrillos: columnas, filas), colorLadrillo, colorMezcla. */
+const Muro: React.FC<{o: Record<string, any>} & M> = ({o, ...m}) => {
+	const cols = o.columnas ?? 8;
+	const filas = o.filas ?? 9;
+	const [lw, lh] = [0.4, 0.18];
+	const ladrillos: [number, number][] = [];
+	for (let f = 0; f < filas; f++) for (let c = 0; c < cols + (f % 2); c++) ladrillos.push([(c - cols / 2 + (f % 2 ? -0.5 : 0) + 0.5) * (lw + 0.03), (f - filas / 2 + 0.5) * (lh + 0.03)]);
+	const ancho = cols * (lw + 0.03);
+	return (
+		<group>
+			<mesh position={[0, 0, -0.04]}>
+				<boxGeometry args={[ancho + 0.1, filas * (lh + 0.03) + 0.02, 0.12]} />
+				<Mat c={o.colorMezcla ?? '#CFC6B8'} r={0.9} />
+			</mesh>
+			{ladrillos.map(([x, y], i) => (
+				<mesh key={i} position={[Math.max(-ancho / 2 + lw / 4, Math.min(ancho / 2 - lw / 4, x)), y, 0.03]}>
+					<boxGeometry args={[Math.abs(x) > ancho / 2 - lw / 2 ? lw / 2 : lw, lh, 0.2]} />
+					<Mat c={o.colorLadrillo ?? ['#B5523B', '#A84A35', '#BF5E45'][i % 3]} r={0.85} {...m} />
+				</mesh>
+			))}
+		</group>
+	);
+};
+
+export const Objeto3D: React.FC<{forma: string; t: number; opciones?: Record<string, any>} & M> = ({forma, t, opciones: o = {}, ...m}) => {
+	const figuras = useMemo(() => ({corazon: figuraCorazon(), estrella: figuraEstrella(), rayo: figuraRayo(), escudo: figuraEscudo(), medalla: figuraEstrella(12, 0.95, 0.82)}), []);
+	switch (forma) {
+		case 'corazon':
+			return <Extruido figura={figuras.corazon} c="#FF3B5C" r={0.3} m={0.15} {...m} />;
+		case 'estrella':
+			return <Extruido figura={figuras.estrella} c="#FFC93C" r={0.25} m={0.45} {...m} />;
+		case 'rayo':
+			return <Extruido figura={figuras.rayo} c="#FFD43B" r={0.3} m={0.3} e={0.15} {...m} />;
+		case 'escudo':
+			return (
+				<group>
+					<Extruido figura={figuras.escudo} c="#2D6BFF" r={0.3} m={0.35} {...m} />
+					<group position={[0, 0.05, 0.35]} scale={0.45}>
+						<Extruido figura={figuras.estrella} c="#FFFFFF" prof={0.15} r={0.3} />
+					</group>
+				</group>
+			);
+		case 'medalla':
+			return (
+				<group>
+					<mesh position={[-0.25, 0.95, -0.1]} rotation={[0, 0, 0.35]}>
+						<boxGeometry args={[0.35, 1.0, 0.05]} />
+						<Mat c="#2D6BFF" />
+					</mesh>
+					<mesh position={[0.25, 0.95, -0.1]} rotation={[0, 0, -0.35]}>
+						<boxGeometry args={[0.35, 1.0, 0.05]} />
+						<Mat c="#E5484D" />
+					</mesh>
+					<group position={[0, -0.25, 0]} scale={0.85}>
+						<Extruido figura={figuras.medalla} c="#E8B04A" m={0.75} r={0.28} prof={0.2} {...m} />
+					</group>
+				</group>
+			);
+		case 'diamante':
+			return (
+				<group rotation={[0.25, 0, 0]}>
+					<mesh position={[0, 0.35, 0]}>
+						<cylinderGeometry args={[0.7, 1.05, 0.5, 8]} />
+						<Mat c="#7FE3FF" m={0.6} r={0.05} {...m} />
+					</mesh>
+					<mesh position={[0, -0.5, 0]} rotation={[Math.PI, 0, 0]}>
+						<coneGeometry args={[1.05, 1.2, 8]} />
+						<Mat c="#4CC9F0" m={0.6} r={0.05} {...m} />
+					</mesh>
+				</group>
+			);
+		case 'trofeo':
+			return (
+				<group position={[0, -0.1, 0]}>
+					<Torno perfil={[[0, 0.15], [0.62, 0.2], [0.7, 0.6], [0.6, 1.1], [0.15, 1.15], [0.12, 0.05], [0.35, -0.55], [0.0, -0.55]]} c="#E8B04A" m={0.8} r={0.25} {...m} />
+					<mesh position={[-0.72, 0.75, 0]} rotation={[0, 0, Math.PI / 2]}>
+						<torusGeometry args={[0.28, 0.07, 12, 24, Math.PI]} />
+						<Mat c="#E8B04A" m={0.8} r={0.25} {...m} />
+					</mesh>
+					<mesh position={[0.72, 0.75, 0]} rotation={[0, 0, -Math.PI / 2]}>
+						<torusGeometry args={[0.28, 0.07, 12, 24, Math.PI]} />
+						<Mat c="#E8B04A" m={0.8} r={0.25} {...m} />
+					</mesh>
+					<mesh position={[0, -0.75, 0]}>
+						<boxGeometry args={[1.1, 0.35, 0.8]} />
+						<Mat c="#3A2A1A" r={0.6} />
+					</mesh>
+				</group>
+			);
+		case 'cohete':
+			return (
+				<group rotation={[0, 0, -0.5]}>
+					<mesh>
+						<cylinderGeometry args={[0.42, 0.42, 1.4, 32]} />
+						<Mat c="#F2F4F7" r={0.3} {...m} />
+					</mesh>
+					<mesh position={[0, 1.0, 0]}>
+						<coneGeometry args={[0.42, 0.65, 32]} />
+						<Mat c="#E5484D" r={0.3} />
+					</mesh>
+					<mesh position={[0, 0.25, 0.4]}>
+						<circleGeometry args={[0.18, 32]} />
+						<Mat c="#2D6BFF" m={0.5} r={0.1} />
+					</mesh>
+					{[0, 1, 2].map((i) => (
+						<mesh key={i} position={[Math.cos((i * Math.PI * 2) / 3) * 0.45, -0.6, Math.sin((i * Math.PI * 2) / 3) * 0.45]} rotation={[0, -(i * Math.PI * 2) / 3, 0]}>
+							<boxGeometry args={[0.35, 0.5, 0.06]} />
+							<Mat c="#E5484D" />
+						</mesh>
+					))}
+					{/* fuego que parpadea con el tiempo */}
+					<mesh position={[0, -0.95 - 0.08 * Math.sin(t * 30), 0]} rotation={[Math.PI, 0, 0]}>
+						<coneGeometry args={[0.28, 0.6 + 0.15 * Math.abs(Math.sin(t * 23)), 24]} />
+						<Mat c="#FF8A00" e={1} r={0.6} />
+					</mesh>
+				</group>
+			);
+		case 'foco':
+			return (
+				<group>
+					<Torno perfil={[[0, 1.15], [0.55, 1.0], [0.8, 0.55], [0.7, 0.05], [0.35, -0.35], [0.33, -0.45], [0, -0.45]]} c="#FFE27A" e={0.35 + 0.15 * Math.sin(t * 3)} r={0.15} o={0.92} {...m} />
+					<mesh position={[0, -0.75, 0]}>
+						<cylinderGeometry args={[0.34, 0.28, 0.6, 24]} />
+						<Mat c="#9AA4B2" m={0.8} r={0.3} />
+					</mesh>
+				</group>
+			);
+		case 'reloj':
+			return (
+				<group rotation={[Math.PI / 2, 0, 0]}>
+					<mesh>
+						<cylinderGeometry args={[1, 1, 0.25, 48]} />
+						<Mat c="#FFFFFF" r={0.4} {...m} />
+					</mesh>
+					<mesh rotation={[Math.PI / 2, 0, 0]}>
+						<torusGeometry args={[1, 0.1, 16, 48]} />
+						<Mat c="#E5484D" r={0.3} m={0.3} />
+					</mesh>
+					{/* manecillas que giran con el tiempo */}
+					<group position={[0, 0.14, 0]} rotation={[0, -t * 0.6, 0]}>
+						<mesh position={[0, 0, -0.3]}>
+							<boxGeometry args={[0.08, 0.04, 0.6]} />
+							<Mat c="#141414" />
+						</mesh>
+					</group>
+					<group position={[0, 0.15, 0]} rotation={[0, -t * 4, 0]}>
+						<mesh position={[0, 0, -0.42]}>
+							<boxGeometry args={[0.05, 0.04, 0.84]} />
+							<Mat c="#141414" />
+						</mesh>
+					</group>
+				</group>
+			);
+		case 'planeta':
+			return (
+				<group rotation={[0.4, 0, 0.3]}>
+					<mesh>
+						<sphereGeometry args={[0.8, 48, 48]} />
+						<Mat c="#8B7BFF" r={0.5} {...m} />
+					</mesh>
+					<mesh rotation={[Math.PI / 2, 0, 0]}>
+						<torusGeometry args={[1.2, 0.08, 8, 64]} />
+						<Mat c="#FFC93C" r={0.4} />
+					</mesh>
+				</group>
+			);
+		case 'arbol':
+			return (
+				<group position={[0, -0.2, 0]}>
+					<mesh position={[0, -0.75, 0]}>
+						<cylinderGeometry args={[0.18, 0.24, 0.6, 16]} />
+						<Mat c="#8A5636" r={0.8} />
+					</mesh>
+					{[0, 1, 2].map((i) => (
+						<mesh key={i} position={[0, -0.2 + i * 0.5, 0]}>
+							<coneGeometry args={[0.95 - i * 0.22, 0.85, 24]} />
+							<Mat c={['#2E8B57', '#36A267', '#46B978'][i]} r={0.6} {...m} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'nube':
+			return (
+				<group>
+					{[[-0.6, -0.1, 0.5], [0, 0.15, 0.7], [0.6, -0.05, 0.55], [0.25, -0.25, 0.45], [-0.25, -0.25, 0.45]].map(([x, y, r], i) => (
+						<mesh key={i} position={[x, y, 0]}>
+							<sphereGeometry args={[r, 32, 32]} />
+							<Mat c="#F4F7FB" r={0.7} {...m} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'regalo':
+			return (
+				<group>
+					<mesh position={[0, -0.25, 0]}>
+						<boxGeometry args={[1.4, 1.1, 1.4]} />
+						<Mat c="#E5484D" r={0.4} {...m} />
+					</mesh>
+					<mesh position={[0, 0.38, 0]}>
+						<boxGeometry args={[1.55, 0.25, 1.55]} />
+						<Mat c="#E5484D" r={0.4} {...m} />
+					</mesh>
+					<mesh position={[0, 0, 0]}>
+						<boxGeometry args={[0.25, 1.4, 1.6]} />
+						<Mat c="#FFC93C" m={0.4} r={0.3} />
+					</mesh>
+					<mesh position={[0, 0, 0]}>
+						<boxGeometry args={[1.6, 1.4, 0.25]} />
+						<Mat c="#FFC93C" m={0.4} r={0.3} />
+					</mesh>
+					{[-1, 1].map((s) => (
+						<mesh key={s} position={[s * 0.28, 0.68, 0]} rotation={[0, 0, s * 0.6]}>
+							<torusGeometry args={[0.25, 0.08, 12, 24]} />
+							<Mat c="#FFC93C" m={0.4} r={0.3} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'llave':
+			return (
+				<group rotation={[0, 0, -0.6]}>
+					<mesh position={[0, 0.7, 0]}>
+						<torusGeometry args={[0.38, 0.13, 16, 32]} />
+						<Mat c="#E8B04A" m={0.8} r={0.25} {...m} />
+					</mesh>
+					<mesh position={[0, -0.25, 0]}>
+						<cylinderGeometry args={[0.1, 0.1, 1.4, 16]} />
+						<Mat c="#E8B04A" m={0.8} r={0.25} {...m} />
+					</mesh>
+					{[-0.6, -0.85].map((y) => (
+						<mesh key={y} position={[0.17, y, 0]}>
+							<boxGeometry args={[0.25, 0.12, 0.12]} />
+							<Mat c="#E8B04A" m={0.8} r={0.25} {...m} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'candado':
+			return (
+				<group>
+					<mesh position={[0, 0.45, 0]}>
+						<torusGeometry args={[0.5, 0.12, 16, 32, Math.PI]} />
+						<Mat c="#B8C2CC" m={0.9} r={0.2} />
+					</mesh>
+					<mesh position={[0, -0.35, 0]}>
+						<boxGeometry args={[1.4, 1.1, 0.5]} />
+						<Mat c="#E8B04A" m={0.75} r={0.28} {...m} />
+					</mesh>
+					<mesh position={[0, -0.3, 0.26]}>
+						<cylinderGeometry args={[0.12, 0.12, 0.05, 24]} />
+						<Mat c="#3A2A1A" />
+					</mesh>
+				</group>
+			);
+		case 'casa':
+			return (
+				<group position={[0, -0.3, 0]}>
+					<mesh>
+						<boxGeometry args={[1.5, 1.1, 1.3]} />
+						<Mat c="#F2E6D0" r={0.6} {...m} />
+					</mesh>
+					<mesh position={[0, 0.95, 0]} rotation={[0, Math.PI / 4, 0]}>
+						<coneGeometry args={[1.25, 0.8, 4]} />
+						<Mat c="#E5484D" r={0.5} />
+					</mesh>
+					<mesh position={[0, -0.25, 0.66]}>
+						<boxGeometry args={[0.35, 0.6, 0.04]} />
+						<Mat c="#8A5636" r={0.6} />
+					</mesh>
+					<mesh position={[0.45, 0.15, 0.66]}>
+						<boxGeometry args={[0.3, 0.3, 0.04]} />
+						<Mat c="#7FE3FF" e={0.3} />
+					</mesh>
+				</group>
+			);
+		case 'libro':
+			return (
+				<group rotation={[0.3, 0.5, 0]}>
+					<mesh>
+						<boxGeometry args={[1.4, 1.8, 0.35]} />
+						<Mat c="#2D6BFF" r={0.5} {...m} />
+					</mesh>
+					<mesh position={[0.06, 0, 0]}>
+						<boxGeometry args={[1.32, 1.72, 0.3]} />
+						<Mat c="#FFFDF5" r={0.8} />
+					</mesh>
+					<mesh position={[0, 0, 0.18]}>
+						<boxGeometry args={[1.4, 1.8, 0.02]} />
+						<Mat c="#2D6BFF" r={0.5} {...m} />
+					</mesh>
+				</group>
+			);
+		case 'globo':
+			return (
+				<group position={[0, 0.2, 0]}>
+					<mesh scale={[1, 1.18, 1]}>
+						<sphereGeometry args={[0.8, 48, 48]} />
+						<Mat c="#FF4D8D" r={0.2} m={0.1} {...m} />
+					</mesh>
+					<mesh position={[0, -1.0, 0]}>
+						<coneGeometry args={[0.1, 0.15, 12]} />
+						<Mat c="#FF4D8D" />
+					</mesh>
+					<mesh position={[0.05, -1.55, 0]} rotation={[0, 0, 0.1 * Math.sin(t * 2)]}>
+						<cylinderGeometry args={[0.01, 0.01, 1.0, 6]} />
+						<Mat c="#FFFFFF" />
+					</mesh>
+				</group>
+			);
+		case 'pin':
+			return (
+				<group>
+					<Torno perfil={[[0, -1.1], [0.15, -0.6], [0.55, 0.0], [0.7, 0.45], [0.55, 0.9], [0.25, 1.08], [0, 1.1]]} c="#E5484D" r={0.35} {...m} />
+					<mesh position={[0, 0.45, 0.58]}>
+						<sphereGeometry args={[0.22, 24, 24]} />
+						<Mat c="#FFFFFF" />
+					</mesh>
+				</group>
+			);
+		case 'tuberia':
+			return <Tuberia t={t} o={o} {...m} />;
+		case 'muro':
+			return <Muro o={o} {...m} />;
+		case 'viga': {
+			const L = o.largo ?? 3.4;
+			const c = {c: '#8C96A3', m: 0.8, r: 0.35};
+			return (
+				<group rotation={[0, 0, o.vertical ? Math.PI / 2 : 0]}>
+					<mesh position={[0, 0.42, 0]}>
+						<boxGeometry args={[L, 0.08, 0.5]} />
+						<Mat {...c} {...m} />
+					</mesh>
+					<mesh position={[0, -0.42, 0]}>
+						<boxGeometry args={[L, 0.08, 0.5]} />
+						<Mat {...c} {...m} />
+					</mesh>
+					<mesh>
+						<boxGeometry args={[L, 0.8, 0.07]} />
+						<Mat {...c} {...m} />
+					</mesh>
+				</group>
+			);
+		}
+		case 'columna':
+			return (
+				<group>
+					<mesh>
+						<cylinderGeometry args={[0.32, 0.36, 2.6, 32]} />
+						<Mat c="#CFCAC0" r={0.8} {...m} />
+					</mesh>
+					{[1.35, -1.35].map((y) => (
+						<mesh key={y} position={[0, y, 0]}>
+							<boxGeometry args={[0.9, 0.2, 0.9]} />
+							<Mat c="#BDB7AC" r={0.85} {...m} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'escalera': {
+			const n = o.escalones ?? 8;
+			return (
+				<group position={[-0.9, -1, 0]}>
+					{Array.from({length: n}, (_, i) => (
+						<mesh key={i} position={[i * 0.24, i * 0.22 + 0.11, 0]}>
+							<boxGeometry args={[0.26, 0.22 * (i + 1), 1.2]} />
+							<Mat c="#CFCAC0" r={0.8} {...m} />
+						</mesh>
+					)).map((el, i) => React.cloneElement(el, {position: [i * 0.24, (0.22 * (i + 1)) / 2, 0]}))}
+				</group>
+			);
+		}
+		case 'losa':
+			return (
+				<group rotation={[0.5, 0.6, 0]}>
+					<mesh>
+						<boxGeometry args={[3, 0.25, 2.2]} />
+						<Mat c="#C9C4BA" r={0.9} {...m} />
+					</mesh>
+					{[-1, 0, 1].map((k) => (
+						<mesh key={k} position={[k * 0.9, 0.13, 0]}>
+							<boxGeometry args={[0.04, 0.02, 2.2]} />
+							<Mat c="#8C96A3" m={0.7} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'tanque':
+			return (
+				<group>
+					<mesh position={[0, 0.2, 0]}>
+						<cylinderGeometry args={[0.8, 0.8, 1.5, 40]} />
+						<Mat c="#3E8ED0" r={0.4} m={0.2} {...m} />
+					</mesh>
+					<mesh position={[0, 0.95, 0]}>
+						<sphereGeometry args={[0.8, 40, 20, 0, Math.PI * 2, 0, Math.PI / 2]} />
+						<Mat c="#3E8ED0" r={0.4} m={0.2} {...m} />
+					</mesh>
+					{[0, 1, 2, 3].map((i) => (
+						<mesh key={i} position={[Math.cos((i * Math.PI) / 2 + 0.8) * 0.6, -0.9, Math.sin((i * Math.PI) / 2 + 0.8) * 0.6]}>
+							<cylinderGeometry args={[0.05, 0.05, 0.8, 8]} />
+							<Mat c="#8C96A3" m={0.8} />
+						</mesh>
+					))}
+				</group>
+			);
+		case 'suelo': {
+			// corte de terreno por capas: pasto, tierra, roca (para túneles, cimientos, drenaje)
+			const capas: [string, number][] = o.capas ?? [['#4FAF5A', 0.18], ['#8A5636', 0.9], ['#6E4A30', 0.6], ['#8C8C86', 0.7]];
+			let y = 1.2;
+			return (
+				<group rotation={[0.25, -0.5, 0]}>
+					{capas.map(([color, alto], i) => {
+						const el = (
+							<mesh key={i} position={[0, y - alto / 2, 0]}>
+								<boxGeometry args={[3.2, alto, 2]} />
+								<Mat c={color} r={0.95} />
+							</mesh>
+						);
+						y -= alto;
+						return el;
+					})}
+				</group>
+			);
+		}
+		default:
+			return null;
+	}
+};

package/remotion/motor/plantillas.tsx

@@ -31,7 +31,8 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 		case 'dato': {
 			const y = p.y ?? 940;
 			const out: Capa[] = [];
-			if (p.imagen) out.push({tipo: 'imagen', src: p.imagen, ancho: p.anchoImagen ?? 520, x: 540, y: y - 380, entrada: 'escala', flotar: true});
+			if (p.objeto) out.push({tipo: 'modelo', forma: p.objeto, ancho: 520, alto: 520, x: 540, y: y - 400, girar3d: [0, 35, 0], entrada: 'rebote'});
+			else if (p.imagen) out.push({tipo: 'imagen', src: p.imagen, ancho: p.anchoImagen ?? 520, x: 540, y: y - 380, entrada: 'escala', flotar: true});
 			out.push({
 				tipo: 'contador',
 				de: p.de ?? 0,
@@ -98,8 +99,11 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 					const x = n === 1 ? 540 : 270 + (i * 540) / (n - 1);
 					const en = o.en ?? 0.15 + i * 0.25;
 					out.push({tipo: 'forma', forma: 'rect', ancho: 400, alto: 440, color: o.fondo ?? '#FFFFFF', radio: 28, x, y: yC, rotar: n === 2 ? (i === 0 ? -5 : 5) : 0, entrada: 'rebote', en, borde: o.color ?? tema.colores.acento, grosor: 10, sonido: 'pop'});
-					if (o.imagen) out.push({tipo: 'imagen', src: o.imagen, ancho: 220, x, y: yC - 70, entrada: 'escala', en: en + 0.1});
-					else out.push({tipo: o.icono ? 'icono' : 'emoji', texto: o.emoji ?? '❓', nombre: o.icono, tam: o.icono ? 160 : 150, x, y: yC - 70, entrada: 'rebote', en: en + 0.1});
+					// ilustración: objeto 3D > imagen > ícono > emoji (último recurso)
+					if (o.objeto) out.push({tipo: 'modelo', forma: o.objeto, ancho: 280, alto: 280, x, y: yC - 75, girar3d: [0, 45, 0], entrada: 'rebote', en: en + 0.1});
+					else if (o.imagen) out.push({tipo: 'imagen', src: o.imagen, ancho: 220, x, y: yC - 70, entrada: 'escala', en: en + 0.1});
+					else if (o.emoji) out.push({tipo: 'emoji', texto: o.emoji, tam: 150, x, y: yC - 70, entrada: 'rebote', en: en + 0.1});
+					else out.push({tipo: 'icono', nombre: o.icono ?? 'question', tam: 160, x, y: yC - 70, entrada: 'rebote', en: en + 0.1});
 					out.push({tipo: 'texto', texto: o.texto, fuente: 'texto', tam: 50, peso: 900, mayusculas: true, color: '#141414', x, y: yC + 90, maxAncho: 360, entrada: 'aparecer', en: en + 0.15, sombra: false});
 					if (o.sub) out.push({tipo: 'texto', texto: o.sub, fuente: 'texto', tam: 26, peso: 700, color: o.color ?? tema.colores.acento, x, y: yC + 155, maxAncho: 340, entrada: 'aparecer', en: en + 0.2, mayusculas: true, sombra: false});
 				});

package/remotion/motor/subtitulos.tsx

@@ -80,11 +80,11 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 
 	if (S.tipo === 'pop') {
 		return (
-			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: '0 22px'}}>
+			<div style={{position: 'absolute', left: 60, width: W - 120, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: `0 ${Math.round(S.tam * 1.5 * 0.4 + 20)}px`}}>
 				{g.map(([w, a, b], i) => {
 					const activa = t >= a && t < b + 0.05;
 					return (
-						<span key={i} style={{fontFamily: tema.fuentes.titulo, fontWeight: 900, fontSize: S.tam * 1.5, color: activa ? tema.colores.acento : S.color, WebkitTextStroke: '10px #000', paintOrder: 'stroke fill', textTransform: 'uppercase', transform: `scale(${activa ? 1.1 : 1})`}}>
+						<span key={i} style={{fontFamily: tema.fuentes.titulo, fontWeight: 900, fontSize: S.tam * 1.5, color: activa ? tema.colores.acento : S.color, WebkitTextStroke: '10px #000', paintOrder: 'stroke fill', textTransform: 'uppercase', display: 'inline-block', transformOrigin: 'center bottom', transform: `scale(${activa ? 1.1 : 1})`}}>
 							{w}
 						</span>
 					);

package/remotion/motor/tema.ts

@@ -7,7 +7,8 @@ export type Fondo =
 	| {tipo: 'color'; color: string}
 	| {tipo: 'degradado'; colores: string[]; angulo?: number}
 	| {tipo: 'imagen'; src: string; oscurecer?: number; desenfoque?: number}
-	| {tipo: 'video'; src: string; oscurecer?: number};
+	| {tipo: 'video'; src: string; oscurecer?: number}
+	| ({tipo: 'escenario'; nombre: string; oscurecer?: number} & Record<string, any>);
 
 export type Particulas = {tipo: 'burbujas' | 'polvo' | 'estrellas' | 'nieve' | 'confeti' | 'ninguna'; cantidad?: number; color?: string};
 
@@ -80,7 +81,7 @@ export const ESTILOS: Record<string, Tema> = {
 	},
 	// Escenarios ilustrados (bosque, ciudad): el fondo suele ser una imagen tuya; cielo de atardecer por defecto
 	ilustrado: {
-		fondo: {tipo: 'degradado', colores: ['#5B3A7A', '#C7746A', '#F2B27A']},
+		fondo: {tipo: 'escenario', nombre: 'bosque', paneo: 60},
 		vineta: 0.3,
 		particulas: {tipo: 'polvo', cantidad: 18},
 		colores: {texto: '#FFFFFF', acento: '#FFE27A', acento2: '#FF6B6B', suave: 'rgba(255,255,255,0.55)', tarjeta: 'rgba(20,14,30,0.75)', tarjetaTexto: '#FFFFFF', borde: '#FFFFFF'},
@@ -93,7 +94,7 @@ export const ESTILOS: Record<string, Tema> = {
 	},
 	// Historias de misterio: interiores oscuros, siluetas, letreros "DÍA 10"
 	historia: {
-		fondo: {tipo: 'degradado', colores: ['#1C2A2A', '#0E1414']},
+		fondo: {tipo: 'escenario', nombre: 'departamento'},
 		vineta: 0.6,
 		foco: {color: 'rgba(255,214,140,0.22)', x: 540, y: 700, radio: 700},
 		particulas: {tipo: 'polvo', cantidad: 14},
@@ -133,7 +134,7 @@ export const ESTILOS: Record<string, Tema> = {
 	},
 	// Series animadas con personaje (capítulos, retos, "comenta"): cuarto morado, subtítulos en bloque al centro
 	serie: {
-		fondo: {tipo: 'degradado', colores: ['#5B3FA0', '#3A2470']},
+		fondo: {tipo: 'escenario', nombre: 'cuarto'},
 		vineta: 0.25,
 		colores: {texto: '#FFFFFF', acento: '#FF3B5C', acento2: '#FF3B5C', suave: 'rgba(255,255,255,0.7)', tarjeta: '#FFFFFF', tarjetaTexto: '#141414', borde: '#141414'},
 		fuentes: {titulo: MONT, texto: MONT, mono: MONO},

package/remotion/motor/widgets.tsx

@@ -157,7 +157,7 @@ export const Chat: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
 	const visibles = msgs.slice(Math.max(0, n - (c.maximo ?? 6)), n);
 	const colores = ['#FF7AB6', '#7AD7FF', '#B6FF7A', '#FFD27A', '#C9A2FF'];
 	return (
-		<div style={{width: c.ancho ?? 420, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 8, fontFamily: T.fuentes.texto, fontSize: c.tam ?? 28}}>
+		<div style={{width: c.ancho ?? 480, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 10, fontFamily: T.fuentes.texto, fontSize: c.tam ?? 36}}>
 			{visibles.map((m, i) => (
 				<div key={n - visibles.length + i} style={{background: 'rgba(0,0,0,0.45)', color: '#fff', borderRadius: 12, padding: '6px 14px', opacity: i === visibles.length - 1 ? clamp((ctx.t - t0 - (n - 1) * cada) / 0.2) : 1}}>
 					<b style={{color: colores[(m.usuario ?? '').length % colores.length]}}>{m.usuario}</b> {m.texto}