morfeo 0.0.0-stage → 0.1.1

package/python/preparar.py

@@ -0,0 +1,268 @@
+"""Prepara el audio y los tiempos de un video para Remotion (lo llama morfeo, no se usa a mano).
+
+    python preparar.py <trabajo.json>
+
+trabajo.json = {"id", "video" (la especificación), "indice", "publico" (carpeta public de Remotion),
+                "modelos" (carpeta con kokoro-v1.0.onnx y voices-v1.0.bin), "soloVoz"}
+Escribe en <publico>/v/<id>/: voz.wav, tiempos.json, mix.wav y datos.json.
+Si existe whisper.json en esa carpeta, los subtítulos usan los tiempos reales de cada palabra.
+"""
+import difflib, hashlib, json, os, re, sys, unicodedata
+import numpy as np
+
+D = os.path.dirname(os.path.abspath(__file__))
+sys.path.insert(0, D)
+
+SR_VOZ = 24000
+VERSION_VOZ = 2  # súbelo si cambias la cadena de voz para regenerar todas
+VELOCIDAD = 1.2
+
+
+# ---------------- voz ----------------
+def _biquad_peak(f, g_db, q, sr):
+    a = 10 ** (g_db / 40); w = 2 * np.pi * f / sr; al = np.sin(w) / (2 * q)
+    b = [1 + al * a, -2 * np.cos(w), 1 - al * a]; aa = [1 + al / a, -2 * np.cos(w), 1 - al / a]
+    return np.array(b) / aa[0], np.array(aa) / aa[0]
+
+
+def cadena_locutor(x, sr=SR_VOZ):
+    """La misma cadena de "voz de locutor" del motor original, sin depender de ffmpeg:
+    highpass 70 Hz, +3 dB en 180 Hz, -2 dB en 3.5 kHz, compresor 3:1, eco leve y -16 LUFS."""
+    from scipy.signal import butter, lfilter, sosfilt
+    import pyloudnorm as pyln
+    x = sosfilt(butter(2, 70, "high", fs=sr, output="sos"), x)
+    for f, g, q in ((180, 3, 1.0), (3500, -2, 1.5)):
+        b, a = _biquad_peak(f, g, q, sr); x = lfilter(b, a, x)
+    # compresor: umbral -20 dB, 3:1, ataque 5 ms, liberación 80 ms
+    thr = 10 ** (-20 / 20); ra = np.exp(-1 / (0.005 * sr)); rr = np.exp(-1 / (0.080 * sr))
+    env = np.empty_like(x); e = 0.0
+    for i, v in enumerate(np.abs(x)):
+        e = ra * e + (1 - ra) * v if v > e else rr * e + (1 - rr) * v
+        env[i] = e
+    over = np.maximum(env / thr, 1.0)
+    x = x * over ** (1 / 3 - 1)
+    # eco muy leve (aecho 0.8:0.5:30:0.12)
+    dly = int(0.030 * sr); y = x * 0.8; y[dly:] += x[:-dly] * 0.12; x = y * 0.5
+    # normalización a -16 LUFS
+    lufs = pyln.Meter(sr).integrated_loudness(x)
+    x = x * 10 ** ((-16 - lufs) / 20)
+    return np.clip(x, -1, 1)
+
+
+def _huella_archivo(p):
+    try: st = os.stat(p); return [os.path.basename(p), st.st_size, int(st.st_mtime)]
+    except OSError: return [p, 0, 0]
+
+
+def clave_voz(v):
+    voces = v.get("voice") or []
+    txt = json.dumps([VERSION_VOZ, voces, [_huella_archivo(r) for r, _ in voces if r.endswith(".npy")],
+                      v.get("speed", VELOCIDAD), v.get("lang", "es"),
+                      [(s["say"], s.get("show"), _huella_archivo(s["audio"]) if s.get("audio") else None) for s in v["scenes"]]],
+                     ensure_ascii=False)
+    return hashlib.sha1(txt.encode()).hexdigest()[:16]
+
+
+def leer_audio(ruta, sr):
+    """Lee una grabación (wav/flac/ogg/mp3 con soundfile; si falla, con ffmpeg) y la deja mono a `sr` Hz."""
+    import soundfile as sf
+    from scipy.signal import resample_poly
+    try:
+        x, sr0 = sf.read(ruta, always_2d=True)
+    except Exception:
+        import shutil, subprocess, tempfile
+        if not shutil.which("ffmpeg"):
+            raise SystemExit(f"No pude leer {ruta}. Conviértelo a WAV o instala ffmpeg.")
+        with tempfile.TemporaryDirectory() as td:
+            tmp = os.path.join(td, "a.wav")
+            subprocess.run(["ffmpeg", "-y", "-loglevel", "error", "-i", ruta, tmp], check=True)
+            x, sr0 = sf.read(tmp, always_2d=True)
+    x = x.mean(axis=1)
+    if sr0 != sr:
+        from math import gcd
+        g = gcd(int(sr), int(sr0)); x = resample_poly(x, sr // g, sr0 // g)
+    return x.astype(np.float64)
+
+
+def hacer_voz(v, outdir, modelos):
+    """Voz de cada escena: su grabación (`audio`) o Kokoro (`voice`: nombres de voz o .npy, mezclados por peso)."""
+    import soundfile as sf
+    spec = v["scenes"]
+    k = voice = None
+    if any(not sc.get("audio") for sc in spec):
+        from kokoro_onnx import Kokoro
+        k = Kokoro(os.path.join(modelos, "kokoro-v1.0.onnx"), os.path.join(modelos, "voices-v1.0.bin"))
+        partes = []
+        for ref, w in v["voice"]:
+            estilo = np.load(ref) if ref.endswith(".npy") else k.get_voice_style(ref)
+            partes.append(w * estilo)
+        voice = sum(partes)
+    PAD = 0.2; out, meta, t = [], [], 0.0
+    for i, sc in enumerate(spec):
+        if sc.get("audio"):
+            s = leer_audio(sc["audio"], SR_VOZ)
+        else:
+            s, _ = k.create(sc["say"], voice=voice, speed=v.get("speed", VELOCIDAD), lang=v.get("lang", "es"))
+        idx = np.where(np.abs(s) > 0.01)[0]
+        if len(idx): s = s[max(idx[0] - 200, 0): idx[-1] + 600]
+        lead = 0.12 if i else 0.25
+        seg = np.concatenate([np.zeros(int(lead * SR_VOZ)), s, np.zeros(int(PAD * SR_VOZ))]); out.append(seg)
+        meta.append({"i": i, "text": sc.get("show", sc["say"]), "say": sc["say"], "start": round(t + lead, 3),
+                     "speech": round(len(s) / SR_VOZ, 3), "dur": round(len(seg) / SR_VOZ, 3), "t0": round(t, 3)})
+        t += len(seg) / SR_VOZ
+    sf.write(os.path.join(outdir, "voz.wav"), cadena_locutor(np.concatenate(out)).astype(np.float32), SR_VOZ)
+    json.dump({"clave": clave_voz(v), "escenas": meta}, open(os.path.join(outdir, "tiempos.json"), "w", encoding="utf-8"), ensure_ascii=False, indent=1)
+    wj = os.path.join(outdir, "whisper.json")
+    if os.path.exists(wj): os.remove(wj)  # la voz cambió: la transcripción vieja ya no sirve
+
+
+def voz_vigente(v, outdir):
+    tj = os.path.join(outdir, "tiempos.json")
+    if not os.path.exists(tj) or not os.path.exists(os.path.join(outdir, "voz.wav")): return False
+    return json.load(open(tj, encoding="utf-8")).get("clave") == clave_voz(v)
+
+
+# ---------------- tiempos por palabra ----------------
+def norm(w):
+    w = unicodedata.normalize("NFD", w.lower())
+    w = "".join(c for c in w if unicodedata.category(c) != "Mn")
+    return re.sub(r"[^a-z0-9]", "", w)
+
+
+def reparto(words, a, b):
+    """Reparte el intervalo [a, b] entre las palabras según su largo (el método del motor original)."""
+    wts = [len(w) + 2 for w in words]; tot = sum(wts) or 1; t = a; out = []
+    for w, k in zip(words, wts):
+        dd = (b - a) * k / tot; out.append([w, t, t + dd]); t += dd
+    return out
+
+
+def palabras_whisper(path):
+    """Une los tokens de Whisper en palabras: un token sin espacio inicial continúa la palabra anterior."""
+    out = []
+    for c in json.load(open(path)):
+        txt = c["text"]
+        if not txt.strip() or txt.strip().startswith("["): continue
+        a, b = c["startMs"] / 1000, c["endMs"] / 1000
+        if out and not txt.startswith(" "): out[-1][0] += txt; out[-1][2] = b
+        else: out.append([txt.strip(), a, b])
+    return [w for w in out if norm(w[0])]
+
+
+def alinear(say_words, ww, a, b):
+    """Empata las palabras del guion con las de Whisper. Devuelve (tiempos por palabra, aciertos) o (None, 0)."""
+    cand = [w for w in ww if w[2] > a - 0.15 and w[1] < b + 0.15]
+    if not cand: return None, 0
+    sm = difflib.SequenceMatcher(None, [norm(w) for w in say_words], [norm(w[0]) for w in cand], autojunk=False)
+    t = [None] * len(say_words); hits = 0
+    for i, j, n in sm.get_matching_blocks():
+        for k in range(n):
+            t[i + k] = (max(a, cand[j + k][1]), min(b, cand[j + k][2])); hits += 1
+    if hits < max(1, 0.5 * len(say_words)): return None, 0
+    # huecos: se rellenan repartiendo entre los vecinos conocidos
+    i = 0
+    while i < len(t):
+        if t[i] is None:
+            j = i
+            while j < len(t) and t[j] is None: j += 1
+            lo = t[i - 1][1] if i else a; hi = t[j][0] if j < len(t) else b
+            for (w, x, y), k in zip(reparto(say_words[i:j], lo, max(lo + 0.05, hi)), range(i, j)): t[k] = (x, y)
+            i = j
+        else: i += 1
+    for k in range(1, len(t)):  # que nunca vayan hacia atrás
+        if t[k][0] < t[k - 1][0]: t[k] = (t[k - 1][0], max(t[k - 1][0], t[k][1]))
+    return t, hits
+
+
+def tiempos_palabras(seg, ww):
+    """Tiempos de las palabras del subtítulo (show). Con Whisper: reales; sin él: reparto por frase."""
+    a, b = seg["start"], seg["start"] + seg["speech"]
+    show = seg["text"].split(); say = seg["say"].split()
+    if not ww: return reparto(show, a, b), False
+    # Whisper a veces escribe los números con cifras ("1889") y a veces con letras: se prueba contra los dos textos
+    t_show, h_show = alinear(show, ww, a, b)
+    ts, h_say = alinear(say, ww, a, b)
+    if t_show is not None and h_show >= h_say: return [[w, x, y] for w, (x, y) in zip(show, t_show)], True
+    if ts is None: return reparto(show, a, b), False
+    sm = difflib.SequenceMatcher(None, [norm(w) for w in say], [norm(w) for w in show], autojunk=False)
+    out = [None] * len(show)
+    for tag, i1, i2, j1, j2 in sm.get_opcodes():
+        if tag == "equal":
+            for k in range(j2 - j1): out[j1 + k] = [show[j1 + k], *ts[i1 + k]]
+        elif j2 > j1:  # p. ej. "mil novecientos ochenta" -> "1980"
+            lo = ts[i1][0] if i1 < i2 else (ts[i1 - 1][1] if i1 else a)
+            hi = ts[i2 - 1][1] if i1 < i2 else (ts[i1][0] if i1 < len(ts) else b)
+            for k, (w, x, y) in enumerate(reparto(show[j1:j2], lo, max(lo + 0.05, hi))): out[j1 + k] = [w, x, y]
+    return out, True
+
+
+def trozos(words):
+    """Subtítulos de 1 a 3 palabras (máx. 14 letras), cortando en la puntuación."""
+    out, cur = [], []
+    for w in words:
+        cur.append(w)
+        if len(cur) == 3 or sum(len(x[0]) for x in cur) > 14 or w[0][-1] in ".,:?": out.append(cur); cur = []
+    if cur: out.append(cur)
+    return out
+
+
+# ---------------- datos para Remotion ----------------
+CLASICOS = {"title", "year", "text", "icon", "compare", "card", "dialog", "aliens", "memory", "morph", "cta"}
+
+
+def hexc(c): return "#%02X%02X%02X" % tuple(c)
+
+
+def colores(x):
+    """Colores como [r, g, b] (o tupla) pasan a "#RRGGBB"; los "#hex" se quedan igual."""
+    if isinstance(x, (list, tuple)) and len(x) == 3 and all(isinstance(v, int) and not isinstance(v, bool) and 0 <= v <= 255 for v in x): return hexc(x)
+    if isinstance(x, (list, tuple)): return [colores(v) for v in x]
+    if isinstance(x, dict): return {k: colores(v) for k, v in x.items()}
+    return x
+
+
+def preparar(job):
+    import musica
+    vid, v = job["id"], job["video"]; spec = v["scenes"]
+    outdir = os.path.join(job["publico"], "v", vid); os.makedirs(outdir, exist_ok=True)
+    if not voz_vigente(v, outdir):
+        print("    voz...", flush=True); hacer_voz(v, outdir, job["modelos"])
+    if job.get("soloVoz"): return
+    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 ev(si, prefix):
+        seg = TIM[si]
+        for w, a, b in WORDS[si]:
+            if w.lower().strip("¿?.,:¡!").startswith(prefix.lower()): 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)]
+    musica.mix(vid, v.get("music"), outdir, TIM, spec, durs, ev)  # -> mix.wav (voz + música con ducking + efectos)
+
+    escenas = []
+    for si, (seg, sp) in enumerate(zip(TIM, spec)):
+        # los tipos clásicos aceptan colores (r, g, b); los del motor de capas usan "#hex" tal cual
+        conv = colores if sp["type"] in CLASICOS else (lambda x: x)
+        p = {k: conv(val) for k, val in sp.items() if k not in ("say", "show", "audio")}
+        evs = {k: round(ev(si, sp[k]), 3) for k in ("at", "click") if sp.get(k)}
+        escenas.append(dict(tipo=sp["type"], p=p, t0=seg["t0"], dur=round(durs[si], 3),
+                            habla=[round(seg["start"] - seg["t0"], 3), round(seg["start"] - seg["t0"] + seg["speech"], 3)], ev=evs,
+                            palabras=[[w, round(a - seg["t0"], 3), round(b - seg["t0"], 3)] for w, a, b in WORDS[si]]))
+    subs = [dict(a=round(c[0][1], 3), b=round(c[-1][2], 3), w=[[x[0].upper(), round(x[1], 3), round(x[2], 3)] for x in c])
+            for ws in WORDS for c in trozos(ws)]
+    datos = dict(id=vid, titulo=v.get("title", vid), indice=job.get("indice", 0), duracion=round(sum(durs), 3),
+                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [],
+                 audio=f"v/{vid}/mix.wav", whisper=reales, escenas=escenas, subtitulos=subs)
+    json.dump(datos, open(os.path.join(outdir, "datos.json"), "w", encoding="utf-8"), ensure_ascii=False, indent=1)
+    print(f"    tiempos por palabra: {'Whisper' if reales else 'reparto por frase'} ({reales}/{len(TIM)} escenas)", flush=True)
+
+
+if __name__ == "__main__":
+    try: sys.stdout.reconfigure(encoding="utf-8", errors="replace")
+    except Exception: pass
+    if len(sys.argv) != 2: sys.exit(__doc__)
+    preparar(json.load(open(sys.argv[1], encoding="utf-8")))

package/python/requirements.txt

@@ -0,0 +1,5 @@
+kokoro-onnx==0.6.1
+soundfile
+numpy
+scipy
+pyloudnorm

package/remotion/Root.tsx

@@ -0,0 +1,35 @@
+// Registra una composición por cada video preparado. Los datos llegan como inputProps
+// (morfeo render / morfeo studio los pasan): {videos: {id: datos}, marca}.
+import React from 'react';
+import {AbsoluteFill, Composition, getInputProps} from 'remotion';
+import {FPS, H, W} from './estilo';
+import {Short} from './Short';
+import {MARCA_VACIA, type PropsMorfeo} from './tipos';
+
+const SinVideos: React.FC = () => (
+	<AbsoluteFill style={{background: '#120a24', color: '#fff', fontSize: 56, fontFamily: 'sans-serif', padding: 80, justifyContent: 'center', textAlign: 'center'}}>
+		Todavía no hay videos preparados. Corre: npx morfeo render
+	</AbsoluteFill>
+);
+
+export const Root: React.FC = () => {
+	const {videos = {}, marca = MARCA_VACIA, fuentes = [], estilos = {}} = getInputProps() as Partial<PropsMorfeo>;
+	const ids = Object.keys(videos);
+	if (!ids.length) return <Composition id="sin-videos" component={SinVideos} durationInFrames={60} fps={FPS} width={W} height={H} />;
+	return (
+		<>
+			{ids.map((id) => (
+				<Composition
+					key={id}
+					id={id}
+					component={Short}
+					durationInFrames={Math.ceil(videos[id].duracion * FPS)}
+					fps={FPS}
+					width={W}
+					height={H}
+					defaultProps={{id, videos, marca, guias: false, fuentes, estilos}}
+				/>
+			))}
+		</>
+	);
+};

package/remotion/Short.tsx

@@ -0,0 +1,278 @@
+// Composición de un short: fondo, escena actual, subtítulos, marca, efectos y audio.
+// Todo se dibuja con <Fotograma T={segundos} />, una función pura del tiempo.
+import React, {useEffect, useState} from 'react';
+import {AbsoluteFill, Audio, continueRender, delayRender, random, staticFile, useCurrentFrame} from 'remotion';
+import {ESCENAS, capa3D} from './escenas';
+import {Capa3D} from './tres/Capa3D';
+import {
+	AMARILLO,
+	ANTON,
+	BLANCO,
+	FPS,
+	H,
+	SEGURO,
+	SUB_ANCHO,
+	SUB_Y,
+	W,
+	ancho,
+	backOut,
+	clamp,
+	easeOut,
+	fondoDe,
+	fuentesListas,
+	mezclaColor,
+} from './estilo';
+import {Avatar, MarcaContexto, Resplandor, Texto, useMarca} from './piezas';
+import {MARCA_VACIA, type Datos, type Escena, type Marca as TipoMarca} from './tipos';
+import {Capas} from './motor/capas';
+import {capasDe} from './motor/plantillas';
+import {temaDe} from './motor/tema';
+import {VideoConAudio} from './motor/Video';
+import {loadFont} from '@remotion/fonts';
+
+export type PropsShort = {id: string; videos?: Record<string, Datos>; marca?: TipoMarca; guias?: boolean; miniatura?: boolean; fuentes?: {familia: string; url: string}[]; estilos?: Record<string, any>};
+
+const ADELANTO_GANCHO = 0.4; // el gancho arranca ya animado: el fotograma 0 nunca está vacío
+const CIERRE_BUCLE = 0.5; // al final se funde con el fotograma 0 para que el video se repita sin corte
+
+// ---------- fondo: degradado + halos (CSS) y debajo de todo el texto, la capa 3D (Three.js) ----------
+const Fondo: React.FC<{T: number; d: Datos; e: Escena; t: number; salida: number}> = ({T, d, e, t, salida}) => {
+	const [arriba, abajo, glow] = fondoDe(d.indice);
+	const {iconos, halos} = capa3D(e, t);
+	return (
+		<AbsoluteFill style={{background: `linear-gradient(${arriba}, ${abajo})`}}>
+			<div
+				style={{
+					position: 'absolute',
+					left: -200,
+					top: 300,
+					width: W + 400,
+					height: 1200,
+					background: `radial-gradient(ellipse closest-side, ${glow} 0%, transparent 100%)`,
+					opacity: 0.45,
+				}}
+			/>
+			{halos.map((h, i) => (
+				<Resplandor key={i} cx={h.cx} cy={h.cy} rx={h.r} ry={h.r} color={h.color} fuerza={h.fuerza * (1 - salida)} />
+			))}
+			<Capa3D T={T} indice={d.indice} glow={glow} niebla={mezclaColor(arriba, abajo, 0.5)} iconos={iconos} salida={salida} />
+		</AbsoluteFill>
+	);
+};
+
+// ---------- subtítulos estilo TikTok ----------
+const Subtitulos: React.FC<{T: number; d: Datos}> = ({T, d}) => {
+	const subs = d.subtitulos;
+	let cur = -1;
+	subs.forEach((c, i) => {
+		const sig = i + 1 < subs.length ? subs[i + 1].a : c.b + 0.3;
+		if (c.a <= T && T < Math.min(sig, c.b + 0.35)) cur = i;
+	});
+	if (cur < 0) return null;
+	const c = subs[cur];
+	const gap = 40;
+	let size = 118;
+	const total = (z: number) => c.w.reduce((a, [w]) => a + ancho(w, ANTON, z), 0) + gap * (c.w.length - 1);
+	while (total(size) > SUB_ANCHO && size > 40) size -= 6;
+	const pop = 1 + 0.18 * (1 - easeOut((T - c.a) / 0.12));
+	// solo una palabra amarilla a la vez: la que se está diciendo
+	const activas = c.w.map(([, a, b], i) => a <= T && T < (i + 1 < c.w.length ? c.w[i + 1][1] : b + 0.05));
+	// el "pop" también separa las palabras, para que no se encimen mientras crecen
+	const anchos = c.w.map(([w], i) => ancho(w, ANTON, size) * pop * (activas[i] ? 1.12 : 1));
+	const sep = gap * pop;
+	let x = W / 2 - (anchos.reduce((a, b) => a + b, 0) + sep * (c.w.length - 1)) / 2;
+	return (
+		<>
+			{c.w.map(([w], i) => {
+				const cx = x + anchos[i] / 2;
+				x += anchos[i] + sep;
+				return <Texto key={i} x={cx} y={SUB_Y} s={w} size={size} color={activas[i] ? AMARILLO : BLANCO} stroke={10} escala={pop * (activas[i] ? 1.12 : 1)} />;
+			})}
+		</>
+	);
+};
+
+// ---------- marca fija ----------
+const Marca: React.FC = () => {
+	const marca = useMarca();
+	if (!marca.nombre && !marca.logo) return null;
+	const av = 92;
+	const aro = 5;
+	const total = av + aro * 2;
+	return (
+		<div style={{position: 'absolute', left: 44, top: 110, height: total}}>
+			<div
+				style={{
+					position: 'absolute',
+					left: total / 2,
+					top: 12,
+					height: total - 16,
+					paddingLeft: total / 2 + 20,
+					paddingRight: 40,
+					borderRadius: 40,
+					background: 'rgba(0,0,0,0.59)',
+					display: 'flex',
+					alignItems: 'center',
+					fontFamily: ANTON,
+					fontSize: 52,
+					color: BLANCO,
+					whiteSpace: 'pre',
+				}}
+			>
+				{marca.nombre || ' '}
+			</div>
+			<Avatar x={0} y={0} size={av} aro={aro} />
+		</div>
+	);
+};
+
+// ---------- destello cálido en el remate ----------
+const Destello: React.FC<{t: number; semilla: number}> = ({t, semilla}) => {
+	const k = clamp(t / 1.1);
+	if (k >= 1) return null;
+	const a = Math.sin(Math.PI * k);
+	const x = 20 + 60 * random(`l${semilla}`);
+	return (
+		<AbsoluteFill
+			style={{
+				mixBlendMode: 'screen',
+				opacity: 0.75 * a,
+				background: `radial-gradient(ellipse 70% 45% at ${x}% ${30 + 40 * k}%, rgba(255,190,60,0.9), transparent 70%), radial-gradient(ellipse 55% 35% at ${100 - x}% ${80 - 30 * k}%, rgba(255,90,40,0.7), transparent 70%)`,
+			}}
+		/>
+	);
+};
+
+// ---------- glitch: franjas desplazadas ----------
+const Glitch: React.FC<{children: React.ReactNode; fuerza: number; semilla: string}> = ({children, fuerza, semilla}) => (
+	<>
+		{children}
+		{fuerza > 0 &&
+			Array.from({length: 6}, (_, i) => {
+				const y = 300 + random(`${semilla}y${i}`) * 850;
+				const h = 10 + random(`${semilla}h${i}`) * 30;
+				const dx = (random(`${semilla}x${i}`) * 2 - 1) * 40;
+				return (
+					<AbsoluteFill key={i} style={{clipPath: `inset(${y}px 0 ${H - y - h}px 0)`, transform: `translateX(${dx}px)`}}>
+						{children}
+					</AbsoluteFill>
+				);
+			})}
+	</>
+);
+
+// ---------- una escena con su entrada y salida ----------
+const CapaEscena: React.FC<{e: Escena; si: number; t: number; d: Datos; ultima: boolean}> = ({e, si, t, d, ultima}) => {
+	const marca = useMarca();
+	const Clasica = ESCENAS[e.tipo];
+	const resplandor = fondoDe(d.indice)[2];
+	// tipos del motor de capas (titular, dato, capas...) también funcionan en el estilo clásico
+	const Comp: React.FC<{e: Escena; t: number; si: number; resplandor: string}> =
+		Clasica ??
+		(({e: ee, t: tt}) => (
+			<Capas
+				capas={capasDe(ee.tipo, ee.p, temaDe('datos-curiosos', d.tema), marca)}
+				ctx={{t: tt, dur: ee.dur, habla: ee.habla, palabras: ee.palabras ?? [], tema: temaDe('datos-curiosos', d.tema), semilla: `${d.id}-${si}`}}
+			/>
+		));
+	const dibuja = (tt: number) => <Comp e={e} t={tt} si={si} resplandor={resplandor} />;
+	// salida rápida hacia arriba con desenfoque, justo cuando suena el whoosh
+	const ks = ultima ? 0 : clamp((t - (e.dur - 0.12)) / 0.12);
+	// "motion blur" de entrada: estela de los fotogramas anteriores mientras todo rebota
+	const estela = t < 0.25 && si > 0;
+	let contenido = (
+		<>
+			{estela && (
+				<>
+					<AbsoluteFill style={{opacity: 0.18}}>{dibuja(t - 2 / 60)}</AbsoluteFill>
+					<AbsoluteFill style={{opacity: 0.35}}>{dibuja(t - 1 / 60)}</AbsoluteFill>
+				</>
+			)}
+			<AbsoluteFill>{dibuja(t)}</AbsoluteFill>
+		</>
+	);
+	if (e.tipo === 'card' && e.ev.at !== undefined) {
+		const k = t - e.ev.at;
+		contenido = (
+			<Glitch fuerza={k >= 0 && k < 0.25 ? 1 : 0} semilla={`g${si}-${Math.floor(t * FPS)}`}>
+				{contenido}
+			</Glitch>
+		);
+	}
+	return (
+		<AbsoluteFill style={ks > 0 ? {transform: `translateY(${-70 * ks}px) scale(${1 + 0.05 * ks})`, opacity: 1 - 0.7 * ks, filter: `blur(${8 * ks}px)`} : undefined}>
+			{contenido}
+		</AbsoluteFill>
+	);
+};
+
+// ---------- guías de zonas seguras (solo en el Studio) ----------
+const Guias: React.FC = () => (
+	<AbsoluteFill style={{pointerEvents: 'none'}}>
+		{[
+			{left: 0, top: 0, width: W, height: SEGURO.arriba},
+			{left: 0, top: H - SEGURO.abajo, width: W, height: SEGURO.abajo},
+			{left: W - SEGURO.derecha, top: 0, width: SEGURO.derecha, height: H},
+			{left: 0, top: 0, width: SEGURO.izquierda, height: H},
+		].map((s, i) => (
+			<div key={i} style={{position: 'absolute', ...s, background: 'rgba(255,0,80,0.28)'}} />
+		))}
+	</AbsoluteFill>
+);
+
+export const Fotograma: React.FC<{d: Datos; T: number; guias?: boolean; miniatura?: boolean}> = ({d, T, guias, miniatura}) => {
+	const n = d.escenas.length;
+	let si = n - 1;
+	for (let i = 0; i < n; i++) if (T < d.escenas[i].t0 + d.escenas[i].dur) {
+		si = i;
+		break;
+	}
+	const e = d.escenas[si];
+	const t = T - e.t0 + (si === 0 ? ADELANTO_GANCHO : 0);
+	// zoom rápido al empezar cada escena
+	const z = t < 0.2 ? 1 + 0.08 * (1 - easeOut(t / 0.2)) : 1;
+	const remate = si === n - 2 && e.tipo !== 'cta';
+	return (
+		<AbsoluteFill style={{overflow: 'hidden', background: '#000'}}>
+			<AbsoluteFill style={z !== 1 ? {transform: `scale(${z})`} : undefined}>
+				<Fondo T={T} d={d} e={e} t={t} salida={si === n - 1 ? 0 : clamp((t - (e.dur - 0.12)) / 0.12)} />
+				<CapaEscena e={e} si={si} t={t} d={d} ultima={si === n - 1} />
+				{remate && <Destello t={t} semilla={d.indice} />}
+				{miniatura ? null : <Subtitulos T={T} d={d} />}
+			</AbsoluteFill>
+			{e.tipo !== 'cta' && <Marca />}
+			{guias && <Guias />}
+		</AbsoluteFill>
+	);
+};
+
+export const Short: React.FC<PropsShort> = ({id, videos, marca, guias, miniatura, fuentes, estilos}) => {
+	const frame = useCurrentFrame();
+	const [listo, setListo] = useState(false);
+	const [handle] = useState(() => delayRender('Cargando fuentes'));
+	useEffect(() => {
+		Promise.all([fuentesListas, ...(fuentes ?? []).map((f) => loadFont({family: f.familia, url: staticFile(f.url)}))]).then(() => {
+			setListo(true);
+			continueRender(handle);
+		});
+	}, [handle]);
+	const d = videos?.[id];
+	if (!d) throw new Error(`El video "${id}" no está preparado. Corre: npx morfeo render ${id}`);
+	if (!listo) return null;
+	if (d.estilo && d.estilo !== 'datos-curiosos') return <VideoConAudio d={d} frame={frame} marca={{...MARCA_VACIA, ...marca}} estilos={estilos} miniatura={miniatura} />;
+	const T = frame / FPS;
+	const kb = clamp((T - (d.duracion - CIERRE_BUCLE)) / CIERRE_BUCLE);
+	return (
+		<MarcaContexto.Provider value={{...MARCA_VACIA, ...marca}}>
+		<AbsoluteFill>
+			<Fotograma d={d} T={T} guias={guias} miniatura={miniatura} />
+			{kb > 0 && (
+				<AbsoluteFill style={{opacity: backOut(kb, 0)}}>
+					<Fotograma d={d} T={0} />
+				</AbsoluteFill>
+			)}
+			<Audio src={staticFile(d.audio)} />
+		</AbsoluteFill>
+		</MarcaContexto.Provider>
+	);
+};