@ignix-social/editor 0.1.5 → 0.1.7

package/src/creator/runtime/creator.js

@@ -0,0 +1,1026 @@
+/*
+ * creator.js — las plantillas de Ignix Creator (ADR-0014/0015/0019/0021/0022) dibujadas por
+ * Ignix Editor, fotograma a fotograma. Porta las plantillas que Creator tenía en Remotion: las
+ * mismas reglas, tamaños, colores y movimientos, escritos como funciones del tiempo.
+ *
+ * Lo prepara `src/creator/build.mjs`: los medios (<img>, <video>, <audio>) ya vienen en el HTML
+ * con sus tiempos; aquí se crean los textos y las formas y, en cada fotograma, se calcula todo
+ * a partir del instante (nada de estado entre fotogramas, nada medido en la página: el ancho de
+ * los caracteres llega en una tabla).
+ */
+(function () {
+  const D = window.CREATOR;
+  const fps = D.fps;
+  const W = D.width;
+  const H = D.height;
+  const portrait = H > W;
+  const accent = D.accent;
+  const pal = D.pal;
+  const style = D.style;
+  const safe = D.safe;
+  const FONT = 'Inter';
+
+  // ── utilidades (las de Remotion, escritas aquí) ────────────────────────────
+  const clamp = (x, a, b) => Math.min(b, Math.max(a, x));
+  function interpolate(x, input, output, opts = {}) {
+    const [a, b] = input;
+    const [c, d] = output;
+    let p = (x - a) / (b - a || 1e-9);
+    if ((opts.left ?? 'extend') === 'clamp' && p < 0) p = 0;
+    if ((opts.right ?? 'extend') === 'clamp' && p > 1) p = 1;
+    if (opts.easing) p = opts.easing(clamp(p, 0, 1)) + (p < 0 ? p : p > 1 ? p - 1 : 0);
+    return c + (d - c) * p;
+  }
+  const lerpC = (x, input, output, easing) => interpolate(x, input, output, { left: 'clamp', right: 'clamp', easing });
+
+  // Muelle amortiguado (masa, rigidez, amortiguación) de 0 a 1, en forma cerrada.
+  function springRaw(t, { damping = 10, mass = 1, stiffness = 100 } = {}) {
+    if (t <= 0) return 0;
+    const w0 = Math.sqrt(stiffness / mass);
+    const z = damping / (2 * Math.sqrt(stiffness * mass));
+    if (z < 1) {
+      const wd = w0 * Math.sqrt(1 - z * z);
+      return 1 - Math.exp(-z * w0 * t) * (Math.cos(wd * t) + ((z * w0) / wd) * Math.sin(wd * t));
+    }
+    // Amortiguación crítica o mayor: Remotion la dibuja como crítica (medido en sus renders:
+    // con damping 200 llega al 95 % en ~0,5 s, no en segundos).
+    return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  }
+  const settle = new Map();
+  function settleTime(config) {
+    const key = JSON.stringify(config);
+    if (!settle.has(key)) {
+      let t = 0;
+      let last = 0;
+      for (; t < 20; t += 1 / 120) {
+        if (Math.abs(1 - springRaw(t, config)) < 0.005) {
+          if (t - last > 0.25) break;
+        } else last = t;
+      }
+      settle.set(key, Math.max(1 / 30, last));
+    }
+    return settle.get(key);
+  }
+  /** spring({ frame, fps, config, durationInFrames }) de Remotion. */
+  function spring(frame, config = {}, durationInFrames) {
+    if (frame <= 0) return 0;
+    let t = frame / fps;
+    if (durationInFrames) t *= settleTime(config) / (durationInFrames / fps);
+    return springRaw(t, config);
+  }
+  function bezier(x1, y1, x2, y2) {
+    return (t) => {
+      let u = t;
+      for (let i = 0; i < 10; i++) {
+        const x = 3 * (1 - u) ** 2 * u * x1 + 3 * (1 - u) * u * u * x2 + u ** 3 - t;
+        const dx = 3 * (1 - u) ** 2 * x1 + 6 * (1 - u) * u * (x2 - x1) + 3 * u * u * (1 - x2);
+        if (Math.abs(dx) < 1e-6) break;
+        u = clamp(u - x / dx, 0, 1);
+      }
+      return 3 * (1 - u) ** 2 * u * y1 + 3 * (1 - u) * u * u * y2 + u ** 3;
+    };
+  }
+
+  // ── texto: medidas de la tabla y el mismo ajuste que Creator ───────────────
+  const advance = (ch, weight) => {
+    const w = Number(weight) >= 700 ? 800 : Number(weight) >= 600 ? 600 : 400;
+    const t = D.glyphs[w];
+    return t[ch] ?? t['?'] ?? 0.6;
+  };
+  const textWidth = (s, size, weight) => {
+    let w = 0;
+    for (const ch of s) w += advance(ch, weight);
+    return w * size - 0.02 * size * [...s].length;
+  };
+  function fitLines(text, { width, max, min, maxLines, weight }) {
+    const words = String(text).split(/\s+/).filter(Boolean);
+    for (let size = max; size >= min; size -= 4) {
+      const lines = [];
+      let cur = '';
+      let ok = true;
+      for (const word of words) {
+        if (textWidth(word, size, weight) > width) {
+          ok = false;
+          break;
+        }
+        const next = cur ? `${cur} ${word}` : word;
+        if (textWidth(next, size, weight) <= width) cur = next;
+        else {
+          lines.push(cur);
+          cur = word;
+        }
+      }
+      if (cur) lines.push(cur);
+      if (ok && lines.length <= maxLines) return { size, lines };
+    }
+    return { size: min, lines: [text] };
+  }
+  const cleanWord = (w) => w.toLowerCase().replace(/[^\p{L}\p{N}]/gu, '');
+
+  // ── DOM ─────────────────────────────────────────────────────────────────────
+  function h(tag, css = {}, children = []) {
+    const el = document.createElement(tag);
+    Object.assign(el.style, css);
+    for (const c of [].concat(children)) {
+      if (c === null || c === undefined || c === false) continue;
+      el.append(typeof c === 'string' ? document.createTextNode(c) : c);
+    }
+    return el;
+  }
+  const fill = (css = {}) => h('div', { position: 'absolute', left: '0', top: '0', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...css });
+  const $ = (id) => document.getElementById(id);
+  const px = (n) => `${n}px`;
+
+  // ── fondo de marca animado ─────────────────────────────────────────────────
+  function backdrop(parent, seed, variant) {
+    const root = fill({ background: `linear-gradient(${150 + (variant % 4) * 25}deg, ${pal.bg[0]} 0%, ${pal.bg[1]} 100%)` });
+    const size = Math.max(W, H);
+    const a = h('div', { position: 'absolute', width: px(size * 0.95), height: px(size * 0.95), borderRadius: '50%', background: `radial-gradient(circle, ${accent} 0%, transparent 62%)`, opacity: String(pal.glow * 0.55), filter: 'blur(40px)' });
+    const b = h('div', { position: 'absolute', width: px(size * 0.8), height: px(size * 0.8), borderRadius: '50%', background: `radial-gradient(circle, ${accent} 0%, transparent 60%)`, opacity: String(pal.glow * 0.35), filter: 'blur(50px)' });
+    root.append(a, b);
+    parent.append(root);
+    const ya = [0.22, 0.7, 0.35, 0.55][variant % 4];
+    const yb = [0.78, 0.25, 0.85, 0.15][variant % 4];
+    return (frame) => {
+      const t = frame / 30;
+      const ka = 0.5 + 0.18 * Math.sin(t * 0.6 + seed);
+      const kb = 0.5 + 0.2 * Math.cos(t * 0.45 + seed * 1.7);
+      a.style.left = px(W * ka - size * 0.47);
+      a.style.top = px(H * ya - size * 0.47);
+      b.style.left = px(W * (1 - kb) - size * 0.4);
+      b.style.top = px(H * yb - size * 0.4);
+    };
+  }
+
+  // ── medios de una escena (foto o vídeo; vienen del HTML) ───────────────────
+  function motionTransform(motion, p) {
+    switch (motion) {
+      case 'zoom_out':
+        return `scale(${interpolate(p, [0, 1], [1.14, 1.02])})`;
+      case 'pan_left':
+        return `scale(1.14) translateX(${interpolate(p, [0, 1], [3, -3])}%)`;
+      case 'pan_right':
+        return `scale(1.14) translateX(${interpolate(p, [0, 1], [-3, 3])}%)`;
+      case 'still':
+        return 'scale(1.02)';
+      default:
+        return `scale(${interpolate(p, [0, 1], [1.02, 1.14])})`;
+    }
+  }
+
+  // ── etiquetas pequeñas y piezas comunes ────────────────────────────────────
+  function kicker(label, size) {
+    const filled = style === 'bold';
+    const el = h('div', { display: 'inline-block', fontFamily: FONT, fontWeight: '800', fontSize: px(size), letterSpacing: '0.1em', textTransform: 'uppercase', color: filled ? '#000' : accent, background: filled ? accent : 'transparent', border: filled ? 'none' : `3px solid ${accent}`, borderRadius: '999px', padding: '0.28em 0.8em', marginBottom: px(size * 0.7), whiteSpace: 'nowrap' }, [label]);
+    return {
+      el,
+      update: (f) => {
+        const s = spring(f, { damping: 200 });
+        el.style.opacity = String(s);
+        el.style.transform = `translateY(${interpolate(s, [0, 1], [-14, 0])}px)`;
+      },
+    };
+  }
+  const stagger = (count, dur, start, max) => (count <= 1 ? max : Math.max(4, Math.min(max, Math.floor((dur * 0.62 - start) / (count - 1)))));
+  const frameBox = (align = 'flex-start') => fill({ padding: `${safe.top}px ${safe.side}px ${safe.bottom}px`, justifyContent: 'center', alignItems: align, fontFamily: FONT, boxSizing: 'border-box' });
+  const scrim = (parent, on) => on && parent.append(fill({ background: `rgba(${pal.overlay},0.72)` }));
+  const linesBlock = (lines, css) => lines.map((l) => h('div', { whiteSpace: 'nowrap', ...css }, [l]));
+
+  // ── statement: titular cinético ────────────────────────────────────────────
+  function statement(parent, text, onMedia, ordinal, dur) {
+    const boxWidth = W - safe.side * 2;
+    const isHook = text.role === 'hook';
+    const isCta = text.role === 'cta';
+    const compact = text.scale === 'compact';
+    const maxSize = compact ? (portrait ? 70 : 58) : Math.round((portrait ? 118 : 96) * (isHook ? 1.08 : isCta ? 1 : 0.9));
+    const textW = onMedia ? boxWidth - 84 : boxWidth;
+    const headline = style === 'bold' ? text.headline.toUpperCase() : text.headline;
+    const fitted = fitLines(headline, { width: textW, max: maxSize, min: 44, maxLines: compact ? 2 : portrait ? 5 : 3, weight: '800' });
+    const body = text.body ? fitLines(text.body, { width: textW, max: portrait ? 52 : 44, min: 30, maxLines: 4, weight: '400' }) : null;
+    const highlights = new Set(text.highlight.map(cleanWord));
+    const justify = text.position === 'top' ? 'flex-start' : text.position === 'bottom' ? 'flex-end' : 'center';
+    const o = pal.overlay;
+    const scrimBg = compact
+      ? onMedia
+        ? `linear-gradient(180deg, rgba(${o},0.55) 0%, rgba(${o},0) 30%)`
+        : 'none'
+      : onMedia
+        ? text.position === 'top'
+          ? `linear-gradient(180deg, rgba(${o},0.94) 0%, rgba(${o},0.8) 38%, rgba(${o},0) 72%)`
+          : text.position === 'bottom'
+            ? `linear-gradient(0deg, rgba(${o},0.95) 0%, rgba(${o},0.82) 40%, rgba(${o},0) 74%)`
+            : `linear-gradient(0deg, rgba(${o},0.6), rgba(${o},0.6)), radial-gradient(ellipse at center, rgba(${o},0.55) 0%, rgba(${o},0) 75%)`
+        : 'none';
+    const root = fill({ background: scrimBg });
+    const inner = fill({ padding: `${safe.top}px ${safe.side}px ${safe.bottom}px`, justifyContent: justify, alignItems: isCta ? 'center' : 'flex-start', textAlign: isCta ? 'center' : 'left', fontFamily: FONT, boxSizing: 'border-box' });
+    const panel = h('div', { width: px(boxWidth), boxSizing: 'border-box', ...(onMedia || compact ? { background: `rgba(${pal.overlay},0.84)`, borderRadius: '28px', padding: compact ? '22px 30px 26px' : '34px 38px 38px', borderLeft: `8px solid ${accent}` } : {}) });
+    const ups = [];
+    if (text.kicker) {
+      const k = kicker(text.kicker, portrait ? 38 : 30);
+      panel.append(k.el);
+      ups.push(k.update);
+    } else if (ordinal) {
+      const od = h('div', { fontWeight: '800', fontSize: px(portrait ? 40 : 32), letterSpacing: '0.12em', color: accent, marginBottom: '14px' }, [ordinal]);
+      panel.append(od);
+      ups.push((f) => (od.style.opacity = String(lerpC(f, [0, 8], [0, 1]))));
+    }
+    let wordIndex = 0;
+    const spans = [];
+    for (const line of fitted.lines) {
+      const row = h('div', { fontWeight: '800', fontSize: px(fitted.size), lineHeight: '1.06', letterSpacing: '-0.02em', color: pal.text, whiteSpace: 'nowrap', textShadow: onMedia ? '0 4px 24px rgba(0,0,0,0.45)' : 'none' });
+      for (const word of line.split(' ')) {
+        const hl = highlights.has(cleanWord(word));
+        const sp = h('span', { display: 'inline-block', marginRight: '0.24em', color: hl ? (style === 'bold' ? '#000' : accent) : pal.text, ...(hl && style === 'bold' ? { background: accent, padding: '0 0.12em', borderRadius: '8px' } : {}), ...(hl && style === 'clean' ? { boxShadow: `inset 0 -0.18em 0 ${accent}55` } : {}) }, [word]);
+        spans.push({ el: sp, i: wordIndex++ });
+        row.append(sp);
+      }
+      panel.append(row);
+    }
+    const totalWords = fitted.lines.join(' ').split(' ').length;
+    let bodyEl = null;
+    if (body) {
+      bodyEl = h('div', { marginTop: px(fitted.size * 0.35), fontWeight: '400', fontSize: px(body.size), lineHeight: '1.3', color: onMedia ? pal.text : pal.muted }, [body.lines.join(' ')]);
+      panel.append(bodyEl);
+    }
+    let pill = null;
+    const handle = D.brand.handle ?? D.brand.name ?? null;
+    if (isCta && handle) {
+      pill = h('div', { display: 'inline-block', marginTop: px(fitted.size * 0.6), padding: '0.45em 1.1em', borderRadius: '999px', background: accent, color: '#fff', fontWeight: '600', fontSize: px(portrait ? 44 : 36) }, [handle]);
+      panel.append(pill);
+    }
+    inner.append(panel);
+    root.append(inner);
+    parent.append(root);
+    return (f0) => {
+      const f = f0 + (text.enter === 'hold' ? 90 : 0);
+      for (const u of ups) u(f);
+      if (onMedia || compact) {
+        panel.style.opacity = String(lerpC(f, [0, 7], [0, 1]));
+        panel.style.transform = `translateY(${lerpC(f, [0, 7], [14, 0])}px)`;
+      }
+      for (const { el, i } of spans) {
+        const s = spring(f - 4 - i * 3, isHook ? { damping: 12, mass: 0.6 } : { damping: 200 });
+        el.style.opacity = String(interpolate(s, [0, 1], [0, 1]));
+        el.style.transform = `translateY(${interpolate(s, [0, 1], [fitted.size * 0.45, 0])}px) scale(${isHook ? lerpC(s, [0, 1], [0.86, 1]) : 1})`;
+      }
+      const bodyIn = spring(f - 10 - totalWords * 3, { damping: 200 });
+      if (bodyEl) {
+        bodyEl.style.opacity = String(bodyIn);
+        bodyEl.style.transform = `translateY(${interpolate(bodyIn, [0, 1], [18, 0])}px)`;
+      }
+      if (pill) {
+        pill.style.opacity = String(bodyIn);
+        pill.style.transform = `scale(${1 + 0.035 * Math.sin(f / 6)})`;
+      }
+    };
+  }
+
+  // ── big_number ─────────────────────────────────────────────────────────────
+  function bigNumber(parent, text, onMedia) {
+    const root = fill();
+    scrim(root, onMedia);
+    const fr = frameBox('center');
+    const boxWidth = W - safe.side * 2;
+    const fitted = fitLines(text.headline, { width: boxWidth, max: portrait ? 360 : 260, min: 96, maxLines: 2, weight: '800' });
+    const label = text.body ? fitLines(text.body, { width: boxWidth, max: portrait ? 60 : 48, min: 34, maxLines: 3, weight: '600' }) : null;
+    const wrap = h('div', { textAlign: 'center', width: px(boxWidth) });
+    const ups = [];
+    if (text.kicker) {
+      const k = kicker(text.kicker, portrait ? 38 : 30);
+      wrap.append(k.el);
+      ups.push(k.update);
+    }
+    const nums = linesBlock(fitted.lines, { fontWeight: '800', fontSize: px(fitted.size), lineHeight: '0.98', letterSpacing: '-0.04em', color: style === 'clean' ? pal.text : accent, textShadow: style === 'ember' ? `0 0 ${Math.round(fitted.size / 4)}px ${accent}66` : 'none' });
+    wrap.append(...nums);
+    let bar = null;
+    if (style === 'clean') {
+      bar = h('div', { height: '10px', margin: `${fitted.size * 0.12}px auto 0`, background: accent, borderRadius: '5px' });
+      wrap.append(bar);
+    }
+    let lab = null;
+    if (label) {
+      lab = h('div', { marginTop: px(fitted.size * 0.18), fontWeight: '600', fontSize: px(label.size), lineHeight: '1.25', color: pal.text }, [label.lines.join(' ')]);
+      wrap.append(lab);
+    }
+    fr.append(wrap);
+    root.append(fr);
+    parent.append(root);
+    return (f) => {
+      for (const u of ups) u(f);
+      const pop = spring(f - 3, { damping: 11, mass: 0.7 });
+      const labelIn = spring(f - 14, { damping: 200 });
+      for (const n of nums) {
+        n.style.opacity = String(interpolate(pop, [0, 1], [0, 1]));
+        n.style.transform = `scale(${interpolate(pop, [0, 1], [0.6, 1])})`;
+      }
+      if (bar) bar.style.width = px(boxWidth * 0.3 * labelIn);
+      if (lab) {
+        lab.style.opacity = String(labelIn);
+        lab.style.transform = `translateY(${interpolate(labelIn, [0, 1], [16, 0])}px)`;
+      }
+    };
+  }
+
+  // ── list ───────────────────────────────────────────────────────────────────
+  function list(parent, text, onMedia, dur) {
+    const root = fill();
+    scrim(root, onMedia);
+    const fr = frameBox();
+    const boxWidth = W - safe.side * 2;
+    const head = fitLines(style === 'bold' ? text.headline.toUpperCase() : text.headline, { width: boxWidth, max: portrait ? 92 : 76, min: 44, maxLines: 3, weight: '800' });
+    const itemSize = portrait ? 50 : 40;
+    const gap = stagger(text.items.length, dur, 16, 14);
+    const wrap = h('div', { width: px(boxWidth) });
+    const ups = [];
+    if (text.kicker) {
+      const k = kicker(text.kicker, portrait ? 36 : 28);
+      wrap.append(k.el);
+      ups.push(k.update);
+    }
+    const headEl = h('div', { fontWeight: '800', fontSize: px(head.size), lineHeight: '1.05', letterSpacing: '-0.02em', color: pal.text, textTransform: style === 'bold' ? 'uppercase' : 'none', marginBottom: px(head.size * 0.55) }, linesBlock(head.lines, {}));
+    wrap.append(headEl);
+    const rows = text.items.map((item, i) => {
+      const lines = fitLines(item, { width: boxWidth - itemSize * 2.2, max: itemSize, min: 30, maxLines: 2, weight: '600' });
+      const row = h('div', { display: 'flex', alignItems: 'center', gap: px(itemSize * 0.5), marginBottom: px(itemSize * 0.42), padding: `${itemSize * 0.34}px ${itemSize * 0.44}px`, borderRadius: '22px', background: style === 'clean' ? 'rgba(0,0,0,0.05)' : `rgba(255,255,255,${style === 'bold' ? '0.08' : '0.07'})`, borderLeft: style === 'clean' ? `6px solid ${accent}` : 'none' }, [
+        h('div', { flex: 'none', width: px(itemSize * 1.2), height: px(itemSize * 1.2), borderRadius: '50%', background: accent, color: style === 'bold' ? '#000' : '#fff', fontWeight: '800', fontSize: px(itemSize * 0.62), display: 'flex', alignItems: 'center', justifyContent: 'center' }, [style === 'clean' ? String(i + 1) : '✓']),
+        h('div', { fontWeight: '600', fontSize: px(lines.size), lineHeight: '1.18', color: pal.text }, [lines.lines.join(' ')]),
+      ]);
+      wrap.append(row);
+      return row;
+    });
+    fr.append(wrap);
+    root.append(fr);
+    parent.append(root);
+    return (f) => {
+      for (const u of ups) u(f);
+      const headIn = spring(f, { damping: 200 });
+      headEl.style.opacity = String(headIn);
+      headEl.style.transform = `translateY(${interpolate(headIn, [0, 1], [24, 0])}px)`;
+      rows.forEach((row, i) => {
+        const s = spring(f - 16 - i * gap, { damping: 16, mass: 0.6 });
+        row.style.opacity = String(s);
+        row.style.transform = `translateX(${interpolate(s, [0, 1], [-60, 0])}px)`;
+      });
+    };
+  }
+
+  // ── chat: un móvil con un comentario y los DM que abre ─────────────────────
+  function avatar(size, label, bg) {
+    return h('div', { flex: 'none', width: px(size), height: px(size), borderRadius: '50%', background: bg, color: '#fff', fontWeight: '800', fontSize: px(size * 0.45), display: 'flex', alignItems: 'center', justifyContent: 'center' }, [label]);
+  }
+  function svg(markup, css) {
+    const box = h('div', css);
+    box.innerHTML = markup;
+    return box;
+  }
+  function chat(parent, text, onMedia, dur) {
+    const root = fill();
+    scrim(root, onMedia);
+    const fr = frameBox('center');
+    const boxWidth = W - safe.side * 2;
+    const light = style === 'clean';
+    const head = fitLines(style === 'bold' ? text.headline.toUpperCase() : text.headline, { width: boxWidth, max: portrait ? 72 : 56, min: 40, maxLines: 2, weight: '800' });
+    const kickerSize = portrait ? 32 : 26;
+    const headBlock = head.size * 1.08 * head.lines.length + (text.kicker ? kickerSize * 2.2 : 0) + 36;
+    const phoneW = Math.min(boxWidth, portrait ? 900 : 640);
+    const phoneMax = H - safe.top - safe.bottom - headBlock;
+    const fs = portrait ? 46 : 32;
+    const name = D.brand.handle ?? D.brand.name ?? null;
+    const comment = text.lines.find((l) => l.from === 'comment');
+    const dms = text.lines.filter((l) => l.from !== 'comment');
+    const steps = (comment ? 1 : 0) + dms.length;
+    const gap = stagger(steps, dur, 10, 22);
+    const at = (step) => 10 + step * gap;
+    const screen = light ? '#ffffff' : '#0d0d0f';
+    const ink = light ? '#111111' : '#f5f5f5';
+    const sub = light ? '#6b6b6b' : '#9a9a9f';
+    const theirBubble = light ? '#efefef' : '#262629';
+    const ups = [];
+    const top = h('div', { width: px(boxWidth), textAlign: 'center' });
+    if (text.kicker) {
+      const k = kicker(text.kicker, kickerSize);
+      top.append(k.el);
+      ups.push(k.update);
+    }
+    const headEl = h('div', { fontWeight: '800', fontSize: px(head.size), lineHeight: '1.08', letterSpacing: '-0.02em', color: pal.text, textTransform: style === 'bold' ? 'uppercase' : 'none', marginBottom: '36px' }, linesBlock(head.lines, {}));
+    top.append(headEl);
+    const phone = h('div', { width: px(phoneW), maxHeight: px(phoneMax), minHeight: px(Math.min(phoneMax, phoneW * 0.72)), borderRadius: '64px', border: `14px solid ${light ? '#1a1a1a' : '#2a2a2e'}`, background: screen, boxSizing: 'border-box', overflow: 'hidden', boxShadow: style === 'ember' ? `0 30px 120px ${accent}55, 0 0 0 2px ${accent}33` : '0 30px 80px rgba(0,0,0,0.45)', display: 'flex', flexDirection: 'column', textAlign: 'left' });
+    const header = h('div', { display: 'flex', alignItems: 'center', gap: '18px', padding: '34px 30px 22px', borderBottom: `1px solid ${light ? '#e6e6e6' : '#222226'}` }, [
+      avatar(fs * 1.6, (name ?? '•').replace('@', '').charAt(0).toUpperCase(), accent),
+      h('div', { display: 'flex', alignItems: 'center', gap: '12px' }, [name ? h('div', { color: ink, fontWeight: '800', fontSize: px(fs * 0.9) }, [name]) : null, h('div', { width: '14px', height: '14px', borderRadius: '50%', background: '#2fd158' })]),
+    ]);
+    const thread = h('div', { flex: '1', padding: '30px 30px 40px', display: 'flex', flexDirection: 'column', gap: '18px' });
+    phone.append(header, thread);
+    let commentEl = null;
+    if (comment) {
+      commentEl = h('div', { display: 'flex', gap: '16px', alignItems: 'flex-start', padding: '20px 22px', borderRadius: '26px', background: light ? '#f6f6f6' : '#18181b', border: `2px solid ${accent}`, marginBottom: '10px' }, [
+        avatar(fs * 1.3, '', 'linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7)'),
+        h('div', {}, [svg(`<svg width="${fs * 0.8}" height="${fs * 0.8}" viewBox="0 0 24 24" style="display:block;margin-bottom:6px"><path d="M20.7 16.3A9.5 9.5 0 1 0 17 20l4 1.2-1.3-4.9Z" fill="none" stroke="${sub}" stroke-width="2.2" stroke-linejoin="round"/></svg>`, {}), h('div', { color: ink, fontSize: px(fs), fontWeight: '800', lineHeight: '1.2' }, [comment.text])]),
+      ]);
+      thread.append(commentEl);
+    }
+    const bubbles = dms.map((line, i) => {
+      const mine = line.from === 'you';
+      const row = h('div', { display: 'flex', justifyContent: mine ? 'flex-end' : 'flex-start' });
+      const bubble = h('div', { maxWidth: '80%', padding: '16px 24px', borderRadius: '34px', borderBottomRightRadius: mine ? '10px' : '34px', borderBottomLeftRadius: mine ? '34px' : '10px', background: mine ? accent : theirBubble, color: mine ? (style === 'bold' ? '#000' : '#fff') : ink, fontSize: px(fs), fontWeight: '600', lineHeight: '1.25', transformOrigin: mine ? 'right bottom' : 'left bottom' });
+      const words = document.createTextNode(line.text);
+      const dotColor = style === 'bold' ? '#000' : '#fff';
+      const dots = h('div', { display: 'flex', gap: px(fs * 0.35), padding: `${fs * 0.2}px 0` }, [0, 1, 2].map(() => h('div', { width: px(fs * 0.5), height: px(fs * 0.5), borderRadius: '50%', background: dotColor })));
+      bubble.append(words);
+      row.append(bubble);
+      thread.append(row);
+      return { row, bubble, words, dots, mine, step: (comment ? 1 : 0) + i };
+    });
+    fr.append(top, phone);
+    root.append(fr);
+    parent.append(root);
+    return (f) => {
+      for (const u of ups) u(f);
+      headEl.style.opacity = String(spring(f, { damping: 200 }));
+      const phoneIn = spring(f - 2, { damping: 18, mass: 0.8 });
+      phone.style.opacity = String(phoneIn);
+      phone.style.transform = `translateY(${interpolate(phoneIn, [0, 1], [120, 0])}px)`;
+      if (commentEl) {
+        const s = spring(f - at(0), { damping: 14, mass: 0.6 });
+        commentEl.style.opacity = String(s);
+        commentEl.style.transform = `scale(${interpolate(s, [0, 1], [0.8, 1])})`;
+      }
+      for (const b of bubbles) {
+        const typingFrom = at(b.step) - Math.min(12, gap - 2);
+        const typing = b.mine && f >= typingFrom && f < at(b.step);
+        b.row.style.display = f < typingFrom ? 'none' : 'flex';
+        const s = spring(f - at(b.step), { damping: 15, mass: 0.55 });
+        b.bubble.style.opacity = String(typing ? 1 : s);
+        b.bubble.style.transform = typing ? 'none' : `scale(${interpolate(s, [0, 1], [0.7, 1])})`;
+        if (typing) {
+          if (b.words.parentNode) b.bubble.replaceChild(b.dots, b.words);
+          [...b.dots.children].forEach((d, i) => (d.style.opacity = String(0.35 + 0.65 * Math.max(0, Math.sin((f - i * 3) / 3)))));
+        } else if (b.dots.parentNode) b.bubble.replaceChild(b.words, b.dots);
+      }
+    };
+  }
+
+  // ── explicativos: pasos, gráfico, comparación, cita ────────────────────────
+  const ease200 = (f, delay = 0, damping = 200) => spring(f - delay, { damping });
+  function headline(textStr, color, width, max) {
+    const shown = style === 'bold' ? textStr.toUpperCase() : textStr;
+    const fitted = fitLines(shown, { width, max, min: 40, maxLines: 3, weight: '800' });
+    const el = h('div', { fontWeight: '800', fontSize: px(fitted.size), lineHeight: '1.05', letterSpacing: '-0.02em', color, marginBottom: px(fitted.size * 0.6) }, linesBlock(fitted.lines, {}));
+    return {
+      el,
+      update: (f) => {
+        const s = ease200(f);
+        el.style.opacity = String(s);
+        el.style.transform = `translateY(${interpolate(s, [0, 1], [24, 0])}px)`;
+      },
+    };
+  }
+  const panelBg = () => (style === 'clean' ? 'rgba(0,0,0,0.05)' : `rgba(255,255,255,${style === 'bold' ? '0.08' : '0.07'})`);
+  const onAccentInk = () => (style === 'bold' ? '#000' : '#fff');
+  function explainShell(parent, text, onMedia, maxHead) {
+    const root = fill();
+    scrim(root, onMedia);
+    const fr = frameBox();
+    const box = W - safe.side * 2;
+    const wrap = h('div', { width: px(box) });
+    const ups = [];
+    if (text.kicker) {
+      const k = kicker(text.kicker, portrait ? 36 : 28);
+      wrap.append(k.el);
+      ups.push(k.update);
+    }
+    if (maxHead) {
+      const hd = headline(text.headline, pal.text, box, maxHead);
+      wrap.append(hd.el);
+      ups.push(hd.update);
+    }
+    fr.append(wrap);
+    root.append(fr);
+    parent.append(root);
+    return { wrap, box, ups };
+  }
+  function steps(parent, text, onMedia, dur) {
+    const { wrap, box, ups } = explainShell(parent, text, onMedia, portrait ? 84 : 70);
+    const dot = portrait ? 96 : 66;
+    const itemSize = portrait ? 62 : 42;
+    const gap = stagger(text.items.length, dur, 14, 18);
+    const rowGap = dot * 0.55;
+    const list = h('div', { position: 'relative' });
+    const rows = text.items.map((item, i) => {
+      const fitted = fitLines(item, { width: box - dot * 1.6, max: itemSize, min: 28, maxLines: 2, weight: '700' });
+      const last = i === text.items.length - 1;
+      const line = last ? null : h('div', { position: 'absolute', left: px(dot / 2 - 4), top: px(dot), width: '8px', background: accent, opacity: '0.55', borderRadius: '3px' });
+      const circle = h('div', { flex: 'none', width: px(dot), height: px(dot), borderRadius: '50%', background: accent, color: onAccentInk(), fontWeight: '900', fontSize: px(dot * 0.48), display: 'flex', alignItems: 'center', justifyContent: 'center' }, [String(i + 1)]);
+      const label = h('div', { alignSelf: 'center', fontWeight: '700', fontSize: px(fitted.size), lineHeight: '1.15', color: pal.text }, [fitted.lines.join(' ')]);
+      const row = h('div', { display: 'flex', gap: px(dot * 0.45), position: 'relative', marginBottom: px(rowGap) }, [line, circle, label]);
+      list.append(row);
+      return { line, circle, label, i };
+    });
+    wrap.append(list);
+    return (f) => {
+      for (const u of ups) u(f);
+      for (const r of rows) {
+        const s = ease200(f, 14 + r.i * gap, 14);
+        if (r.line) r.line.style.height = `calc(${lerpC(f, [14 + r.i * gap, 14 + (r.i + 1) * gap], [0, 1]) * 100}% - ${dot - rowGap}px)`;
+        r.circle.style.transform = `scale(${interpolate(s, [0, 1], [0.2, 1])})`;
+        r.circle.style.opacity = String(s);
+        r.label.style.opacity = String(s);
+        r.label.style.transform = `translateX(${interpolate(s, [0, 1], [50, 0])}px)`;
+      }
+    };
+  }
+  const numberFmt = (v) => (v >= 100 ? Math.round(v).toLocaleString('es-ES') : String(Math.round(v * 10) / 10).replace('.', ','));
+  function chart(parent, text, onMedia, dur) {
+    const { wrap, box, ups } = explainShell(parent, text, onMedia, portrait ? 80 : 66);
+    const rowsData = text.data;
+    const top = Math.max(...rowsData.map((r) => r.value), 1);
+    const best = rowsData.findIndex((r) => r.value === top);
+    const barH = portrait ? 100 : 60;
+    const labelSize = portrait ? 48 : 32;
+    const gap = stagger(rowsData.length, dur, 12, 8);
+    const rows = rowsData.map((r, i) => {
+      const fitted = fitLines(r.label, { width: box, max: labelSize, min: 24, maxLines: 1, weight: '600' });
+      const bar = h('div', { height: px(barH), borderRadius: px(barH / 2), background: i === best ? accent : panelBg().replace(/0\.0\d\)$/, '0.22)'), boxShadow: i === best ? `0 0 ${pal.glow * 40}px ${accent}` : 'none' });
+      const value = h('div', { fontWeight: '900', fontSize: px(barH * 0.72), color: i === best ? accent : pal.text, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, ['']);
+      const row = h('div', { marginBottom: px(barH * 0.5) }, [h('div', { fontWeight: '600', fontSize: px(fitted.size), color: pal.muted, marginBottom: '8px' }, [fitted.lines[0]]), h('div', { display: 'flex', alignItems: 'center', gap: '18px' }, [bar, value])]);
+      wrap.append(row);
+      return { row, bar, value, r, i };
+    });
+    return (f) => {
+      for (const u of ups) u(f);
+      for (const x of rows) {
+        const grow = ease200(f, 12 + x.i * gap, 22);
+        const share = Math.max(0.04, x.r.value / top);
+        x.row.style.opacity = String(Math.min(1, grow * 2));
+        x.bar.style.width = `${share * grow * 78}%`;
+        x.value.textContent = x.r.display ?? numberFmt(x.r.value * grow);
+      }
+    };
+  }
+  function compare(parent, text, onMedia, dur) {
+    const c = text.compare;
+    const { wrap, box, ups } = explainShell(parent, text, onMedia, portrait ? 78 : 64);
+    if (!c) return (f) => ups.forEach((u) => u(f));
+    const col = (box - 40) / 2;
+    const size = portrait ? 50 : 34;
+    const gap = stagger(c.rows.length, dur, 22, 14);
+    const titleOf = (t) => fitLines(t.toUpperCase(), { width: col - size * 1.4, max: size * 0.9, min: 20, maxLines: 2, weight: '800' });
+    const lt = titleOf(c.left);
+    const rt = titleOf(c.right);
+    const vs = h('div', { fontWeight: '900', fontSize: px(size * 0.8), color: accent }, ['VS']);
+    wrap.append(
+      h('div', { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '22px' }, [
+        h('div', { width: px(col), fontWeight: '800', fontSize: px(lt.size), lineHeight: '1.05', color: pal.muted, letterSpacing: '0.04em' }, [lt.lines.join(' ')]),
+        vs,
+        h('div', { width: px(col), fontWeight: '800', fontSize: px(rt.size), lineHeight: '1.05', color: accent, letterSpacing: '0.04em', textAlign: 'right' }, [rt.lines.join(' ')]),
+      ]),
+    );
+    const cell = (t, right) => {
+      const fitted = fitLines(t, { width: col - 48, max: size, min: 22, maxLines: 3, weight: right ? '700' : '600' });
+      return h('div', { width: px(col), padding: '24px 28px', borderRadius: '20px', background: right ? accent : panelBg(), color: right ? onAccentInk() : pal.muted, fontWeight: right ? '700' : '600', fontSize: px(fitted.size), lineHeight: '1.18', boxSizing: 'border-box' }, [fitted.lines.join(' ')]);
+    };
+    const rows = c.rows.map((r, i) => {
+      const a = cell(r.a, false);
+      const b = cell(r.b, true);
+      wrap.append(h('div', { display: 'flex', justifyContent: 'space-between', marginBottom: '18px' }, [a, b]));
+      return { a, b, i };
+    });
+    return (f) => {
+      for (const u of ups) u(f);
+      const v = ease200(f, 10, 12);
+      vs.style.transform = `scale(${interpolate(v, [0, 1], [0.3, 1])})`;
+      vs.style.opacity = String(v);
+      for (const r of rows) {
+        const s = ease200(f, 22 + r.i * gap, 16);
+        const s2 = ease200(f, 22 + r.i * gap + 6, 16);
+        r.a.style.opacity = String(s);
+        r.a.style.transform = `translateX(${interpolate(s, [0, 1], [-60, 0])}px)`;
+        r.b.style.opacity = String(s2);
+        r.b.style.transform = `translateX(${interpolate(s2, [0, 1], [60, 0])}px)`;
+      }
+    };
+  }
+  function quote(parent, text, onMedia, dur) {
+    const { wrap, box } = explainShell(parent, text, onMedia, 0);
+    const fitted = fitLines(text.headline, { width: box, max: portrait ? 88 : 70, min: 40, maxLines: 5, weight: '800' });
+    const words = fitted.lines.flatMap((l, li) => l.split(' ').map((w) => ({ w, li })));
+    const per = Math.max(2, Math.min(5, Math.floor((dur * 0.5) / Math.max(1, words.length))));
+    const mark = h('div', { fontWeight: '900', fontSize: px(fitted.size * 2.6), lineHeight: '0.8', color: accent, transformOrigin: 'left top', marginBottom: px(fitted.size * 0.1) }, ['“']);
+    const body = h('div', { fontWeight: '800', fontSize: px(fitted.size), lineHeight: '1.12', color: pal.text, letterSpacing: '-0.015em' });
+    const spans = [];
+    fitted.lines.forEach((l, li) => {
+      const row = h('div', { whiteSpace: 'nowrap' });
+      for (const x of words.filter((x) => x.li === li)) {
+        const sp = h('span', { display: 'inline-block', marginRight: '0.26em' }, [x.w]);
+        spans.push(sp);
+        row.append(sp);
+      }
+      body.append(row);
+    });
+    wrap.append(mark, body);
+    let by = null;
+    let rule = null;
+    if (text.body) {
+      rule = h('div', { height: '5px', background: accent, borderRadius: '3px' });
+      by = h('div', { display: 'flex', alignItems: 'center', gap: '20px', marginTop: px(fitted.size * 0.6) }, [rule, h('div', { fontWeight: '600', fontSize: px(Math.max(28, fitted.size * 0.42)), color: pal.muted }, [text.body])]);
+      wrap.append(by);
+    }
+    return (f) => {
+      const m = ease200(f, 0, 12);
+      mark.style.opacity = String(m);
+      mark.style.transform = `scale(${interpolate(m, [0, 1], [0.4, 1])})`;
+      spans.forEach((sp, k) => {
+        const s = ease200(f, 8 + k * per, 200);
+        sp.style.opacity = String(s);
+        sp.style.transform = `translateY(${interpolate(s, [0, 1], [16, 0])}px)`;
+      });
+      if (by) {
+        const b = ease200(f, 8 + words.length * per, 200);
+        by.style.opacity = String(b);
+        rule.style.width = px(interpolate(b, [0, 1], [0, 70]));
+      }
+    };
+  }
+  const LAYOUTS = { big_number: bigNumber, list, chat, steps, chart, compare, quote };
+
+  // ── pantalla de producto ───────────────────────────────────────────────────
+  function screenScene(parent, sc, seed, variant, dur) {
+    const v = sc.visual;
+    const update = backdrop(parent, seed, variant);
+    const iw = v.w ?? 1080;
+    const ih = v.h ?? 1920;
+    const ratio = ih / iw;
+    const chrome = v.frame === 'browser' ? 54 : 0;
+    const bezel = v.frame === 'phone' ? 26 : 0;
+    const maxW = v.frame === 'phone' ? W * 0.74 : W * 0.9;
+    const maxH = H * (v.frame === 'phone' ? 0.8 : 0.66);
+    let sw = maxW - bezel * 2;
+    let sh = sw * ratio;
+    let crop = false;
+    if (v.frame === 'phone') {
+      if (sh > sw * 2.05) {
+        crop = true;
+        sh = sw * 2.05;
+      }
+      if (sh + bezel * 2 > maxH) {
+        const k = (maxH - bezel * 2) / sh;
+        sh *= k;
+        sw *= k;
+      }
+    } else if (v.move === 'scroll' && sh + chrome > maxH) {
+      crop = true;
+      sh = maxH - chrome;
+    } else if (sh + chrome > maxH) {
+      const k = (maxH - chrome) / sh;
+      sh *= k;
+      sw *= k;
+    }
+    const boxW = sw + bezel * 2;
+    const boxH = sh + bezel * 2 + chrome;
+    const boxX = (W - boxW) / 2;
+    const boxY = (H - boxH) / 2 + (v.frame === 'phone' ? 0 : -H * 0.03);
+    const picX = boxX + bezel;
+    const picY = boxY + bezel + chrome;
+    const drawnH = crop ? sw * ratio : sh;
+    const radius = v.frame === 'phone' ? 64 : 22;
+    const cam = fill({ transformOrigin: '0 0' });
+    const box = h('div', { position: 'absolute', left: px(boxX), top: px(boxY), width: px(boxW), height: px(boxH), borderRadius: px(radius), background: v.frame === 'phone' ? '#0b0b0c' : '#ffffff', boxShadow: '0 40px 120px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.06)', overflow: 'hidden' });
+    if (v.frame === 'browser') box.append(h('div', { height: px(chrome), background: '#ececec', display: 'flex', alignItems: 'center', gap: '12px', paddingLeft: '22px' }, [...['#ff5f57', '#febc2e', '#28c840'].map((c) => h('div', { width: '16px', height: '16px', borderRadius: '8px', background: c })), h('div', { marginLeft: '18px', height: '26px', width: px(boxW * 0.5), borderRadius: '13px', background: '#ffffff' })]));
+    const win = h('div', { position: 'absolute', left: px(bezel), top: px(bezel + chrome), width: px(sw), height: px(sh), overflow: 'hidden', borderRadius: px(v.frame === 'phone' ? radius - bezel : 0), background: '#fff' });
+    const img = $(v.imgId);
+    Object.assign(img.style, { position: 'absolute', left: '0', top: '0', width: px(sw), height: px(drawnH), display: 'block' });
+    win.append(img);
+    box.append(win);
+    if (v.frame === 'phone') box.append(h('div', { position: 'absolute', top: px(bezel + 14), left: px(boxW / 2 - 70), width: '140px', height: '34px', borderRadius: '17px', background: '#0b0b0c' }));
+    cam.append(box);
+    const f0 = v.focus;
+    const focus = f0 && v.move === 'focus' ? { x: picX + f0.x * sw, y: picY + f0.y * drawnH, w: f0.w * sw, h: f0.h * drawnH } : null;
+    let ring = null;
+    if (focus) {
+      ring = h('div', { position: 'absolute', left: px(focus.x - 10), top: px(focus.y - 10), width: px(focus.w + 20), height: px(focus.h + 20), borderRadius: '16px', boxSizing: 'border-box' });
+      cam.append(ring);
+    }
+    parent.append(cam);
+    let tapEl = null;
+    let pointerEl = null;
+    if (v.pointer && focus) {
+      tapEl = h('div', { position: 'absolute', borderRadius: '50%', border: `6px solid ${accent}`, boxSizing: 'border-box' });
+      pointerEl = svg('<svg width="72" height="72" viewBox="0 0 24 24"><path d="M4 2 L4 19 L8.6 14.8 L11.6 21.6 L14.6 20.3 L11.7 13.6 L18 13.6 Z" fill="#ffffff" stroke="#111111" stroke-width="1.3" stroke-linejoin="round"/></svg>', { position: 'absolute', width: '72px', height: '72px', filter: 'drop-shadow(0 6px 10px rgba(0,0,0,0.45))' });
+      parent.append(tapEl, pointerEl);
+    }
+    const d = Math.max(1, dur);
+    const t0 = Math.round(d * 0.22);
+    const t1 = Math.round(d * 0.55);
+    const ease = bezier(0.45, 0, 0.2, 1);
+    const scrollMax = crop ? drawnH - sh : 0;
+    return (f) => {
+      update(f);
+      const enter = spring(f, { damping: 200 }, 14);
+      const scroll = v.move === 'scroll' ? lerpC(f, [Math.round(d * 0.12), Math.round(d * 0.9)], [0, scrollMax], ease) : 0;
+      img.style.top = px(-scroll);
+      let s = 1;
+      let tx = 0;
+      let ty = 0;
+      if (focus) {
+        const S = Math.max(1, Math.min(2.6, (0.84 * W) / focus.w, (0.5 * H) / focus.h));
+        const cx = focus.x + focus.w / 2;
+        const cy = focus.y + focus.h / 2;
+        const p = lerpC(f, [t0, t1], [0, 1], ease);
+        s = 1 + (S - 1) * p;
+        tx = (W / 2 - S * cx) * p;
+        ty = (H * 0.46 - S * cy) * p;
+      } else if (v.move !== 'scroll') {
+        s = interpolate(f, [0, d], [1, 1.06]);
+        tx = (W / 2) * (1 - s);
+        ty = (H / 2) * (1 - s);
+      }
+      cam.style.transform = `translate(${tx}px, ${ty + (1 - enter) * 60}px) scale(${s})`;
+      cam.style.opacity = String(enter);
+      if (ring) {
+        const r = lerpC(f, [t1, t1 + 8], [0, 1]);
+        const pulse = 0.5 + 0.5 * Math.sin((f - t1) / 5);
+        ring.style.display = r > 0 ? 'block' : 'none';
+        ring.style.border = `${(6 / s).toFixed(2)}px solid ${accent}`;
+        ring.style.boxShadow = `0 0 ${Math.round(18 + 22 * pulse)}px ${accent}`;
+        ring.style.opacity = String(r);
+      }
+      if (pointerEl) {
+        const fx = s * (focus.x + focus.w / 2) + tx;
+        const fy = s * (focus.y + focus.h / 2) + ty;
+        const travel = lerpC(f, [Math.round(d * 0.3), t1], [0, 1], ease);
+        const pxp = interpolate(travel, [0, 1], [W * 0.86, fx]);
+        const pyp = interpolate(travel, [0, 1], [H * 0.86, fy]);
+        const tap = lerpC(f, [t1 + 2, t1 + 16], [0, 1]);
+        const shown = f >= Math.round(d * 0.3) - 4;
+        pointerEl.style.display = shown ? 'block' : 'none';
+        pointerEl.style.left = px(pxp - 10);
+        pointerEl.style.top = px(pyp - 6);
+        pointerEl.style.transform = `scale(${tap > 0 && tap < 0.4 ? 0.88 : 1})`;
+        tapEl.style.display = shown && tap > 0 && tap < 1 ? 'block' : 'none';
+        Object.assign(tapEl.style, { left: px(fx - 60 * tap), top: px(fy - 60 * tap), width: px(120 * tap), height: px(120 * tap), opacity: String(1 - tap) });
+      }
+    };
+  }
+
+  // ── escenas con transiciones ───────────────────────────────────────────────
+  const TR = Math.round(D.transitionSec * fps);
+  const directed = D.scenes.some((x) => x.text && (x.text.kicker || x.text.layout !== 'statement'));
+  const points = directed ? 0 : D.scenes.filter((x) => x.text && x.text.role === 'point').length;
+  const scenes = D.scenes.map((sc, i) => {
+    const el = $(`scene${i}`);
+    const frames = Math.max(1, Math.round(sc.durationSec * fps));
+    const startF = Math.round(sc.start * fps);
+    const seed = i * 1.3;
+    let mediaUp = null;
+    const v = sc.visual;
+    if (v.kind === 'screen') mediaUp = screenScene(el, sc, seed, i, frames);
+    else if (v.kind === 'backdrop' || !v.mediaId) {
+      const holder = fill();
+      el.prepend(holder);
+      mediaUp = backdrop(holder, seed, i);
+    } else if (v.kind === 'image') {
+      const img = $(v.mediaId);
+      mediaUp = (f) => (img.style.transform = motionTransform(v.motion, Math.min(1, f / Math.max(1, frames))));
+    }
+    let textUp = null;
+    if (sc.text) {
+      const layer = fill();
+      el.append(layer);
+      const onMedia = v.kind !== 'backdrop' && !!v.mediaId;
+      const ordinal = sc.text.role === 'point' && points > 1 ? String(D.scenes.slice(0, i + 1).filter((x) => x.text && x.text.role === 'point').length).padStart(2, '0') : null;
+      const make = LAYOUTS[sc.text.layout];
+      textUp = make ? make(layer, sc.text, onMedia, frames) : statement(layer, sc.text, onMedia, ordinal, frames);
+    }
+    return { el, frames, startF, transition: i > 0 ? sc.transition : 'cut', mediaUp, textUp };
+  });
+
+  function drawScenes(frame) {
+    scenes.forEach((s, i) => {
+      const local = frame - s.startF;
+      const next = scenes[i + 1];
+      const visible = local >= 0 && local < s.frames;
+      s.el.style.display = visible ? 'block' : 'none';
+      if (!visible) return;
+      // Entrada (esta escena) y salida (la siguiente entra encima): transiciones de 0,4 s.
+      let opacity = 1;
+      let transform = 'none';
+      let clip = 'none';
+      if (s.transition !== 'cut' && local < TR) {
+        const p = local / TR;
+        if (s.transition === 'fade') opacity = p;
+        else if (s.transition === 'slide_up') transform = `translateY(${(1 - p) * 100}%)`;
+        else if (s.transition === 'wipe') clip = `inset(0 ${(1 - p) * 100}% 0 0)`;
+      }
+      if (next && next.transition !== 'cut' && frame >= next.startF) {
+        const p = (frame - next.startF) / TR;
+        // Remotion: en un fundido solo se funde la que entra; en un deslizamiento la que sale sube con ella.
+        if (next.transition === 'slide_up') transform = `translateY(${-p * 100}%)`;
+      }
+      s.el.style.opacity = String(opacity);
+      s.el.style.transform = transform;
+      s.el.style.clipPath = clip;
+      s.el.style.zIndex = String(10 + i);
+      if (s.mediaUp) s.mediaUp(local);
+      if (s.textUp) s.textUp(local);
+    });
+  }
+
+  // ── subtítulos ─────────────────────────────────────────────────────────────
+  const OUTLINE = ['0 0 3px #000', '2px 2px 0 #000', '-2px 2px 0 #000', '2px -2px 0 #000', '-2px -2px 0 #000', '0 8px 22px rgba(0,0,0,0.6)'].join(', ');
+  function luminance(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    const ch = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+      const c = v / 255;
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+  }
+  function wordsOf(cue) {
+    if (cue.words.length) return cue.words.map((w) => ({ text: w.text, start: w.startSec, end: w.endSec }));
+    const parts = cue.text.split(/\s+/).filter(Boolean);
+    const weight = parts.map((p) => Math.max(2, p.length));
+    const total = weight.reduce((a, b) => a + b, 0);
+    const span = cue.endSec - cue.startSec;
+    let t = cue.startSec;
+    return parts.map((p, i) => {
+      const d = (span * weight[i]) / total;
+      const w = { text: p, start: t, end: t + d };
+      t += d;
+      return w;
+    });
+  }
+  function pagesOf(words, max) {
+    const pages = [];
+    let cur = [];
+    words.forEach((w, i) => {
+      cur.push(w);
+      const next = words[i + 1];
+      const pause = next ? next.start - w.end > 0.3 : true;
+      if (cur.length >= max || /[.,!?;:…]$/.test(w.text) || pause) {
+        pages.push(cur);
+        cur = [];
+      }
+    });
+    if (cur.length) pages.push(cur);
+    return pages;
+  }
+  const capLayer = $('captions');
+  const capAccent = D.captionColor ?? accent;
+  const capOnAccent = luminance(capAccent) > 0.55 ? '#111' : '#fff';
+  function drawCaptions(frame) {
+    if (!capLayer) return;
+    const t = frame / fps;
+    const caps = D.captions;
+    const cue = caps.find((c) => t >= c.startSec && t < c.endSec + 0.05) ?? caps.find((c, i) => {
+      const next = caps[i + 1];
+      return t >= c.endSec && t < c.endSec + 0.7 && (!next || t < next.startSec);
+    });
+    capLayer.replaceChildren();
+    if (!cue) return;
+    const boxWidth = W - safe.side * 2;
+    const emphasis = new Set(cue.emphasis.flatMap((e) => e.split(/\s+/)).map(cleanWord));
+    const middle = D.captionPosition === 'middle' || cue.hero;
+    Object.assign(capLayer.style, { justifyContent: middle ? 'center' : 'flex-end', alignItems: 'center', paddingBottom: px(middle ? 0 : safe.bottom - 40) });
+    if (D.captionStyle === 'box' && !cue.hero) {
+      capLayer.append(h('div', { maxWidth: px(boxWidth), fontFamily: FONT, fontWeight: '800', fontSize: px(portrait ? 50 : 42), lineHeight: '1.22', color: '#fff', textAlign: 'center', background: 'rgba(0,0,0,0.66)', padding: '12px 24px', borderRadius: '16px' }, [cue.text]));
+      return;
+    }
+    const words = wordsOf(cue);
+    const hero = cue.hero;
+    const pages = pagesOf(words, hero ? 5 : D.captionStyle === 'pop' ? 2 : 4);
+    const page = pages.find((p) => t < p[p.length - 1].end + 0.04) ?? pages[pages.length - 1] ?? [];
+    if (!page.length) return;
+    const big = D.captionStyle === 'pop' || hero;
+    const text = page.map((w) => w.text.toUpperCase()).join(' ');
+    const fitted = fitLines(text, { width: boxWidth, max: hero ? (portrait ? 150 : 110) : portrait ? (big ? 124 : 88) : big ? 96 : 68, min: 44, maxLines: hero ? 3 : 2, weight: '800' });
+    const enter = spring(frame - Math.round(page[0].start * fps), { damping: 14, mass: 0.5 });
+    const box = h('div', { maxWidth: px(boxWidth), textAlign: 'center', fontFamily: FONT, ...(big ? {} : { background: 'rgba(8,8,10,0.62)', borderRadius: '26px', padding: '14px 22px 18px' }), transform: `scale(${interpolate(enter, [0, 1], [big ? 0.7 : 0.9, 1])})`, opacity: String(interpolate(enter, [0, 1], [0, 1])) });
+    let wi = 0;
+    for (const line of fitted.lines) {
+      const row = h('div', { whiteSpace: 'nowrap', lineHeight: '1.1' });
+      for (const token of line.split(' ')) {
+        const w = page[wi++];
+        const active = w ? t >= w.start && t < w.end + 0.06 : false;
+        const spoken = w ? t >= w.start : false;
+        const hl = w ? emphasis.has(cleanWord(w.text)) : false;
+        const pop = w ? spring(frame - Math.round(w.start * fps), { damping: 10, mass: 0.4 }) : 1;
+        row.append(h('span', { display: 'inline-block', margin: '0 0.12em', fontWeight: '800', fontSize: px(fitted.size), letterSpacing: '-0.01em', color: big ? (active || hl ? capAccent : '#fff') : active ? capOnAccent : '#fff', opacity: String(big && !hero ? (spoken ? 1 : 0) : hero && !spoken ? 0.4 : 1), padding: active && !big ? '0 0.14em' : '0', borderRadius: '12px', background: active && !big ? capAccent : 'transparent', transform: `scale(${active ? interpolate(pop, [0, 1], [0.86, big ? 1.08 : 1.04]) : 1})`, textShadow: active && !big && capOnAccent !== '#fff' ? 'none' : OUTLINE }, [token]));
+      }
+      box.append(row);
+    }
+    capLayer.append(box);
+  }
+
+  // ── el vídeo de la persona (charla) ────────────────────────────────────────
+  const talk = D.talk;
+  function trackAt(track, t) {
+    const first = track[0];
+    if (!first) return 0.5;
+    if (t <= first.t) return first.x;
+    for (let i = 1; i < track.length; i++) {
+      const a = track[i - 1];
+      const b = track[i];
+      if (t <= b.t) {
+        const k = b.t > a.t ? (t - a.t) / (b.t - a.t) : 1;
+        return a.x + (b.x - a.x) * k * k * (3 - 2 * k);
+      }
+    }
+    return track[track.length - 1].x;
+  }
+  function zoomAt(t) {
+    const z = talk.zooms.find((x) => t >= x.startSec && t < x.endSec);
+    if (!z) return { scale: 1, x: 0.5, y: 0.5 };
+    const inSec = z.ease === 'punch' ? 3 / fps : 0.6;
+    const outSec = z.ease === 'punch' ? 3 / fps : 0.35;
+    const span = z.endSec - z.startSec;
+    const k = Math.min(lerpC(t - z.startSec, [0, Math.min(inSec, span / 2)], [0, 1]), lerpC(z.endSec - t, [0, Math.min(outSec, span / 2)], [0, 1]));
+    return { scale: 1 + (z.scale - 1) * k, x: z.x, y: z.y };
+  }
+  const keepTogether = (text) => text.replace(/\s+([€$£%»!?:;”])/g, ' $1').replace(/([«¿¡“])\s+/g, '$1 ');
+  const OUT2 = ['0 0 4px #000', '3px 3px 0 #000', '-3px 3px 0 #000', '3px -3px 0 #000', '-3px -3px 0 #000', '0 10px 26px rgba(0,0,0,0.55)'].join(', ');
+  const overlayEls = talk
+    ? talk.overlays.map((raw) => {
+        const o = { ...raw, text: keepTogether(raw.text) };
+        const position = o.kind === 'end' ? 'bottom' : o.kind === 'hook' ? 'top' : o.position;
+        const pad = position === 'top' ? { paddingTop: px(safe.top + (o.kind === 'hook' ? 10 : 30)) } : position === 'bottom' ? { paddingBottom: px(safe.bottom + 240) } : { paddingBottom: px(H * 0.1) };
+        const holder = fill({ justifyContent: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center', alignItems: 'center', boxSizing: 'border-box', zIndex: '60', ...pad });
+        const boxCss = { maxWidth: `calc(100% - ${safe.side * 2}px)`, fontFamily: FONT, textAlign: 'center' };
+        const css = {
+          hook: { ...boxCss, fontWeight: '900', fontSize: '78px', lineHeight: '1.05', color: '#fff', background: accent, padding: '18px 30px 20px', borderRadius: '22px', textTransform: 'uppercase', boxShadow: '0 16px 40px rgba(0,0,0,0.4)' },
+          number: { ...boxCss, fontWeight: '900', fontSize: '230px', lineHeight: '0.95', color: accent, textShadow: OUT2, webkitTextStroke: '6px #fff', paintOrder: 'stroke fill' },
+          keyword: { ...boxCss, fontWeight: '900', fontSize: '120px', lineHeight: '1', color: '#fff', textTransform: 'uppercase', textShadow: OUT2 },
+          emoji: { fontSize: '190px', lineHeight: '1', filter: 'drop-shadow(0 12px 26px rgba(0,0,0,0.45))' },
+          end: { ...boxCss, fontWeight: '900', fontSize: '66px', lineHeight: '1.1', color: '#fff', background: accent, padding: '22px 36px', borderRadius: '26px', boxShadow: '0 18px 44px rgba(0,0,0,0.45)' },
+          label: { ...boxCss, fontWeight: '900', fontSize: '62px', lineHeight: '1.1', color: '#fff', background: 'rgba(0,0,0,0.72)', border: `4px solid ${accent}`, padding: '14px 28px', borderRadius: '999px' },
+        }[o.kind] ?? {};
+        const body = h('div', css, [o.kind === 'label' ? o.text.toUpperCase() : o.text]);
+        holder.append(body);
+        $('overlays').append(holder);
+        return { o, holder, body };
+      })
+    : [];
+  function drawTalk(frame) {
+    if (!talk) return;
+    const t = frame / fps;
+    const z = zoomAt(t);
+    const zoomEl = $('talk-zoom');
+    zoomEl.style.transform = `scale(${z.scale.toFixed(4)})`;
+    zoomEl.style.transformOrigin = `${(z.x * 100).toFixed(2)}% ${(z.y * 100).toFixed(2)}%`;
+    if (talk.fit !== 'contain' && talk.track.length) {
+      for (const seg of talk.timeline) {
+        if (frame < seg.startFrame || frame >= seg.startFrame + seg.frames) continue;
+        const local = frame - seg.startFrame;
+        $(seg.videoId).style.objectPosition = `${(trackAt(talk.track, seg.srcIn + local / fps) * 100).toFixed(2)}% 50%`;
+      }
+    }
+    for (const x of overlayEls) {
+      const { o, holder, body } = x;
+      const on = t >= o.startSec && t < o.endSec;
+      holder.style.display = on ? 'flex' : 'none';
+      if (!on) continue;
+      const local = Math.round((t - o.startSec) * fps);
+      const pop = spring(local, { damping: 10, stiffness: 190 });
+      const soft = spring(local, { damping: 18, stiffness: 120 });
+      holder.style.opacity = String(lerpC((o.endSec - t) * fps, [0, 5], [0, 1]));
+      body.style.transform = {
+        hook: `translateY(${((1 - soft) * -120).toFixed(1)}px) scale(${(0.85 + 0.15 * pop).toFixed(3)}) rotate(${((1 - pop) * -3).toFixed(2)}deg)`,
+        number: `scale(${(0.35 + 0.65 * pop).toFixed(3)}) rotate(${((1 - pop) * 8).toFixed(2)}deg)`,
+        keyword: `scale(${(1.7 - 0.7 * pop).toFixed(3)})`,
+        emoji: `translateY(${(Math.sin(local / 9) * 10).toFixed(1)}px) scale(${pop.toFixed(3)}) rotate(${((1 - pop) * -18 + Math.sin(local / 7) * 4).toFixed(2)}deg)`,
+        end: `translateY(${((1 - soft) * 160).toFixed(1)}px)`,
+        label: `scale(${pop.toFixed(3)})`,
+      }[o.kind];
+      if (o.kind === 'keyword') body.style.opacity = String(Math.min(1, local / 2));
+    }
+    for (const b of talk.broll) {
+      const el = $(b.holderId);
+      const from = Math.round(b.startSec * fps);
+      const frames = Math.max(1, Math.round((b.endSec - b.startSec) * fps));
+      const local = frame - from;
+      const on = local >= 0 && local < frames;
+      el.style.display = on ? (b.mode === 'pip' ? 'flex' : 'block') : 'none';
+      if (!on) continue;
+      const pop = spring(local, { damping: 13, stiffness: 170 });
+      const fadeOut = lerpC(local, [frames - 4, frames], [1, 0]);
+      const pic = $(b.mediaId);
+      if (b.kind === 'image') pic.style.transform = `scale(${interpolate(local, [0, frames], [1.02, 1.1]).toFixed(4)})`;
+      if (b.mode === 'pip') {
+        const card = $(`${b.holderId}-card`);
+        card.style.transform = `scale(${pop.toFixed(3)}) rotate(${((1 - pop) * 6 + 2).toFixed(2)}deg)`;
+        card.style.opacity = String(fadeOut);
+      } else {
+        el.style.opacity = String(Math.min(fadeOut, lerpC(local, [0, 2], [0, 1])));
+        el.style.transform = `scale(${lerpC(local, [0, 4], [1.12, 1]).toFixed(4)})`;
+      }
+    }
+  }
+
+  const bar = $('progress');
+  const totalFrames = Math.max(1, Math.round(D.duration * fps));
+  IgnixFrame.run({ id: D.id, duration: D.duration, fps }, (t, frame) => {
+    drawTalk(frame);
+    drawScenes(frame);
+    drawCaptions(frame);
+    if (bar) bar.style.width = `${(100 * Math.min(1, frame / Math.max(1, totalFrames - 1))).toFixed(3)}%`;
+  });
+})();