morfeo 0.5.0 → 0.6.0

package/remotion/kit/casa.tsx

@@ -0,0 +1,130 @@
+// Piezas 3D de casa y de electrónica, sacadas de los mundos que más se repetían en videos reales (consola, escalada,
+// control): chip con patitas, ventilador de pie y de PC, escritorio, puerta, audífonos, nube de polvo o humo.
+// Todas dependen solo de props y de `t` (sin useFrame). Las nubes se apagan solas fuera de su tramo (`en`..`hasta`).
+//
+//   <Chip pos={[0, 0.62, 0]} tam={[0.7, 0.7]} calor={0.5} />   <Ventilador pos={[1.7, 0, -1.6]} t={t} />
+//   <Nube3D pos={[0.7, 0.9, -2]} t={t} en={12} hasta={16} />
+import React from 'react';
+import {azarN} from './ilustrado';
+import {Bloque, grupo, type Pieza, type V3} from './tres';
+
+/** Chip negro con patitas plateadas a los lados. `calor` 0..1 lo pone al rojo. */
+export const Chip: React.FC<Pieza & {tam?: [number, number]; calor?: number; color?: string}> = ({tam = [0.6, 0.6], calor = 0, color = '#17171C', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.05, 0]} castShadow>
+			<boxGeometry args={[tam[0], 0.1, tam[1]]} />
+			<meshStandardMaterial color={color} roughness={0.6} emissive="#FF4A1C" emissiveIntensity={calor * 0.9} />
+		</mesh>
+		{Array.from({length: 6}, (_, i) =>
+			[-1, 1].map((l) => <Bloque key={`${i}${l}`} pos={[-tam[0] / 2 + 0.08 + (i * (tam[0] - 0.16)) / 5, 0.02, l * (tam[1] / 2 + 0.03)]} tam={[0.04, 0.03, 0.06]} color="#C9CCD3" metal={0.8} rugosidad={0.3} />),
+		)}
+	</group>
+);
+
+/** Aspas que giran en el plano XY (miran hacia +z). */
+export const Aspas: React.FC<{giro: number; radio: number; n?: number; color?: string}> = ({giro, radio, n = 4, color = '#E8ECF2'}) => (
+	<group rotation={[0, 0, giro]}>
+		{Array.from({length: n}, (_, k) => (
+			<Bloque key={k} pos={[(radio / 2) * Math.cos((k * Math.PI * 2) / n), (radio / 2) * Math.sin((k * Math.PI * 2) / n), 0]} rot={[0, 0, (k * 360) / n]} tam={[radio, radio * 0.32, 0.02]} color={color} />
+		))}
+	</group>
+);
+
+/**
+ * Ventilador. `tipo: 'pie'` (de pedestal, ~1.3 u, mira hacia +z; gíralo con `rot`) o `'pc'` (disipador con
+ * ventilador encima, para chips). `velocidad` en vueltas por segundo.
+ */
+export const Ventilador: React.FC<Pieza & {t: number; tipo?: 'pie' | 'pc'; velocidad?: number; color?: string}> = ({t, tipo = 'pie', velocidad = 2.2, color = '#D9DDE3', ...p}) => {
+	const giro = t * velocidad * Math.PI * 2;
+	if (tipo === 'pc')
+		return (
+			<group {...grupo(p)}>
+				{Array.from({length: 7}, (_, i) => (
+					<Bloque key={i} pos={[-0.3 + i * 0.1, 0.12, 0]} tam={[0.03, 0.24, 0.7]} color="#B9BEC8" metal={0.7} rugosidad={0.35} />
+				))}
+				<group position={[0, 0.3, 0]}>
+					<mesh>
+						<cylinderGeometry args={[0.34, 0.34, 0.06, 24]} />
+						<meshStandardMaterial color="#222228" />
+					</mesh>
+					<group position={[0, 0.04, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+						<Aspas giro={giro} radio={0.3} n={5} color="#3A3A42" />
+					</group>
+				</group>
+			</group>
+		);
+	return (
+		<group {...grupo(p)}>
+			<Bloque pos={[0, 0.03, 0]} tam={[0.5, 0.06, 0.5]} color={color} radio={0.05} />
+			<Bloque pos={[0, 0.6, 0]} tam={[0.05, 1.1, 0.05]} color="#B9BEC8" metal={0.5} />
+			<group position={[0, 1.2, 0]}>
+				<mesh rotation={[Math.PI / 2, 0, 0]}>
+					<torusGeometry args={[0.3, 0.025, 8, 28]} />
+					<meshStandardMaterial color={color} />
+				</mesh>
+				<Aspas giro={giro} radio={0.26} color="#7FB2FF" />
+			</group>
+		</group>
+	);
+};
+
+/** Escritorio de madera (cara de arriba a `alto`). */
+export const Escritorio: React.FC<Pieza & {ancho?: number; fondo?: number; alto?: number; color?: string; patas?: string}> = ({ancho = 2.4, fondo = 0.9, alto = 0.78, color = '#C49A6C', patas = '#8A6A48', ...p}) => (
+	<group {...grupo(p)}>
+		<Bloque pos={[0, alto - 0.035, 0]} tam={[ancho, 0.07, fondo]} color={color} rugosidad={0.8} />
+		{[-1, 1].map((l) => (
+			<Bloque key={l} pos={[l * (ancho / 2 - 0.1), (alto - 0.07) / 2, 0]} tam={[0.07, alto - 0.07, fondo - 0.1]} color={patas} />
+		))}
+	</group>
+);
+
+/** Puerta en una pared (mira hacia +z; para la pared izquierda usa rot [0, 90, 0]). `abierta` 0..1. */
+export const Puerta: React.FC<Pieza & {abierta?: number; color?: string; marco?: string}> = ({abierta = 0, color = '#8A6A48', marco = '#E9E1D2', ...p}) => (
+	<group {...grupo(p)}>
+		<Bloque pos={[0, 1.07, 0]} tam={[1.14, 2.2, 0.04]} color={marco} />
+		<group position={[-0.5, 0, 0.04]} rotation={[0, -abierta * 1.4, 0]}>
+			<Bloque pos={[0.5, 1.03, 0]} tam={[1.0, 2.06, 0.05]} color={color} />
+			<Bloque pos={[0.88, 1.0, 0.04]} tam={[0.12, 0.05, 0.05]} color="#D4B04A" metal={0.6} />
+		</group>
+	</group>
+);
+
+/** Audífonos de diadema (para la cabeza de una Persona3D: centro de la cabeza, escala ~1.2). */
+export const Audifonos: React.FC<Pieza & {color?: string; diadema?: string}> = ({color = '#E5484D', diadema = '#1B1B20', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh>
+			<torusGeometry args={[0.36, 0.035, 8, 24, Math.PI]} />
+			<meshStandardMaterial color={diadema} />
+		</mesh>
+		{[-1, 1].map((l) => (
+			<mesh key={l} position={[l * 0.37, -0.02, 0]} rotation={[0, 0, Math.PI / 2]}>
+				<cylinderGeometry args={[0.14, 0.14, 0.1, 18]} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+		))}
+	</group>
+);
+
+/**
+ * Nube que sale de un punto (polvo, humo, vapor): crece en ~2 s desde `en` y desaparece en `hasta` (segundos del
+ * video). Fuera de ese tramo no dibuja nada, así que no se queda en el cierre.
+ */
+export const Nube3D: React.FC<{pos: V3; t: number; en: number; hasta?: number; n?: number; color?: string; tam?: number; alcance?: number}> = ({pos, t, en, hasta, n = 40, color = '#9A948A', tam = 0.03, alcance = 0.8}) => {
+	if (t < en || (hasta != null && t > hasta)) return null;
+	const k = Math.min(1, (t - en) / 2.2);
+	const sale = hasta != null ? Math.min(1, Math.max(0, (hasta - t) / 0.5)) : 1;
+	return (
+		<group>
+			{Array.from({length: n}, (_, i) => {
+				const dir = azarN(i * 3.3) * Math.PI * 2;
+				const r = k * (0.3 + azarN(i * 5.1) * 0.6) * alcance;
+				return (
+					<mesh key={i} position={[pos[0] + Math.cos(dir) * r, pos[1] + k * (0.2 + azarN(i * 1.7) * 0.5) * alcance, pos[2] + Math.sin(dir) * r * 0.6]}>
+						<sphereGeometry args={[tam * (0.7 + azarN(i * 9.1) * 1.2), 6, 5]} />
+						<meshStandardMaterial color={color} transparent opacity={0.75 * sale} roughness={1} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};

package/remotion/kit/index.ts

@@ -3,6 +3,7 @@
 //   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 {Ambiente, Tele3D, Gato3D} from 'morfeo/kit';   (ambientes 3D completos: cuarto-gamer, sala, arcade)
 //   import {GraficaBarras, GraficaLinea, Comparacion, Lupa} from 'morfeo/kit';   (datos 2D)
 export * from './ilustrado';
 export * from './personas';
@@ -13,3 +14,5 @@ export * from './datos';
 export * from './diorama';
 export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
 export * from './armar';
+export * from './ambientes';
+export * from './casa';

package/remotion/kit/tres.tsx

@@ -6,7 +6,9 @@
 // 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 {Bloom, DepthOfField, EffectComposer, TiltShift2, Vignette} from '@react-three/postprocessing';
 import {ThreeCanvas} from '@remotion/three';
+import {continueRender, delayRender} from 'remotion';
 import React, {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import * as THREE from 'three';
 import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
@@ -69,10 +71,63 @@ export function camara3D(tomas: (Toma3D | undefined | null)[], escena: number, t
 	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();
+/**
+ * Toma calculada para que un objeto de tamaño `tam` (u) quepa en el cuadro vertical sin pegarse ni salirse.
+ *   tipo: 'detalle' (llena el ancho) · 'media' (con aire alrededor) · 'general' (con su entorno)
+ *   desde: 'frente' | 'izq' | 'der' | 'arriba' | 'atras' o un vector propio (de dónde se mira)
+ * La toma se acerca un poco durante la escena (`acercar`, 0.08 = 8 %).
+ */
+export function tomaA(objetivo: V3, o: {tipo?: 'detalle' | 'media' | 'general'; tam?: number; desde?: 'frente' | 'izq' | 'der' | 'arriba' | 'atras' | V3; fov?: number; acercar?: number; corte?: boolean} = {}): Toma3D {
+	const fov = o.fov ?? 40;
+	const DIR: Record<string, V3> = {frente: [0, 0.35, 1], izq: [-1, 0.35, 0.35], der: [1, 0.35, 0.35], arriba: [0, 1.7, 0.55], atras: [0, 0.35, -1]};
+	const d0 = Array.isArray(o.desde) ? o.desde : DIR[o.desde ?? 'frente'];
+	const n = Math.hypot(...d0) || 1;
+	const dir: V3 = [d0[0] / n, d0[1] / n, d0[2] / n];
+	// en vertical el ancho manda: campo horizontal = 2·atan(tan(fov/2)·9/16)
+	const mitadH = Math.atan(Math.tan(((fov / 2) * Math.PI) / 180) * (9 / 16));
+	const ancho = (o.tam ?? 1) * {detalle: 1.35, media: 2.4, general: 4.5}[o.tipo ?? 'media'];
+	const d = ancho / (2 * Math.tan(mitadH));
+	const pos: V3 = [objetivo[0] + dir[0] * d, objetivo[1] + dir[1] * d, objetivo[2] + dir[2] * d];
+	return {pos, mirar: objetivo, fov, corte: o.corte, a: {pos: mezcla(pos, objetivo, o.acercar ?? 0.08)}};
+}
+
+/**
+ * Lente despejado: si algo queda pegado a la cámara (a menos de `cerca` u) entre ella y lo que mira, la cámara avanza
+ * hasta pasarlo. Evita los cuadros tapados por una cabeza, una bocina o una pared en primer plano.
+ */
+function despejar(scene: THREE.Scene, desde: THREE.Vector3, hacia: THREE.Vector3, cerca = 0.9): THREE.Vector3 | null {
+	const dir = hacia.clone().sub(desde);
+	const dist = dir.length();
+	if (dist < 0.5) return null;
+	dir.normalize();
+	const solido = (h: THREE.Intersection) => {
+		const m = h.object as THREE.Mesh;
+		if (!(m as any).isMesh || !m.visible || m.userData?.sinOclusion) return false;
+		const mat = (Array.isArray(m.material) ? m.material[0] : m.material) as THREE.Material | undefined;
+		return !!mat && !(mat.transparent && (mat as any).opacity < 0.6);
+	};
+	scene.updateMatrixWorld(true);
+	const ray = new THREE.Raycaster(desde, dir, 0.02, Math.min(cerca, dist - 0.4));
+	if (!ray.intersectObjects(scene.children, true).some(solido)) return null;
+	// la cara de esos objetos que mira hacia el objetivo: desde ahí ya no tapan
+	const vuelta = new THREE.Raycaster(hacia, dir.clone().negate(), 0, dist);
+	let salida = 0;
+	for (const h of vuelta.intersectObjects(scene.children, true)) {
+		const desdeCam = dist - h.distance;
+		if (solido(h) && desdeCam < cerca + 1.2) salida = Math.max(salida, desdeCam);
+	}
+	if (!salida || salida > dist - 0.4) return null;
+	return desde.clone().add(dir.multiplyScalar(salida + 0.12));
+}
+
+const Camara: React.FC<{estado: Estado; despejado?: boolean}> = ({estado, despejado}) => {
+	const {camera, scene} = useThree();
 	useLayoutEffect(() => {
 		camera.position.set(...estado.pos);
+		if (despejado) {
+			const nueva = despejar(scene, new THREE.Vector3(...estado.pos), new THREE.Vector3(...estado.mirar));
+			if (nueva) camera.position.copy(nueva);
+		}
 		camera.lookAt(...estado.mirar);
 		const p = camera as THREE.PerspectiveCamera;
 		if (p.isPerspectiveCamera) {
@@ -139,13 +194,14 @@ const Recorte: React.FC = () => {
 
 /**
  * Etiqueta pegada a un punto 3D: pastilla de color con una flecha que apunta al objeto. Sigue al objeto cuando la
- * cámara se mueve. `escena` (1, 2...) la limita a esa escena; `en`/`hasta` son segundos desde que empieza.
+ * cámara se mueve. `escena` (1, 2...) la limita a esa escena; `en`/`hasta` son segundos desde que empieza, o una
+ * palabra (`en: 'memoria'`) si el Lienzo3D recibe `cuando`: así sale junto con el objeto que llega en esa palabra.
  */
 export type Etiqueta3D = {
 	pos: V3;
 	texto: string;
 	escena?: number | number[];
-	en?: number;
+	en?: number | string;
 	hasta?: number;
 	color?: string;
 	colorTexto?: string;
@@ -157,12 +213,12 @@ export type Etiqueta3D = {
 	inclinar?: number;
 };
 
-const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; escena: number; tEscena: number}> = ({etiquetas, estado, escena, tEscena}) => (
+const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; escena: number; tEscena: number; enDe: (en: Etiqueta3D['en']) => number}> = ({etiquetas, estado, escena, tEscena, enDe}) => (
 	<>
 		{etiquetas.map((e, i) => {
 			const escenas = e.escena == null ? null : ([] as number[]).concat(e.escena);
 			if (escenas && !escenas.includes(escena)) return null;
-			const t = tEscena - (e.en ?? 0.2);
+			const t = tEscena - enDe(e.en);
 			if (t < 0 || (e.hasta != null && tEscena > e.hasta)) return null;
 			const p = proyectar(estado, e.pos);
 			if (!p.visible) return null;
@@ -195,20 +251,87 @@ const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; esce
 	</>
 );
 
+/**
+ * Postproceso del lienzo (todo determinista: sin ruido ni nada que dependa del reloj).
+ *   'cine'      foco en lo que mira la toma (el fondo se desenfoca), brillo en pantallas y luces, viñeta
+ *   'miniatura' desenfoque arriba y abajo (efecto maqueta / tilt-shift), brillo y viñeta
+ *   'suave'     solo brillo y viñeta
+ * Con objeto ajustas cada efecto: {foco: true | número (rango de foco), brillo: 0..2, vinieta: 0..1, miniatura: 0..1}.
+ */
+export type Post3D = 'cine' | 'miniatura' | 'suave' | false | {foco?: boolean | number; brillo?: number; vinieta?: number; miniatura?: number};
+const PRESETS_POST: Record<string, {foco?: boolean | number; brillo?: number; vinieta?: number; miniatura?: number}> = {
+	cine: {foco: true, brillo: 0.35, vinieta: 0.5},
+	miniatura: {miniatura: 0.55, brillo: 0.3, vinieta: 0.45},
+	suave: {brillo: 0.3, vinieta: 0.45},
+};
+const Post: React.FC<{post: Post3D; estado: Estado}> = ({post, estado}) => {
+	if (!post) return null;
+	const o = typeof post === 'string' ? PRESETS_POST[post] ?? {} : post;
+	const dist = Math.hypot(estado.pos[0] - estado.mirar[0], estado.pos[1] - estado.mirar[1], estado.pos[2] - estado.mirar[2]);
+	const rango = typeof o.foco === 'number' ? o.foco : Math.max(1.2, dist * 0.55);
+	const efectos: React.ReactElement[] = [];
+	if (o.foco) efectos.push(<DepthOfField key="f" target={estado.mirar} worldFocusRange={rango} bokehScale={4} resolutionScale={0.6} />);
+	if (o.miniatura) efectos.push(<TiltShift2 key="m" blur={0.12 * o.miniatura} taper={0.6} start={[0.5, 0.0]} end={[0.5, 1.0]} />);
+	if (o.brillo) efectos.push(<Bloom key="b" intensity={o.brillo} luminanceThreshold={0.85} luminanceSmoothing={0.2} mipmapBlur />);
+	if (o.vinieta) efectos.push(<Vignette key="v" offset={0.3} darkness={o.vinieta} />);
+	if (!efectos.length) return null;
+	return (
+		<>
+			<EffectComposer multisampling={4}>{efectos}</EffectComposer>
+			<RedibujarAlMontar />
+		</>
+	);
+};
+
+/**
+ * Remotion dibuja el primer cuadro de cada pestaña antes de que el compositor de efectos termine de montarse (sale
+ * negro: 1 cuadro por pestaña al inicio del video). Este componente detiene la captura (delayRender) hasta que el
+ * compositor ya dibujó dos veces con sus efectos montados; solo pasa al montar, no en cada cuadro.
+ */
+const RedibujarAlMontar: React.FC = () => {
+	const {advance} = useThree();
+	const [espera] = React.useState(() => delayRender('Esperando el postproceso 3D'));
+	useEffect(() => {
+		let vivo = true;
+		const r1 = requestAnimationFrame(() => {
+			if (!vivo) return;
+			advance(performance.now());
+			requestAnimationFrame(() => {
+				if (!vivo) return;
+				advance(performance.now());
+				continueRender(espera);
+			});
+		});
+		return () => {
+			vivo = false;
+			cancelAnimationFrame(r1);
+			continueRender(espera);
+		};
+	}, [advance, espera]);
+	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)
  * `hora` (0–24 o 'atardecer', 'noche'...) cambia el cielo y el sol de la luz 'dia'; anímala para pasar de día a noche.
  * `etiquetas`: pastillas con flecha pegadas a puntos 3D (siguen al objeto con la cámara).
+ *   'noche'   interior de noche: luz ambiente tenue y azulada; las luces las pone el set (lámpara, tele, neón)
+ * `post`: postproceso ('cine', 'miniatura', 'suave'); ver Post3D.
  */
 export const Lienzo3D: React.FC<{
 	tomas: (Toma3D | undefined | null)[];
 	escena?: number;
 	tEscena?: number;
 	inicios?: number[];
-	luz?: 'dia' | 'calida';
+	luz?: 'dia' | 'calida' | 'noche';
 	hora?: number | string;
+	post?: Post3D;
+	/** La cámara avanza si algo le tapa el lente (cabeza, pared, objeto en primer plano). */
+	despejado?: boolean;
+	/** El `cuando` del componente: deja usar palabras en `en` de las etiquetas (sale cuando llega su objeto). */
+	cuando?: (en: unknown) => number;
 	fondo?: string;
 	niebla?: [number, number];
 	sol?: V3;
@@ -217,17 +340,17 @@ export const Lienzo3D: React.FC<{
 	/** Encima del 3D, en coordenadas de pantalla (texto, tarjetas). */
 	encima?: React.ReactNode;
 	children: React.ReactNode;
-}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', hora, fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], etiquetas, encima, children}) => {
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', hora, fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], etiquetas, encima, post = false, despejado = false, cuando, children}) => {
 	const estado = camara3D(tomas, escena, tEscena, inicios);
 	const cielo = cieloDeHora(hora ?? 12);
-	const color = fondo ?? (luz === 'dia' ? cielo.fondo : '#120A06');
+	const color = fondo ?? (luz === 'dia' ? cielo.fondo : luz === 'noche' ? '#0B0E1A' : '#120A06');
 	const posSol: V3 = [sol[0], sol[1] * cielo.altura + 1.5, sol[2]];
 	return (
 		<div style={{position: 'relative', width: 1080, height: 1920}}>
 			<ThreeCanvas width={1080} height={1920} shadows gl={{antialias: true}} camera={{fov: estado.fov, position: estado.pos, near: 0.1, far: 400}}>
 				<color attach="background" args={[color]} />
 				{niebla ? <fog attach="fog" args={[color, niebla[0], niebla[1]]} /> : null}
-				<Camara estado={estado} />
+				<Camara estado={estado} despejado={despejado} />
 				<Recorte />
 				{luz === 'dia' ? (
 					<>
@@ -235,6 +358,12 @@ export const Lienzo3D: React.FC<{
 						<hemisphereLight args={[cielo.arriba, cielo.abajo, cielo.fuerzaHemi]} />
 						<directionalLight position={posSol} color={cielo.sol} intensity={cielo.fuerzaSol} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
 					</>
+				) : luz === 'noche' ? (
+					<>
+						<Entorno fuerza={0.12} />
+						<ambientLight color="#3A4470" intensity={0.55} />
+						<hemisphereLight args={['#6A78B8', '#1A1424', 0.35]} />
+					</>
 				) : (
 					<>
 						<Entorno fuerza={0.22} />
@@ -248,8 +377,18 @@ export const Lienzo3D: React.FC<{
 					</>
 				)}
 				{children}
+				<Post post={post} estado={estado} />
 			</ThreeCanvas>
-			{etiquetas?.length ? <EtiquetasPantalla etiquetas={etiquetas} estado={estado} escena={escena} tEscena={tEscena} /> : null}
+			{etiquetas?.length ? (
+				<EtiquetasPantalla
+					etiquetas={etiquetas}
+					estado={estado}
+					escena={escena}
+					tEscena={tEscena}
+					// palabra → segundos dentro de la escena (+0.35: el objeto ya cayó cuando sale la pastilla)
+					enDe={(en) => (typeof en === 'string' && cuando ? cuando(en) + 0.35 - (inicios?.[escena - 1] ?? 0) : typeof en === 'number' ? en : 0.2)}
+				/>
+			) : null}
 			{encima}
 		</div>
 	);

package/remotion/motor/Video.tsx

@@ -10,7 +10,7 @@ import {FondoTema, Post, Textura, Vineta} from './fondo';
 import {capasDe} from './plantillas';
 import {Subtitulos} from './subtitulos';
 import {mezclar, temaDe, type Tema} from './tema';
-import {azar, cuando, partesResaltadas, type CtxEscena} from './util';
+import {azar, cuando, norm, partesResaltadas, type CtxEscena} from './util';
 
 const TRANSICION = 0.35;
 // estilos con fondo claro (cielo, papel): los modos de imagen invierten para que el fondo quede oscuro
@@ -105,13 +105,42 @@ export function camaraMundo(d: Datos, si: number, t: number): Toma {
 	return {x: lerp(o.x, actual.x, kv), y: lerp(o.y, actual.y, kv), zoom: Math.exp(lerp(Math.log(o.zoom), Math.log(actual.zoom), kv)), giro: lerp(o.giro, actual.giro, kv)};
 }
 
+/**
+ * Cortes de cámara dentro de una escena (segundos): en la primera palabra clave, si la escena dura más de 3,5 s y no
+ * fija `plano`; en escenas de más de 7 s sin claves, a la mitad. `cortes: false` en la escena los apaga; `cortes: [2.1]` los fija.
+ */
+function cortesDe(e: Escena): number[] {
+	if (e.p.cortes === false || e.tipo === 'cta') return [];
+	if (Array.isArray(e.p.cortes)) return e.p.cortes.filter((c: unknown) => typeof c === 'number');
+	if (e.p.plano || e.dur < 3.5) return [];
+	const claves: string[] = (e.p.claves ?? []).map((c: string) => norm(c)).filter(Boolean);
+	const ok = (c: number) => c > 1.4 && c < e.dur - 1.1;
+	for (const [w, a] of e.palabras ?? []) if (claves.some((c) => norm(w).startsWith(c)) && ok(a)) return [a];
+	return e.dur > 7 ? [e.dur / 2] : [];
+}
+
+/**
+ * Golpe de cámara (énfasis): cuando cae un rótulo `sello` o `pixel`, todo el cuadro da un pequeño zoom con sacudida
+ * que se apaga en ~0,35 s. `golpe: false` en la escena (o `tema.movimiento.golpes: false`) lo quita.
+ */
+function golpeDe(e: Escena, t: number, tema: Tema): string | undefined {
+	const est = e.p.rotuloEstilo;
+	if (!e.p.rotulo || e.p.golpe === false || (tema.movimiento as any)?.golpes === false || (est !== 'sello' && est !== 'pixel' && e.p.golpe !== true)) return undefined;
+	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema, semilla: ''};
+	const t0 = cuando(e.p.rotuloEn, ctx, 0.12) + (est === 'sello' ? 0.12 : 0);
+	const x = t - t0;
+	if (x < 0 || x > 0.5) return undefined;
+	const k = Math.exp(-x * 9);
+	return `scale(${1 + 0.045 * k}) translate(${Math.sin(x * 70) * 9 * k}px, ${Math.cos(x * 55) * 6 * k}px)`;
+}
+
 /** El mundo del video: capas que persisten de escena en escena, vistas por la cámara. Las capas `enMundo` de la escena actual viven aquí. */
 const Mundo: React.FC<{d: Datos; si: number; t: number; T: number; tema: Tema}> = ({d, si, t, T, tema}) => {
 	const marca = useMarca();
 	const e = d.escenas[si];
 	const cam = camaraMundo(d, si, t);
 	const palabras = d.escenas.flatMap((x) => (x.palabras ?? []).map(([w, a, b]) => [w, a + x.t0, b + x.t0] as [string, number, number]));
-	const ctxMundo: CtxEscena = {t: T, dur: d.duracion, habla: [0, d.duracion], palabras, tema, semilla: `${d.id}-mundo`, inicios: d.escenas.map((x) => x.t0), escena: si + 1, tEscena: t, camara: cam};
+	const ctxMundo: CtxEscena = {t: T, dur: d.duracion, habla: [0, d.duracion], palabras, tema, semilla: `${d.id}-mundo`, inicios: d.escenas.map((x) => x.t0), escena: si + 1, tEscena: t, camara: cam, escenasInfo: d.escenas.map((x) => ({say: x.p.say, plano: x.p.plano, capas: x.tipo === 'cta' || (x.p.capas ?? []).some((c: any) => !c.enMundo), cortes: cortesDe(x)}))};
 	const temaEsc = e.p.tema ? mezclar(tema, e.p.tema) : tema;
 	const ctxEsc: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${d.id}-${e.t0}`};
 	const propias = capasDe(e.tipo, e.p, temaEsc, marca).filter((c: any) => c.enMundo);
@@ -432,6 +461,7 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	}
 	return (
 		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
+			<AbsoluteFill style={{transform: golpeDe(e, t, tema)}}>
 			<Modo d={d} si={si} t={t} T={T} claro={LOOKS_CLAROS.includes(d.estilo ?? '') || tema.colores.texto !== '#FFFFFF'}>
 				{conMundo && enTransicion && prev ? (
 					<AbsoluteFill style={estiloPrevio}>
@@ -452,6 +482,7 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 					<EscenaVista e={e} t={t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 				</AbsoluteFill>
 			</Modo>
+			</AbsoluteFill>
 			{destello > 0 ? <AbsoluteFill style={{background: '#fff', opacity: destello}} /> : null}
 			<Post tema={tema} />
 			{/* la textura va quieta, fuera de la cámara: si se moviera con el zoom, cada cuadro sería distinto y el video pesaría 10 veces más */}

package/remotion/motor/capas.tsx

@@ -12,6 +12,7 @@ import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
 import {Escenario} from './escenarios';
 import {componente, nombresComponentes} from './registro';
+import {Ambiente, reaccionesAuto} from '../kit/ambientes';
 import {Barra, Chat, Estado, Globo, ImagenCambia, Medidor, Noticia, Onda, Seguir, Votacion} from './widgets';
 
 export type Capa = Record<string, any> & {tipo: string};
@@ -272,6 +273,29 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			return <Seguir c={c} ctx={ctx} />;
 		case 'modelo':
 			return <Modelo3D c={c} ctx={ctx} />;
+		case 'ambiente': {
+			const t0 = cuando(c.en, ctx, 0);
+			const info = ctx.escenasInfo;
+			const enMundo = ctx.escena != null && !!info;
+			const reacciones = c.reacciones ?? (c.persona && info && c.reaccionar !== false ? reaccionesAuto(info, ctx.inicios ?? []) : []);
+			return (
+				<Ambiente
+					nombre={c.nombre}
+					t={ctx.t - t0}
+					escena={enMundo ? ctx.escena : 1}
+					tEscena={enMundo ? ctx.tEscena : ctx.t}
+					inicios={enMundo ? ctx.inicios : [0]}
+					planos={c.planos ?? (enMundo ? info!.map((e) => e.plano as any) : [c.plano])}
+					conCapas={enMundo ? info!.map((e) => !!e.capas) : []}
+					cortes={enMundo && c.cortes !== false ? info!.map((e) => e.cortes ?? []) : []}
+					persona={c.persona}
+					reacciones={reacciones.map((r: any) => ({...r, en: r.en - t0}))}
+					post={c.post}
+					etiquetas={c.etiquetas}
+					cuando={(en: unknown) => cuando(en, ctx) - t0}
+				/>
+			);
+		}
 		case 'componente': {
 			const Comp = componente(c.nombre);
 			if (!Comp) throw new Error(`No hay un componente llamado "${c.nombre}". Regístralo en morfeo.config.mjs → componentes. Disponibles: ${nombresComponentes().join(', ') || 'ninguno'}`);

package/remotion/motor/util.ts

@@ -13,9 +13,10 @@ export type CtxEscena = {
 	escena?: number; // en el `mundo`: número de la escena actual (1 = la primera)
 	camara?: {x: number; y: number; zoom: number; giro: number}; // en el `mundo`: la cámara de este cuadro (para paralaje)
 	tEscena?: number; // en el `mundo`: segundos desde que empezó la escena actual
+	escenasInfo?: {say?: string; plano?: unknown; capas?: boolean; cortes?: number[]}[]; // en el `mundo`: lo que dice cada escena y su `plano` (ambientes)
 };
 
-const norm = (s: string) =>
+export const norm = (s: string) =>
 	s
 		.normalize('NFD')
 		.replace(/[̀-ͯ]/g, '')