morfeo 0.3.0 → 0.3.3

package/python/musica.py

@@ -175,20 +175,50 @@ def efecto(nombre, rng):
     if nombre == "tick": return 0.4 * tick()
     if nombre == "glitch": return 0.3 * glitch(rng)
     if nombre == "ding": return 0.2 * bell(nf(88), 0.8)
+    if nombre == "golpe":
+        x = 0.22 * pop(180, 90, 0.16)
+        add(x, 0.1 * lp(rng.standard_normal(int(0.06 * SR)), 1200), 0)
+        return x
     return 0.14 * pop()
 
 
+# sonido por defecto según cómo entra o qué es la capa (sonido: false lo apaga; sonido: "x" lo cambia)
+SONIDO_TIPO = {"sello": "golpe", "dato": "tick", "contador": "tick", "nombre": "pop", "accion": "pop", "chip": "pop", "insignia": "pop"}
+SONIDO_ENTRADA = {"rebote": "pop", "caer": "golpe", "deslizar-izq": "whoosh", "deslizar-der": "whoosh", "deslizar-arriba": "whoosh", "deslizar-abajo": "whoosh", "girar": "whoosh"}
+
+
+def sonido_de(c):
+    s = c.get("sonido")
+    if s is False or s == "ninguno": return None
+    if s: return s
+    return SONIDO_TIPO.get(c.get("tipo")) or SONIDO_ENTRADA.get(c.get("entrada"))
+
+
 def capas_con_sonido(sp):
-    """Capas de la escena (y de sus grupos) que piden un efecto de sonido."""
+    """[(capa, efecto, explícito)] de la escena y de sus grupos; las de enMundo y las del HUD no suenan solas."""
     out, pila = [], list(sp.get("capas") or [])
     while pila:
         c = pila.pop(0)
         if not isinstance(c, dict): continue
-        if c.get("sonido"): out.append(c)
+        ef = sonido_de(c)
+        if ef: out.append((c, ef, bool(c.get("sonido"))))
         pila.extend(c.get("capas") or [])
     return out
 
 
+def momento(en, ev, si, m):
+    """Segundos (relativos a la escena) de `en`: número, palabra, "palabra+0.3", "inicio", "voz" o "fin" (como cuando() del motor)."""
+    if en is None: return 0.3
+    if isinstance(en, (int, float)): return float(en)
+    import re
+    g = re.match(r"^(.*?)([+-]\d+(?:\.\d+)?)?$", str(en))
+    base, ajuste = (g.group(1) or "").strip(), float(g.group(2) or 0)
+    if base in ("", "inicio"): return ajuste
+    if base == "voz": return m["start"] - m["t0"] + ajuste
+    if base == "fin": return m["start"] - m["t0"] + m["speech"] + ajuste
+    return ev(si, base) + ajuste
+
+
 def mix(vid, style, outdir, TIM, SPEC, durs, ev):
     """Mezcla voz + música (con ducking) + efectos y escribe mix.wav. style=None: sin música."""
     dur = sum(durs); N = int(dur * SR); rng = np.random.default_rng(11)
@@ -206,11 +236,14 @@ def mix(vid, style, outdir, TIM, SPEC, durs, ev):
         if ty == "text" and sp.get("strike"):
             for i in range(len(sp["rows"])): add(sfx, 0.2 * whoosh(rng, 0.15), t0 + m["speech"] * 0.55 + i * 0.12)
         if ty == "cta": add(sfx, 0.4 * tick(), t0 + 1.6)
-        # motor de capas: cada capa (o grupo) con "sonido" suena cuando entra
-        for capa in capas_con_sonido(sp):
-            cuando = capa.get("en", 0.3)
-            tc = t0 + (ev(si, cuando) if isinstance(cuando, str) else float(cuando))
-            add(sfx, efecto(capa["sonido"], rng), tc)
+        # motor de capas: cada capa suena cuando entra (las explícitas siempre; las automáticas, más bajas y sin amontonarse)
+        if sp.get("rotulo"): add(sfx, 0.5 * efecto("whoosh", rng), t0 + momento(sp.get("rotuloEn", 0.12), ev, si, m) - 0.05)
+        usados = []
+        for capa, ef, explicito in sorted(capas_con_sonido(sp), key=lambda x: momento(x[0].get("en"), ev, si, m)):
+            tc = t0 + momento(capa.get("en"), ev, si, m)
+            if not explicito and any(abs(tc - u) < 0.25 for u in usados): continue
+            usados.append(tc)
+            add(sfx, (1.0 if explicito else 0.6) * efecto(ef, rng), tc)
     voice, _ = sf.read(os.path.join(outdir, "voz.wav"))
     voice = resample_poly(voice, 147, 80)
     v = np.zeros(N); v[: min(N, len(voice))] = voice[:N]

package/python/preparar.py

@@ -228,16 +228,25 @@ def preparar(job):
     if not voz_vigente(v, outdir):
         print("    voz...", flush=True); hacer_voz(v, outdir, job["modelos"])
     if job.get("soloVoz"): return
+    # pidió Whisper y la transcripción no existe (voz nueva): se sale con 10 para que morfeo transcriba y vuelva a llamar
+    if job.get("conWhisper") and not os.path.exists(os.path.join(outdir, "whisper.json")): sys.exit(10)
     TIM = json.load(open(os.path.join(outdir, "tiempos.json"), encoding="utf-8"))["escenas"]
     wj = os.path.join(outdir, "whisper.json"); ww = palabras_whisper(wj) if os.path.exists(wj) else None
     WORDS, reales = [], 0
     for seg in TIM:
         w, ok = tiempos_palabras(seg, ww); WORDS.append(w); reales += ok
 
+    def norm(x):
+        # igual que norm() de remotion/motor/util.ts: sin acentos, minúsculas, solo letras y números
+        import unicodedata
+        x = unicodedata.normalize("NFD", str(x))
+        return "".join(ch for ch in x if not unicodedata.combining(ch)).lower().translate({ord(c): None for c in "¿?.,:;¡!\"'«»()"}).replace(" ", "")
+
     def ev(si, prefix):
         seg = TIM[si]
+        p = norm(prefix)
         for w, a, b in WORDS[si]:
-            if w.lower().strip("¿?.,:¡!").startswith(prefix.lower()): return a - seg["t0"]
+            if norm(w).startswith(p): return a - seg["t0"]
         return seg["speech"] * 0.5
 
     durs = [seg["dur"] + (0.6 if i == len(TIM) - 1 else 0) for i, seg in enumerate(TIM)]

package/remotion/kit/datos.tsx

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

package/remotion/kit/escenarios2d.tsx

@@ -0,0 +1,250 @@
+// Escenarios 2D listos (van DENTRO de un <svg>, normalmente como fondo de un `mundo` de 2160×1920).
+// Todos aceptan `ancho` (del mundo), `suelo` (altura del piso), `t` (para lo que se mueve) y `camara` (paralaje).
+// Combínalos con Persona2D, Multitud y Globo (kit/personas.tsx) y con las anotaciones del motor.
+//
+//   <CiudadNoche t={t} camara={camara} />   <Cuarto pared="#2E5A4C" />   <Campo t={t} />   <Calle t={t} />
+//   <Oficina />   <Mar t={t} profundo />
+import React from 'react';
+import {Cielo, ConoLuz, Estrellas, Montanas, Paralaje, Pasto, Pinos, Suelo, alturaSuelo, azarN, type Camara} from './ilustrado';
+
+type Base = {ancho?: number; suelo?: number; t?: number; camara?: Camara; semilla?: number};
+
+/** Edificios con ventanas (algunas encendidas que parpadean poco a poco). */
+const Edificios: React.FC<{x0: number; x1: number; base: number; alto: number; color: string; luz: string; t: number; semilla: number; n?: number}> = ({x0, x1, base, alto, color, luz, t, semilla, n = 9}) => {
+	const ancho = (x1 - x0) / n;
+	return (
+		<g>
+			{Array.from({length: n}, (_, i) => {
+				const s = semilla + i * 13;
+				const w = ancho * (0.7 + azarN(s) * 0.28);
+				const h = alto * (0.45 + azarN(s + 1) * 0.55);
+				const x = x0 + i * ancho + (ancho - w) / 2;
+				const cols = Math.max(2, Math.floor(w / 46));
+				const filas = Math.max(3, Math.floor(h / 62));
+				return (
+					<g key={i}>
+						<rect x={x} y={base - h} width={w} height={h + 400} fill={color} />
+						{Array.from({length: cols * filas}, (_, j) => {
+							const c = j % cols;
+							const f = Math.floor(j / cols);
+							const on = azarN(s + j * 3) > 0.55;
+							if (!on) return null;
+							const brillo = 0.75 + 0.25 * Math.sin(t * (0.3 + azarN(s + j) * 0.5) + j);
+							return <rect key={j} x={x + 14 + c * ((w - 28) / cols)} y={base - h + 22 + f * 62} width={(w - 28) / cols - 14} height={34} rx={3} fill={luz} opacity={brillo} />;
+						})}
+					</g>
+				);
+			})}
+		</g>
+	);
+};
+
+/** Ciudad de noche: cielo, estrellas, edificios en tres planos con ventanas, calle. */
+export const CiudadNoche: React.FC<Base & {luz?: string}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, luz = '#FFD27A'}) => (
+	<g>
+		<Paralaje camara={camara} profundidad={0.9}>
+			<Cielo id="cn-cielo" colores={['#070A1F', '#141B45', '#2B2A63', '#4A3A73']} />
+			<Estrellas t={t} n={80} y1={900} semilla={semilla} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.55}>
+			<Edificios x0={-500} x1={ancho + 500} base={suelo - 60} alto={900} color="#1B2350" luz="#6C77C9" t={t} semilla={semilla + 1} n={14} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.25}>
+			<Edificios x0={-400} x1={ancho + 400} base={suelo - 10} alto={1050} color="#141A3A" luz={luz} t={t} semilla={semilla + 2} n={10} />
+		</Paralaje>
+		<rect x={-800} y={suelo} width={ancho + 1600} height={800} fill="#20222C" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={14} fill="#3A3D4A" />
+		{Array.from({length: Math.ceil((ancho + 1600) / 240)}, (_, i) => (
+			<rect key={i} x={-800 + i * 240} y={suelo + 150} width={130} height={14} rx={7} fill="#E8C35A" opacity={0.7} />
+		))}
+	</g>
+);
+
+/** Interior: pared con zoclo, piso de madera, ventana, cuadro y lámpara con su cono de luz. */
+export const Cuarto: React.FC<Base & {pared?: string; piso?: string; noche?: boolean; ventana?: boolean; lampara?: boolean; cuadro?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, pared = '#2E5A4C', piso = '#7A4A2A', noche = true, ventana = true, lampara = true, cuadro = true}) => (
+	<g>
+		<rect x={-800} y={-800} width={ancho + 1600} height={suelo + 800} fill={pared} />
+		{/* papel tapiz: rombos sutiles */}
+		<g opacity={0.08} fill="#000">
+			{Array.from({length: 40 * 30}, (_, i) => {
+				const c = i % 40;
+				const f = Math.floor(i / 40);
+				return <path key={i} d={`M ${-800 + c * 110 + (f % 2) * 55} ${-800 + f * 80} l 18 26 l -18 26 l -18 -26 Z`} />;
+			})}
+		</g>
+		<rect x={-800} y={suelo - 140} width={ancho + 1600} height={140} fill="rgba(0,0,0,0.22)" />
+		<rect x={-800} y={suelo - 150} width={ancho + 1600} height={14} fill="rgba(255,255,255,0.12)" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill={piso} />
+		{Array.from({length: 30}, (_, i) => (
+			<rect key={i} x={-800} y={suelo + 30 + i * 46} width={ancho + 1600} height={3} fill="rgba(0,0,0,0.18)" />
+		))}
+		{ventana ? (
+			<g transform={`translate(${ancho * 0.72} ${suelo - 1000})`}>
+				<rect x={-20} y={-20} width={420} height={520} rx={10} fill="#E9E1D2" />
+				<rect width={380} height={480} fill={noche ? '#1A2350' : '#9FD4F5'} />
+				{noche ? <circle cx={270} cy={120} r={46} fill="#FFF4D6" /> : <circle cx={270} cy={120} r={54} fill="#FFE27A" />}
+				<rect x={186} width={8} height={480} fill="#E9E1D2" />
+				<rect y={236} width={380} height={8} fill="#E9E1D2" />
+			</g>
+		) : null}
+		{cuadro ? (
+			<g transform={`translate(${ancho * 0.3} ${suelo - 1050})`}>
+				<rect x={-16} y={-16} width={352} height={262} fill="#B8873A" />
+				<rect width={320} height={230} fill="#8FD0C4" />
+				<path d="M 0 230 L 90 120 L 170 190 L 240 110 L 320 230 Z" fill="#3E8A55" />
+				<circle cx={250} cy={60} r={26} fill="#F5D46A" />
+			</g>
+		) : null}
+		{lampara ? (
+			<g transform={`translate(${ancho * 0.12} ${suelo})`}>
+				<ConoLuz id="cuarto-cono" x={0} y={-640} ancho={720} largo={700} fuerza={0.4 + 0.03 * Math.sin(t * 2)} />
+				<rect x={-6} y={-600} width={12} height={600} fill="#2A2420" />
+				<ellipse cx={0} cy={0} rx={70} ry={14} fill="#2A2420" />
+				<path d="M -90 -640 L 90 -640 L 60 -760 L -60 -760 Z" fill="#F2D49B" />
+			</g>
+		) : null}
+	</g>
+);
+
+/** Campo abierto de día: cielo, sol, nubes que avanzan, montañas, árboles y pasto. */
+export const Campo: React.FC<Base & {tarde?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, tarde = false}) => (
+	<g>
+		<Paralaje camara={camara} profundidad={0.9}>
+			<Cielo id="campo-cielo" colores={tarde ? ['#F7B267', '#F4845F', '#F27059'] : ['#7EC8F2', '#B6E2F7', '#E8F6FC']} />
+			<circle cx={ancho * 0.75} cy={380} r={110} fill={tarde ? '#FFE3A3' : '#FFF1A8'} />
+			{[0, 1, 2, 3].map((i) => {
+				const x = ((azarN(semilla + i) * (ancho + 800) + t * (18 + i * 6)) % (ancho + 1200)) - 600;
+				const y = 220 + azarN(semilla + i + 9) * 380;
+				return (
+					<g key={i} transform={`translate(${x} ${y}) scale(${0.8 + azarN(i) * 0.6})`} fill="#fff" opacity={0.92}>
+						<circle cx={0} cy={0} r={60} />
+						<circle cx={70} cy={-20} r={75} />
+						<circle cx={150} cy={0} r={55} />
+						<rect x={0} y={0} width={150} height={55} />
+					</g>
+				);
+			})}
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.6}>
+			<Montanas base={suelo - 220} alto={500} semilla={semilla + 3} color={tarde ? '#B5656B' : '#8DB7C9'} />
+		</Paralaje>
+		<Paralaje camara={camara} profundidad={0.3}>
+			<Pinos base={suelo - 60} alto={420} ancho={190} n={18} semilla={semilla + 7} color={tarde ? '#4E5B3A' : '#3E8A55'} />
+		</Paralaje>
+		<Suelo y={suelo} colores={tarde ? ['#8DA05A', '#55623A'] : ['#7CC45A', '#3E8A3E']} id="campo-suelo" />
+		<Pasto y={suelo} t={t} n={180} color={tarde ? '#6E7F44' : '#5AA845'} semilla={semilla + 11} />
+	</g>
+);
+
+/** Calle de día con banqueta, casas al fondo y postes. */
+export const Calle: React.FC<Base & {noche?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, noche = false}) => {
+	const casas = ['#F2E6D0', '#F7D9C4', '#DDE8F0', '#F4E3A1', '#E8D5F0'];
+	return (
+		<g>
+			<Paralaje camara={camara} profundidad={0.9}>
+				<Cielo id="calle-cielo" colores={noche ? ['#0B1033', '#232A63'] : ['#8FD0F5', '#DDF2FC']} />
+			</Paralaje>
+			<Paralaje camara={camara} profundidad={0.3}>
+				<g>
+					{Array.from({length: 8}, (_, i) => {
+						const x = -400 + i * ((ancho + 800) / 8);
+						const w = 300 + azarN(semilla + i) * 60;
+						const h = 320 + azarN(semilla + i + 3) * 140;
+						return (
+							<g key={i}>
+								<rect x={x} y={suelo - 120 - h} width={w} height={h} fill={casas[i % casas.length]} />
+								<path d={`M ${x - 20} ${suelo - 120 - h} L ${x + w / 2} ${suelo - 120 - h - 150} L ${x + w + 20} ${suelo - 120 - h} Z`} fill={['#D9533B', '#8A3B2A', '#4A5A7A'][i % 3]} />
+								<rect x={x + w * 0.4} y={suelo - 120 - 170} width={70} height={170} fill="#7A4E2D" />
+								<rect x={x + w * 0.1} y={suelo - 120 - h + 60} width={80} height={70} fill={noche ? '#FFD27A' : '#9AD4F5'} />
+								<rect x={x + w * 0.65} y={suelo - 120 - h + 60} width={80} height={70} fill={noche ? '#FFD27A' : '#9AD4F5'} />
+							</g>
+						);
+					})}
+				</g>
+			</Paralaje>
+			<rect x={-800} y={suelo - 120} width={ancho + 1600} height={120} fill="#C9C4BA" />
+			<rect x={-800} y={suelo - 124} width={ancho + 1600} height={10} fill="#E2DDD3" />
+			<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill="#3E4250" />
+			{Array.from({length: Math.ceil((ancho + 1600) / 260)}, (_, i) => (
+				<rect key={i} x={-800 + i * 260 - ((t * 0) % 260)} y={suelo + 210} width={140} height={16} rx={8} fill="#F2D04A" />
+			))}
+			{[0.15, 0.55, 0.92].map((f, i) => (
+				<g key={i} transform={`translate(${ancho * f} ${suelo - 120})`}>
+					<rect x={-8} y={-620} width={16} height={620} fill="#5A5F6B" />
+					<rect x={-8} y={-620} width={110} height={12} fill="#5A5F6B" />
+					<ellipse cx={100} cy={-602} rx={24} ry={10} fill={noche ? '#FFE9A8' : '#C9CED6'} />
+				</g>
+			))}
+		</g>
+	);
+};
+
+/** Oficina: pared clara, escritorio con monitor, planta y repisa. */
+export const Oficina: React.FC<Base> = ({ancho = 2160, suelo = 1500, t = 0}) => (
+	<g>
+		<rect x={-800} y={-800} width={ancho + 1600} height={suelo + 800} fill="#E8E4DC" />
+		<rect x={-800} y={suelo} width={ancho + 1600} height={900} fill="#B9A58A" />
+		<rect x={-800} y={suelo - 10} width={ancho + 1600} height={10} fill="#9C8A70" />
+		<g transform={`translate(${ancho * 0.62} ${suelo})`}>
+			<rect x={-360} y={-420} width={720} height={36} rx={8} fill="#8A5A3B" />
+			<rect x={-330} y={-384} width={30} height={384} fill="#6B4630" />
+			<rect x={300} y={-384} width={30} height={384} fill="#6B4630" />
+			<rect x={-150} y={-720} width={300} height={200} rx={14} fill="#22252E" />
+			<rect x={-136} y={-706} width={272} height={172} rx={8} fill="#3B7BE0" opacity={0.85 + 0.1 * Math.sin(t * 2)} />
+			<rect x={-20} y={-520} width={40} height={100} fill="#22252E" />
+			<rect x={-90} y={-430} width={180} height={14} rx={5} fill="#22252E" />
+		</g>
+		<g transform={`translate(${ancho * 0.2} ${suelo})`}>
+			<path d="M -70 0 L 70 0 L 55 -150 L -55 -150 Z" fill="#C9653E" />
+			{[-50, -20, 10, 40].map((x, i) => (
+				<ellipse key={i} cx={x} cy={-230 - (i % 2) * 40} rx={36} ry={90} fill="#3E8A55" transform={`rotate(${(i - 1.5) * 18} ${x} -160)`} />
+			))}
+		</g>
+		<g transform={`translate(${ancho * 0.3} ${suelo - 1100})`}>
+			<rect x={-200} y={0} width={400} height={20} fill="#8A5A3B" />
+			{['#E04A4A', '#2F6FE0', '#F2B632', '#2FA36B'].map((c, i) => (
+				<rect key={i} x={-180 + i * 50} y={-130 + (i % 2) * 20} width={40} height={130 - (i % 2) * 20} fill={c} />
+			))}
+		</g>
+	</g>
+);
+
+/** Mar: superficie con olas o fondo marino con rayos de luz y burbujas (`profundo`). */
+export const Mar: React.FC<Base & {profundo?: boolean}> = ({ancho = 2160, suelo = 1500, t = 0, camara, semilla = 0, profundo = false}) => {
+	if (profundo)
+		return (
+			<g>
+				<Cielo id="mar-fondo" colores={['#0E5AA0', '#073A70', '#031A38']} />
+				<g style={{mixBlendMode: 'screen'}} opacity={0.18} filter="url(#kit-lejos)">
+					{Array.from({length: 9}, (_, i) => {
+						const x = -300 + i * ((ancho + 600) / 9) + Math.sin(t * 0.4 + i) * 40;
+						return <polygon key={i} points={`${x},-400 ${x + 90},-400 ${x + 260},${suelo + 200} ${x + 60},${suelo + 200}`} fill="#BFE3FF" />;
+					})}
+				</g>
+				{Array.from({length: 40}, (_, i) => {
+					const s = semilla + i;
+					const y = ((suelo + 300 - ((t * (40 + azarN(s) * 60) + azarN(s + 1) * 2000) % 2400)) as number);
+					return <circle key={i} cx={azarN(s + 2) * ancho + Math.sin(t + i) * 12} cy={y} r={3 + azarN(s + 3) * 7} fill="none" stroke="rgba(200,235,255,0.5)" strokeWidth={2} />;
+				})}
+				<path d={`M -800 ${suelo + 120} ${Array.from({length: 30}, (_, i) => `L ${-800 + i * 140} ${suelo + 100 + Math.sin(i * 1.3) * 30}`).join(' ')} L ${ancho + 800} ${suelo + 900} L -800 ${suelo + 900} Z`} fill="#0A2440" />
+			</g>
+		);
+	const ola = (y: number, amp: number, fase: number, color: string) => {
+		let d = `M -800 ${y}`;
+		for (let x = -800; x <= ancho + 800; x += 40) d += ` L ${x} ${y + Math.sin(x / 120 + t * 1.6 + fase) * amp}`;
+		return <path d={`${d} L ${ancho + 800} ${y + 1200} L -800 ${y + 1200} Z`} fill={color} />;
+	};
+	return (
+		<g>
+			<Paralaje camara={camara} profundidad={0.9}>
+				<Cielo id="mar-cielo" colores={['#7EC8F2', '#CDEBFA']} />
+				<circle cx={ancho * 0.25} cy={420} r={100} fill="#FFF1A8" />
+			</Paralaje>
+			{ola(suelo - 180, 10, 0, '#4FA7E0')}
+			{ola(suelo - 80, 16, 1.4, '#2E86C9')}
+			{ola(suelo + 40, 22, 2.6, '#1E6AA8')}
+		</g>
+	);
+};
+
+export {alturaSuelo};

package/remotion/kit/index.ts

@@ -1,7 +1,14 @@
 // 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)
+//   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 {GraficaBarras, GraficaLinea, Comparacion, Lupa} from 'morfeo/kit';   (datos 2D)
 export * from './ilustrado';
+export * from './personas';
+export * from './escenarios2d';
 export * from './tres';
-export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
+export * from './mundo3d';
+export * from './datos';
 export * from './diorama';
+export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';