@ignix-social/editor 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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

@@ -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/analysis/style.mjs

@@ -324,7 +324,12 @@ export function describe(s, n) {
   const lead = n > 1 ? `Measured on ${n} videos.` : 'Measured on 1 video (2–3 give a steadier style).';
   out.push(lead);
   if (s.format.aspect) out.push(`Format ${s.format.aspect}${s.durationSec ? `, about ${Math.round(s.durationSec)} s long` : ''}.`);
-  if (s.shots.medianSec != null)
+  // Sin cortes secos pero con el texto cambiando sin parar: la escena se transforma desde
+  // dentro, y «un corte cada 31 s» describía lo contrario de lo que se ve (2026-10-09).
+  const morph = s.shots.cutsPerMinute != null && s.shots.cutsPerMinute < 3 && (s.captions.changesPerMinute ?? 0) >= 10;
+  if (morph)
+    out.push(`Hardly any hard cuts (${s.shots.cutsPerMinute} per minute): the scene changes from within, the text on screen changes every ${Math.round(600 / s.captions.changesPerMinute) / 10} s. Keep it one continuous scene that builds and morphs, not a cut every few seconds.`);
+  else if (s.shots.medianSec != null)
     out.push(`A cut every ${s.shots.medianSec} s (${s.shots.cutsPerMinute} per minute)${s.shots.firstCutSec != null ? `; the first cut at ${s.shots.firstCutSec} s` : ''}.`);
   if (s.captions.coverage != null)
     out.push(
@@ -350,7 +355,9 @@ export function describe(s, n) {
     const types = s.audio.sfxTypes?.length ? s.audio.sfxTypes.join(', ') : null;
     out.push(
       !types
-        ? 'No sound effects heard (one mixed far under a continuous voice cannot be told apart).'
+        ? s.audio.wordsPerMinute != null || (s.audio.musicShare ?? 0) >= 0.2
+          ? 'Sound effects: not measurable here — one mixed under a continuous voice and music cannot be told apart. Ask the person whether they use them before assuming none.'
+          : 'No sound effects heard.'
         : s.audio.sfxPerMinute > 0
           ? `Sound effects heard: ${types} — about ${s.audio.sfxPerMinute} a minute${s.audio.sfxOnCutsShare ? `, on ${Math.round(s.audio.sfxOnCutsShare * 100)} % of the cuts` : ''}.`
           : `Sound effects in only ${s.audio.sfxVideos} of ${n} videos (${types}); mostly without.`,

package/src/runtime/blocks/captions.js

@@ -0,0 +1,140 @@
+/*
+ * 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»); 0,55 em deja sitio al crecer la palabra activa.
+      Object.assign(row.style, {
+        display: 'none', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'baseline', columnGap: '0.55em', 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);
+            // Crece desde su centro y se come el hueco con la vecina («NOMACHINES»): poco, y menos
+            // cuanto más larga es la palabra.
+            el.style.transform = now && style === 'bold_pop' ? `scale(${(1 + Math.min(0.07, 0.35 / Math.max(5, w.t.length)) * 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 };
+})();