@ignix-social/editor 0.1.6 → 0.1.8

package/src/analysis/style.mjs

@@ -0,0 +1,381 @@
+// `ignix-editor style measure`: el estilo de edición de alguien, MEDIDO en 2–3 vídeos suyos
+// (ADR-0023 E3). Solo lo que se puede medir en el ordenador sin dudar: ritmo de corte,
+// subtítulos (cuánto, dónde, qué tamaño), encuadre y zooms, movimiento, color, volumen y, si
+// se pide, la velocidad del habla. Lo que hay que VER (tipografía, tono, tipo de gancho) lo
+// añade quien mira los fotogramas: el Claude del cliente o el director de Creator.
+//
+// La salida lleva números (para comparar y aplicar) y un resumen en frases (para el prompt).
+import { loudness } from '../audio.mjs';
+import { transcribeDetailed } from '../transcribe.mjs';
+import { faces as detectFaces, text as detectText } from './detect.mjs';
+import { spawnSync } from 'node:child_process';
+import { mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { frames, probe } from './media.mjs';
+import { classify, soundProfile } from './audio-events.mjs';
+import { motionOf } from './montage.mjs';
+import { cuts } from './sound.mjs';
+
+export const STYLE_VERSION = 1;
+export const MAX_STYLE_VIDEOS = 5;
+const MAX_SEC = 600;
+const FPS = 2;
+
+const median = (xs) => {
+  const v = xs.filter((x) => Number.isFinite(x)).sort((a, b) => a - b);
+  if (!v.length) return null;
+  const m = Math.floor(v.length / 2);
+  return v.length % 2 ? v[m] : (v[m - 1] + v[m]) / 2;
+};
+const r2 = (x) => (x == null ? null : Math.round(x * 100) / 100);
+const mode = (xs) => {
+  const c = new Map();
+  for (const x of xs.filter(Boolean)) c.set(x, (c.get(x) ?? 0) + 1);
+  return [...c.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;
+};
+
+export function aspectOf(w, h) {
+  const r = w / h;
+  const known = [['9:16', 9 / 16], ['4:5', 4 / 5], ['1:1', 1], ['16:9', 16 / 9]];
+  return known.sort((a, b) => Math.abs(a[1] - r) - Math.abs(b[1] - r))[0][0];
+}
+
+/** Dónde va el texto: por el centro vertical de sus cajas (0 arriba, 1 abajo). */
+export function positionOf(y) {
+  if (y == null) return null;
+  return y < 0.3 ? 'top' : y < 0.55 ? 'middle' : y < 0.8 ? 'lower third' : 'bottom';
+}
+
+/** Tamaño de letra por la altura de una línea respecto al alto del vídeo. */
+export function textSizeOf(h) {
+  if (h == null) return null;
+  return h < 0.03 ? 'small' : h < 0.055 ? 'medium' : 'large';
+}
+
+/** Encuadre por la altura de la cara respecto al alto del vídeo. */
+export function framingOf(h) {
+  if (h == null) return null;
+  return h >= 0.28 ? 'close-up' : h >= 0.14 ? 'medium' : 'wide';
+}
+
+/**
+ * Diferencia media entre muestras a medio segundo (0–255). Medido (2026-10-06): una cabeza
+ * que habla a cámara 13,6; un Reel de producto con cortes cada 7 s 13,5; uno de barbería con
+ * cortes cada 2,5 s 20,9; alguien andando hacia la cámara 45,2.
+ */
+export function energyOf(motion) {
+  if (motion == null) return null;
+  return motion < 15 ? 'calm' : motion < 25 ? 'moderate' : 'high';
+}
+
+/** Saturación y brillo (0..1) de un color. */
+function hsv(r, g, b) {
+  const mx = Math.max(r, g, b);
+  const mn = Math.min(r, g, b);
+  return { s: mx ? (mx - mn) / mx : 0, v: mx / 255 };
+}
+const hex = (r, g, b) => `#${[r, g, b].map((c) => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+
+/**
+ * Zooms y punch-ins: la cara cambia de tamaño un 20 % o más de un segundo al siguiente sin
+ * un corte entre medias (con corte es otro plano). Un salto así en un segundo es de edición;
+ * alguien que se acerca a la cámara cambia más despacio.
+ */
+export function countZooms(samples, cutTimes) {
+  let n = 0;
+  for (let i = 1; i < samples.length; i++) {
+    const a = samples[i - 1];
+    const b = samples[i];
+    if (b.t - a.t > 1.01) continue;
+    if (cutTimes.some((c) => c > a.t && c <= b.t)) continue;
+    if (Math.abs(b.h - a.h) / a.h >= 0.2) n += 1;
+  }
+  return n;
+}
+
+/**
+ * ¿Ha cambiado el texto en pantalla entre dos muestras? Cambia si menos de la mitad de las
+ * cajas de una tienen pareja en la otra (mismo sitio y altura parecida).
+ */
+export function textChanged(a, b) {
+  if (!a.length && !b.length) return false;
+  if (!a.length || !b.length) return true;
+  const same = (x, y) => Math.abs(x.x - y.x) < 0.05 && Math.abs(x.y - y.y) < 0.03 && Math.abs(x.w - y.w) < 0.08 && Math.abs(x.h - y.h) / Math.max(x.h, y.h) < 0.3;
+  const matched = a.filter((x) => b.some((y) => same(x, y))).length;
+  return matched / Math.max(a.length, b.length) < 0.5;
+}
+
+/** Fotogramas para MIRAR el estilo (tipografía, tipo de animación): 4 por vídeo. */
+function stillsOf(ffmpeg, path, duration, dir, n) {
+  mkdirSync(dir, { recursive: true });
+  const out = [];
+  for (const [k, f] of [0.1, 0.35, 0.6, 0.85].entries()) {
+    const file = join(dir, `video${n}-${k + 1}.jpg`);
+    const r = spawnSync(ffmpeg, ['-nostdin', '-loglevel', 'error', '-y', '-ss', (duration * f).toFixed(2), '-i', path, '-frames:v', '1', '-vf', 'scale=540:-2', '-q:v', '4', file]);
+    if (r.status === 0) out.push(file);
+  }
+  return out;
+}
+
+/**
+ * Mide un vídeo. `speech`: transcribe para la velocidad del habla (más lento). `stills`: carpeta
+ * donde dejar fotogramas para mirar lo que no se mide.
+ */
+export async function measureVideo({ ffmpeg, ffprobe, path, speech = null, stills = null, index = 1, log = () => {} }) {
+  const info = probe(ffprobe, path);
+  if (!info.hasVideo || !(info.duration > 0)) throw new Error(`${path} has no video`);
+  const duration = Math.min(info.duration, MAX_SEC);
+  const cutTimes = await cuts(ffmpeg, path, { minSec: 0.3, maxSec: MAX_SEC });
+  const bounds = [0, ...cutTimes, duration];
+  const shots = bounds.slice(1).map((t, i) => t - bounds[i]).filter((s) => s > 0.05);
+
+  const text = [];
+  const textSec = new Set();
+  const faceSamples = [];
+  let checked = 0;
+  let motionSum = 0;
+  let motionN = 0;
+  let prev = null;
+  const colors = new Map();
+  let sat = 0;
+  let val = 0;
+  let warm = 0;
+  let px = 0;
+  let k = 0;
+  let prevText = [];
+  let textSamples = 0;
+  let textChanges = 0;
+  await frames(ffmpeg, path, {
+    fps: FPS,
+    max: 480,
+    width: info.width,
+    height: info.height,
+    end: duration,
+    onFrame: async (f) => {
+      if (prev) {
+        motionSum += motionOf(prev, f.rgb, f.w, f.h).motion;
+        motionN += 1;
+      }
+      prev = f.rgb;
+      // Color: una de cada 16 muestras de píxel, cuantizado a 4 bits por canal.
+      for (let i = 0; i < f.w * f.h; i += 16) {
+        const r = f.rgb[i * 3];
+        const g = f.rgb[i * 3 + 1];
+        const b = f.rgb[i * 3 + 2];
+        const key = ((r >> 4) << 8) | ((g >> 4) << 4) | (b >> 4);
+        const bin = colors.get(key) ?? { n: 0, r: 0, g: 0, b: 0 };
+        bin.n += 1;
+        bin.r += r;
+        bin.g += g;
+        bin.b += b;
+        colors.set(key, bin);
+        const c = hsv(r, g, b);
+        sat += c.s;
+        val += c.v;
+        warm += (r - b) / 255;
+        px += 1;
+      }
+      // Texto en cada muestra (para saber cada cuánto cambia: palabra a palabra o frases).
+      const boxes = await detectText(f, log);
+      textSamples += 1;
+      if (textSamples > 1 && textChanged(prevText, boxes)) textChanges += 1;
+      prevText = boxes;
+      // Caras una vez por segundo (la primera muestra de cada segundo).
+      if (k++ % FPS !== 0) return true;
+      const sec = Math.floor(f.t);
+      checked += 1;
+      if (boxes.length) {
+        textSec.add(sec);
+        for (const b of boxes) text.push(b);
+      }
+      const fs = await detectFaces(f, log);
+      const big = fs.sort((a, b) => b.w * b.h - a.w * a.h)[0];
+      if (big) faceSamples.push({ t: f.t, h: big.h, y: big.y + big.h / 2 });
+      return true;
+    },
+  });
+
+  // Paleta: los colores más frecuentes (la media real de cada grupo), sin casi-negros —lo
+  // oscuro ya lo dice el brillo— y sin repetir tonos casi iguales.
+  const palette = [];
+  for (const bin of [...colors.values()].sort((a, b) => b.n - a.n)) {
+    const c = [bin.r / bin.n, bin.g / bin.n, bin.b / bin.n];
+    if (Math.max(...c) < 40) continue;
+    if (palette.every((p) => Math.abs(p[0] - c[0]) + Math.abs(p[1] - c[1]) + Math.abs(p[2] - c[2]) > 80)) palette.push(c);
+    if (palette.length === 5) break;
+  }
+
+  let speechOut = null;
+  if (speech) {
+    const t = transcribeDetailed({ ffmpeg, whisper: speech.whisper, model: speech.model, input: path, language: speech.language ?? null });
+    const words = t.words ?? [];
+    const spoken = words.length ? words[words.length - 1].end - words[0].start : 0;
+    speechOut = {
+      language: t.language ?? null,
+      wordsPerMinute: spoken > 5 ? Math.round((words.length / spoken) * 60) : null,
+      firstWordSec: words.length ? r2(words[0].start) : null,
+    };
+  }
+
+  // Qué suena (YAMNet): música, voz y efectos con su familia. Un efecto mezclado muy por
+  // debajo de una voz continua no se distingue (medido): cuenta lo que se OYE.
+  let sound = null;
+  if (info.hasAudio) {
+    const patches = await classify(ffmpeg, path, { maxSec: MAX_SEC, log }).catch((e) => {
+      log(`Could not classify the sound of ${path}: ${e.message}`);
+      return null;
+    });
+    if (patches) sound = soundProfile(patches, { duration, cutTimes });
+  }
+
+  const heights = text.map((b) => b.h);
+  const ys = text.map((b) => b.y + b.h / 2);
+  const faceH = median(faceSamples.map((s) => s.h));
+  return {
+    path,
+    format: { width: info.width, height: info.height, aspect: aspectOf(info.width, info.height) },
+    durationSec: r2(info.duration),
+    shots: {
+      count: shots.length,
+      medianSec: r2(median(shots)),
+      meanSec: r2(shots.reduce((a, b) => a + b, 0) / Math.max(1, shots.length)),
+      cutsPerMinute: r2((cutTimes.length / duration) * 60),
+      firstCutSec: cutTimes.length ? cutTimes[0] : null,
+    },
+    captions: {
+      coverage: checked ? r2(textSec.size / checked) : 0,
+      position: positionOf(median(ys)),
+      size: textSizeOf(median(heights)),
+      changesPerMinute: r2((textChanges / duration) * 60),
+    },
+    framing: {
+      facePresence: checked ? r2(faceSamples.length / checked) : 0,
+      faceHeight: r2(faceH),
+      shot: framingOf(faceH),
+      zoomsPerMinute: r2((countZooms(faceSamples, cutTimes) / duration) * 60),
+    },
+    motion: { value: motionN ? r2(motionSum / motionN) : null, energy: energyOf(motionN ? motionSum / motionN : null) },
+    color: {
+      palette: palette.map((c) => hex(...c)),
+      saturation: px ? r2(sat / px) : null,
+      brightness: px ? r2(val / px) : null,
+      warmth: px ? r2(warm / px) : null,
+    },
+    audio: {
+      lufs: info.hasAudio ? loudness(ffmpeg, path) : null,
+      speech: speechOut,
+      sound: sound && { musicShare: sound.musicShare, speechShare: sound.speechShare, sfxPerMinute: sound.sfxPerMinute, sfxOnCutsShare: sound.sfxOnCutsShare, sfxTypes: sound.sfxTypes },
+    },
+    ...(stills ? { stills: stillsOf(ffmpeg, path, duration, stills, index) } : {}),
+  };
+}
+
+/** Junta las medidas de varios vídeos: medianas para los números, lo más repetido para el resto. */
+export function combine(videos) {
+  const m = (f) => r2(median(videos.map(f)));
+  const style = {
+    format: { aspect: mode(videos.map((v) => v.format.aspect)) },
+    durationSec: m((v) => v.durationSec),
+    shots: {
+      medianSec: m((v) => v.shots.medianSec),
+      cutsPerMinute: m((v) => v.shots.cutsPerMinute),
+      firstCutSec: m((v) => v.shots.firstCutSec),
+    },
+    captions: {
+      coverage: m((v) => v.captions.coverage),
+      position: mode(videos.map((v) => v.captions.position)),
+      size: mode(videos.map((v) => v.captions.size)),
+      changesPerMinute: m((v) => v.captions.changesPerMinute),
+    },
+    framing: {
+      facePresence: m((v) => v.framing.facePresence),
+      shot: mode(videos.map((v) => v.framing.shot)),
+      zoomsPerMinute: m((v) => v.framing.zoomsPerMinute),
+    },
+    motion: { energy: mode(videos.map((v) => v.motion.energy)) },
+    color: {
+      palette: [...new Set(videos.flatMap((v) => v.color.palette.slice(0, 3)))].slice(0, 6),
+      saturation: m((v) => v.color.saturation),
+      brightness: m((v) => v.color.brightness),
+      warmth: m((v) => v.color.warmth),
+    },
+    audio: {
+      lufs: m((v) => v.audio.lufs),
+      wordsPerMinute: m((v) => v.audio.speech?.wordsPerMinute),
+      language: mode(videos.map((v) => v.audio.speech?.language)),
+      musicShare: m((v) => v.audio.sound?.musicShare),
+      sfxVideos: videos.filter((v) => v.audio.sound?.sfxTypes?.length).length,
+      sfxPerMinute: m((v) => v.audio.sound?.sfxPerMinute),
+      sfxOnCutsShare: m((v) => v.audio.sound?.sfxOnCutsShare),
+      // Las familias que se oyen en cualquiera de los vídeos, de más a menos.
+      sfxTypes: (() => {
+        const n = {};
+        for (const v of videos) for (const t of v.audio.sound?.sfxTypes ?? []) n[t.family] = (n[t.family] ?? 0) + t.count;
+        return Object.entries(n).sort((a, b) => b[1] - a[1]).map(([family]) => family);
+      })(),
+    },
+  };
+  return style;
+}
+
+/** El estilo en frases, para leerlo una persona o un modelo. Solo lo medido. */
+export function describe(s, n) {
+  const out = [];
+  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)
+    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(
+      s.captions.coverage >= 0.15
+        ? `Text on screen ${Math.round(s.captions.coverage * 100)} % of the time${s.captions.position ? `, ${s.captions.position}` : ''}${s.captions.size ? `, ${s.captions.size}` : ''}${s.captions.changesPerMinute != null ? `; it changes ${s.captions.changesPerMinute} times a minute (${s.captions.changesPerMinute >= 40 ? 'word by word' : s.captions.changesPerMinute >= 15 ? 'phrase by phrase' : 'few, long-lasting texts'})` : ''}.`
+        : 'Almost no text on screen.',
+    );
+  if (s.framing.facePresence != null)
+    out.push(
+      s.framing.facePresence >= 0.3
+        ? `A face in ${Math.round(s.framing.facePresence * 100)} % of the video${s.framing.shot ? `, framed ${s.framing.shot}` : ''}; ${s.framing.zoomsPerMinute ?? 0} zooms or punch-ins per minute.`
+        : 'Mostly without a face on screen.',
+    );
+  if (s.motion.energy) out.push(`${s.motion.energy[0].toUpperCase()}${s.motion.energy.slice(1)} motion.`);
+  if (s.color.palette.length)
+    out.push(
+      `Colours ${s.color.palette.join(', ')}; ${s.color.saturation >= 0.45 ? 'saturated' : s.color.saturation <= 0.2 ? 'muted' : 'natural'}, ${s.color.brightness >= 0.6 ? 'bright' : s.color.brightness <= 0.35 ? 'dark' : 'balanced'}, ${s.color.warmth >= 0.05 ? 'warm' : s.color.warmth <= -0.05 ? 'cool' : 'neutral'} grade.`,
+    );
+  if (s.audio.lufs != null) out.push(`Mixed at about ${Math.round(s.audio.lufs)} LUFS.`);
+  if (s.audio.musicShare != null)
+    out.push(s.audio.musicShare >= 0.2 ? `Music under ${Math.round(s.audio.musicShare * 100)} % of the video.` : 'Little or no music.');
+  if (s.audio.sfxPerMinute != null) {
+    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.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.`,
+    );
+  }
+  if (s.audio.wordsPerMinute != null) out.push(`Speech at ${s.audio.wordsPerMinute} words per minute${s.audio.language ? ` (${s.audio.language})` : ''}.`);
+  return out;
+}
+
+/** Mide 1–5 vídeos y devuelve el estilo (números + frases) y cada vídeo por separado. */
+export async function measureStyle({ ffmpeg, ffprobe, paths, speech = null, stills = null, log = () => {} }) {
+  if (!Array.isArray(paths) || !paths.length || paths.length > MAX_STYLE_VIDEOS) throw new Error(`style measure takes 1 to ${MAX_STYLE_VIDEOS} videos`);
+  // Todo comprobado antes de cargar un modelo: salir con un error con onnxruntime cargado
+  // aborta el proceso en vez de devolver el mensaje.
+  for (const path of paths) {
+    const info = probe(ffprobe, path);
+    if (!info.hasVideo || !(info.duration > 0)) throw new Error(`${path} has no video: style measure needs the videos themselves`);
+  }
+  const videos = [];
+  for (const path of paths) {
+    log(`Measuring ${path}…`);
+    videos.push(await measureVideo({ ffmpeg, ffprobe, path, speech, stills, index: videos.length + 1, log }));
+  }
+  const measured = combine(videos);
+  const out = { version: STYLE_VERSION, videos: videos.length, measured, summary: describe(measured, videos.length), perVideo: videos };
+  if (stills) out.stills = videos.flatMap((v) => v.stills ?? []);
+  return out;
+}

package/src/binaries.json

@@ -109,6 +109,20 @@
         "label": "the text detector",
         "source": "opencv/text_detection_ppocr@c299e81 (Apache-2.0)"
       },
+      "yamnet": {
+        "file": "yamnet.onnx",
+        "size": 166464,
+        "sha256": "d4459cb7fb460e44252ac0408b3718c02ec1286c467a14abaf2ef412fbc0194c",
+        "label": "the sound classifier",
+        "source": "qualcomm/YamNet v0.63.0, ONNX float (port of torch_audioset, MIT; AudioSet classes from tensorflow/models, Apache-2.0)",
+        "extra": [
+          {
+            "file": "yamnet.data",
+            "size": 14915108,
+            "sha256": "0b4de0b14bf2b528d51e3cd84e2d3e2ae826b942fbec6001c654605f1f2ceb60"
+          }
+        ]
+      },
       "clip_vision": {
         "file": "clip-vit-b32-vision.onnx",
         "size": 351685709,

package/src/cli.mjs

@@ -17,6 +17,7 @@ import { frames, probe } from './analysis/media.mjs';
 import { serve } from './analysis/serve.mjs';
 import { creatorJob } from './creator/job.mjs';
 import { fetchAll } from './fetch.mjs';
+import { measureStyle } from './analysis/style.mjs';
 
 const PKG_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
 const PKG = JSON.parse(readFileSync(join(PKG_DIR, 'package.json'), 'utf8'));
@@ -196,6 +197,29 @@ const commands = {
     } else console.log(json);
   },
 
+  // El estilo de edición de alguien, medido en 2–3 vídeos suyos (ADR-0023 E3).
+  async style(argv) {
+    const [sub, ...rest] = argv;
+    const { pos, opts } = parseArgs(rest, { speech: 'bool', lang: 'str', model: 'str', output: 'str', stills: 'str' });
+    const inputs = pos.map((p) => resolve(p));
+    if (sub !== 'measure' || !inputs.length || inputs.length > 5 || inputs.some((p) => !existsSync(p))) {
+      fail('Usage: ignix-editor style measure <video> [<video> …] (1–5, best 2–3) [--speech] [--lang es] [--stills work/style] [-o style.json]');
+    }
+    const ffmpeg = await ensureTool('ffmpeg', log);
+    const ffprobe = await ensureTool('ffprobe', log);
+    const speech = opts.speech
+      ? { whisper: await ensureTool('whisper', log), model: await ensureWhisperModel(opts.model ?? 'small', log), language: opts.lang ?? null }
+      : null;
+    const style = await measureStyle({ ffmpeg, ffprobe, paths: inputs, speech, stills: opts.stills ? resolve(opts.stills) : null, log });
+    const json = JSON.stringify(style, null, 1);
+    if (opts.output) {
+      mkdirSync(dirname(resolve(opts.output)), { recursive: true });
+      writeFileSync(resolve(opts.output), json);
+      log(style.summary.join('\n'));
+      console.log(resolve(opts.output));
+    } else console.log(json);
+  },
+
   // Dónde está la cara a lo largo del vídeo, para encuadrar en vertical siguiéndola. YuNet sobre
   // onnxruntime (igual en Mac y en Windows); el motor y el modelo se descargan la primera vez.
   async faces(argv) {
@@ -304,6 +328,7 @@ const commands = {
   ignix-editor preview [folder]                live preview in the browser
   ignix-editor transcribe <file> [--lang es] [--script "text"] [-o words.json]
   ignix-editor faces <video> [--every 0.2] [-o faces.json]   where the face is, smoothed
+  ignix-editor style measure <video>… [--speech] [--stills dir] [-o style.json]   someone's editing style, measured on 2–3 of their videos
   ignix-editor ffmpeg|ffprobe <args>           Ignix Editor's own ffmpeg
   ignix-editor skills add                      installs the skill for Claude
   ignix-editor fetch [--whisper small] [--no-analysis]   downloads everything up front (each file SHA-256-checked)

package/src/runtime/ignix-frame.js

@@ -72,7 +72,7 @@
 
   // Registra la línea de tiempo: un único reloj que llama a render(t, fotograma).
   function run({ id, duration, fps = 30 }, render) {
-    if (!window.gsap) throw new Error('ignix-frame: carga GSAP antes que este fichero');
+    if (!window.gsap) throw new Error('ignix-frame: GSAP is not loaded. Put <script src="assets/gsap.min.js"></script> right above <script src="ignix-frame.js"></script>.');
     if (!id) throw new Error('ignix-frame: falta id (el data-composition-id del nodo raíz)');
     const last = Math.max(0, Math.round(duration * fps) - 1);
     const draw = (sec) => {

package/src/validate.mjs

@@ -58,6 +58,16 @@ export function validateHtml(file) {
     const font = /fonts\.(googleapis|gstatic)\.com|use\.typekit|fonts\.bunny/.test(m[0]);
     issues.push({ level: (tag === 'script' || tag === 'link') && !font ? 'warning' : 'error', line: lineOf(src, m.index), rule: 'network_asset', msg: `<${tag}> loads something from the internet. Download it into assets/: the render must not depend on the network.` });
   }
+  // ignix-frame.js necesita GSAP cargado ANTES (un agente reescribió el index.html sin él y el
+  // render se quedó quieto: 2026-10-06).
+  const scripts = [...src.matchAll(/<script\b[^>]*\bsrc\s*=\s*["']([^"']+)["']/gi)].map((m) => ({ src: m[1], at: m.index }));
+  const frame = scripts.find((x) => /(^|\/)ignix-frame\.js$/.test(x.src));
+  if (frame) {
+    const gsap = scripts.find((x) => /gsap(\.min)?\.js$/i.test(x.src));
+    if (!gsap || gsap.at > frame.at) {
+      issues.push({ level: 'error', line: lineOf(src, frame.at), rule: 'gsap_before_frame', msg: `ignix-frame.js needs GSAP loaded first. Put <script src="assets/gsap.min.js"></script> right above <script src="ignix-frame.js"></script> (as \`ignix-editor init\` writes it).` });
+    }
+  }
   for (const m of src.matchAll(/@import\s+url\(\s*["']?https?:|url\(\s*["']?https?:\/\/fonts\./gi)) {
     issues.push({ level: 'error', line: lineOf(src, m.index), rule: 'network_font', msg: 'Font loaded from the internet: it arrives late in some frames. Use @font-face with a file in assets/fonts/.' });
   }

package/vendor/hyperframes/UPSTREAM.json

@@ -8,6 +8,8 @@
     "no-telemetry",
     "no-auto-update",
     "mf-encoder",
-    "no-desktop-promo"
+    "no-desktop-promo",
+    "chrome-first-launch",
+    "log-prefix"
   ]
 }

package/vendor/hyperframes/dist/checkBrowser-RPMO4OW5.js

@@ -115,7 +115,7 @@ async function preResolveHostileMediaProxies(projectDir, html, autoProxyOverride
     codecMap = await scanProjectMediaCodecMap(projectDir, [{ html }]);
   } catch (err) {
     console.error(
-      `[hyperframes] media proxy pre-resolve: scan failed (${normalizeErrorMessage(err)})`
+      `[ignix-editor] media proxy pre-resolve: scan failed (${normalizeErrorMessage(err)})`
     );
     return;
   }
@@ -135,7 +135,7 @@ async function preResolveHostileMediaProxies(projectDir, html, autoProxyOverride
   );
   const failed = results.filter((result) => result.status === "rejected").length;
   console.error(
-    `[hyperframes] media proxy pre-resolve: ${results.length - failed}/${results.length} ready, ${failed} failed (${Date.now() - startedAt}ms)`
+    `[ignix-editor] media proxy pre-resolve: ${results.length - failed}/${results.length} ready, ${failed} failed (${Date.now() - startedAt}ms)`
   );
 }
 async function runBrowserCheck(project, options, motion, runGrid) {
@@ -226,9 +226,9 @@ async function captureFindingCrops(project, options, requests) {
     await server.close();
   }
 }
-var MEDIA_PROXY_MARKER_PREFIX = "[hyperframes] runtime_media_proxy_";
-var MEDIA_PROXY_UNAVAILABLE_MARKER = "[hyperframes] runtime_media_proxy_unavailable";
-var WEB_AUDIO_BYPASS_MARKER = "[hyperframes] runtime_web_audio_bypass";
+var MEDIA_PROXY_MARKER_PREFIX = "[ignix-editor] runtime_media_proxy_";
+var MEDIA_PROXY_UNAVAILABLE_MARKER = "[ignix-editor] runtime_media_proxy_unavailable";
+var WEB_AUDIO_BYPASS_MARKER = "[ignix-editor] runtime_web_audio_bypass";
 var WEBGPU_RUNTIME_FAILURE = /\b(?:GPUValidationError|GPUOutOfMemoryError|GPUInternalError)\b|WebGPU uncaptured error|(?:destroyed\b.*\b(?:GPU )?(?:resource|buffer|texture)\b.*\bsubmit)|(?:(?:GPU )?(?:resource|buffer|texture)\b.*\bdestroyed\b.*\bsubmit)/i;
 function isWebGpuRuntimeFailure(text) {
   return WEBGPU_RUNTIME_FAILURE.test(text);

package/vendor/hyperframes/dist/chunk-2YN64IN5.js

@@ -4402,7 +4402,7 @@ function swallow(label, error) {
     }
   }
   if (w.__hfDebug || w.__HYPERFRAMES_DEBUG) {
-    console.debug(`[hyperframes] ${label} swallowed:`, error);
+    console.debug(`[ignix-editor] ${label} swallowed:`, error);
   }
 }
 

package/vendor/hyperframes/dist/chunk-4PFZPP2N.js

@@ -226,7 +226,7 @@ async function findFromHyperframesCache() {
     const code = err?.code;
     const suffix = code ? ` (${code})` : "";
     console.warn(
-      `[hyperframes] Browser cache read failed${suffix}: ${normalizeErrorMessage(err)}. Falling back to system Chrome or a fresh download.`
+      `[ignix-editor] Browser cache read failed${suffix}: ${normalizeErrorMessage(err)}. Falling back to system Chrome or a fresh download.`
     );
     installed = [];
   }
@@ -318,7 +318,7 @@ function warnSystemFallbackOnce(executablePath) {
   if (isHeadlessShellBinary(executablePath)) return;
   _warnedSystemFallback = true;
   console.warn(
-    `[hyperframes] Using system Chrome at ${executablePath}; HeadlessExperimental.beginFrame is unavailable in regular Chrome builds, so the perf-optimized capture path falls back to screenshot mode. Install chrome-headless-shell for the optimized path:
+    `[ignix-editor] Using system Chrome at ${executablePath}; HeadlessExperimental.beginFrame is unavailable in regular Chrome builds, so the perf-optimized capture path falls back to screenshot mode. Install chrome-headless-shell for the optimized path:
   npx @puppeteer/browsers install chrome-headless-shell
 (Or set HYPERFRAMES_BROWSER_PATH to point at an existing chrome-headless-shell binary.)`
   );
@@ -514,7 +514,7 @@ async function downloadBrowser(options) {
       runInstall,
       clearStaging,
       (err) => console.warn(
-        `[hyperframes] Downloaded browser archive was corrupt (${normalizeErrorMessage(err)}); re-downloading.`
+        `[ignix-editor] Downloaded browser archive was corrupt (${normalizeErrorMessage(err)}); re-downloading.`
       )
     );
     return { executablePath: moveStagedInstallIntoCache(stagingDir, staged), source: "download" };

package/vendor/hyperframes/dist/chunk-4THIAPBL.js

@@ -53,7 +53,7 @@ async function maybePromptRenderFeedback(opts) {
     config.lastFeedbackPromptAt = config.renderSuccessCount;
     writeConfig(config);
     console.log(
-      c.dim("  [hyperframes] ") + c.dim("Agent feedback: ") + c.accent('hyperframes feedback --rating <0-10> --comment "..."')
+      c.dim("  [ignix-editor] ") + c.dim("Agent feedback: ") + c.accent('hyperframes feedback --rating <0-10> --comment "..."')
     );
     return;
   }

package/vendor/hyperframes/dist/chunk-EOVYQ3IG.js

@@ -39,7 +39,7 @@ function createFileAtomically(filePath, content, operations = fs) {
     try {
       operations.unlinkSync(tempPath);
     } catch (error) {
-      console.warn(`[hyperframes] created ${filePath} but could not remove ${tempPath}: ${error}`);
+      console.warn(`[ignix-editor] created ${filePath} but could not remove ${tempPath}: ${error}`);
     }
   });
 }

package/vendor/hyperframes/dist/chunk-FCSIGXXP.js

@@ -211,7 +211,7 @@ async function chromeLaunchOutcome(executablePath, found, signal) {
   try {
     const { stdout } = await runCancellableProcess(executablePath, ["--version"], {
       signal,
-      timeoutMs: 5e3,
+      timeoutMs: 6e4, // ignix-editor: primera apertura de una copia nueva
       maxBufferBytes: 64 * 1024
     });
     return { ...found, versionMajor: extractMajorVersion(stdout) };