@ignix-social/editor 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Ignix Editor: render HTML video compositions (reels, edits, clips) on your own computer. Based on HyperFrames.",
   "license": "Apache-2.0",
   "type": "module",

package/skills/ignix-editor/SKILL.md

@@ -13,7 +13,7 @@ Commands. `ignix-editor` means the copy the Ignix playbook installed: `~/.ignix-
 |---|---|
 | `ignix-editor doctor` | Node 22+ and the H.264 encoder; downloads its own ffmpeg and whisper the first time. Run it first. |
 | `ignix-editor init <name>` | Creates `~/ignix-videos/<name>` with a working skeleton, GSAP, local fonts and `ignix-frame.js`. |
-| `ignix-editor transcribe <file> --lang es [--script "…"] -o words.json` | Words with start/end seconds, on this machine. |
+| `ignix-editor transcribe <file> --lang es [--script "…"] -o words.json` | Words with start/end seconds, plus `pauses` ([start, end] of every silence ≥0.35 s, for cutting silences), on this machine. Over 2 min it prints whisper's progress; without a GPU it takes about as long as the audio. |
 | `ignix-editor faces <video> -o work/faces.json` | Where the face is over time (macOS and Windows; the first run downloads the face detector): a smoothed path `{t, cx, cy, size}` (0–1, top-left origin) to frame the person. |
 | `ignix-editor pick-audio [dir] --kind music\|sfx --query "inspiring" [--order trending]` | Music (or a specific sound effect) from Pixabay, chosen by the USER: opens Pixabay's search in their browser, waits for their download, copies it into `assets/` and notes its source in `work/audio-sources.json`. Tell the user first that you opened Pixabay for them to pick one. Never fetch pixabay.com yourself: it blocks robots. |
 | `ignix-editor giphy --search "thumbs up" [--kind gifs\|stickers\|clips]` · `ignix-editor giphy <link> [dir]` | GIFs, stickers and clips from GIPHY, chosen by the USER: the first opens GIPHY's search in their browser; they copy the link of the one they like (Share → Copy link) and the second brings it into `assets/`: a GIF as MP4, a clip as MP4 with its audio, a sticker as a transparent frame sheet (see section 2, GIPHY stickers). |
@@ -222,6 +222,25 @@ const ba = IgnixBeforeAfter.create(document.getElementById('ba'), {
 
 Every block draws itself with `x.draw(t)` inside `run()`.
 
+**`captions`** — word-by-word captions straight from `words.json` (the output of `ignix-editor transcribe`): groups of 2–3 words that never cross the end of a sentence or a pause, the word being said highlighted, numbers and your `emphasis` words in a second colour, hard cuts between groups (a fade leaves an empty frame). Styles: `bold_pop` (uppercase with a thick outline, the current word pops), `karaoke` (words fill with colour as they are said), `clean` (sentence case with a soft shadow), `box` (on a dark box, the current word on a coloured pill). `IgnixCaptions.clip(words, from, to)` takes a clip's words and starts them at 0; `IgnixCaptions.remap(words, cuts)` removes the cut stretches (`[[start, end], …]` in the same time as the words — the same list you cut the video with) and moves the rest earlier. Load the words as a script (`assets/words.js`: `window.WORDS = {…}`), never with `fetch`. The container is the caption band (e.g. `left:90px; right:90px; top:1180px; height:260px` on a reel, under the face); never give it `id="caption"`.
+
+```js
+const C = IgnixCaptions;
+const words = C.remap(C.clip(WORDS.words, 452.1, 511.5), [[12.3, 13.1]]);
+const cap = C.create(document.getElementById('subs'), { words, pauses: WORDS.pauses, style: 'bold_pop', accent: '#FF6A00', emphasis: ['YouTube'] });
+run({ id, duration, fps }, (t) => cap.draw(t));
+```
+
+**`overlays`** — the on-screen labels of an edit, each on its word: `title` (big, `*asterisks*` in the accent colour), `number` (counts up from `from` to `to`, with `prefix`, `suffix`, `label`, `locale`), `list` (items tick in one by one, `step` seconds apart), `strike` (crossed out, with an optional `replace` that pops in under it), `label` (a pill with an arrow: `point: 'down'|'up'|'left'|'right'`, placed with `x`/`y` in %), `emoji`. Place each with `pos: 'top'|'upper'|'center'|'lower'|'bottom'` (bands inside the reel's safe area) or `x`/`y` in %. The container covers the frame (`position:absolute; inset:0`) above the video and under the captions.
+
+```js
+const O = IgnixOverlays.create(document.getElementById('ov'), { accent: '#FF6A00', items: [
+  { type: 'number', from: 800, to: 1600, suffix: ' €', label: 'per video', at: 3.1, dur: 2.2 },
+  { type: 'strike', text: 'YOUR VIDEO', replace: 'ANOTHER VIDEO', at: 6.0, dur: 2.5 },
+] });
+run({ id, duration, fps }, (t) => O.draw(t));
+```
+
 **Mixing them.** Blocks combine with each other and with the normal direction (recreated screens, captions, the camera): one block per stretch (open with a stickman sketch, explain on the whiteboard, then the usual screens), or several at once (the stickman pointing at what the whiteboard draws, a chat inside a scene with captions over it). Give each its own container, show it only during its stretch (toggle `display` from `t`) and change on the word that motivates it, with a transition (a quick slide, wipe or scale) rather than a hard swap.
 
 ## 3. Recorded video (edits and clips)

package/src/cli.mjs

@@ -12,7 +12,7 @@ import { HOME, PLATFORM, TOOLS, ensureTool, ensureWhisperModel, findTool } from
 import { linkMedia, prepare, projectHtml } from './prepare.mjs';
 import { validateHtml } from './validate.mjs';
 import { engineEnv, renderProject, runEngine } from './engine.mjs';
-import { alignToScript, transcribe } from './transcribe.mjs';
+import { alignToScript, fitToPauses, transcribe } from './transcribe.mjs';
 import { faces as detectFaces } from './analysis/detect.mjs';
 import { frames, probe } from './analysis/media.mjs';
 import { serve } from './analysis/serve.mjs';
@@ -215,16 +215,21 @@ const commands = {
     const ffprobe = await ensureTool('ffprobe', log);
     const whisper = await ensureTool('whisper', log);
     const model = await ensureWhisperModel(opts.model ?? 'medium', log);
-    let words = transcribe({ ffmpeg, whisper, model, input, language: opts.lang ?? 'es', threads: opts.threads });
-    if (opts.script) {
-      const dur = Number(spawnSync(ffprobe, ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', input], { encoding: 'utf8' }).stdout.trim());
-      words = alignToScript(opts.script, words, dur);
-    }
-    const json = JSON.stringify({ language: opts.lang ?? 'es', words }, null, 1);
+    const dur = Number(spawnSync(ffprobe, ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', input], { encoding: 'utf8' }).stdout.trim()) || 0;
+    const mmss = (x) => `${Math.floor(x / 60)}:${String(Math.round(x % 60)).padStart(2, '0')}`;
+    const t0 = Date.now();
+    // Aviso de duración ANTES de empezar: sin GPU, una charla larga tarda más o menos lo que dura.
+    if (dur > 120) log(`Transcribing ${mmss(dur)} of audio with the ${basename(model).replace(/^ggml-|\.bin$/g, '')} model. Without a GPU this can take about as long as the audio itself; whisper prints its progress below.`);
+    const r = transcribe({ ffmpeg, whisper, model, input, language: opts.lang ?? 'es', threads: opts.threads, progress: dur > 120 });
+    let words = r.words;
+    if (opts.script) words = alignToScript(opts.script, words, dur);
+    words = fitToPauses(words, r.pauses);
+    const json = JSON.stringify({ language: opts.lang ?? 'es', duration: +dur.toFixed(3), words, pauses: r.pauses }, null, 1);
     if (opts.output) {
       mkdirSync(dirname(resolve(opts.output)), { recursive: true });
       writeFileSync(resolve(opts.output), json);
     } else console.log(json);
+    log(`✓ ${words.length} words and ${r.pauses.length} pauses (≥0.35 s) in ${mmss((Date.now() - t0) / 1000)}${opts.output ? ` → ${opts.output}` : ''}`);
   },
 
   // Música o efectos de Pixabay elegidos por la persona (src/pick-audio.mjs): abre la
@@ -296,7 +301,7 @@ const commands = {
     if (r.sheet) {
       const sh = r.sheet;
       log(`✓ sticker → ${r.file}: ${sh.frames} frames in a ${sh.cols}×${sh.rows} transparent sheet, ${sh.frameWidth}×${sh.frameHeight} each, ${sh.fps} fps (${sh.durationSec} s loop). Animate it from t as the skill shows (GIPHY section).`);
-    } else log(`✓ ${r.kind} → ${r.file}${r.hasAudio ? ' (with its audio)' : ''}`);
+    } else log(`✓ ${r.kind} → ${r.file}${r.kind === 'clip' ? (r.hasAudio ? ' (with its audio)' : ' (this clip has no sound: treat it as a muted clip)') : ''}`);
     if (opts.json) console.log(JSON.stringify(r));
   },
 

package/src/giphy.mjs

@@ -67,7 +67,8 @@ export function giphySearchUrl(query, kind = 'gifs') {
 
 /** Qué fichero traer de media.giphy.com para cada tipo (y el de reserva). */
 export function giphyRenditions(kind) {
-  if (kind === 'clip') return [['giphy480p.mp4', 'mp4'], ['giphy.mp4', 'mp4']];
+  // El de 360p es el que lleva el audio; giphy480p.mp4 dejó de servirse (404, 2026-10-08).
+  if (kind === 'clip') return [['giphy360p.mp4', 'mp4'], ['giphy.mp4', 'mp4']];
   if (kind === 'sticker') return [['giphy.gif', 'gif']];
   return [['giphy.mp4', 'mp4'], ['giphy.gif', 'gif']];
 }
@@ -93,21 +94,21 @@ export function gifToSheet({ ffmpeg, ffprobe, gif, out }) {
 
 /**
  * El tipo cuando el enlace no lo dice (el del ARCHIVO, …/giphy.gif): con él un clip se traía
- * como GIF, sin audio. Solo los clips tienen giphy480p.mp4, y la página dice si es sticker.
+ * como GIF, sin audio. La página lo dice: los clips traen su bloque "video" y los stickers
+ * is_sticker.
  */
 export async function resolveGiphyKind(id, fromLink) {
   if (fromLink) return fromLink;
   if (!ID.test(id)) return 'gif';
-  const clip = await fetch(`https://media.giphy.com/media/${id}/giphy480p.mp4`, { method: 'HEAD', signal: AbortSignal.timeout(8000) })
-    .then((r) => r.ok)
-    .catch(() => false);
-  if (clip) return 'clip';
   const page = await fetch(`https://giphy.com/gifs/${id}`, { headers: { 'user-agent': 'Mozilla/5.0 (compatible; IgnixEditor)' }, signal: AbortSignal.timeout(8000) })
     .then((r) => (r.ok ? r.text() : ''))
     .catch(() => '');
   const html = page.replace(/\\"/g, '"');
   const at = html.indexOf(`"id":"${id}"`);
-  return at >= 0 && /"is_sticker":true/.test(html.slice(at, at + 8000)) ? 'sticker' : 'gif';
+  if (at < 0) return 'gif';
+  const next = html.slice(at + 10).search(/"id":"[A-Za-z0-9]{8,40}"/);
+  const own = html.slice(at, next < 0 ? at + 8000 : at + 10 + next);
+  return /"video":\{/.test(own) ? 'clip' : /"is_sticker":true/.test(own) ? 'sticker' : 'gif';
 }
 
 /** Trae el elegido a `<project>/assets/` y apunta su origen en `work/media-sources.json`. */
@@ -143,7 +144,12 @@ export async function importGiphy({ link, project, kind: forced, ffmpeg, ffprobe
       /* fichero roto: se empieza de nuevo */
     }
     writeFileSync(log, JSON.stringify([...prev, { source: 'giphy', kind, id: parsed.id, link: String(link), file: dest, at: new Date().toISOString() }], null, 2));
-    return { id: parsed.id, kind, file: dest, hasAudio: kind === 'clip' && file.includes('480p'), ...(sheet ? { sheet } : {}) };
+    // Audio de verdad, no supuesto: hay clips mudos («Take My Money»).
+    const hasAudio =
+      kind === 'clip' && ffprobe
+        ? spawnSync(ffprobe, ['-v', 'error', '-select_streams', 'a', '-show_entries', 'stream=index', '-of', 'csv=p=0', dest], { encoding: 'utf8' }).stdout.trim() !== ''
+        : false;
+    return { id: parsed.id, kind, file: dest, hasAudio, ...(sheet ? { sheet } : {}) };
   }
   throw new Error(`Could not download that ${kind} from GIPHY${lastErr ? `: ${lastErr.message}` : ''}.`);
 }

package/src/runtime/blocks/captions.js

@@ -0,0 +1,138 @@
+/*
+ * captions.js — bloque de Ignix Editor: subtítulos palabra a palabra a partir de words.json
+ * (`ignix-editor transcribe`). Agrupa 2-3 palabras sin cruzar el final de una frase ni una
+ * pausa, resalta la palabra que suena y destaca números y palabras clave. Función pura del
+ * tiempo: el navegador coloca las palabras (CSS) y aquí solo se anima.
+ *
+ *   const C = IgnixCaptions;
+ *   const data = window.WORDS;                                  // { words, pauses } de words.json
+ *   const words = C.remap(C.clip(data.words, 452.1, 511.5), [[12.3, 13.1]]);  // clip + cortes
+ *   const cap = C.create(document.getElementById('cap'), {
+ *     words, pauses: data.pauses, style: 'bold_pop',            // bold_pop | karaoke | clean | box
+ *     accent: '#FF6A00', accent2: '#FFB020', emphasis: ['YouTube', 'gratis'],
+ *   });
+ *   run({ id, duration, fps }, (t) => cap.draw(t));
+ *
+ * Cortes (`remap`): tramos [inicio, fin] QUITADOS, en el tiempo del original; las palabras de
+ * dentro desaparecen y las de después se adelantan lo quitado. Usa la misma lista para el vídeo.
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+  const norm = (s) => String(s).toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^\p{L}\p{N}]/gu, '');
+  const ENDS = /[.!?…]["»”)]?$/;
+
+  /** Palabras de un tramo [from, to) del original, con el tiempo empezando en 0. */
+  function clip(words, from, to = Infinity) {
+    return words.filter((w) => w.s >= from - 0.02 && w.s < to).map((w) => ({ ...w, s: +(w.s - from).toFixed(3), e: +(Math.min(w.e, to) - from).toFixed(3) }));
+  }
+
+  /** Quita los tramos `cuts` ([[s, e], …] en el tiempo de `words`) y adelanta lo que viene después. */
+  function remap(words, cuts = []) {
+    const cs = [...cuts].map(([a, b]) => [Math.min(a, b), Math.max(a, b)]).sort((x, y) => x[0] - y[0]);
+    const map = (x) => {
+      let off = 0;
+      for (const [a, b] of cs) {
+        if (x >= b) off += b - a;
+        else if (x > a) return a - off; // dentro de un corte: al borde
+      }
+      return x - off;
+    };
+    return words
+      .filter((w) => !cs.some(([a, b]) => w.s >= a && w.e <= b))
+      .map((w) => ({ ...w, s: +map(w.s).toFixed(3), e: +map(w.e).toFixed(3) }));
+  }
+
+  /** Grupos de hasta `maxWords` palabras / `maxChars` letras; corta en fin de frase y en pausas. */
+  function group(words, { maxWords = 3, maxChars = 18, pauses = [], breakGap = 0.35 } = {}) {
+    const out = [];
+    let cur = null;
+    for (let i = 0; i < words.length; i++) {
+      const w = words[i];
+      const prev = words[i - 1];
+      const chars = cur ? cur.words.reduce((n, x) => n + x.t.length + 1, 0) + w.t.length : 0;
+      const pauseBetween = prev && (w.s - prev.e > breakGap || pauses.some(([a, b]) => b - a >= breakGap && a >= prev.s && a < w.s + 0.05));
+      if (!cur || cur.words.length >= maxWords || chars > maxChars || ENDS.test(prev.t) || pauseBetween) {
+        cur = { words: [], s: w.s, e: w.e };
+        out.push(cur);
+      }
+      cur.words.push(w);
+      cur.e = w.e;
+    }
+    return out;
+  }
+
+  // Puntuación de final que sobra en pantalla («hola,» → «hola»); ¿ y ! se quedan.
+  const tidy = (t) => t.replace(/[.,;:]+$/, '').replace(/^["«“(]+|["»”)]+$/g, '');
+
+  function create(box, { words = [], pauses = [], style = 'bold_pop', maxWords, maxChars, accent = '#FF6A00', accent2 = '#FFB020', emphasis = [], numbers = true, uppercase, fontSize = 88, font = "'Montserrat', Arial, sans-serif", color = '#FFFFFF', stroke = '#000000', hold = 0.35 } = {}) {
+    const st = {
+      bold_pop: { up: true, weight: 900, maxW: 3, maxC: 14 },
+      karaoke: { up: true, weight: 900, maxW: 4, maxC: 22 },
+      clean: { up: false, weight: 800, maxW: 5, maxC: 28 },
+      box: { up: false, weight: 800, maxW: 3, maxC: 18 },
+    }[style] ?? { up: true, weight: 900, maxW: 3, maxC: 16 };
+    const up = uppercase ?? st.up;
+    const groups = group(words, { maxWords: maxWords ?? st.maxW, maxChars: maxChars ?? st.maxC, pauses });
+    const emph = new Set(emphasis.map(norm));
+    box.innerHTML = '';
+    // Rejilla de una celda: todos los grupos en el mismo sitio (si dos coinciden un instante,
+    // se superponen en vez de repartirse el ancho).
+    Object.assign(box.style, { position: box.style.position || 'absolute', display: 'grid', placeItems: 'center', pointerEvents: 'none' });
+    const els = groups.map((g, gi) => {
+      const row = document.createElement('div');
+      // Hueco amplio entre palabras: con contorno grueso, 0,3 em las pega («VÍDEOYOUTUBE»).
+      Object.assign(row.style, {
+        display: 'none', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'baseline', columnGap: '0.42em', rowGap: '0.06em',
+        gridArea: '1 / 1', maxWidth: '100%', textAlign: 'center', fontFamily: font, fontWeight: String(st.weight), fontSize: `${fontSize}px`, lineHeight: '1.08', transformOrigin: '50% 60%',
+      });
+      if (style === 'box') Object.assign(row.style, { background: 'rgba(14,14,16,.78)', padding: '0.22em 0.5em', borderRadius: '0.32em' });
+      const spans = g.words.map((w) => {
+        const el = document.createElement('span');
+        const text = tidy(w.t);
+        el.textContent = up ? text.toUpperCase() : text;
+        const key = numbers && /\d/.test(w.t) ? 'num' : emph.has(norm(w.t)) ? 'emph' : '';
+        Object.assign(el.style, { display: 'inline-block', color, transformOrigin: '50% 70%', borderRadius: '0.18em', padding: style === 'box' ? '0 0.12em' : '0' });
+        if (style === 'bold_pop' || style === 'karaoke') Object.assign(el.style, { WebkitTextStroke: `0.15em ${stroke}`, paintOrder: 'stroke fill' });
+        if (style === 'clean') el.style.textShadow = '0 4px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.8)';
+        row.appendChild(el);
+        return { el, w, key };
+      });
+      box.appendChild(row);
+      const next = groups[gi + 1];
+      // Entra 0,04 s antes de su palabra; el anterior sale justo entonces (sin solaparse).
+      return { row, spans, s: g.s, end: next ? Math.min(next.s - 0.04, g.e + hold) : g.e + hold };
+    });
+
+    return {
+      groups,
+      draw(t) {
+        for (const g of els) {
+          const on = t >= g.s - 0.04 && t < g.end;
+          g.row.style.display = on ? 'flex' : 'none';
+          if (!on) continue;
+          const k = clamp01((t - g.s + 0.04) / 0.14);
+          g.row.style.transform = style === 'clean' || style === 'box' ? `translateY(${((1 - k) * 18).toFixed(1)}px)` : `scale(${(0.86 + 0.14 * outBack(k)).toFixed(4)})`;
+          g.row.style.opacity = '1'; // corte seco entre grupos: un fundido deja un fotograma vacío
+          for (const { el, w, key } of g.spans) {
+            const now = t >= w.s && t < Math.max(w.e, w.s + 0.12);
+            const said = t >= w.s;
+            const base = key === 'num' || key === 'emph' ? accent2 : color;
+            if (style === 'box') {
+              el.style.background = now ? accent : 'transparent';
+              el.style.color = now ? '#111' : base;
+            } else if (style === 'karaoke') {
+              el.style.color = said ? accent : base;
+            } else {
+              el.style.color = now ? accent : base;
+            }
+            const kw = clamp01((t - w.s) / 0.09);
+            el.style.transform = now && style === 'bold_pop' ? `scale(${(1 + 0.1 * kw).toFixed(4)})` : 'scale(1)';
+          }
+        }
+      },
+    };
+  }
+
+  window.IgnixCaptions = { create, group, clip, remap };
+})();

package/src/runtime/blocks/overlays.js

@@ -0,0 +1,176 @@
+/*
+ * overlays.js — bloque de Ignix Editor: rótulos sobre el vídeo, cada uno anclado a su
+ * palabra: título, número que cuenta, lista que se va marcando, tachado (con su reemplazo),
+ * etiqueta con flecha y emoji. Función pura del tiempo.
+ *
+ *   const O = IgnixOverlays.create(document.getElementById('ov'), {   // #ov: inset 0 sobre el vídeo
+ *     accent: '#FF6A00',
+ *     items: [
+ *       { type: 'title', text: 'YouTube ya no te *enseña*', at: 0.2, dur: 2.4, pos: 'top' },
+ *       { type: 'number', to: 1600, prefix: '', suffix: ' €', at: 3.1, dur: 2.2, from: 800, label: 'por vídeo' },
+ *       { type: 'list', title: 'Antes de publicar', items: ['Gancho', 'Prueba', 'CTA'], at: 6, step: 0.7, dur: 3.5 },
+ *       { type: 'strike', text: 'TU VÍDEO', replace: 'OTRO VÍDEO', at: 10, dur: 2.5 },
+ *       { type: 'label', text: 'Esto', at: 13, dur: 1.5, x: 62, y: 40, point: 'down' },
+ *       { type: 'emoji', char: '🔥', at: 15, dur: 1.2, x: 78, y: 22 },
+ *     ],
+ *   });
+ *   run({ id, duration, fps }, (t) => O.draw(t));
+ *
+ * pos: top | upper | center | lower | bottom (franjas dentro de la zona segura del reel) o
+ * { x, y } en % del cuadro. Texto con *asteriscos* = esa parte en el color de acento.
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+  const outCubic = (x) => 1 - (1 - x) ** 3;
+  const POS = { top: 15, upper: 28, center: 46, lower: 60, bottom: 70 };
+
+  // «Hola *mundo*» → nodos con la parte entre asteriscos en el acento (sin innerHTML).
+  function rich(el, text, accent) {
+    String(text)
+      .split(/(\*[^*]+\*)/)
+      .filter(Boolean)
+      .forEach((part) => {
+        const s = document.createElement('span');
+        const hot = part.startsWith('*') && part.endsWith('*');
+        s.textContent = hot ? part.slice(1, -1) : part;
+        if (hot) s.style.color = accent;
+        el.appendChild(s);
+      });
+  }
+
+  function fmt(n, { decimals = 0, locale = 'es-ES' } = {}) {
+    return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(n);
+  }
+
+  function create(box, { items = [], accent = '#FF6A00', ink = '#FFFFFF', panel = 'rgba(14,14,16,.82)', font = "'Montserrat', Arial, sans-serif", size = 1, locale = 'es-ES' } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { pointerEvents: 'none', fontFamily: font });
+    const base = 1080 * size; // tamaños pensados para 1080 de ancho
+    const px = (n) => `${((n * base) / 1080).toFixed(1)}px`;
+
+    const made = items.map((it) => {
+      const el = document.createElement('div');
+      const at = it.at ?? 0;
+      const dur = it.dur ?? 2;
+      const p = typeof it.pos === 'object' && it.pos ? it.pos : { x: it.x ?? 50, y: it.y ?? POS[it.pos ?? (it.type === 'title' ? 'top' : 'upper')] ?? 28 };
+      Object.assign(el.style, { position: 'absolute', left: `${p.x}%`, top: `${p.y}%`, transform: 'translate(-50%,-50%)', opacity: '0', color: ink, textAlign: 'center' });
+      const o = { it, el, at, end: at + dur };
+
+      if (it.type === 'title') {
+        Object.assign(el.style, { width: '80%', fontWeight: '900', fontSize: px(it.size ?? 92), lineHeight: '1.04', textTransform: 'uppercase', WebkitTextStroke: `${px(10)} #000`, paintOrder: 'stroke fill' });
+        rich(el, it.text, accent);
+      } else if (it.type === 'number' || it.type === 'counter') {
+        Object.assign(el.style, { background: panel, borderRadius: px(36), padding: `${px(26)} ${px(46)}`, fontWeight: '900' });
+        const num = document.createElement('div');
+        Object.assign(num.style, { fontSize: px(it.size ?? 150), lineHeight: '1', color: accent, fontVariantNumeric: 'tabular-nums' });
+        el.appendChild(num);
+        if (it.label) {
+          const l = document.createElement('div');
+          Object.assign(l.style, { fontSize: px(46), fontWeight: '800', marginTop: px(8), textTransform: 'uppercase' });
+          l.textContent = it.label;
+          el.appendChild(l);
+        }
+        o.num = num;
+      } else if (it.type === 'list') {
+        Object.assign(el.style, { width: '76%', background: panel, borderRadius: px(32), padding: `${px(34)} ${px(40)}`, textAlign: 'left' });
+        if (it.title) {
+          const h = document.createElement('div');
+          Object.assign(h.style, { fontSize: px(44), fontWeight: '900', color: accent, textTransform: 'uppercase', marginBottom: px(18) });
+          h.textContent = it.title;
+          el.appendChild(h);
+        }
+        o.rows = (it.items ?? []).map((txt, i) => {
+          const r = document.createElement('div');
+          Object.assign(r.style, { display: 'flex', alignItems: 'center', gap: px(22), fontSize: px(it.size ?? 54), fontWeight: '800', margin: `${px(12)} 0`, opacity: '0' });
+          const dot = document.createElement('div');
+          Object.assign(dot.style, { flex: '0 0 auto', width: px(62), height: px(62), borderRadius: '50%', background: accent, color: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: px(36), fontWeight: '900' });
+          dot.textContent = it.check === false ? String(i + 1) : '✓';
+          const tx = document.createElement('div');
+          tx.textContent = txt;
+          r.append(dot, tx);
+          el.appendChild(r);
+          return { r, dot, at: at + 0.25 + i * (it.step ?? 0.6) };
+        });
+      } else if (it.type === 'strike') {
+        Object.assign(el.style, { fontWeight: '900', fontSize: px(it.size ?? 96), textTransform: 'uppercase', whiteSpace: 'nowrap' });
+        const old = document.createElement('div');
+        Object.assign(old.style, { position: 'relative', display: 'inline-block', WebkitTextStroke: `${px(9)} #000`, paintOrder: 'stroke fill' });
+        old.textContent = it.text;
+        const line = document.createElement('div');
+        Object.assign(line.style, { position: 'absolute', left: '-6%', width: '112%', top: '48%', height: px(16), background: it.lineColor ?? '#E0252B', borderRadius: px(8), transformOrigin: '0 50%', transform: 'scaleX(0) rotate(-4deg)' });
+        old.appendChild(line);
+        el.appendChild(old);
+        o.old = old;
+        o.line = line;
+        if (it.replace) {
+          const nw = document.createElement('div');
+          Object.assign(nw.style, { color: accent, marginTop: px(10), WebkitTextStroke: `${px(9)} #000`, paintOrder: 'stroke fill', opacity: '0' });
+          nw.textContent = it.replace;
+          el.appendChild(nw);
+          o.nw = nw;
+        }
+      } else if (it.type === 'label') {
+        Object.assign(el.style, { background: accent, color: '#111', fontWeight: '900', fontSize: px(it.size ?? 52), padding: `${px(14)} ${px(30)}`, borderRadius: px(999), whiteSpace: 'nowrap' });
+        el.textContent = it.text;
+        if (it.point) {
+          const a = document.createElement('div');
+          const s = px(22);
+          const side = { down: { top: '100%', left: '50%', bd: `border-top:${s} solid ${accent}`, tf: 'translateX(-50%)' }, up: { bottom: '100%', left: '50%', bd: `border-bottom:${s} solid ${accent}`, tf: 'translateX(-50%)' }, left: { right: '100%', top: '50%', bd: `border-right:${s} solid ${accent}`, tf: 'translateY(-50%)' }, right: { left: '100%', top: '50%', bd: `border-left:${s} solid ${accent}`, tf: 'translateY(-50%)' } }[it.point];
+          if (side) {
+            a.style.cssText = `position:absolute;width:0;height:0;border:${s} solid transparent;${side.bd};transform:${side.tf}`;
+            for (const k of ['top', 'bottom', 'left', 'right']) if (side[k]) a.style[k] = side[k];
+            el.appendChild(a);
+          }
+        }
+      } else if (it.type === 'emoji') {
+        Object.assign(el.style, { fontSize: px(it.size ?? 150), lineHeight: '1' });
+        el.textContent = it.char ?? '🔥';
+      }
+      box.appendChild(el);
+      return o;
+    });
+
+    return {
+      draw(t) {
+        for (const o of made) {
+          const { it, el, at, end } = o;
+          const on = t >= at && t < end;
+          el.style.display = on ? 'block' : 'none';
+          if (!on) continue;
+          const kin = clamp01((t - at) / 0.28);
+          const kout = clamp01((t - (end - 0.2)) / 0.2);
+          el.style.opacity = (clamp01(kin * 1.8) * (1 - kout)).toFixed(3);
+          const pop = it.type === 'emoji' ? 0.3 + 0.7 * outBack(kin) : 0.82 + 0.18 * outBack(kin);
+          const wob = it.type === 'emoji' ? `rotate(${(Math.sin((t - at) * 6) * 6).toFixed(2)}deg)` : '';
+          el.style.transform = `translate(-50%,-50%) translateY(${((1 - outCubic(kin)) * 30 + kout * -20).toFixed(1)}px) scale(${pop.toFixed(4)}) ${wob}`;
+          if (o.num) {
+            const k = outCubic(clamp01((t - at - 0.15) / (it.count ?? 0.9)));
+            const v = (it.from ?? 0) + ((it.to ?? 0) - (it.from ?? 0)) * k;
+            o.num.textContent = `${it.prefix ?? ''}${fmt(v, { decimals: it.decimals ?? 0, locale: it.locale ?? locale })}${it.suffix ?? ''}`;
+          }
+          if (o.rows) {
+            for (const r of o.rows) {
+              const k = clamp01((t - r.at) / 0.22);
+              r.r.style.opacity = k.toFixed(3);
+              r.r.style.transform = `translateX(${((1 - outCubic(k)) * -30).toFixed(1)}px)`;
+              r.dot.style.transform = `scale(${(0.5 + 0.5 * outBack(k)).toFixed(4)})`;
+            }
+          }
+          if (o.line) {
+            const k = outCubic(clamp01((t - at - (it.strikeAt ?? 0.45)) / 0.3));
+            o.line.style.transform = `scaleX(${k.toFixed(4)}) rotate(-4deg)`;
+            o.old.style.opacity = o.nw ? (1 - 0.45 * clamp01((t - at - 0.8) / 0.3)).toFixed(3) : '1';
+            if (o.nw) {
+              const kn = clamp01((t - at - (it.replaceAt ?? 0.85)) / 0.25);
+              o.nw.style.opacity = kn.toFixed(3);
+              o.nw.style.transform = `scale(${(0.7 + 0.3 * outBack(kn)).toFixed(4)})`;
+            }
+          }
+        }
+      },
+    };
+  }
+
+  window.IgnixOverlays = { create, format: fmt };
+})();

package/src/transcribe.mjs

@@ -46,19 +46,60 @@ function whisperTimeoutMs(wavPath) {
   } catch {
     /* sin tamaño: el mínimo */
   }
-  return Math.max(10 * 60_000, seconds * 6 * 1000);
+  // ENTERO: spawnSync rechaza un timeout con decimales («The value of "timeout" is out of
+  // range… Received 13158197.625») y eso rompía cualquier audio de más de 100 s (2026-10-08).
+  return Math.ceil(Math.max(10 * 60_000, seconds * 6 * 1000));
+}
+
+/**
+ * Pausas del audio (ffmpeg silencedetect): [[inicio, fin], …] en segundos. Sirven para el
+ * paso de silencios y para que ninguna palabra se estire sobre una pausa: whisper con -ml 1
+ * hace que cada palabra acabe donde empieza la siguiente («claro.» de 0,76 s, «1.600,» de 1,6 s).
+ */
+export function detectPauses(ffmpeg, input, { noiseDb = -35, minSec = 0.35 } = {}) {
+  const r = spawnSync(ffmpeg, ['-nostdin', '-hide_banner', '-i', input, '-vn', '-af', `silencedetect=noise=${noiseDb}dB:d=${minSec}`, '-f', 'null', '-'], { encoding: 'utf8', maxBuffer: 64 * 1024 * 1024 });
+  const out = [];
+  let start = null;
+  for (const line of (r.stderr || '').split('\n')) {
+    const a = line.match(/silence_start: (-?[\d.]+)/);
+    if (a) start = Math.max(0, Number(a[1]));
+    const b = line.match(/silence_end: ([\d.]+)/);
+    if (b && start !== null) {
+      out.push([+start.toFixed(3), +Number(b[1]).toFixed(3)]);
+      start = null;
+    }
+  }
+  return out;
+}
+
+/** Recorta cada palabra a la voz: ni empieza ni acaba dentro de una pausa (si le queda voz). */
+export function fitToPauses(words, pauses) {
+  if (!pauses?.length) return words;
+  return words.map((w) => {
+    let { s, e } = w;
+    for (const [ps, pe] of pauses) {
+      if (ps >= e || pe <= s) continue;
+      if (ps > s && ps - s >= 0.08) e = Math.min(e, ps); // se estiraba sobre la pausa
+      else if (pe < e && e - pe >= 0.08) s = Math.max(s, pe); // empezaba dentro de la pausa
+    }
+    return { ...w, s: +s.toFixed(3), e: +e.toFixed(3) };
+  });
 }
 
 function whisperFailure(w, timeoutMs) {
   if (w.error?.code === 'ETIMEDOUT') {
     return new Error(`whisper did not finish in ${Math.round(timeoutMs / 60_000)} min and was stopped. Close other heavy programs and run the command again, or use a smaller model (--model small).`);
   }
-  return new Error(`whisper failed: ${(w.stderr || '').slice(-400)}`);
+  return new Error(`whisper failed (exit ${w.status ?? w.error?.code ?? '?'}): ${(w.stderr || '').slice(-400)}`);
 }
 
 const norm = (s) => s.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^\p{L}\p{N}]/gu, '');
 
-export function transcribe({ ffmpeg, whisper, model, input, language = 'es', threads }) {
+/**
+ * Palabras y pausas. Con `progress`, whisper escribe su avance («progress = 40%») en la
+ * consola: en una transcripción larga, sin eso nadie distingue «va lento» de «se ha colgado».
+ */
+export function transcribe({ ffmpeg, whisper, model, input, language = 'es', threads, progress = false }) {
   const ws = whisperWorkspace(model);
   const tmp = ws.tmp;
   try {
@@ -67,8 +108,10 @@ export function transcribe({ ffmpeg, whisper, model, input, language = 'es', thr
     if (a.status !== 0) throw new Error(`Could not read the audio of ${input}: ${a.stderr.slice(-300)}`);
     const out = join(tmp, 'out');
     const args = ['-m', ws.modelArg, '-l', language, '-ml', '1', '-sow', '-oj', '-of', ws.arg(out), '-t', String(whisperThreads(threads)), '-f', ws.arg(wav)];
+    if (progress) args.unshift('-np', '-pp');
     const timeout = whisperTimeoutMs(wav);
-    const run = (extra) => spawnSync(whisper, [...extra, ...args], { encoding: 'utf8', maxBuffer: 64 * 1024 * 1024, cwd: ws.cwd, timeout });
+    const stdio = progress ? ['ignore', 'pipe', 'inherit'] : undefined;
+    const run = (extra) => spawnSync(whisper, [...extra, ...args], { encoding: 'utf8', maxBuffer: 64 * 1024 * 1024, cwd: ws.cwd, timeout, stdio });
     // En Mac Intel la GPU (Metal) se cuelga con whisper: CPU directamente. En el resto, GPU y,
     // si falla, otra vez por CPU.
     const intelMac = process.platform === 'darwin' && process.arch === 'x64';
@@ -82,7 +125,7 @@ export function transcribe({ ffmpeg, whisper, model, input, language = 'es', thr
       if (!t || /^\[.*\]$/.test(t)) continue; // [MÚSICA], [MUSIC]…
       words.push({ t, s: seg.offsets.from / 1000, e: seg.offsets.to / 1000 });
     }
-    return words;
+    return { words, pauses: detectPauses(ffmpeg, wav) };
   } finally {
     rmSync(tmp, { recursive: true, force: true });
   }