morfeo 0.0.0-stage → 0.1.0

package/remotion/motor/fondo.tsx

@@ -0,0 +1,149 @@
+// Fondos del motor de capas: color, degradado, imagen o video, con rayos de luz, foco, viñeta,
+// textura y partículas (burbujas, polvo, estrellas, nieve, confeti).
+import React from 'react';
+import {AbsoluteFill, Img, OffthreadVideo} from 'remotion';
+import {H, W} from '../estilo';
+import type {Fondo as TFondo, Particulas as TParticulas, Tema} from './tema';
+import {azar, recurso} from './util';
+
+const Base: React.FC<{f: TFondo}> = ({f}) => {
+	switch (f.tipo) {
+		case 'color':
+			return <AbsoluteFill style={{background: f.color}} />;
+		case 'degradado':
+			return <AbsoluteFill style={{background: `linear-gradient(${f.angulo ?? 180}deg, ${f.colores.join(', ')})`}} />;
+		case 'imagen':
+			return (
+				<AbsoluteFill>
+					<Img src={recurso(f.src)} style={{width: '100%', height: '100%', objectFit: 'cover', filter: f.desenfoque ? `blur(${f.desenfoque}px)` : undefined}} />
+					{f.oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${f.oscurecer})`}} /> : null}
+				</AbsoluteFill>
+			);
+		case 'video':
+			return (
+				<AbsoluteFill>
+					<OffthreadVideo src={recurso(f.src)} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
+					{f.oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${f.oscurecer})`}} /> : null}
+				</AbsoluteFill>
+			);
+	}
+};
+
+const Rayos: React.FC<{color: string; fuerza: number; t: number}> = ({color, fuerza, t}) => (
+	<AbsoluteFill style={{overflow: 'hidden', mixBlendMode: 'screen'}}>
+		{Array.from({length: 7}, (_, i) => {
+			const x = 80 + i * 150 + Math.sin(t * 0.4 + i) * 40;
+			const ancho = 70 + (i % 3) * 50;
+			return (
+				<div
+					key={i}
+					style={{
+						position: 'absolute',
+						left: x,
+						top: -200,
+						width: ancho,
+						height: H * 0.95,
+						background: `linear-gradient(${color}, transparent)`,
+						transform: `rotate(${12 + Math.sin(t * 0.3 + i * 2) * 3}deg)`,
+						transformOrigin: 'top center',
+						opacity: fuerza * (0.5 + 0.5 * Math.sin(t * 0.7 + i * 1.7)),
+						filter: 'blur(14px)',
+					}}
+				/>
+			);
+		})}
+	</AbsoluteFill>
+);
+
+export const Particulas: React.FC<{p: TParticulas; t: number; semilla: string}> = ({p, t, semilla}) => {
+	if (!p || p.tipo === 'ninguna') return null;
+	const n = p.cantidad ?? 24;
+	return (
+		<AbsoluteFill style={{pointerEvents: 'none'}}>
+			{Array.from({length: n}, (_, i) => {
+				const r1 = azar(`${semilla}${p.tipo}a${i}`);
+				const r2 = azar(`${semilla}${p.tipo}b${i}`);
+				const r3 = azar(`${semilla}${p.tipo}c${i}`);
+				let x = r1 * W;
+				let y = r2 * H;
+				let tam = 4 + r3 * 10;
+				let estilo: React.CSSProperties = {};
+				switch (p.tipo) {
+					case 'burbujas': {
+						const vel = 60 + r3 * 90;
+						y = (((r2 * H - t * vel) % H) + H) % H;
+						x += Math.sin(t * 1.5 + i) * 14;
+						tam = 6 + r3 * 18;
+						estilo = {border: `2px solid ${p.color ?? 'rgba(200,235,255,0.55)'}`, borderRadius: '50%', background: 'rgba(255,255,255,0.06)'};
+						break;
+					}
+					case 'polvo':
+						x += Math.sin(t * 0.3 + i) * 30;
+						y += Math.cos(t * 0.25 + i) * 30;
+						tam = 3 + r3 * 5;
+						estilo = {borderRadius: '50%', background: p.color ?? 'rgba(255,240,210,0.5)', filter: 'blur(1px)', opacity: 0.4 + 0.6 * Math.abs(Math.sin(t + i))};
+						break;
+					case 'estrellas':
+						tam = 2 + r3 * 4;
+						estilo = {borderRadius: '50%', background: p.color ?? '#fff', opacity: 0.3 + 0.7 * Math.abs(Math.sin(t * 2 + i * 3))};
+						break;
+					case 'nieve': {
+						const vel = 40 + r3 * 70;
+						y = (r2 * H + t * vel) % H;
+						x += Math.sin(t + i) * 24;
+						estilo = {borderRadius: '50%', background: p.color ?? '#fff', opacity: 0.8};
+						break;
+					}
+					case 'confeti': {
+						const vel = 200 + r3 * 240;
+						y = ((r2 * H + t * vel) % (H + 100)) - 50;
+						tam = 14 + r3 * 10;
+						const colores = ['#FF4D6D', '#FFD60A', '#4CC9F0', '#80ED99', '#B517FF'];
+						estilo = {background: p.color ?? colores[i % colores.length], borderRadius: 3, transform: `rotate(${t * 300 * (r1 - 0.5)}deg)`, height: tam * 0.5};
+						break;
+					}
+				}
+				return <div key={i} style={{position: 'absolute', left: x, top: y, width: tam, height: estilo.height ?? tam, ...estilo}} />;
+			})}
+		</AbsoluteFill>
+	);
+};
+
+/** Ruido fino (película) o papel: un SVG fractal estable. */
+const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
+	<AbsoluteFill style={{opacity: tipo === 'papel' ? 0.35 : 0.12, mixBlendMode: 'multiply', pointerEvents: 'none'}}>
+		<svg width={W} height={H}>
+			<filter id={`tx-${tipo}`}>
+				<feTurbulence type="fractalNoise" baseFrequency={tipo === 'papel' ? 0.9 : 1.6} numOctaves={tipo === 'papel' ? 3 : 2} seed={3} />
+				<feColorMatrix type="saturate" values="0" />
+			</filter>
+			<rect width={W} height={H} filter={`url(#tx-${tipo})`} />
+		</svg>
+	</AbsoluteFill>
+);
+
+/** El fondo completo de una escena (el de la escena gana sobre el del estilo). */
+export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla: string}> = ({tema, fondo, t, semilla}) => {
+	const f = fondo ?? tema.fondo;
+	const foco = tema.foco;
+	return (
+		<AbsoluteFill>
+			<Base f={f} />
+			{tema.rayos ? <Rayos color={tema.rayos.color} fuerza={tema.rayos.fuerza ?? 1} t={t} /> : null}
+			{foco ? (
+				<AbsoluteFill
+					style={{
+						background: `radial-gradient(circle at ${foco.x ?? 540}px ${foco.y ?? 800}px, ${foco.color} 0%, transparent ${foco.radio ?? 700}px)`,
+						opacity: foco.fuerza ?? 1,
+						mixBlendMode: 'screen',
+					}}
+				/>
+			) : null}
+			{tema.textura && tema.textura !== 'ninguna' ? <Textura tipo={tema.textura} /> : null}
+			{tema.particulas ? <Particulas p={tema.particulas} t={t} semilla={semilla} /> : null}
+		</AbsoluteFill>
+	);
+};
+
+export const Vineta: React.FC<{fuerza: number}> = ({fuerza}) =>
+	fuerza > 0 ? <AbsoluteFill style={{background: `radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,${fuerza}) 100%)`, pointerEvents: 'none'}} /> : null;

package/remotion/motor/modelo3d.tsx

@@ -0,0 +1,252 @@
+// Capa {tipo: 'modelo'}: un objeto 3D (Three.js) dentro de su propio lienzo transparente.
+//   src: 'moneda.glb'            tu modelo (carpeta assets/)
+//   forma: 'moneda' | 'billete' | 'cubo' | 'esfera' | 'lingote'   objetos incluidos (sin archivos)
+//   color, metal (0..1), rugosidad, ancho/alto del lienzo, tamano (escala del objeto)
+//   rotacion: [x, y, z] grados · girar3d: [x, y, z] grados por segundo
+//   cantidad: 30 + crecer: true -> una pila que va creciendo (monedas, billetes, lingotes)
+// Todo se anima con el tiempo de la escena (nunca con useFrame), como pide Remotion.
+import {useThree} from '@react-three/fiber';
+import {ThreeCanvas} from '@remotion/three';
+import React, {useEffect, useLayoutEffect, useMemo, useState} from 'react';
+import {continueRender, delayRender} from 'remotion';
+import * as THREE from 'three';
+import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
+import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
+import {clamp, easeOut} from '../estilo';
+import {cuando, recurso, type CtxEscena} from './util';
+
+const RAD = Math.PI / 180;
+type Gltf = {scene: THREE.Group; animations: THREE.AnimationClip[]};
+const cache = new Map<string, Promise<Gltf>>();
+const cargarGltf = (url: string) => {
+	if (!cache.has(url)) cache.set(url, new GLTFLoader().loadAsync(url).then((g) => ({scene: g.scene, animations: g.animations})));
+	return cache.get(url)!;
+};
+const cargar = (url: string) => cargarGltf(url).then((g) => g.scene);
+
+const Glb: React.FC<{src: string}> = ({src}) => {
+	const url = recurso(src);
+	const [escena, setEscena] = useState<THREE.Group | null>(null);
+	const [handle] = useState(() => delayRender(`Cargando modelo ${src}`));
+	useEffect(() => {
+		cargar(url)
+			.then((s) => {
+				// centrado y escalado a ~2 unidades para que cualquier modelo quepa en el lienzo
+				const copia = s.clone(true);
+				const caja = new THREE.Box3().setFromObject(copia);
+				const tam = caja.getSize(new THREE.Vector3());
+				const centro = caja.getCenter(new THREE.Vector3());
+				const k = 2 / Math.max(tam.x, tam.y, tam.z, 0.0001);
+				copia.position.sub(centro.multiplyScalar(k));
+				copia.scale.setScalar(k);
+				setEscena(copia);
+				continueRender(handle);
+			})
+			.catch((e) => {
+				continueRender(handle);
+				throw new Error(`No pude cargar el modelo 3D ${src}: ${e.message}`);
+			});
+	}, [url, handle, src]);
+	return escena ? <primitive object={escena} /> : null;
+};
+
+/** Reflejos de un cuarto iluminado: sin esto, los metales (monedas, lingotes) se ven negros. */
+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;
+};
+
+/** Geometría y material de las formas incluidas. */
+const Forma: React.FC<{forma: string; color?: string; metal?: number; rugosidad?: number; acostada?: boolean}> = ({forma, color, metal, rugosidad, acostada}) => {
+	const mat = (c: string, m: number, r: number) => <meshStandardMaterial color={color ?? c} metalness={metal ?? m} roughness={rugosidad ?? r} />;
+	switch (forma) {
+		case 'moneda':
+			return (
+				<mesh rotation={[acostada ? 0 : Math.PI / 2, 0, 0]}>
+					<cylinderGeometry args={[1, 1, 0.14, 64]} />
+					{mat('#E2AE4A', 0.75, 0.3)}
+				</mesh>
+			);
+		case 'billete':
+			return (
+				<mesh>
+					<boxGeometry args={n2(acostada)} />
+					{mat('#6FAF7A', 0.05, 0.75)}
+				</mesh>
+			);
+		case 'lingote':
+			return (
+				<mesh>
+					<boxGeometry args={[1.8, 0.55, 0.8]} />
+					{mat('#E8B84A', 0.95, 0.22)}
+				</mesh>
+			);
+		case 'esfera':
+			return (
+				<mesh>
+					<sphereGeometry args={[1, 48, 48]} />
+					{mat('#7FA8FF', 0.2, 0.4)}
+				</mesh>
+			);
+		default:
+			return (
+				<mesh>
+					<boxGeometry args={[1.4, 1.4, 1.4]} />
+					{mat('#8B7BFF', 0.1, 0.45)}
+				</mesh>
+			);
+	}
+};
+
+const n2 = (acostada?: boolean): [number, number, number] => (acostada ? [2.3, 0.02, 1.05] : [2.3, 1.05, 0.02]);
+
+/** Separación vertical de cada forma al apilarla. */
+const ALTO_PILA: Record<string, number> = {moneda: 0.16, billete: 0.03, lingote: 0.58, cubo: 1.45, esfera: 1.9};
+
+export const Modelo3D: React.FC<{c: Record<string, any>; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 600;
+	const alto = c.alto ?? ancho;
+	const t0 = cuando(c.en, ctx, 0);
+	const t = Math.max(0, ctx.t - t0);
+	const [rx, ry, rz] = (c.rotacion ?? [0, 0, 0]).map((g: number) => g * RAD);
+	const [gx, gy, gz] = (c.girar3d ?? [0, 25, 0]).map((g: number) => g * RAD);
+	const n = Math.max(1, c.cantidad ?? 1);
+	// pila que crece: de 1 a n en `duracion` (por defecto, mientras habla)
+	const visibles = c.crecer ? Math.max(1, Math.round(1 + (n - 1) * easeOut(clamp(t / (c.duracion ?? Math.max(0.5, ctx.habla[1] - t0)))))) : n;
+	const paso = ALTO_PILA[c.forma ?? 'cubo'] ?? 1;
+	const pila = useMemo(() => Array.from({length: n}, (_, i) => [Math.sin(i * 12.9) * 0.05, i * paso, Math.cos(i * 7.3) * 0.05, Math.sin(i * 3.1) * 0.3] as const), [n, paso]);
+	const altoPila = (visibles - 1) * paso;
+	return (
+		<div style={{width: ancho, height: alto}}>
+			<ThreeCanvas width={ancho} height={alto} gl={{alpha: true, antialias: true}} camera={{fov: 35, position: [0, c.camaraY ?? 1.2, c.distancia ?? 6]}}>
+				<Entorno fuerza={c.reflejos ?? 1} />
+				<ambientLight intensity={c.luzAmbiente ?? 0.55} />
+				<directionalLight position={[3, 5, 4]} intensity={c.luz ?? 1.4} />
+				<directionalLight position={[0, 1, 6]} intensity={(c.luz ?? 1.4) * 0.7} />
+				<directionalLight position={[-4, 2, -3]} intensity={0.4} color="#9fc4ff" />
+				<group scale={c.tamano ?? 1} rotation={[rx + gx * t, ry + gy * t, rz + gz * t]} position={[0, n > 1 ? -altoPila / 2 : 0, 0]}>
+					{c.src ? (
+						<Glb src={c.src} />
+					) : (
+						pila.slice(0, visibles).map(([x, y, z, giro], i) => (
+							<group key={i} position={[x, y, z]} rotation={[0, n > 1 ? giro : 0, 0]}>
+								<Forma forma={c.forma ?? 'cubo'} color={c.color} metal={c.metal} rugosidad={c.rugosidad} acostada={n > 1} />
+							</group>
+						))
+					)}
+				</group>
+			</ThreeCanvas>
+		</div>
+	);
+};
+
+// ---------------------------------------------------------------------------------------------
+// Escena 3D completa: tu .glb (por ejemplo, exportado de Blender) ocupando todo el cuadro.
+//   {tipo: 'escena3d', src: 'casa.glb',
+//    camara: [{en: 0, pos: [8, 4, 10], mirar: [0, 0, 0]}, {en: 'tubería', pos: [2, 1, 3], mirar: [0, -1, 0]}],
+//    animacion: true | 'NombreDelClip', velocidad: 1,
+//    mostrar: [{nodo: 'Agua', en: 'viertes'}], ocultar: [{nodo: 'Pared', en: 'dentro'}],
+//    fondo: '#87CEEB' | null, niebla: [cerca, lejos]}
+// Coordenadas del propio archivo (no se reescala). La cámara va suave de un punto al siguiente.
+type Toma = {en?: unknown; pos: [number, number, number]; mirar?: [number, number, number]; fov?: number};
+
+const Camara: React.FC<{tomas: Toma[]; ctx: CtxEscena}> = ({tomas, ctx}) => {
+	const {camera} = useThree();
+	const lista = tomas.map((k) => ({...k, t: cuando(k.en, ctx, 0)})).sort((a, b) => a.t - b.t);
+	let i = 0;
+	while (i < lista.length - 1 && ctx.t >= lista[i + 1].t) i++;
+	const a = lista[i];
+	const b = lista[Math.min(i + 1, lista.length - 1)];
+	const k = b === a ? 0 : (() => {
+		const x = clamp((ctx.t - a.t) / Math.max(0.3, b.t - a.t));
+		return x * x * (3 - 2 * x);
+	})();
+	// entre dos tomas la cámara se mueve durante todo el intervalo (y se queda quieta en la última)
+	const L = (u: number[], v: number[]) => u.map((n, j) => n + (v[j] - n) * k) as [number, number, number];
+	const pos = L(a.pos, b.pos);
+	const mirar = L(a.mirar ?? [0, 0, 0], b.mirar ?? a.mirar ?? [0, 0, 0]);
+	const fov = (a.fov ?? 40) + ((b.fov ?? a.fov ?? 40) - (a.fov ?? 40)) * k;
+	useLayoutEffect(() => {
+		camera.position.set(...pos);
+		camera.lookAt(...mirar);
+		if ((camera as THREE.PerspectiveCamera).isPerspectiveCamera) {
+			(camera as THREE.PerspectiveCamera).fov = fov;
+			camera.updateProjectionMatrix();
+		}
+	});
+	return null;
+};
+
+const ModeloEscena: React.FC<{c: Record<string, any>; ctx: CtxEscena}> = ({c, ctx}) => {
+	const url = recurso(c.src);
+	const [g, setG] = useState<{scene: THREE.Group; mixer: THREE.AnimationMixer | null} | null>(null);
+	const [handle] = useState(() => delayRender(`Cargando escena 3D ${c.src}`));
+	useEffect(() => {
+		cargarGltf(url)
+			.then((gl) => {
+				const scene = gl.scene.clone(true);
+				let mixer: THREE.AnimationMixer | null = null;
+				if (c.animacion && gl.animations.length) {
+					mixer = new THREE.AnimationMixer(scene);
+					const clips = c.animacion === true ? gl.animations : gl.animations.filter((a) => [].concat(c.animacion).includes(a.name as never));
+					for (const clip of clips) mixer.clipAction(clip).play();
+				}
+				scene.traverse((o: any) => {
+					if (o.isMesh && c.sombras !== false) {
+						o.castShadow = true;
+						o.receiveShadow = true;
+					}
+				});
+				setG({scene, mixer});
+				continueRender(handle);
+			})
+			.catch((e) => {
+				continueRender(handle);
+				throw new Error(`No pude cargar la escena 3D ${c.src}: ${e.message}`);
+			});
+	}, [url, handle]);
+	const t0 = cuando(c.en, ctx, 0);
+	useLayoutEffect(() => {
+		if (!g) return;
+		// animaciones del archivo: se posicionan en el tiempo exacto del fotograma (nunca corren solas)
+		g.mixer?.setTime(Math.max(0, ctx.t - t0) * (c.velocidad ?? 1));
+		const visible = (lista: any[] | undefined, valor: boolean) => {
+			for (const v of lista ?? []) {
+				const nodo = g.scene.getObjectByName(v.nodo);
+				if (nodo) nodo.visible = ctx.t >= cuando(v.en, ctx, 0) ? valor : !valor;
+			}
+		};
+		visible(c.mostrar, true);
+		visible(c.ocultar, false);
+	});
+	return g ? <primitive object={g.scene} /> : null;
+};
+
+export const Escena3D: React.FC<{c: Record<string, any>; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 1080;
+	const alto = c.alto ?? 1920;
+	const tomas: Toma[] = c.camara ?? [{pos: [6, 4, 8], mirar: [0, 0, 0]}];
+	return (
+		<div style={{width: ancho, height: alto}}>
+			<ThreeCanvas width={ancho} height={alto} shadows gl={{alpha: c.fondo == null, antialias: true}} camera={{fov: tomas[0].fov ?? 40, position: tomas[0].pos}}>
+				{c.fondo ? <color attach="background" args={[c.fondo]} /> : null}
+				{c.niebla ? <fog attach="fog" args={[c.fondo ?? '#ffffff', c.niebla[0], c.niebla[1]]} /> : null}
+				<Entorno fuerza={c.reflejos ?? 0.8} />
+				<hemisphereLight args={['#ffffff', '#8a7a66', c.luzAmbiente ?? 0.9]} />
+				<directionalLight position={c.sol ?? [8, 14, 6]} intensity={c.luz ?? 2.2} castShadow shadow-mapSize={[2048, 2048]} />
+				<Camara tomas={tomas} ctx={ctx} />
+				<ModeloEscena c={c} ctx={ctx} />
+			</ThreeCanvas>
+		</div>
+	);
+};

package/remotion/motor/plantillas.tsx

@@ -0,0 +1,123 @@
+// Escenas listas para usar en cualquier estilo del motor de capas. Cada una se convierte en capas,
+// así que todas aceptan además `capas: [...]` para agregar lo que quieras encima.
+//   capas     solo tus capas
+//   titular   etiqueta "// paso 1", titular con *palabra* resaltada y número de paso
+//   dato      un número grande que cuenta (2.000 m, 230 dB, $5,3 M) con texto e imagen opcional
+//   lista     tarjeta con renglones que se palomean
+//   telefono  un teléfono con tu imagen o video
+//   comparar  A contra B (antes/después)
+//   eleccion  dos (o más) opciones para que el público comente: cartas VS o botones
+//   cta       cierre con tu marca
+import type {Marca} from '../tipos';
+import type {Capa} from './capas';
+import type {Tema} from './tema';
+
+type P = Record<string, any>;
+
+export const PLANTILLAS = ['capas', 'titular', 'dato', 'lista', 'telefono', 'comparar', 'eleccion', 'cta'];
+
+export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
+	const extra: Capa[] = p.capas ?? [];
+	switch (tipo) {
+		case 'titular': {
+			const y = p.y ?? 560;
+			const out: Capa[] = [];
+			if (p.etiqueta) out.push({tipo: 'etiqueta', texto: p.etiqueta, x: 80, y: y - 92, ancla: 'izquierda', entrada: 'aparecer'});
+			out.push({tipo: 'texto', texto: p.texto ?? '', x: 80, y, ancla: 'izquierda', alinear: 'left', tam: p.tam ?? 104, maxAncho: p.numero != null ? 800 : 920, entrada: 'subir', en: p.en});
+			if (p.numero != null) out.push({tipo: 'numero', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
+			if (p.sub) out.push({tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 600, color: tema.colores.suave, x: 80, y: y + 110, ancla: 'izquierda', alinear: 'left', entrada: 'aparecer', en: 0.3});
+			return [...out, ...extra];
+		}
+		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});
+			out.push({
+				tipo: 'contador',
+				de: p.de ?? 0,
+				a: p.valor ?? p.a ?? 0,
+				prefijo: p.prefijo,
+				sufijo: p.sufijo,
+				decimales: p.decimales,
+				curva: p.curva,
+				formato: p.formato ?? 'grande',
+				tam: p.tam,
+				x: 540,
+				y,
+				en: p.en ?? 'voz',
+				duracion: p.duracion,
+				entrada: 'rebote',
+			});
+			if (p.texto) out.push({tipo: 'texto', texto: p.texto, fuente: 'texto', tam: 54, peso: 700, color: tema.colores.texto, x: 540, y: y + 150, entrada: 'subir', en: (p.en ?? 0) === 'voz' ? 0.4 : 0.4});
+			return [...out, ...extra];
+		}
+		case 'lista':
+			return [{tipo: 'tarjeta', titulo: p.titulo, cabecera: p.cabecera, items: p.items ?? [], ancho: p.ancho ?? 760, x: 540, y: p.y ?? 1000, entrada: 'subir', checks: p.checks}, ...extra];
+		case 'telefono':
+			return [{tipo: 'telefono', src: p.src, capas: p.capasPantalla, ancho: p.ancho ?? 500, x: 540, y: p.y ?? 1080, entrada: 'deslizar-arriba'}, ...(p.texto ? [{tipo: 'texto', texto: p.texto, x: 540, y: 520, tam: 90, entrada: 'subir'}] : []), ...extra];
+		case 'comparar': {
+			const lado = (d: any, x: number, color: string, en: any): Capa[] => {
+				const v = typeof d === 'string' ? {texto: d} : d ?? {};
+				const out: Capa[] = [];
+				if (v.imagen) out.push({tipo: 'imagen', src: v.imagen, ancho: 340, x, y: 860, entrada: 'escala', en});
+				out.push({tipo: 'texto', texto: v.texto ?? '', tam: v.tam ?? 84, color: v.color ?? color, x, y: v.imagen ? 1110 : 960, maxAncho: 440, entrada: 'rebote', en});
+				return out;
+			};
+			const enB = p.at ?? p.en ?? 'fin-0.6';
+			return [
+				...lado(p.a, 280, tema.colores.texto, 0.1),
+				{tipo: 'forma', forma: 'flecha', ancho: 150, x: 540, y: 960, color: tema.colores.acento, en: enB, entrada: 'ninguna'},
+				...lado(p.b, 800, tema.colores.acento, enB),
+				...extra,
+			];
+		}
+		case 'eleccion': {
+			const ops: P[] = (p.opciones ?? []).map((o: any) => (typeof o === 'string' ? {texto: o} : o));
+			const out: Capa[] = [];
+			const yTit = p.y ?? 640;
+			if (p.pregunta) out.push({tipo: 'texto', texto: p.pregunta, x: 540, y: yTit, tam: p.tamPregunta ?? 84, maxAncho: 900, entrada: 'subir'});
+			if ((p.formato ?? 'cartas') === 'botones') {
+				ops.forEach((o, i) =>
+					out.push({
+						tipo: 'texto', texto: o.texto, fuente: 'texto', tam: 56, peso: 900, mayusculas: true,
+						color: i === 0 ? (tema.colores.texto === '#FFFFFF' ? '#141414' : '#FFFFFF') : o.color ?? tema.colores.acento2,
+						fondo: i === 0 ? tema.colores.texto : 'transparent', borde: i === 0 ? undefined : o.color ?? tema.colores.acento2,
+						relleno: '18px 0', radio: 99, maxAncho: 620, ancho: 620,
+						x: 540, y: yTit + 300 + i * 170, entrada: 'rebote', en: o.en ?? 0.3 + i * 0.2, sombra: false,
+						...(i > 0 ? {} : {}),
+					}),
+				);
+				ops.forEach((o, i) => o.sub && out.push({tipo: 'texto', texto: o.sub, fuente: 'texto', tam: 28, peso: 600, color: tema.colores.suave, x: 540, y: yTit + 370 + i * 170, entrada: 'aparecer', en: 0.5 + i * 0.2}));
+			} else {
+				const n = Math.max(1, ops.length);
+				// debajo de los subtítulos del centro (series) o al centro si los subtítulos van arriba/abajo
+				const yC = p.yCartas ?? (tema.subtitulos.y > 900 && tema.subtitulos.y < 1250 ? 1380 : 1060);
+				ops.forEach((o, i) => {
+					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});
+					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});
+				});
+				if (n === 2) out.push({tipo: 'texto', texto: 'VS', tam: 120, color: tema.colores.acento, contorno: 10, colorContorno: '#141414', x: 540, y: yC, entrada: 'rebote', en: 0.55, mayusculas: true});
+			}
+			if (p.comenta !== false) out.push({tipo: 'texto', texto: `💬 ${p.comenta ?? '¡COMENTA!'}`, fuente: 'texto', tam: 50, peso: 900, color: '#141414', fondo: '#FFD84A', relleno: '14px 34px', radio: 99, x: 540, y: p.yComenta ?? (tema.subtitulos.y > 1350 ? 1300 : 1640), entrada: 'rebote', en: p.enComenta ?? 'fin-0.8', latir: true, sombra: false, mayusculas: true, sonido: 'ding'});
+			return [...out, ...extra];
+		}
+		case 'cta': {
+			const nombre = marca.nombre;
+			return [
+				{tipo: 'marca', tam: 330, x: 540, y: 760, entrada: 'rebote', latir: true},
+				...(nombre ? [{tipo: 'texto', texto: nombre, x: 540, y: 1030, tam: 120, color: tema.colores.texto, entrada: 'rebote', en: 0.25, mayusculas: false}] : []),
+				{tipo: 'texto', texto: marca.seguir, fuente: 'texto', tam: 58, peso: 800, color: '#FFFFFF', fondo: tema.colores.acento2, relleno: '18px 60px', radio: 99, x: 540, y: 1190, entrada: 'rebote', en: 0.6, hasta: 1.7, salida: 'ninguna', sombra: false},
+				{tipo: 'texto', texto: marca.siguiendo, fuente: 'texto', tam: 58, peso: 800, color: '#FFFFFF', fondo: '#3C3C46', relleno: '18px 60px', radio: 99, x: 540, y: 1190, entrada: 'ninguna', en: 1.7, sombra: false},
+				...(marca.redes ? [{tipo: 'texto', texto: marca.redes, fuente: 'texto', tam: 36, peso: 600, color: tema.colores.suave, x: 540, y: 1310, entrada: 'aparecer', en: 0.9, mayusculas: false}] : []),
+				...extra,
+			];
+		}
+		default:
+			return extra;
+	}
+}

package/remotion/motor/registro.ts

@@ -0,0 +1,11 @@
+// Componentes propios del proyecto (escenas o piezas en React/TSX) para la capa {tipo: 'componente'}.
+// Morfeo los registra solo a partir de `componentes` en morfeo.config.mjs:
+//   componentes: {Mapa: './escenas/Mapa.tsx'}
+// Cada componente recibe {t, dur, palabras, tema, cuando, ...props}: t = segundos desde que empezó la escena.
+import type React from 'react';
+
+const COMPONENTES: Record<string, React.FC<any>> = {};
+
+export const registrarComponentes = (c: Record<string, React.FC<any>>) => Object.assign(COMPONENTES, c);
+export const componente = (nombre: string) => COMPONENTES[nombre];
+export const nombresComponentes = () => Object.keys(COMPONENTES);

package/remotion/motor/subtitulos.tsx

@@ -0,0 +1,137 @@
+// Subtítulos del motor de capas.
+//   karaoke: frase corta arriba; lo ya dicho en blanco, lo que falta tenue y la palabra actual resaltada.
+//   pop: 1–3 palabras grandes en mayúsculas, la actual en color de acento (estilo TikTok clásico).
+//   bloque: 2 renglones centrados en mayúsculas; la palabra actual dentro de una caja de color (series animadas).
+//   palabra: una sola palabra grande a la vez; las largas en color de acento (videos 3D).
+//   karaoke con `fondo`: la frase dentro de una caja oscura (infografías).
+import React from 'react';
+import {W, backOut, clamp} from '../estilo';
+import type {Tema} from './tema';
+
+type Palabra = [string, number, number];
+
+/** Parte las palabras de la escena en frases de hasta `max` palabras, cortando en la puntuación. */
+function frases(palabras: Palabra[], max: number): Palabra[][] {
+	const out: Palabra[][] = [];
+	let cur: Palabra[] = [];
+	for (const p of palabras) {
+		cur.push(p);
+		if (cur.length >= max || /[.,:;?!]$/.test(p[0])) {
+			out.push(cur);
+			cur = [];
+		}
+	}
+	if (cur.length) out.push(cur);
+	return out;
+}
+
+export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; dur: number}> = ({tema, palabras, t, dur}) => {
+	const S = tema.subtitulos;
+	if (S.tipo === 'ninguno' || !palabras.length) return null;
+	const max = S.tipo === 'pop' ? 3 : S.tipo === 'bloque' ? Math.min(S.maxPalabras, 5) : S.tipo === 'palabra' ? 1 : S.maxPalabras;
+	const grupos = frases(palabras, max);
+	const gi = grupos.findIndex((g, i) => t < (grupos[i + 1]?.[0][1] ?? dur) - 0.02);
+	const g = grupos[gi];
+	if (!g || t < g[0][1] - 0.12) return null;
+	const entrada = clamp((t - (g[0][1] - 0.12)) / 0.18);
+
+	if (S.tipo === 'palabra') {
+		const [w] = g[0];
+		const acento = w.replace(/[^\p{L}\p{N}]/gu, '').length >= 7;
+		return (
+			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${backOut(entrada)})`, textAlign: 'center'}}>
+				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: acento ? tema.colores.acento : S.color, WebkitTextStroke: `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: '0 6px 0 rgba(0,0,0,0.35)'}}>
+					{S.mayusculas ? w.toUpperCase() : w}
+				</span>
+			</div>
+		);
+	}
+
+	if (S.tipo === 'bloque') {
+		return (
+			<div style={{position: 'absolute', left: 90, width: W - 180, top: S.y, transform: `translateY(-50%) scale(${0.9 + 0.1 * backOut(entrada)})`, opacity: entrada, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: '6px 18px'}}>
+				{g.map(([w, a, b], i) => {
+					const actual = t >= a && t < b + 0.06;
+					return (
+						<span
+							key={i}
+							style={{
+								fontFamily: tema.fuentes.texto,
+								fontWeight: 900,
+								fontSize: S.tam * 1.15,
+								lineHeight: 1.15,
+								textTransform: 'uppercase',
+								color: actual && !S.resalte ? tema.colores.acento : S.color,
+								background: actual && S.resalte ? S.resalte : undefined,
+								padding: '0 12px',
+								borderRadius: 10,
+								WebkitTextStroke: actual && S.resalte ? undefined : `${S.contorno ?? 8}px #1a1a1a`,
+								paintOrder: 'stroke fill',
+								transform: `scale(${actual ? 1.06 : 1})`,
+							}}
+						>
+							{w}
+						</span>
+					);
+				})}
+			</div>
+		);
+	}
+
+	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'}}>
+				{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})`}}>
+							{w}
+						</span>
+					);
+				})}
+			</div>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				left: 80,
+				width: W - 160,
+				top: S.y,
+				transform: `translateY(-50%) translateY(${(1 - entrada) * 16}px)`,
+				opacity: entrada,
+				textAlign: 'center',
+				fontFamily: tema.fuentes.texto,
+				fontSize: S.tam,
+				fontWeight: 700,
+				lineHeight: 1.35,
+				textShadow: S.color === '#FFFFFF' && !S.fondo ? '0 3px 12px rgba(0,0,0,0.5)' : undefined,
+			}}
+		>
+			<span style={S.fondo ? {background: S.fondo, padding: '10px 22px', borderRadius: 14, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone', lineHeight: 1.6} : undefined}>
+			{g.map(([w, a, b], i) => {
+				const dicha = t >= a;
+				const actual = t >= a && t < b + 0.06;
+				return (
+					<React.Fragment key={i}>
+						<span
+							style={{
+								color: dicha ? S.color : S.pendiente,
+								fontWeight: actual ? 800 : 700,
+								background: actual && S.resalte ? S.resalte : undefined,
+								borderRadius: 10,
+								padding: actual && S.resalte ? '2px 10px' : undefined,
+								margin: actual && S.resalte ? '0 -10px' : undefined,
+							}}
+						>
+							{w}
+						</span>{' '}
+					</React.Fragment>
+				);
+			})}
+			</span>
+		</div>
+	);
+};