Deploy clipwhit

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+brand/cover.png filter=lfs diff=lfs merge=lfs -text
+brand/image-1-output.png filter=lfs diff=lfs merge=lfs -text
+brand/phone-clip.png filter=lfs diff=lfs merge=lfs -text
+brand/shot-clips.png filter=lfs diff=lfs merge=lfs -text
+brand/shot-moments.png filter=lfs diff=lfs merge=lfs -text
+sample/growth-show-sample.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,42 @@
 ---
-title: Clipwhit
-emoji: 🌍
-colorFrom: pink
-colorTo: blue
+title: Clipwhit — Podcast to Captioned Shorts
+emoji: ✂️
+colorFrom: purple
+colorTo: yellow
 sdk: static
+app_file: index.html
 pinned: false
+license: other
+short_description: Podcast to 9:16 captioned shorts in your browser, no upload
+tags:
+  - video
+  - shorts
+  - podcast
+  - captions
+  - whisper
+  - transformers.js
+  - mediapipe
+  - ffmpeg
+  - webgpu
+models:
+  - onnx-community/whisper-tiny.en
+  - onnx-community/whisper-base.en
+  - onnx-community/whisper-base
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Clipwhit: podcast to captioned shorts, in your browser
+
+Drop a long podcast, webinar or stream. Clipwhit:
+
+1. transcribes it with Whisper **on your device** (transformers.js, WebGPU with a CPU fallback);
+2. scores every 20–55 s stretch for a scroll-stopping first line, a finished payoff, pace, energy and clean cuts;
+3. crops each moment to 9:16 around the speaker's face (MediaPipe face detector);
+4. burns in animated word-by-word captions and renders the MP4 with ffmpeg.wasm;
+5. writes a title, a description and hashtags per clip. Export MP4, SRT, or everything as one ZIP.
+
+**Your video is never uploaded.** Free: 3 clips per video at 720p with a small corner mark. Pro ($12/month, $120/year or $39 lifetime at launch) unlocks unlimited clips, 1080p, no mark, every caption style, a brand kit and a batch queue. Agency ($49/month) adds a brand kit per client and bulk export.
+
+- Full app, pricing and FAQ: https://clipwhit.cybermax-tools.workers.dev/
+- Free transcript-only tool: [Podcast Hook Finder](https://clipwhit.cybermax-tools.workers.dev/hooks/)
+
+Built by CyberMax. © 2026 CyberMax. All rights reserved. Whisper weights Apache-2.0 (onnx-community builds); transformers.js Apache-2.0, MediaPipe Apache-2.0 and @ffmpeg/core loaded from the jsDelivr CDN; @ffmpeg/ffmpeg wrapper MIT (vendor/ffmpeg/NOTICE.txt); fonts Anton and Inter (SIL OFL). The sample episode uses a public-domain generated face (Wikimedia Commons "Woman 1.jpg") and synthetic speech.

app.js

@@ -0,0 +1,534 @@
+// Clipwhit app: long video -> Whisper transcript -> ranked moments -> 9:16 face-tracked, captioned shorts.
+// Everything runs in this browser tab (transformers.js, MediaPipe, ffmpeg.wasm). The only optional network call with
+// your content is the AI re-rank, which sends transcript text (never audio or video) and is off unless you tick it.
+// © 2026 CyberMax. All rights reserved.
+import { FFmpeg } from './vendor/ffmpeg/index.js';
+import { toSegments, toWords, envelope, pickMoments, clock } from './lib/scoring.js';
+import { STYLES, buildAss, buildSrt } from './lib/captions.js';
+import { cropBox, cropPath, cropExpr, thinKeys } from './lib/crop.js';
+import { zipParts } from './lib/zip.js';
+import * as lic from './lib/licence.js';
+
+const API = /\.workers\.dev$/.test(location.hostname) || location.hostname === 'localhost' && location.port === '8787'
+  ? location.origin : 'https://clipwhit.cybermax-tools.workers.dev';
+const CORE = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm';
+const MP = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.21';
+const FACE_MODEL = 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite';
+const FONTS = { Anton: 'https://cdn.jsdelivr.net/fontsource/fonts/anton@latest/latin-400-normal.ttf', Inter: 'https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-800-normal.ttf' };
+const FREE_CLIPS = 3;
+const MARK = 'Made with Clipwhit';
+
+const $ = (id) => document.getElementById(id);
+const el = (tag, attrs = {}, ...kids) => {
+  const n = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'class') n.className = v; else if (k.startsWith('on')) n.addEventListener(k.slice(2), v); else if (v !== false && v != null) n.setAttribute(k, v === true ? '' : v);
+  }
+  for (const c of kids.flat()) if (c != null) n.append(c.nodeType ? c : document.createTextNode(String(c)));
+  return n;
+};
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const store = { get: (k, d) => { try { return JSON.parse(localStorage.getItem(k)) ?? d; } catch { return d; } }, set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} } };
+const baseName = (n) => String(n || 'video').replace(/\.[^.]+$/, '').replace(/[^\w.-]+/g, '-').slice(0, 60) || 'video';
+const parseClock = (s) => { const p = String(s).trim().split(':').map(Number); if (p.some((x) => !Number.isFinite(x))) return NaN; return p.reduce((a, b) => a * 60 + b, 0); };
+
+// ---------------------------------------------------------------- state
+const S = {
+  tier: 'free', jobs: [], active: null, busy: false, ff: null, ffLoaded: false, detector: null, worker: null,
+  timings: {}, // measured per stage, shown in the status line and read by the test
+};
+window.clipwhit = S; // test/automation hook
+
+function setStatus(t, frac) {
+  $('status').textContent = t;
+  if (frac != null) $('bar').style.width = `${Math.round(Math.max(0, Math.min(1, frac)) * 100)}%`;
+}
+const pro = () => S.tier === 'pro' || S.tier === 'agency';
+
+// ---------------------------------------------------------------- licence
+function renderTier() {
+  const t = S.tier;
+  $('tier').textContent = t === 'agency' ? 'Agency' : t === 'pro' ? 'Pro' : 'Free';
+  $('tier').dataset.tier = t;
+  document.body.dataset.tier = t;
+  $('res').querySelector('option[value="1080"]').disabled = !pro();
+  if (!pro()) $('res').value = '720';
+  for (const o of $('style').options) o.disabled = !pro() && !STYLES[o.value].free;
+  if (!pro() && !STYLES[$('style').value].free) $('style').value = 'pop';
+  $('kitbox').hidden = !pro();
+  $('kitnew').hidden = S.tier !== 'agency';
+  $('upsell').hidden = pro();
+  renderKits();
+  if (S.active) renderMoments(S.active);
+}
+
+async function applyKey(key, force = false) {
+  const r = await lic.verify(API, key, { force });
+  if (r.valid) { S.tier = r.tier === 'agency' ? 'agency' : 'pro'; $('keymsg').textContent = `${S.tier === 'agency' ? 'Agency' : 'Pro'} unlocked on this browser.`; }
+  else { S.tier = 'free'; $('keymsg').textContent = r.reason === 'offline' ? 'Could not reach the licence server; try again when online.' : 'That key was not accepted. Check it, or buy Pro below.'; }
+  renderTier();
+  return r;
+}
+
+// ---------------------------------------------------------------- brand kits (Pro: one, Agency: many)
+const kits = () => store.get('clipwhit.kits', [{ id: 'k1', name: 'My brand', base: '#FFFFFF', hi: '#FFD23F', font: 'Anton', handle: '' }]);
+function renderKits() {
+  const list = kits(), sel = $('kit');
+  const cur = store.get('clipwhit.kit', list[0].id);
+  sel.replaceChildren(el('option', { value: '' }, 'No brand kit (style colours)'), ...list.map((k) => el('option', { value: k.id, selected: k.id === cur }, k.name)));
+  const k = list.find((x) => x.id === sel.value);
+  for (const f of ['name', 'base', 'hi', 'font', 'handle']) $(`kit-${f}`).value = k ? k[f] : '';
+  $('kitfields').hidden = !k;
+}
+function saveKit() {
+  const list = kits(), id = $('kit').value, k = list.find((x) => x.id === id);
+  if (!k) return;
+  for (const f of ['name', 'base', 'hi', 'font', 'handle']) k[f] = $(`kit-${f}`).value.slice(0, 40);
+  store.set('clipwhit.kits', list);
+  store.set('clipwhit.kit', id);
+  $('kit').selectedOptions[0].textContent = k.name;
+}
+function activeKit() {
+  if (!pro()) return null;
+  return kits().find((x) => x.id === $('kit').value) || null;
+}
+
+// ---------------------------------------------------------------- engines (lazy)
+async function blobURL(url, type) {
+  const r = await fetch(url);
+  if (!r.ok) throw new Error(`download failed (${r.status})`);
+  return URL.createObjectURL(new Blob([await r.arrayBuffer()], { type }));
+}
+async function ffmpeg() {
+  if (S.ffLoaded) return S.ff;
+  const t0 = performance.now();
+  setStatus('Loading the video engine (ffmpeg.wasm, about 31 MB, cached after the first time)…');
+  S.ff = new FFmpeg();
+  S.ff.on('log', ({ message }) => { S.lastLog = (S.lastLog || []).slice(-40); S.lastLog.push(message); });
+  await S.ff.load({ coreURL: await blobURL(`${CORE}/ffmpeg-core.js`, 'text/javascript'), wasmURL: await blobURL(`${CORE}/ffmpeg-core.wasm`, 'application/wasm') });
+  await S.ff.createDir('/fonts');
+  for (const [name, url] of Object.entries(FONTS)) {
+    const r = await fetch(url);
+    await S.ff.writeFile(`/fonts/${name}.ttf`, new Uint8Array(await r.arrayBuffer()));
+  }
+  await S.ff.createDir('/in');
+  S.ffLoaded = true;
+  S.timings.engineLoad = (performance.now() - t0) / 1000;
+  return S.ff;
+}
+async function mountFile(job) {
+  const ff = await ffmpeg();
+  if (S.mounted === job.id) return `/in/${job.file.name}`;
+  if (S.mounted) { try { await ff.unmount('/in'); } catch {} }
+  await ff.mount('WORKERFS', { files: [job.file] }, '/in');
+  S.mounted = job.id;
+  return `/in/${job.file.name}`;
+}
+async function faceDetector() {
+  if (S.detector) return S.detector;
+  const { FaceDetector, FilesetResolver } = await import(`${MP}/vision_bundle.mjs`);
+  const fs = await FilesetResolver.forVisionTasks(`${MP}/wasm`);
+  S.detector = await FaceDetector.createFromOptions(fs, { baseOptions: { modelAssetPath: FACE_MODEL, delegate: 'CPU' }, runningMode: 'IMAGE', minDetectionConfidence: 0.5 });
+  return S.detector;
+}
+
+// ---------------------------------------------------------------- jobs
+let nextId = 1;
+async function addFiles(files) {
+  const list = [...files].filter((f) => /^(video|audio)\//.test(f.type) || /\.(mp4|mov|m4v|webm|mkv|mp3|m4a|wav)$/i.test(f.name));
+  if (!list.length) return setStatus('That is not a video or audio file. Try MP4, MOV, WebM, MKV, MP3 or M4A.');
+  if (!pro() && (list.length > 1 || S.jobs.length)) {
+    $('batchmsg').hidden = false;
+    S.jobs = [];
+  }
+  for (const file of (pro() ? list : list.slice(0, 1))) {
+    const job = { id: nextId++, file, name: file.name, url: URL.createObjectURL(file), status: 'ready', moments: [], clips: [] };
+    await probe(job);
+    S.jobs.push(job);
+  }
+  select(S.jobs[S.jobs.length - (pro() ? list.length : 1)]);
+  renderQueue();
+}
+function probe(job) {
+  return new Promise((res) => {
+    const v = el('video', { preload: 'metadata', muted: true, src: job.url });
+    const timer = setTimeout(() => fallback(), 4000);
+    const fallback = async () => {
+      clearTimeout(timer); v.onloadedmetadata = v.onerror = null;
+      // The browser can't read this codec/container: ask ffmpeg.wasm instead (loads the engine once).
+      try {
+        const ff = await ffmpeg();
+        const path = await mountFile(job);
+        S.lastLog = [];
+        await ff.exec(['-hide_banner', '-i', path]);
+        const log = S.lastLog.join('\n');
+        const d = log.match(/Duration: (\d+):(\d+):([\d.]+)/);
+        const vs = log.match(/Video:.*?(\d{2,5})x(\d{2,5})/);
+        if (!d) throw new Error('no duration');
+        job.duration = +d[1] * 3600 + +d[2] * 60 + +d[3];
+        if (vs) { job.w = +vs[1]; job.h = +vs[2]; }
+        job.nativePreview = false;
+      } catch { job.duration = 0; job.error = 'That file could not be read. Convert it to MP4 (H.264) first.'; }
+      res();
+    };
+    v.onloadedmetadata = () => {
+      if (!v.duration || !Number.isFinite(v.duration) || (v.videoWidth === 0 && /^video\//.test(job.file.type))) return fallback();
+      clearTimeout(timer); job.duration = v.duration; job.w = v.videoWidth; job.h = v.videoHeight; job.nativePreview = true; res();
+    };
+    v.onerror = () => fallback();
+  });
+}
+function select(job) {
+  S.active = job;
+  $('work').hidden = false;
+  $('preview').src = job.url;
+  const d = job.duration || 0;
+  $('fileinfo').textContent = `${job.name} · ${clock(d)}${job.w ? ` · ${job.w}×${job.h}` : ' · audio only'}`;
+  $('from').value = clock(job.range?.[0] ?? 0);
+  $('to').value = clock(job.range?.[1] ?? d);
+  $('find').disabled = S.busy || !!job.error;
+  if (job.error) setStatus(job.error);
+  else setStatus(job.moments.length ? `${job.moments.length} moments found. Pick clips and press Render.` : 'Ready. Choose a range if you like, then press Find the best moments.');
+  renderMoments(job);
+  renderResults(job);
+}
+function renderQueue() {
+  $('queue').hidden = S.jobs.length < 2;
+  $('queuelist').replaceChildren(...S.jobs.map((j) => el('li', {}, el('button', { class: `q${j === S.active ? ' on' : ''}`, type: 'button', onclick: () => select(j) }, j.name), ` ${j.status}`)));
+}
+
+// ---------------------------------------------------------------- 1. audio + transcript
+async function extractAudio(job, start, end) {
+  const t0 = performance.now();
+  try {
+    const ff = await ffmpeg();
+    const path = await mountFile(job);
+    setStatus('Reading the audio track in your browser…', 0.02);
+    const rc = await ff.exec(['-hide_banner', '-ss', String(start), '-t', String(end - start), '-i', path, '-vn', '-ac', '1', '-ar', '16000', '-f', 's16le', '/audio.raw']);
+    if (rc !== 0) throw new Error('ffmpeg could not read the audio');
+    const raw = await ff.readFile('/audio.raw');
+    await ff.deleteFile('/audio.raw');
+    const pcm = new Int16Array(raw.buffer, raw.byteOffset, Math.floor(raw.byteLength / 2));
+    const out = new Float32Array(pcm.length);
+    for (let i = 0; i < pcm.length; i++) out[i] = pcm[i] / 32768;
+    S.timings.audio = (performance.now() - t0) / 1000;
+    return out;
+  } catch (e) {
+    // Fallback: the browser's own decoder (whole file in memory; fine for shorter files)
+    const ctx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+    try {
+      const buf = await ctx.decodeAudioData(await job.file.arrayBuffer());
+      const ch = buf.getChannelData(0);
+      S.timings.audio = (performance.now() - t0) / 1000;
+      return ch.slice(Math.floor(start * 16000), Math.floor(end * 16000));
+    } finally { ctx.close?.(); }
+  }
+}
+
+function transcribe(audio, model) {
+  return new Promise((resolve, reject) => {
+    if (!S.worker) S.worker = new Worker(new URL('./asr-worker.js', import.meta.url), { type: 'module' });
+    const total = Math.max(1, Math.ceil(audio.length / 16000 / 25));
+    const files = new Map();
+    const t0 = performance.now();
+    let tLoad = null;
+    S.worker.onerror = (e) => { e.preventDefault?.(); reject(new Error(e.message || 'the speech engine could not start')); };
+    S.worker.onmessage = ({ data: m }) => {
+      if (m.type === 'load' && m.file && m.total) {
+        files.set(m.file, [m.loaded || 0, m.total]);
+        let l = 0, t = 0; for (const [a, b] of files.values()) { l += a; t += b; }
+        setStatus(`Downloading the speech model: ${(l / 1e6).toFixed(0)} of ${(t / 1e6).toFixed(0)} MB (cached afterwards)`, t ? l / t : 0);
+      } else if (m.type === 'info') setStatus(m.message);
+      else if (m.type === 'ready') { tLoad = performance.now(); S.timings.modelLoad = (tLoad - t0) / 1000; S.timings.device = m.device; setStatus(`Transcribing on your ${m.device === 'webgpu' ? 'GPU (WebGPU)' : 'CPU (WASM)'}…`, 0); }
+      else if (m.type === 'partial') $('partial').textContent = ($('partial').textContent + m.text).slice(-220);
+      else if (m.type === 'chunk') { setStatus(`Transcribing… part ${Math.min(m.done, total)} of about ${total}`, m.done / total); $('partial').textContent = ''; }
+      else if (m.type === 'done') { S.timings.transcribe = (performance.now() - (tLoad || t0)) / 1000; resolve(m); }
+      else if (m.type === 'error') reject(new Error(m.message));
+    };
+    const copy = audio.slice();
+    S.worker.postMessage({ type: 'run', audio: copy, model, device: $('device').value === 'auto' ? ('gpu' in navigator ? 'webgpu' : 'wasm') : $('device').value }, [copy.buffer]);
+  });
+}
+
+async function aiRerank(job) {
+  try {
+    const items = job.moments.slice(0, 12).map((m) => ({ id: m.id, text: m.text.slice(0, 1200) }));
+    const r = await fetch(`${API}/api/rank`, { method: 'POST', headers: { 'content-type': 'application/json', ...(lic.current().key ? { 'x-licence': lic.current().key } : {}) }, body: JSON.stringify({ items }) });
+    const j = await r.json();
+    if (!r.ok) return setStatus(j.message || 'AI re-rank is not available right now; the local ranking is used.');
+    for (const a of j.items || []) {
+      const m = job.moments.find((x) => x.id === a.id);
+      if (!m || !Number.isFinite(a.score)) continue;
+      m.ai = a.score;
+      m.score = Math.round((m.score + a.score * 0.8) * 100) / 100;
+      if (a.title) m.title = String(a.title).slice(0, 90);
+      if (Array.isArray(a.hashtags) && a.hashtags.length) m.hashtags = a.hashtags.slice(0, 5).map((h) => `#${String(h).replace(/^#/, '').replace(/[^\p{L}\p{N}_]/gu, '')}`);
+      m.reasons = [...m.reasons, `AI rated ${a.score}/10`];
+    }
+    job.moments.sort((a, b) => b.score - a.score);
+  } catch { setStatus('AI re-rank is not reachable; the local ranking is used.'); }
+}
+
+async function findMoments(job = S.active) {
+  if (S.busy || !job) return;
+  const start = Math.max(0, parseClock($('from').value) || 0);
+  let end = parseClock($('to').value);
+  if (!Number.isFinite(end) || end <= start) end = job.duration;
+  end = Math.min(end, job.duration);
+  if (end - start < 20) return setStatus('Pick a range of at least 20 seconds.');
+  job.range = [start, end];
+  S.busy = true; $('find').disabled = true; job.status = 'transcribing'; renderQueue();
+  const t0 = performance.now();
+  try {
+    const audio = await extractAudio(job, start, end);
+    const res = await transcribe(audio, $('model').value);
+    const segs = toSegments(res.chunks, end - start).map((s) => ({ ...s, start: s.start + start, end: s.end + start }));
+    job.segments = segs;
+    job.words = toWords(segs);
+    const env = envelope(audio);
+    job.env = { step: env.step, values: env.values, offset: start };
+    const shifted = { step: env.step, values: new Float32Array(Math.ceil(start / env.step) + env.values.length) };
+    shifted.values.set(env.values, Math.ceil(start / env.step));
+    job.moments = pickMoments(segs, shifted, { count: 12, minLen: +$('minlen').value, maxLen: +$('maxlen').value, target: (+$('minlen').value + +$('maxlen').value) / 2 });
+    if ($('ai').checked && job.moments.length) { setStatus('Asking the AI to re-rank the transcript moments (text only)…'); await aiRerank(job); }
+    job.moments.forEach((m, i) => { m.rank = i + 1; m.pick = i < FREE_CLIPS; });
+    job.status = `${job.moments.length} moments`;
+    S.timings.find = (performance.now() - t0) / 1000;
+    setStatus(job.moments.length ? `Found ${job.moments.length} moments in ${S.timings.find.toFixed(0)} s. The best ${Math.min(FREE_CLIPS, job.moments.length)} are ticked; press Render.` : 'No speech was found in that range.', 1);
+    renderMoments(job);
+  } catch (e) {
+    job.status = 'error';
+    setStatus(`Something went wrong: ${e.message || e}. Try the Tiny model, a shorter range, or Chrome/Edge.`);
+  } finally { S.busy = false; $('find').disabled = false; updateRenderBtn(); renderQueue(); }
+}
+
+// ---------------------------------------------------------------- moments UI
+function renderMoments(job) {
+  const box = $('moments');
+  $('momentsbox').hidden = !job?.moments.length;
+  if (!job?.moments.length) return box.replaceChildren();
+  box.replaceChildren(...job.moments.map((m, i) => {
+    const locked = !pro() && i >= FREE_CLIPS;
+    if (locked) m.pick = false;
+    const card = el('li', { class: `moment${locked ? ' locked' : ''}` },
+      el('label', { class: 'pick' }, el('input', { type: 'checkbox', checked: m.pick, disabled: locked, onchange: (e) => { m.pick = e.target.checked; updateRenderBtn(); } }), el('b', {}, `#${i + 1}`)),
+      el('div', { class: 'mbody' },
+        el('div', { class: 'mhead' },
+          el('span', { class: 'time' }, `${clock(m.start)}–${clock(m.end)} · ${Math.round(m.end - m.start)} s`),
+          el('span', { class: 'score', title: 'Moment score' }, `score ${m.score.toFixed(1)}`),
+          el('button', { type: 'button', class: 'mini', onclick: () => { const v = $('preview'); v.currentTime = m.start; v.play(); } }, '▶ Preview')),
+        el('input', { class: 'title', value: m.title, 'aria-label': 'Clip title', oninput: (e) => { m.title = e.target.value; } }),
+        el('p', { class: 'excerpt' }, m.text.length > 260 ? `${m.text.slice(0, 260)}…` : m.text),
+        el('div', { class: 'chips' }, ...m.reasons.slice(0, 4).map((r) => el('span', { class: 'chip' }, r)), el('span', { class: 'chip tags' }, m.hashtags.join(' '))),
+        el('div', { class: 'nudge' }, 'Start ', el('button', { type: 'button', class: 'mini', onclick: () => nudge(m, 'start', -3) }, '−3 s'), el('button', { type: 'button', class: 'mini', onclick: () => nudge(m, 'start', 3) }, '+3 s'),
+          ' End ', el('button', { type: 'button', class: 'mini', onclick: () => nudge(m, 'end', -3) }, '−3 s'), el('button', { type: 'button', class: 'mini', onclick: () => nudge(m, 'end', 3) }, '+3 s')),
+        locked ? el('p', { class: 'lockmsg' }, 'Free plan: 3 clips per video. ', el('a', { href: '#pricing' }, 'Unlock every moment with Pro')) : null));
+    return card;
+  }));
+  updateRenderBtn();
+}
+function nudge(m, k, d) {
+  m[k] = Math.max(0, Math.min(S.active.duration, m[k] + d));
+  if (m.end - m.start < 5) m[k] -= d;
+  renderMoments(S.active);
+}
+function updateRenderBtn() {
+  const n = S.active?.moments.filter((m) => m.pick).length || 0;
+  $('render').textContent = n ? `Render ${n} clip${n === 1 ? '' : 's'} (9:16, captions)` : 'Tick at least one moment';
+  $('render').disabled = !n || S.busy;
+}
+
+// ---------------------------------------------------------------- 2. face tracking + render
+async function trackFaces(job, m) {
+  if (!job.w) return [];
+  // Frames come from ffmpeg (not a <video> element), so any codec ffmpeg reads is tracked, in every browser.
+  const det = await faceDetector();
+  const ff = await ffmpeg();
+  const path = await mountFile(job);
+  const dur = m.end - m.start, fps = dur > 50 ? 0.67 : 1;
+  const W = 320, H = Math.round((W * job.h) / job.w / 2) * 2;
+  const rc = await ff.exec(['-hide_banner', '-ss', m.start.toFixed(2), '-t', dur.toFixed(2), '-i', path, '-an', '-vf', `fps=${fps},scale=${W}:${H}`, '-f', 'rawvideo', '-pix_fmt', 'rgba', '/frames.raw']);
+  if (rc !== 0) return [];
+  const raw = await ff.readFile('/frames.raw');
+  await ff.deleteFile('/frames.raw');
+  const size = W * H * 4, out = [];
+  for (let i = 0; (i + 1) * size <= raw.byteLength; i++) {
+    const img = new ImageData(new Uint8ClampedArray(raw.buffer, raw.byteOffset + i * size, size), W, H);
+    const faces = det.detect(img).detections || [];
+    // the biggest face is usually the person talking to camera
+    const f = faces.sort((a, b) => b.boundingBox.width * b.boundingBox.height - a.boundingBox.width * a.boundingBox.height)[0];
+    out.push({ t: i / fps, cx: f ? ((f.boundingBox.originX + f.boundingBox.width / 2) / W) * job.w : null });
+  }
+  return out;
+}
+
+async function renderClip(job, m, idx, total) {
+  const ff = await ffmpeg();
+  const path = await mountFile(job);
+  const res = pro() && $('res').value === '1080' ? 1080 : 720;
+  const OW = res, OH = Math.round((res * 16) / 9);
+  const kit = activeKit();
+  const t0 = performance.now();
+  setStatus(`Clip ${idx}/${total}: finding the face…`, 0);
+  const samples = await trackFaces(job, m);
+  const keys = job.w ? thinKeys(cropPath(samples, job.w, job.h), 24) : [];
+  const faceHits = samples.filter((s) => s.cx != null).length;
+  const tFace = (performance.now() - t0) / 1000;
+  const style = $('style').value;
+  const brand = kit ? { base: kit.base, hi: kit.hi, font: kit.font } : null;
+  const mark = pro() ? (kit?.handle || null) : MARK;
+  await ff.writeFile('/c.ass', buildAss(job.words, m.start, m.end, { style, brand, mark }));
+  let vf;
+  if (job.w) {
+    const { w, h } = cropBox(job.w, job.h);
+    vf = `crop=w=${w}:h=${h}:x='${cropExpr(keys)}':y=${Math.round((job.h - h) / 2)},scale=${OW}:${OH}:flags=bicubic,setsar=1,subtitles=filename=/c.ass:fontsdir=/fonts`;
+  } else {
+    vf = null; // audio-only source: captions on a plain background
+  }
+  const out = `/clip-${idx}.mp4`;
+  const t1 = performance.now();
+  const onProg = ({ progress }) => setStatus(`Clip ${idx}/${total}: rendering ${OW}×${OH} with captions… ${Math.round(Math.max(0, Math.min(1, progress)) * 100)}%`, progress);
+  ff.on('progress', onProg);
+  const dur = (m.end - m.start).toFixed(2);
+  const args = vf
+    ? ['-hide_banner', '-ss', m.start.toFixed(2), '-t', dur, '-i', path, '-vf', vf, '-r', '30', '-c:v', 'libx264', '-preset', 'ultrafast', '-crf', res === 1080 ? '21' : '23', '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', out]
+    : ['-hide_banner', '-f', 'lavfi', '-i', `color=c=0x14161f:s=${OW}x${OH}:r=30`, '-ss', m.start.toFixed(2), '-t', dur, '-i', path, '-vf', 'subtitles=filename=/c.ass:fontsdir=/fonts', '-map', '0:v', '-map', '1:a', '-shortest', '-c:v', 'libx264', '-preset', 'ultrafast', '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', out];
+  const rc = await ff.exec(args);
+  ff.off('progress', onProg);
+  if (rc !== 0) throw new Error(`the renderer stopped (${(S.lastLog || []).slice(-2).join(' ')})`);
+  const data = await ff.readFile(out);
+  // poster frame (shown before playback; also where a browser can't play H.264 inline)
+  let poster = null;
+  try {
+    if (await ff.exec(['-hide_banner', '-ss', String(Math.min(3, (m.end - m.start) / 3)), '-i', out, '-frames:v', '1', '-vf', 'scale=270:-2', '-q:v', '4', '/poster.jpg']) === 0) {
+      poster = URL.createObjectURL(new Blob([await ff.readFile('/poster.jpg')], { type: 'image/jpeg' }));
+      await ff.deleteFile('/poster.jpg');
+    }
+  } catch {}
+  await ff.deleteFile(out);
+  const tRender = (performance.now() - t1) / 1000;
+  const name = `${baseName(job.name)}-clip-${String(idx).padStart(2, '0')}`;
+  const srt = buildSrt(job.words, m.start, m.end);
+  const meta = `${m.title}\n\n${m.description}\n\n${m.hashtags.join(' ')}\n\nFrom ${job.name} at ${clock(m.start)}–${clock(m.end)}\n`;
+  return { name, poster, mp4: new Blob([data], { type: 'video/mp4' }), bytes: data.byteLength, srt, meta, m, width: OW, height: OH, faceHits, samples: samples.length, keys: keys.length, tFace, tRender, style };
+}
+
+async function renderPicked(job = S.active) {
+  if (S.busy || !job) return;
+  const picked = job.moments.filter((m, i) => m.pick && (pro() || i < FREE_CLIPS));
+  if (!picked.length) return;
+  S.busy = true; $('render').disabled = true; $('find').disabled = true;
+  job.status = 'rendering'; renderQueue();
+  const t0 = performance.now();
+  try {
+    for (let i = 0; i < picked.length; i++) {
+      const clip = await renderClip(job, picked[i], i + 1, picked.length);
+      job.clips.push(clip);
+      renderResults(job);
+    }
+    S.timings.render = (performance.now() - t0) / 1000;
+    job.status = `${job.clips.length} clips`;
+    setStatus(`Done: ${picked.length} clip${picked.length === 1 ? '' : 's'} in ${S.timings.render.toFixed(0)} s. Download below.`, 1);
+  } catch (e) {
+    job.status = 'error';
+    setStatus(`Rendering failed: ${e.message || e}. Try 720p or a shorter clip.`);
+  } finally { S.busy = false; $('find').disabled = false; updateRenderBtn(); renderQueue(); }
+}
+
+// ---------------------------------------------------------------- results + export
+function dl(blob, name) {
+  const a = el('a', { href: URL.createObjectURL(blob), download: name });
+  document.body.append(a); a.click(); a.remove();
+  setTimeout(() => URL.revokeObjectURL(a.href), 10000);
+}
+function renderResults(job) {
+  $('resultsbox').hidden = !job?.clips.length;
+  if (!job?.clips.length) return $('results').replaceChildren();
+  $('results').replaceChildren(...job.clips.map((c) => {
+    const url = c.url || (c.url = URL.createObjectURL(c.mp4));
+    return el('li', { class: 'clip' },
+      el('video', { src: url, poster: c.poster, controls: true, playsinline: true, preload: 'none', width: 216, height: 384 }),
+      el('div', { class: 'cbody' },
+        el('b', {}, c.m.title),
+        el('p', { class: 'muted' }, `${c.width}×${c.height} · ${(c.bytes / 1e6).toFixed(1)} MB · ${Math.round(c.m.end - c.m.start)} s · face found in ${c.faceHits}/${c.samples} checks`),
+        el('p', {}, c.m.description),
+        el('p', { class: 'tags' }, c.m.hashtags.join(' ')),
+        el('div', { class: 'row' },
+          el('button', { type: 'button', class: 'btn sm', onclick: () => dl(c.mp4, `${c.name}.mp4`) }, 'MP4'),
+          el('button', { type: 'button', class: 'btn sm ghost', onclick: () => dl(new Blob([c.srt], { type: 'application/x-subrip' }), `${c.name}.srt`) }, 'SRT'),
+          el('button', { type: 'button', class: 'btn sm ghost', onclick: () => dl(new Blob([c.meta], { type: 'text/plain' }), `${c.name}.txt`) }, 'Title + tags'),
+          el('button', { type: 'button', class: 'btn sm ghost', onclick: () => navigator.clipboard?.writeText(`${c.m.title}\n\n${c.m.description}\n\n${c.m.hashtags.join(' ')}`) }, 'Copy text'))));
+  }));
+}
+function zipFor(jobs) {
+  const files = [];
+  for (const j of jobs) for (const c of j.clips) files.push({ c, prefix: jobs.length > 1 ? `${baseName(j.name)}/` : '' });
+  return Promise.all(files.map(async ({ c, prefix }) => [
+    { name: `${prefix}${c.name}.mp4`, data: new Uint8Array(await c.mp4.arrayBuffer()) },
+    { name: `${prefix}${c.name}.srt`, data: c.srt }, { name: `${prefix}${c.name}.txt`, data: c.meta }])).then((x) => x.flat());
+}
+async function zipAll(all) {
+  const jobs = all ? S.jobs.filter((j) => j.clips.length) : [S.active];
+  const files = await zipFor(jobs);
+  const blob = new Blob(zipParts(files), { type: 'application/zip' });
+  S.lastZip = { bytes: blob.size, files: files.length };
+  dl(blob, all ? 'clipwhit-all-clips.zip' : `${baseName(S.active.name)}-clips.zip`);
+}
+
+// Batch (Pro): find + render the top N of every queued video, one after another.
+async function autoAll() {
+  const n = Math.max(1, Math.min(20, +$('autoN').value || 5));
+  for (const j of S.jobs) {
+    if (j.clips.length) continue;
+    select(j);
+    await findMoments(j);
+    j.moments.forEach((m, i) => { m.pick = i < n; });
+    await renderPicked(j);
+  }
+  setStatus(`Batch done: ${S.jobs.reduce((a, j) => a + j.clips.length, 0)} clips from ${S.jobs.length} videos.`, 1);
+}
+
+// ---------------------------------------------------------------- wiring
+function wire() {
+  const drop = $('drop');
+  drop.addEventListener('click', () => $('file').click());
+  drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('file').click(); } });
+  $('file').addEventListener('change', () => addFiles($('file').files));
+  ['dragenter', 'dragover'].forEach((t) => drop.addEventListener(t, (e) => { e.preventDefault(); drop.classList.add('over'); }));
+  ['dragleave', 'drop'].forEach((t) => drop.addEventListener(t, (e) => { e.preventDefault(); drop.classList.remove('over'); }));
+  drop.addEventListener('drop', (e) => addFiles(e.dataTransfer.files));
+  $('sample').addEventListener('click', async () => {
+    setStatus('Loading the 74-second sample episode…');
+    const r = await fetch(new URL('./sample/growth-show-sample.mp4', import.meta.url));
+    await addFiles([new File([await r.blob()], 'growth-show-sample.mp4', { type: 'video/mp4' })]);
+  });
+  $('find').addEventListener('click', () => findMoments());
+  $('render').addEventListener('click', () => renderPicked());
+  $('zip').addEventListener('click', () => zipAll(false));
+  $('zipall').addEventListener('click', () => zipAll(true));
+  $('auto').addEventListener('click', () => autoAll());
+  $('keyform').addEventListener('submit', (e) => { e.preventDefault(); applyKey($('key').value, true); });
+  $('kit').addEventListener('change', () => { store.set('clipwhit.kit', $('kit').value); renderKits(); });
+  for (const f of ['name', 'base', 'hi', 'font', 'handle']) $(`kit-${f}`).addEventListener('change', saveKit);
+  $('kitnew').addEventListener('click', () => {
+    const list = kits(); const id = `k${Date.now()}`;
+    list.push({ id, name: `Client ${list.length + 1}`, base: '#FFFFFF', hi: '#3DDC97', font: 'Anton', handle: '' });
+    store.set('clipwhit.kits', list); store.set('clipwhit.kit', id); renderKits();
+  });
+  $('style').replaceChildren(...Object.entries(STYLES).map(([k, s]) => el('option', { value: k }, `${s.label}${s.free ? '' : ' (Pro)'}`)));
+}
+
+async function init() {
+  wire();
+  const hash = new URLSearchParams(location.hash.slice(1));
+  const fromHash = hash.get('key');
+  if (fromHash) history.replaceState(null, '', location.pathname + location.search);
+  const cur = lic.current();
+  S.tier = cur.tier;
+  renderTier();
+  const key = fromHash || cur.key;
+  if (key) { $('key').value = key; await applyKey(key, !!fromHash); }
+  const cap = 'gpu' in navigator ? 'WebGPU available: transcription uses your graphics card.' : 'No WebGPU in this browser: transcription runs on the CPU (slower; Chrome or Edge on desktop is fastest).';
+  $('caps').textContent = cap;
+}
+init();

asr-worker.js

@@ -0,0 +1,52 @@
+// Clipwhit speech-to-text worker: Whisper in the browser with transformers.js (WebGPU when available, else WASM).
+// Audio arrives as 16 kHz mono Float32Array; nothing is uploaded. © 2026 CyberMax. All rights reserved.
+import { pipeline, WhisperTextStreamer, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.0';
+
+env.allowLocalModels = false;
+let asr = null, loadedKey = null;
+
+async function load(model, device, post) {
+  const key = `${model}|${device}`;
+  if (asr && loadedKey === key) return asr;
+  if (asr) { try { await asr.dispose(); } catch {} asr = null; loadedKey = null; }
+  const dtype = device === 'webgpu' ? { encoder_model: 'fp32', decoder_model_merged: 'q4' } : 'q8';
+  asr = await pipeline('automatic-speech-recognition', model, {
+    device, dtype,
+    progress_callback: (p) => post({ type: 'load', file: p.file, loaded: p.loaded, total: p.total }),
+  });
+  loadedKey = key;
+  return asr;
+}
+
+self.onmessage = async ({ data }) => {
+  if (data?.type !== 'run') return;
+  const post = (m) => self.postMessage(m);
+  try {
+    let device = data.device, p;
+    try { p = await load(data.model, device, post); } catch (e) {
+      if (device !== 'webgpu') throw e;
+      post({ type: 'info', message: 'WebGPU could not start; using the CPU instead.' });
+      device = 'wasm';
+      p = await load(data.model, device, post);
+    }
+    post({ type: 'ready', device });
+    const english = /\.en$/.test(data.model);
+    const opts = { chunk_length_s: 30, stride_length_s: 5, return_timestamps: true, ...(english ? {} : { language: data.language || null, task: 'transcribe' }) };
+    let done = 0, out;
+    try {
+      const time_precision = p.processor.feature_extractor.config.chunk_length / p.model.config.max_source_positions;
+      const streamer = new WhisperTextStreamer(p.tokenizer, {
+        time_precision, skip_prompt: true,
+        callback_function: (text) => post({ type: 'partial', text }),
+        on_finalize: () => post({ type: 'chunk', done: ++done }),
+      });
+      out = await p(data.audio, { ...opts, streamer });
+    } catch (e) {
+      if (!/stream/i.test(String(e?.message || e))) throw e;
+      out = await p(data.audio, opts);
+    }
+    post({ type: 'done', chunks: out.chunks || [], text: out.text, device });
+  } catch (e) {
+    post({ type: 'error', message: String(e?.message || e) });
+  }
+};

hooks/index.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Podcast Hook Finder: Best Clip Moments, Free</title>
+<meta name="description" content="Paste a podcast transcript (SRT, VTT or text) and get the 10 strongest moments to clip, with timestamps, hook lines, titles and hashtags. Free, runs in your browser.">
+<link rel="canonical" href="https://clipwhit.cybermax-tools.workers.dev/hooks/">
+<link rel="icon" href="../brand/icon.svg" type="image/svg+xml">
+<meta property="og:title" content="Free Podcast Hook Finder">
+<meta property="og:description" content="Paste a transcript, get the 10 best moments to clip with timestamps and titles.">
+<meta property="og:image" content="https://clipwhit.cybermax-tools.workers.dev/brand/cover.png">
+<link rel="stylesheet" href="../styles.css">
+</head>
+<body>
+<header class="w"><div class="top"><a class="me" href="../"><img src="../brand/icon.svg" alt="" width="34" height="34"><span>Clipwhit</span></a><nav><a href="../#app">Clip a video</a><a href="../#pricing">Pricing</a></nav></div></header>
+<main class="w">
+<p class="tagline">Free tool · no sign-up · nothing leaves your browser</p>
+<h1>Find the best clip moments in any podcast transcript</h1>
+<p class="lede">Paste an SRT, VTT or plain-text transcript. You get the 10 strongest moments to turn into shorts: where they start, the hook line, a title and hashtags.</p>
+<div class="app">
+  <label for="t" class="note" style="font-weight:700">Transcript (SRT, VTT, or text with optional [mm:ss] stamps)</label>
+  <textarea id="t" rows="10" style="width:100%;font:14px/1.5 ui-monospace,Menlo,monospace;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin-top:6px" placeholder="1&#10;00:00:01,000 --> 00:00:04,000&#10;Welcome back to the show…"></textarea>
+  <div class="row" style="margin-top:10px"><button id="go" class="btn" type="button">Find hooks</button><button id="ex" class="btn ghost sm" type="button">Load an example</button><label class="btn ghost sm" style="cursor:pointer">Open a file<input id="f" type="file" accept=".srt,.vtt,.txt,text/plain" hidden></label></div>
+  <p id="msg" class="status" role="status"></p>
+  <ol id="out" class="moments"></ol>
+</div>
+<div class="band"><div><h2>Turn these moments into finished shorts</h2><p>Clipwhit transcribes the video, crops to 9:16 around the speaker and burns in animated captions. Free for 3 clips per video.</p></div><a class="btn" href="../#app">Open Clipwhit</a></div>
+<h2>How the moments are ranked</h2>
+<p class="sub">Each 15–45 second stretch gets points for a scroll-stopping first line (a number, a secret, a mistake, a question), a clear payoff, a lively pace and a clean start and end, and loses points for filler words and stopping mid-sentence. It's a set of editing rules, not magic: always watch the moment before you post it.</p>
+</main>
+<footer class="w">© 2026 CyberMax · <a href="../">Clipwhit: podcast to captioned shorts</a> · <a href="https://cybermax.cybermax-tools.workers.dev/store/?utm_source=hookfinder">CyberMax Store</a></footer>
+<script type="module">
+import { parseTranscript, pickMoments, clock } from '../lib/scoring.js';
+const $ = (id) => document.getElementById(id);
+const EX = `[00:00] Welcome back to the show. Today we are talking about growing a podcast without ads.
+[00:08] Here is the secret nobody tells you. The first three seconds decide everything.
+[00:16] If your opening line does not make people curious, they scroll away, and the rest does not matter.
+[00:25] So start with the result. Say the surprising number first, then explain how you got there.
+[00:34] We posted the same interview twice. The first version got two hundred views. The second opened with the best answer and got ten thousand views in a week.
+[00:48] That is the whole trick. Your best moment is usually buried in the middle of the episode.
+[00:58] Um, so yeah, anyway, we kind of talked about the weather for a bit.
+[01:10] The second mistake is posting once and giving up. Post every day for a month before you judge anything.
+[01:22] And captions. Most people watch with the sound off, so no captions means you lose them.
+[01:32] Honestly, I wish someone had told me this five years ago. It would have saved me hundreds of hours.`;
+function run() {
+  const segs = parseTranscript($('t').value);
+  if (segs.length < 3) { $('msg').textContent = 'Paste a longer transcript (at least a few sentences).'; $('out').replaceChildren(); return; }
+  const m = pickMoments(segs, null, { count: 10, minLen: 15, maxLen: 45, target: 30 });
+  $('msg').textContent = `${m.length} moments from ${segs.length} transcript lines (${clock(segs[segs.length - 1].end)} long).`;
+  $('out').replaceChildren(...m.map((x, i) => {
+    const li = document.createElement('li'); li.className = 'moment';
+    li.innerHTML = `<div class="pick"><b>#${i + 1}</b></div><div class="mbody"><div class="mhead"><span class="time"></span><span class="score"></span></div><p class="title"></p><p class="excerpt"></p><div class="chips"></div></div>`;
+    li.querySelector('.time').textContent = `${clock(x.start)}–${clock(x.end)}`;
+    li.querySelector('.score').textContent = `score ${x.score.toFixed(1)}`;
+    li.querySelector('.title').textContent = x.title;
+    li.querySelector('.excerpt').textContent = x.text.length > 240 ? `${x.text.slice(0, 240)}…` : x.text;
+    li.querySelector('.chips').append(...x.reasons.slice(0, 4).map((r) => Object.assign(document.createElement('span'), { className: 'chip', textContent: r })), Object.assign(document.createElement('span'), { className: 'chip tags', textContent: x.hashtags.join(' ') }));
+    return li;
+  }));
+}
+$('go').onclick = run;
+$('ex').onclick = () => { $('t').value = EX; run(); };
+$('f').onchange = async () => { const f = $('f').files[0]; if (f) { $('t').value = await f.text(); run(); } };
+</script>
+</body>
+</html>

index.html

@@ -1,19 +1,168 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Clipwhit: Podcast to Shorts Clipper, No Upload</title>
+<meta name="description" content="Turn a long podcast or video into captioned 9:16 shorts in your browser. AI finds the best moments, tracks the face, burns in animated captions. Nothing is uploaded. Free for 3 clips; Pro $12/month.">
+<meta name="keywords" content="podcast to shorts, podcast clipper, AI clip generator, video to shorts, auto captions, 9:16 crop, Opus Clip alternative, no upload">
+<link rel="canonical" href="https://clipwhit.cybermax-tools.workers.dev/">
+<link rel="icon" href="brand/icon.svg" type="image/svg+xml">
+<meta property="og:title" content="Clipwhit: podcast to captioned shorts, in your browser">
+<meta property="og:description" content="AI finds the best moments, crops to 9:16 around the speaker and burns in animated captions. No upload, no minute caps.">
+<meta property="og:image" content="https://clipwhit.cybermax-tools.workers.dev/brand/cover.png">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="stylesheet" href="styles.css">
+<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Clipwhit","applicationCategory":"MultimediaApplication","operatingSystem":"Any (web browser)","url":"https://clipwhit.cybermax-tools.workers.dev/","image":"https://clipwhit.cybermax-tools.workers.dev/brand/cover.png","description":"In-browser podcast to vertical shorts clipper: Whisper transcription, moment scoring, 9:16 face-tracked crop, animated burned-in captions, MP4 + SRT + ZIP export. Nothing is uploaded.","publisher":{"@type":"Organization","name":"CyberMax"},"offers":[{"@type":"Offer","name":"Free","price":"0","priceCurrency":"USD"},{"@type":"Offer","name":"Pro monthly","price":"12","priceCurrency":"USD"},{"@type":"Offer","name":"Pro yearly","price":"120","priceCurrency":"USD"},{"@type":"Offer","name":"Pro lifetime (launch price)","price":"39","priceCurrency":"USD"},{"@type":"Offer","name":"Agency monthly","price":"49","priceCurrency":"USD"}]}</script>
+</head>
+<body>
+<header class="w"><div class="top"><a class="me" href="./"><img src="brand/icon.svg" alt="" width="34" height="34"><span>Clipwhit</span></a>
+<nav><a href="#app">Try it</a><a class="h" href="#compare">Compare</a><a href="#pricing">Pricing</a><a class="h" href="#faq">FAQ</a><a class="h" href="hooks/">Hook finder</a></nav></div></header>
+
+<main class="w">
+<section class="hero">
+  <div>
+    <p class="tagline">For podcasters, video editors and clip agencies</p>
+    <h1>Your podcast, cut into captioned shorts. No upload.</h1>
+    <p class="lede">Drop in a long episode. Clipwhit transcribes it, finds the moments worth posting, crops to 9:16 around the speaker and burns in animated captions, all inside your browser. Your video never leaves your computer.</p>
+    <div class="badges"><span class="badge">✓ Free: 3 clips per video</span><span class="badge">✓ Pro $12/month, no minute caps</span><span class="badge">✓ MP4 + SRT + titles + hashtags</span><span class="badge">✓ No sign-up to try</span></div>
+    <div class="cta"><a class="btn" href="#app">Make my first clips free</a><a class="btn ghost" href="#pricing">Pro from $12/month</a></div>
+  </div>
+  <div class="phone"><img src="brand/phone-clip.png" alt="A finished 9:16 clip from the sample episode with yellow animated captions" width="300" height="533"></div>
+</section>
+
+<section id="app" class="app" aria-label="Clipwhit app">
+  <div class="apphead"><h2>Clip a video</h2><span id="tier" data-tier="free">Free</span></div>
+  <div id="drop" class="drop" role="button" tabindex="0" aria-label="Choose a video">
+    <b>Drop a video or audio file here</b>
+    <span>or click to choose · MP4, MOV, WebM, MKV, MP3, M4A · it stays on your device</span>
+    <input id="file" type="file" accept="video/*,audio/*,.mkv" multiple hidden>
+  </div>
+  <div class="row" style="margin-top:10px"><button id="sample" class="btn sm ghost" type="button">No video handy? Use our 74-second sample</button><span id="caps" class="note"></span></div>
+  <p id="batchmsg" class="note warn" hidden>The free plan clips one video at a time. Pro adds a batch queue.</p>
+
+  <div id="work" hidden>
+    <div class="work">
+      <div>
+        <video id="preview" controls playsinline preload="metadata"></video>
+        <p id="fileinfo" class="note"></p>
+        <div class="opts">
+          <label>From (h:mm:ss)<input id="from" value="0:00" inputmode="numeric"></label>
+          <label>To<input id="to" value="" inputmode="numeric"></label>
+          <label>Speech model<select id="model"><option value="onnx-community/whisper-tiny.en" selected>Fast (Whisper Tiny, English)</option><option value="onnx-community/whisper-base.en">Better (Whisper Base, English)</option><option value="onnx-community/whisper-base">Other languages (Whisper Base)</option></select></label>
+          <label>Engine<select id="device"><option value="auto">Auto (GPU if available)</option><option value="wasm">CPU only</option><option value="webgpu">GPU (WebGPU)</option></select></label>
+          <label>Shortest clip (s)<input id="minlen" type="number" min="10" max="60" value="20"></label>
+          <label>Longest clip (s)<input id="maxlen" type="number" min="20" max="120" value="55"></label>
+        </div>
+        <label class="check"><input id="ai" type="checkbox"> <span>Also ask CyberMax's AI to re-rank the moments and write titles. Sends transcript <b>text only</b> (never audio or video) to our server; free daily limit.</span></label>
+        <button id="find" class="btn" type="button">Find the best moments</button>
+        <p id="status" class="status" role="status" aria-live="polite">Choose a video to start.</p>
+        <div class="track"><div id="bar"></div></div>
+        <p id="partial"></p>
+      </div>
+      <div>
+        <div id="momentsbox" hidden>
+          <h3 style="margin:0">Best moments</h3>
+          <p class="note">Ranked by hook strength, a complete payoff, pace, energy and clean start/end. Tick the ones to render.</p>
+          <div class="opts">
+            <label>Caption style<select id="style"></select></label>
+            <label>Resolution<select id="res"><option value="720">720×1280</option><option value="1080">1080×1920 (Pro)</option></select></label>
+          </div>
+          <div id="kitbox" class="panel" hidden>
+            <h3>Brand kit</h3>
+            <div class="row"><select id="kit" style="flex:1"></select><button id="kitnew" class="btn sm ghost" type="button" hidden>+ New kit (Agency)</button></div>
+            <div id="kitfields" class="opts">
+              <label>Kit name<input id="kit-name"></label>
+              <label>Caption colour<input id="kit-base" type="color" value="#FFFFFF"></label>
+              <label>Highlight colour<input id="kit-hi" type="color" value="#FFD23F"></label>
+              <label>Font<select id="kit-font"><option>Anton</option><option>Inter</option></select></label>
+              <label>Corner handle (optional)<input id="kit-handle" placeholder="@yourshow"></label>
+            </div>
+          </div>
+          <button id="render" class="btn" type="button" disabled>Render</button>
+          <ol id="moments" class="moments"></ol>
+        </div>
+      </div>
+    </div>
+    <div id="resultsbox" hidden>
+      <h3>Your clips</h3>
+      <div class="row"><button id="zip" class="btn sm" type="button">Download all (ZIP: MP4 + SRT + titles)</button><button id="zipall" class="btn sm ghost agency-only" type="button">Bulk export every video (Agency)</button></div>
+      <ol id="results" class="results"></ol>
+    </div>
+    <div id="queue" class="panel" hidden>
+      <h3>Batch queue</h3>
+      <ul id="queuelist"></ul>
+      <div class="row"><label class="note">Clips per video <input id="autoN" type="number" min="1" max="20" value="5" style="width:80px"></label><button id="auto" class="btn sm" type="button">Clip every video in the queue</button></div>
+    </div>
+  </div>
+
+  <div class="panel">
+    <h3>Have a Pro or Agency key?</h3>
+    <form id="keyform" class="row"><input id="key" placeholder="CLIPWHIT-…" autocomplete="off" style="flex:1;min-width:0"><button class="btn sm" type="submit">Unlock</button></form>
+    <p id="keymsg" class="note"></p>
+    <p id="upsell" class="note">Free: 3 clips per video at 720p with a small corner mark. <a href="#pricing">Pro</a>: unlimited clips, 1080p, no mark, every caption style, brand kit, batch queue.</p>
+  </div>
+</section>
+
+<h2>From a 60-minute episode to posts in three steps</h2>
+<div class="grid3">
+  <div class="card"><span class="n">1</span><b>Transcribe on your device</b><p>OpenAI's Whisper runs in the browser tab (on your graphics card where the browser allows it). Pick the whole episode or just a range.</p></div>
+  <div class="card"><span class="n">2</span><b>Find the moments</b><p>Every stretch of 20–55 s is scored for a scroll-stopping first line, a complete payoff, pace, energy and a clean start and end. You see why each one ranked.</p></div>
+  <div class="card"><span class="n">3</span><b>Crop, caption, export</b><p>Face tracking keeps the speaker in a 9:16 frame, captions pop word by word, and you get the MP4, an SRT file, a title, a description and hashtags for each clip.</p></div>
+</div>
+
+<h2>What it looks like</h2>
+<div class="shots">
+  <figure><img src="brand/shot-moments.png" alt="Clipwhit listing ranked moments with scores and reasons" loading="lazy" width="1280" height="800"><figcaption>Ranked moments from the sample episode, with the reasons each one scored.</figcaption></figure>
+  <figure><img src="brand/shot-clips.png" alt="Rendered 9:16 clips with download buttons" loading="lazy" width="1280" height="800"><figcaption>Rendered clips: MP4, SRT and title + hashtags per clip, or one ZIP.</figcaption></figure>
+</div>
+
+<h2 id="compare">Clipwhit vs the popular clippers</h2>
+<p class="sub">Rival prices from their public pricing pages, checked 29 Sep 2026.</p>
+<div class="scroll"><table class="tbl">
+  <thead><tr><th></th><th>Clipwhit</th><th>Opus Clip</th><th>OpenShorts (cloud)</th><th>Klap</th></tr></thead>
+  <tbody>
+  <tr><td>Entry paid plan</td><td class="us"><b>$12/month</b> or $39 once (launch)</td><td>$15/month (Starter)</td><td>$12/month (100 min)</td><td>$14/month billed yearly (100 clips)</td></tr>
+  <tr><td>Your video is uploaded</td><td class="us"><b>No</b>, it stays on your device</td><td>Yes</td><td>Yes (self-hosting is free but needs your own server)</td><td>Yes</td></tr>
+  <tr><td>Minutes or credit caps on paid plan</td><td class="us"><b>None</b></td><td>Monthly credits</td><td>100 minutes/month</td><td>100 clips/month</td></tr>
+  <tr><td>Free plan</td><td class="us">3 clips per video, 720p, small mark, no sign-up</td><td>Yes, watermark</td><td>First video up to 60 min, then 20 min/month, watermark</td><td>Free trial</td></tr>
+  <tr><td>Captions, 9:16 face crop, titles + hashtags</td><td class="us">Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
+  <tr><td>Speed</td><td class="us">Depends on your computer (see FAQ)</td><td>Server speed</td><td>Server speed</td><td>Server speed</td></tr>
+  </tbody></table></div>
+
+<h2 id="pricing">Pricing</h2>
+<p class="sub">Try everything on the free plan first, no card and no sign-up. Checkout by Stripe; your key appears on screen the moment payment finishes.</p>
+<div class="plans">
+  <div class="pl"><b>Free</b><div class="amt">$0</div><ul><li>3 clips per video</li><li>720×1280</li><li>Small "Made with Clipwhit" corner mark</li><li>Bold Pop captions, MP4 + SRT + ZIP</li></ul><a class="btn ghost" href="#app">Start free</a></div>
+  <div class="pl best"><b>Pro</b><div class="amt">$12<small>/month</small></div><ul><li>Unlimited clips, no minute caps</li><li>1080×1920, no mark</li><li>All caption styles + your brand kit</li><li>Batch queue: clip many episodes in a row</li></ul><a class="btn" href="https://clipwhit.cybermax-tools.workers.dev/buy/pro-monthly?s=landing">Get Pro</a><a class="alt" href="https://clipwhit.cybermax-tools.workers.dev/buy/pro-yearly?s=landing">or $120/year (2 months free)</a></div>
+  <div class="pl"><b>Pro lifetime</b><div class="amt">$39<small> once</small></div><p>Launch price. Everything in Pro, forever, one payment, no subscription.</p><a class="btn ghost" href="https://clipwhit.cybermax-tools.workers.dev/buy/pro-lifetime?s=landing">Buy lifetime</a></div>
+  <div class="pl"><b>Agency</b><div class="amt">$49<small>/month</small></div><ul><li>Everything in Pro</li><li>Unlimited brand kits, one per client</li><li>Bulk export: every clip of every video in one ZIP</li></ul><a class="btn ghost" href="https://clipwhit.cybermax-tools.workers.dev/buy/agency-monthly?s=landing">Get Agency</a></div>
+</div>
+
+<h2>For clip agencies</h2>
+<div class="card"><p style="margin:0">Editors who run a clipping service for podcasters usually pay per upload minute on server tools, then pass that cost on. Clipwhit's Agency plan is a flat $49/month with no minute caps, one brand kit per client (caption colours, font and handle) and one-click bulk export, so a batch of episodes becomes a folder of ready-to-post clips per client. What you charge your clients is up to you; we sell the tool, not a promise of income.</p></div>
+
+<h2 id="faq">Questions</h2>
+<details><summary>Why not Opus Clip?</summary><p>Opus Clip is a good server tool: it's fast and it's polished. You upload every episode to it, and paid plans meter your usage. Clipwhit does the work on your own computer, so nothing is uploaded, there's no minute cap, and Pro costs $12/month (or $39 once at launch) against Opus Clip's $15 Starter and $29 Pro. The trade-off is speed: a server farm is faster than a laptop on long episodes.</p></details>
+<details><summary>Is my video really not uploaded?</summary><p>Yes. The speech model, face detector and video encoder download once into your browser and run there. The only optional network call with your content is the AI re-rank box, which sends transcript text (no audio, no video) and is off unless you tick it. The licence check sends only your key.</p></details>
+<details id="faq-speed"><summary>How long does a 60-minute episode take?</summary><p id="speed">Measured on 29 Sep 2026 in a headless Chrome engine on a 4-core cloud computer with no graphics card (the slowest path): a 60-minute episode was transcribed in about 24 minutes with the Fast model, then 5 clips of 35–40 seconds rendered at 720p in 2 minutes 39 seconds (about 30 seconds per clip, face tracking included). So plan on roughly half an hour per hour of audio on a CPU-only machine. A browser with WebGPU (Chrome or Edge on most laptops) moves transcription to the graphics card, which is usually much faster, but we have not measured that yet. Tip: set a From/To range to clip only the part you want. The speech model (about 44 MB) and video engine (about 31 MB) download once and are cached.</p></details>
+<details><summary>Which browsers work?</summary><p>Chrome and Edge on a desktop or laptop are the tested and fastest choice (WebGPU speeds up transcription). Firefox and Safari use the CPU path; if one of them has trouble with a file, use Chrome or Edge. Phones can open the app, but long episodes need a computer: rendering video in a browser needs memory and time.</p></details>
+<details><summary>What do I get with each clip?</summary><p>A 9:16 MP4 with burned-in captions, an SRT subtitle file, and a text file with a title, a short description and hashtags. "Download all" gives you one ZIP.</p></details>
+<details><summary>How accurate are the transcript and the picks?</summary><p>Whisper Tiny is fast and good on clear speech; switch to Base for more accuracy. Moment scoring is a set of editing rules (a strong first line, a finished thought, pace and energy), so always watch a clip before you post it. You can nudge start and end by 3 seconds and edit every title.</p></details>
+<details><summary>How do I get and use my Pro key?</summary><p>After checkout, Stripe sends you back to a page that shows your key and an "Open Clipwhit with Pro" button. The key unlocks Pro in any browser you paste it into. Subscriptions can be cancelled any time from the manage page; the key works until the paid period ends.</p></details>
+<details><summary>Can I clip any podcast?</summary><p>Clip your own shows, or shows you have permission to repost. Clipwhit is an editing tool; the rights to the content stay with its owner.</p></details>
+
+<div class="band"><div><h2>Turn this week's episode into clips</h2><p>Free for 3 clips per video. Pro is $12/month.</p></div><a class="btn" href="#app">Start free</a></div>
+
+<h2>Also from CyberMax</h2>
+<div class="grid3">
+  <div class="card"><b><a href="hooks/">Podcast Hook Finder (free)</a></b><p>Paste a transcript and see the 10 strongest opening lines and where they are.</p></div>
+  <div class="card"><b><a href="https://huggingface.co/spaces/CyberMax-tools/hushscribe">Hearlark</a></b><p>Private in-browser transcription with TXT, SRT and VTT export.</p></div>
+  <div class="card"><b><a href="https://cybermax.cybermax-tools.workers.dev/store/?utm_source=clipwhit">CyberMax Store</a></b><p>APIs, data briefs and creator tools.</p></div>
+</div>
+</main>
+<footer class="w">© 2026 CyberMax · <a href="https://cybermax.cybermax-tools.workers.dev/store/clipwhit/">Clipwhit in the CyberMax Store</a> · <a href="https://cybermax.cybermax-tools.workers.dev/terms">Terms</a> · <a href="https://cybermax.cybermax-tools.workers.dev/privacy">Privacy</a> · <a href="https://clipwhit.cybermax-tools.workers.dev/manage">Manage subscription</a> · <a href="mailto:cybermax.tools@gmail.com">cybermax.tools@gmail.com</a><br>Speech: OpenAI Whisper (Apache-2.0) via transformers.js · Faces: MediaPipe · Video: ffmpeg.wasm · Fonts: Anton, Inter (OFL).</footer>
+<script type="module" src="app.js"></script>
+</body>
 </html>

lib/captions.js

@@ -0,0 +1,103 @@
+// Clipwhit captions: animated ASS subtitles (burned in by ffmpeg.wasm/libass) and SRT export, per clip.
+// Times are relative to the clip start. © 2026 CyberMax. All rights reserved.
+
+export const STYLES = {
+  pop: { label: 'Bold Pop', free: true, font: 'Anton', size: 118, base: '#FFFFFF', hi: '#FFD23F', outline: 7, shadow: 2, box: false, upper: true, pop: true, words: 3 },
+  karaoke: { label: 'Karaoke sweep', free: false, font: 'Anton', size: 112, base: '#FFFFFF', hi: '#3DDC97', outline: 6, shadow: 0, box: false, upper: true, sweep: true, words: 4 },
+  clean: { label: 'Clean box', free: false, font: 'Inter', size: 80, base: '#111111', hi: '#6C4CF1', outline: 0, shadow: 0, box: '#FFFFFF', upper: false, pop: false, words: 5 },
+  neon: { label: 'Neon', free: false, font: 'Anton', size: 124, base: '#FFFFFF', hi: '#FF3DA5', outline: 3, shadow: 6, box: false, upper: true, pop: true, words: 2 },
+};
+
+// ASS colours are &HAABBGGRR
+export function assColor(hex, alpha = 0) {
+  const h = String(hex || '#FFFFFF').replace('#', '').padEnd(6, 'F');
+  return `&H${alpha.toString(16).padStart(2, '0').toUpperCase()}${h.slice(4, 6)}${h.slice(2, 4)}${h.slice(0, 2)}`.toUpperCase();
+}
+
+export function assTime(t) {
+  t = Math.max(0, t);
+  const h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), s = Math.floor(t % 60), cs = Math.floor((t * 100) % 100);
+  return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(cs).padStart(2, '0')}`;
+}
+
+// libass matches fontsource's static Inter build by its full name, not the family.
+export const fontName = (f) => (f === 'Inter' ? 'Inter ExtraBold' : f || 'Anton');
+
+const escAss = (s) => String(s).replace(/[{}\\]/g, '').replace(/\n/g, ' ');
+
+/** Words (absolute times) inside [start, end] -> caption groups relative to the clip start. */
+export function groupWords(words, start, end, perGroup = 3, maxChars = 22) {
+  const inClip = words.filter((w) => w.end > start + 0.05 && w.start < end - 0.05)
+    .map((w) => ({ text: w.text, start: Math.max(0, w.start - start), end: Math.min(end, w.end) - start }));
+  const groups = [];
+  let cur = [];
+  const flush = () => { if (cur.length) groups.push({ words: cur, start: cur[0].start, end: cur[cur.length - 1].end }); cur = []; };
+  for (const w of inClip) {
+    const len = cur.reduce((a, x) => a + x.text.length + 1, 0) + w.text.length;
+    if (cur.length >= perGroup || (cur.length && len > maxChars)) flush();
+    cur.push(w);
+    if (/[.!?,;:]$/.test(w.text)) flush();
+  }
+  flush();
+  // no gaps shorter than 0.25 s between groups (keeps captions from flickering)
+  for (let i = 0; i < groups.length - 1; i++) if (groups[i + 1].start - groups[i].end < 0.25) groups[i].end = groups[i + 1].start;
+  return groups;
+}
+
+/**
+ * ASS document for one clip. opts: { style, width, height, brand: {base, hi, font}, mark: 'text' | null, title }
+ */
+export function buildAss(words, start, end, opts = {}) {
+  const st = { ...STYLES[opts.style] || STYLES.pop, ...(opts.brand || {}) };
+  const W = 1080, H = 1920; // PlayRes; libass scales to the real output size
+  const size = st.size;
+  const y = Math.round(H * 0.70);
+  const back = st.box ? assColor(st.box, 0) : assColor('#000000', 0x60);
+  const border = st.box ? 3 : 1; // BorderStyle 3 = opaque box
+  const head = `[Script Info]
+ScriptType: v4.00+
+PlayResX: ${W}
+PlayResY: ${H}
+WrapStyle: 2
+ScaledBorderAndShadow: yes
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Cap,${fontName(st.font)},${size},${assColor(st.base)},${assColor(st.hi)},${assColor('#000000')},${back},-1,0,0,0,100,100,1,0,${border},${st.box ? 18 : st.outline},${st.shadow},5,60,60,0,1
+Style: Mark,Inter ExtraBold,36,${assColor('#FFFFFF', 0x30)},${assColor('#FFFFFF')},${assColor('#000000', 0x80)},${assColor('#000000', 0x90)},-1,0,0,0,100,100,0,0,1,2,0,9,40,40,48,1
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
+`;
+  const lines = [];
+  const groups = groupWords(words, start, end, st.words, st.words <= 2 ? 16 : 24);
+  const up = (s) => (st.upper ? s.toUpperCase() : s);
+  const hi = assColor(st.hi), base = assColor(st.base);
+  for (const g of groups) {
+    const pos = `{\\an5\\pos(${W / 2},${y})}`;
+    if (st.sweep) {
+      const k = g.words.map((w) => `{\\kf${Math.max(1, Math.round((w.end - w.start) * 100))}}${escAss(up(w.text))}`).join(' ');
+      lines.push(`Dialogue: 0,${assTime(g.start)},${assTime(g.end)},Cap,,0,0,0,,${pos}{\\fad(60,40)}${k}`);
+      continue;
+    }
+    // one event per word: the spoken word is highlighted (and pops), the rest of the group stays in the base colour
+    g.words.forEach((w, i) => {
+      const s = i === 0 ? g.start : w.start;
+      const e = i === g.words.length - 1 ? g.end : g.words[i + 1].start;
+      const txt = g.words.map((x, j) => (j === i
+        ? `{\\c${hi}${st.pop ? '\\fscx112\\fscy112\\t(0,90,\\fscx100\\fscy100)' : ''}}${escAss(up(x.text))}{\\c${base}\\fscx100\\fscy100}`
+        : escAss(up(x.text)))).join(' ');
+      const intro = i === 0 && st.pop ? '{\\fscx80\\fscy80\\t(0,80,\\fscx100\\fscy100)}' : '';
+      lines.push(`Dialogue: 0,${assTime(s)},${assTime(e)},Cap,,0,0,0,,${pos}${intro}${txt}`);
+    });
+  }
+  if (opts.mark) lines.push(`Dialogue: 1,${assTime(0)},${assTime(end - start + 1)},Mark,,0,0,0,,${escAss(opts.mark)}`);
+  return head + lines.join('\n') + '\n';
+}
+
+const srtTime = (t) => assTime(t).replace(/^(\d+):(\d\d):(\d\d)\.(\d\d)$/, (m, h, mi, s, cs) => `${String(h).padStart(2, '0')}:${mi}:${s},${cs}0`);
+
+/** SRT for one clip (relative times), same groups as the burned-in captions. */
+export function buildSrt(words, start, end, perGroup = 5) {
+  return groupWords(words, start, end, perGroup, 42).map((g, i) => `${i + 1}\n${srtTime(g.start)} --> ${srtTime(g.end)}\n${g.words.map((w) => w.text).join(' ')}\n`).join('\n');
+}

lib/crop.js

@@ -0,0 +1,69 @@
+// Clipwhit 9:16 auto-crop: face samples -> a smooth crop path -> an ffmpeg crop-x expression over clip time t.
+// © 2026 CyberMax. All rights reserved.
+
+/** Crop box size for a 9:16 window inside a srcW x srcH frame (even numbers, as x264 needs). */
+export function cropBox(srcW, srcH, aspect = 9 / 16) {
+  let h = srcH, w = Math.round(h * aspect);
+  if (w > srcW) { w = srcW; h = Math.round(w / aspect); }
+  return { w: w - (w % 2), h: h - (h % 2) };
+}
+
+/**
+ * samples: [{t, cx}] with cx = face centre x in source pixels, or null when no face was found.
+ * Returns keyframes [{t, x}] (left edge of the crop), smoothed with a dead zone so the frame does not jitter.
+ */
+export function cropPath(samples, srcW, srcH, { aspect = 9 / 16, deadZone = 0.12, maxSpeed = 0.9 } = {}) {
+  const { w } = cropBox(srcW, srcH, aspect);
+  const maxX = Math.max(0, srcW - w);
+  const clampX = (x) => Math.max(0, Math.min(maxX, Math.round(x)));
+  if (!samples.length) return [{ t: 0, x: clampX((srcW - w) / 2) }];
+  // fill gaps: carry the last seen face forward (and the first one back); no faces at all -> centre
+  const seen = samples.filter((s) => s.cx != null);
+  if (!seen.length) return [{ t: 0, x: clampX((srcW - w) / 2) }];
+  let last = seen[0].cx;
+  const filled = samples.map((s) => ({ t: s.t, cx: s.cx != null ? (last = s.cx) : last }));
+  // median of 3 removes single-frame false detections
+  const med = filled.map((s, i) => {
+    const win = filled.slice(Math.max(0, i - 1), i + 2).map((x) => x.cx).sort((a, b) => a - b);
+    return { t: s.t, cx: win[Math.floor(win.length / 2)] };
+  });
+  const keys = [];
+  let x = clampX(med[0].cx - w / 2);
+  keys.push({ t: med[0].t, x });
+  for (let i = 1; i < med.length; i++) {
+    const want = clampX(med[i].cx - w / 2);
+    const dt = Math.max(0.01, med[i].t - med[i - 1].t);
+    if (Math.abs(want - x) <= deadZone * w) continue; // subject still inside the frame: hold the shot
+    const step = Math.min(Math.abs(want - x), maxSpeed * w * dt); // pan at most maxSpeed crop-widths per second
+    x = clampX(x + Math.sign(want - x) * step);
+    keys.push({ t: med[i].t, x });
+  }
+  return keys;
+}
+
+/** Piecewise-linear ffmpeg expression for the crop x over t (clip-relative seconds). */
+export function cropExpr(keys) {
+  if (!keys.length) return '0';
+  if (keys.length === 1) return String(keys[0].x);
+  // Hold each position, ramp over up to 0.6 s into the next one, hold after the last. Built from the end, so the
+  // outermost test is the earliest time and every else-branch only sees later times.
+  let expr = String(keys[keys.length - 1].x);
+  for (let i = keys.length - 1; i >= 1; i--) {
+    const a = keys[i - 1], b = keys[i];
+    const t1 = b.t, t0 = Math.max(a.t, b.t - 0.6);
+    const ramp = `${a.x}+(${b.x - a.x})*(t-${t0.toFixed(2)})/${Math.max(0.01, t1 - t0).toFixed(2)}`;
+    expr = `if(lt(t,${t0.toFixed(2)}),${a.x},if(lt(t,${t1.toFixed(2)}),${ramp},${expr}))`;
+  }
+  return expr;
+}
+
+/** At most `max` keyframes (drops the smallest moves first), so the ffmpeg expression stays short. */
+export function thinKeys(keys, max = 24) {
+  const k = keys.slice();
+  while (k.length > max) {
+    let bi = 1, bd = Infinity;
+    for (let i = 1; i < k.length; i++) { const d = Math.abs(k[i].x - k[i - 1].x); if (d < bd) { bd = d; bi = i; } }
+    k.splice(bi, 1);
+  }
+  return k;
+}

lib/licence.js

@@ -0,0 +1,34 @@
+// Clipwhit licence: a Pro/Agency key sold through Stripe and signed by the CyberMax Worker. The app asks the Worker's
+// /verify endpoint and remembers a good answer for 24 h, so it keeps working offline. © 2026 CyberMax. All rights reserved.
+const K = 'clipwhit.licence';
+export const KEY_RE = /^CLIPWHIT-(?:sub|cs|test)_[A-Za-z0-9_]{1,200}-[0-9a-f]{32}$/;
+
+const read = () => { try { return JSON.parse(localStorage.getItem(K) || 'null'); } catch { return null; } };
+const write = (v) => { try { v ? localStorage.setItem(K, JSON.stringify(v)) : localStorage.removeItem(K); } catch {} };
+
+export function current() {
+  const v = read();
+  if (!v || !KEY_RE.test(v.key || '')) return { tier: 'free' };
+  const fresh = Date.now() - (v.checked || 0) < 7 * 864e5; // offline grace: 7 days since the last good check
+  return fresh && v.valid ? { tier: v.tier || 'pro', key: v.key, plan: v.plan, checked: v.checked } : { tier: 'free', key: v.key, stale: true };
+}
+
+/** Ask the Worker. Returns { valid, tier, plan, reason }. Network failure keeps the last good answer. */
+export async function verify(api, key, { force = false } = {}) {
+  key = String(key || '').trim();
+  if (!KEY_RE.test(key)) return { valid: false, reason: 'format' };
+  const v = read();
+  if (!force && v && v.key === key && v.valid && Date.now() - v.checked < 864e5) return { valid: true, tier: v.tier, plan: v.plan, cached: true };
+  try {
+    const r = await fetch(`${api}/verify?key=${encodeURIComponent(key)}`, { cache: 'no-store' });
+    const j = await r.json();
+    if (j.valid) write({ key, valid: true, tier: j.tier, plan: j.plan, checked: Date.now() });
+    else if (r.status === 401 || r.status === 404 || j.valid === false) write(null);
+    return j;
+  } catch (e) {
+    if (v && v.key === key && v.valid) return { valid: true, tier: v.tier, plan: v.plan, offline: true };
+    return { valid: false, reason: 'offline' };
+  }
+}
+
+export const forget = () => write(null);

lib/scoring.js

@@ -0,0 +1,218 @@
+// Clipwhit moment finder: pure functions (browser + Node tests). Turns a timestamped transcript and an audio
+// loudness envelope into ranked, non-overlapping short-clip candidates with the reasons each one scored.
+// © 2026 CyberMax. All rights reserved.
+
+export const STOP = new Set(('a an and are as at be but by for from has have he her his i if in into is it its just like me my ' +
+  'not of on or our out so that the their them then there they this to up us was we were what when which who will with you your ' +
+  'yeah okay ok um uh really very actually going gonna get got do does did dont don\'t im i\'m it\'s thats that\'s youre you\'re ' +
+  'about all also can could would should one two some more most much many been being because how why where here now know think ' +
+  'thing things people said say says want make made time right well let lets let\'s kind sort mean guess stuff lot little ' +
+  'first second third version episode listening welcome today back show talking talk thanks next every single least before after ' +
+  'would could should never always over under still even only same other another those these into onto than tell tells told give gave').split(/\s+/));
+
+// Phrases that make a viewer stop scrolling (weights are relative; tuned on podcast transcripts).
+const HOOKS = [
+  [/\b(secret|nobody (tells|talks)|no one (tells|talks)|the truth|biggest mistake|mistakes?|the trick|here'?s (why|how|the thing|what)|what (nobody|most people))\b/i, 3],
+  [/\b(never|always|stop|don'?t|worst|best|insane|crazy|shocking|surpris\w*|wrong|myth|lie|lied|honestly|truth)\b/i, 1.5],
+  [/\b(how to|how i|how we|why you|why most|the reason|the one thing|the (first|second|third|only))\b/i, 2],
+  [/\b(\d[\d,.]*\s?(%|percent|k|thousand|million|billion|x|times|hours?|days?|weeks?|years?|dollars?|views?)|\$\s?\d)/i, 2],
+  [/\?/, 1],
+];
+const PAYOFF = /\b(that'?s (the|why|how|it)|the whole trick|so the lesson|the point is|bottom line|in short|which means|that'?s what)\b/i;
+const LAUGH = /\[(laugh\w*|applause|chuckl\w*)\]|\((laugh\w*|applause)\)|\b(ha(ha)+|lol)\b/i;
+const WEAK_START = /^(and|but|so|or|because|um|uh|like|yeah|okay|right)\b/i;
+const FILLER = /\b(um+|uh+|you know|i mean|sort of|kind of)\b/gi;
+
+export const clean = (s) => String(s || '').replace(/\s+/g, ' ').trim();
+const wordsOf = (s) => clean(s).split(' ').filter(Boolean);
+
+/** Whisper chunks [{timestamp:[s,e], text}] -> [{start, end, text}] (drops empties, fixes null ends). */
+export function toSegments(chunks, duration = Infinity) {
+  const out = [];
+  for (const c of chunks || []) {
+    const text = clean(c.text);
+    if (!text || /^\[(blank_audio|music|silence)\]$/i.test(text)) continue;
+    const [s, e] = c.timestamp || [c.start, c.end];
+    const start = Math.max(0, Number(s) || 0);
+    let end = Number(e);
+    if (!Number.isFinite(end) || end <= start) end = Math.min(duration, start + Math.max(1.5, wordsOf(text).length * 0.35));
+    if (out.length && text === out[out.length - 1].text) continue; // Whisper repeats a line at window seams
+    out.push({ start, end, text });
+  }
+  return out;
+}
+
+/** Word timings spread over each segment by character length (Whisper gives segment-level stamps). */
+export function toWords(segments) {
+  const words = [];
+  for (const s of segments) {
+    const w = wordsOf(s.text);
+    if (!w.length) continue;
+    const weights = w.map((x) => Math.max(2, x.replace(/[^\p{L}\p{N}]/gu, '').length + 1));
+    const total = weights.reduce((a, b) => a + b, 0);
+    let t = s.start;
+    const span = Math.max(0.2, s.end - s.start);
+    w.forEach((text, i) => {
+      const d = (span * weights[i]) / total;
+      words.push({ text, start: t, end: t + d });
+      t += d;
+    });
+  }
+  return words;
+}
+
+/** RMS loudness per `step` seconds from 16 kHz mono samples. */
+export function envelope(audio, rate = 16000, step = 0.5) {
+  const n = Math.max(1, Math.floor(rate * step));
+  const out = new Float32Array(Math.ceil(audio.length / n));
+  for (let i = 0; i < out.length; i++) {
+    let sum = 0;
+    const a = i * n, b = Math.min(audio.length, a + n);
+    for (let j = a; j < b; j++) sum += audio[j] * audio[j];
+    out[i] = Math.sqrt(sum / Math.max(1, b - a));
+  }
+  return { step, values: out };
+}
+
+function energyOf(env, start, end) {
+  if (!env || !env.values?.length) return null;
+  const a = Math.floor(start / env.step), b = Math.max(a + 1, Math.ceil(end / env.step));
+  let s = 0, n = 0;
+  for (let i = a; i < b && i < env.values.length; i++) { s += env.values[i]; n++; }
+  return n ? s / n : null;
+}
+
+function mean(env) {
+  if (!env || !env.values?.length) return null;
+  let s = 0, n = 0;
+  for (const v of env.values) if (v > 0.003) { s += v; n++; }
+  return n ? s / n : null;
+}
+
+/** Candidate windows that start on a segment boundary and end on one, lasting minLen..maxLen seconds. */
+export function candidates(segments, { minLen = 15, maxLen = 60 } = {}) {
+  const out = [];
+  for (let i = 0; i < segments.length; i++) {
+    let text = '';
+    for (let j = i; j < segments.length; j++) {
+      text += (text ? ' ' : '') + segments[j].text;
+      const dur = segments[j].end - segments[i].start;
+      if (dur > maxLen) break;
+      if (dur >= minLen) out.push({ i, j, start: segments[i].start, end: segments[j].end, text });
+    }
+  }
+  return out;
+}
+
+/** Score one window. Returns { score, reasons[] } with every contribution named. */
+export function scoreWindow(w, segments, env, avgEnergy, { target = 35 } = {}) {
+  const reasons = [];
+  let score = 0;
+  const add = (v, why) => { if (v) { score += v; reasons.push(why); } };
+  const first = segments[w.i].text;
+  const opener = clean(segments.slice(w.i, w.i + 2).map((s) => s.text).join(' ')).slice(0, 160);
+  let hook = 0;
+  for (const [re, wt] of HOOKS) if (re.test(opener)) hook += wt;
+  add(Math.min(hook, 6) * 1.2, hook ? 'strong hook in the first seconds' : '');
+  let body = 0;
+  for (const [re, wt] of HOOKS) if (re.test(w.text)) body += wt * 0.35;
+  add(Math.min(body, 3), '');
+  add(PAYOFF.test(w.text) ? 2 : 0, 'has a payoff line');
+  add(/[.!?]["')\]]?$/.test(w.text.trim()) ? 1.5 : -1.5, /[.!?]["')\]]?$/.test(w.text.trim()) ? 'ends on a complete sentence' : 'ends mid-sentence');
+  add(/^[A-Z0-9"'$]/.test(first) && !WEAK_START.test(first) ? 1 : -1, WEAK_START.test(first) ? 'starts on a filler word' : 'clean start');
+  add(LAUGH.test(w.text) ? 2 : 0, 'laughter or reaction');
+  const dur = w.end - w.start;
+  const n = wordsOf(w.text).length;
+  const wps = n / Math.max(1, dur);
+  add(wps >= 2.2 && wps <= 4.2 ? 1 : wps < 1.4 ? -2 : 0, wps >= 2.2 && wps <= 4.2 ? 'lively pace' : wps < 1.4 ? 'slow or silent stretch' : '');
+  const fillers = (w.text.match(FILLER) || []).length;
+  add(fillers > 3 ? -Math.min(3, fillers * 0.3) : 0, fillers > 3 ? 'many filler words' : '');
+  const gap = w.i > 0 ? segments[w.i].start - segments[w.i - 1].end : 1;
+  add(gap >= 0.6 ? 0.8 : 0, gap >= 0.6 ? 'begins after a pause' : '');
+  const e = energyOf(env, w.start, w.end);
+  if (e != null && avgEnergy) {
+    const r = e / avgEnergy;
+    add(r > 1.15 ? Math.min(2, (r - 1) * 4) : r < 0.75 ? -1 : 0, r > 1.15 ? 'louder, more energetic audio' : r < 0.75 ? 'quiet audio' : '');
+  }
+  add(-Math.abs(dur - target) / 12, '');
+  return { score: Math.round(score * 100) / 100, reasons: reasons.filter(Boolean) };
+}
+
+/** Ranked, non-overlapping moments. */
+export function pickMoments(segments, env, { count = 10, minLen = 15, maxLen = 60, target = 35 } = {}) {
+  const avg = mean(env);
+  const scored = candidates(segments, { minLen, maxLen }).map((w) => ({ ...w, ...scoreWindow(w, segments, env, avg, { target }) }));
+  scored.sort((a, b) => b.score - a.score || a.start - b.start);
+  const picked = [];
+  const bag = (t) => new Set(wordsOf(t.toLowerCase()).map((w) => w.replace(/[^\p{L}\p{N}]/gu, '')).filter((w) => w.length > 2));
+  const similar = (a, b) => { let n = 0; for (const w of a) if (b.has(w)) n++; return n / Math.max(1, Math.min(a.size, b.size)); };
+  for (const c of scored) {
+    if (picked.length >= count) break;
+    if (picked.some((p) => c.start < p.end - 1 && c.end > p.start + 1)) continue;
+    c.bag = bag(c.text);
+    if (picked.some((p) => similar(c.bag, p.bag) > 0.7)) continue; // the same story told twice (re-runs, intros, ad reads)
+    picked.push(c);
+  }
+  return picked.map((c, k) => ({ id: k + 1, start: c.start, end: c.end, text: c.text, score: c.score, reasons: c.reasons, ...clipMeta(c.text) }));
+}
+
+/** Also exported for the transcript-only Hook Finder: plain text / SRT / VTT -> segments. */
+export function parseTranscript(src) {
+  const txt = String(src || '').replace(/\r/g, '');
+  const ts = (h, m, s, ms) => (+h || 0) * 3600 + (+m) * 60 + (+s) + (+(ms || 0)) / 1000;
+  const re = /(?:(\d+):)?(\d{1,2}):(\d{2})(?:[.,](\d{1,3}))?\s*-->\s*(?:(\d+):)?(\d{1,2}):(\d{2})(?:[.,](\d{1,3}))?[^\n]*\n([\s\S]*?)(?=\n\s*\n|\n?$)/g;
+  const out = [];
+  let m;
+  while ((m = re.exec(txt))) {
+    const text = clean(m[9].replace(/<[^>]+>/g, '').replace(/^\d+$/gm, ''));
+    if (text) out.push({ start: ts(m[1], m[2], m[3], (m[4] || '0').padEnd(3, '0')), end: ts(m[5], m[6], m[7], (m[8] || '0').padEnd(3, '0')), text });
+  }
+  if (out.length) return out;
+  // Plain text: optional [hh:mm:ss] or (mm:ss) stamps; otherwise sentences at ~2.8 words per second.
+  const sentences = txt.split(/\n+|(?<=[.!?])\s+/).map(clean).filter(Boolean);
+  let t = 0;
+  for (const s of sentences) {
+    const st = s.match(/^[[(]?(?:(\d+):)?(\d{1,2}):(\d{2})[\])]?\s*/);
+    if (st) t = ts(st[1], st[2], st[3]);
+    const text = st ? s.slice(st[0].length) : s;
+    if (!text) continue;
+    const d = Math.max(1.2, wordsOf(text).length / 2.8);
+    out.push({ start: t, end: t + d, text });
+    t += d;
+  }
+  return out;
+}
+
+const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+/** Title, description and hashtags from the clip's own words (local, no AI). */
+export function clipMeta(text) {
+  const sentences = clean(text).split(/(?<=[.!?])\s+/).filter(Boolean);
+  let best = sentences[0] || clean(text);
+  let bestScore = -1;
+  for (const s of sentences.slice(0, 6)) {
+    let sc = 0;
+    for (const [re, wt] of HOOKS) if (re.test(s)) sc += wt;
+    sc -= Math.abs(wordsOf(s).length - 11) * 0.08;
+    if (sc > bestScore) { bestScore = sc; best = s; }
+  }
+  let title = best.replace(WEAK_START, '').replace(/^[,\s]+/, '').replace(/[.,;:]+$/, '');
+  if (title.length > 70) title = title.slice(0, 67).replace(/\s+\S*$/, '') + '…';
+  title = cap(title);
+  const counts = new Map();
+  for (const w of wordsOf(text.toLowerCase())) {
+    const k = w.replace(/[^\p{L}\p{N}]/gu, '');
+    if (k.length < 4 || STOP.has(k) || /^\d+$/.test(k)) continue;
+    counts.set(k, (counts.get(k) || 0) + 1);
+  }
+  const top = [...counts.entries()].sort((a, b) => b[1] - a[1] || b[0].length - a[0].length).slice(0, 3).map(([k]) => `#${k}`);
+  const hashtags = [...new Set([...top, '#podcast', '#shorts'])].slice(0, 5);
+  const description = `${sentences.slice(0, 2).join(' ').slice(0, 220)}${sentences.length > 2 ? '…' : ''}`;
+  return { title, description, hashtags };
+}
+
+export const clock = (s) => {
+  s = Math.max(0, Math.round(s));
+  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), x = s % 60;
+  return h ? `${h}:${String(m).padStart(2, '0')}:${String(x).padStart(2, '0')}` : `${m}:${String(x).padStart(2, '0')}`;
+};

lib/zip.js

@@ -0,0 +1,41 @@
+// Minimal ZIP writer (stored, no compression: MP4s don't compress). Returns a Blob. © 2026 CyberMax. All rights reserved.
+const TABLE = (() => {
+  const t = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) { let c = n; for (let k = 0; k < 8; k++) c = c & 1 ? 0xEDB88320 ^ (c >>> 1) : c >>> 1; t[n] = c >>> 0; }
+  return t;
+})();
+export function crc32(bytes) {
+  let c = 0xFFFFFFFF;
+  for (let i = 0; i < bytes.length; i++) c = TABLE[(c ^ bytes[i]) & 0xFF] ^ (c >>> 8);
+  return (c ^ 0xFFFFFFFF) >>> 0;
+}
+
+/** files: [{name, data: Uint8Array | string}] -> Uint8Array parts of a .zip (Blob-ready). */
+export function zipParts(files, date = new Date()) {
+  const enc = new TextEncoder();
+  const dosTime = (date.getHours() << 11) | (date.getMinutes() << 5) | (date.getSeconds() >> 1);
+  const dosDate = ((date.getFullYear() - 1980) << 9) | ((date.getMonth() + 1) << 5) | date.getDate();
+  const parts = [], central = [];
+  let offset = 0;
+  for (const f of files) {
+    const name = enc.encode(f.name);
+    const data = typeof f.data === 'string' ? enc.encode(f.data) : f.data;
+    const crc = crc32(data);
+    const h = new DataView(new ArrayBuffer(30));
+    h.setUint32(0, 0x04034b50, true); h.setUint16(4, 20, true); h.setUint16(6, 0x0800, true); h.setUint16(8, 0, true);
+    h.setUint16(10, dosTime, true); h.setUint16(12, dosDate, true); h.setUint32(14, crc, true);
+    h.setUint32(18, data.length, true); h.setUint32(22, data.length, true); h.setUint16(26, name.length, true); h.setUint16(28, 0, true);
+    parts.push(new Uint8Array(h.buffer), name, data);
+    const c = new DataView(new ArrayBuffer(46));
+    c.setUint32(0, 0x02014b50, true); c.setUint16(4, 20, true); c.setUint16(6, 20, true); c.setUint16(8, 0x0800, true); c.setUint16(10, 0, true);
+    c.setUint16(12, dosTime, true); c.setUint16(14, dosDate, true); c.setUint32(16, crc, true); c.setUint32(20, data.length, true);
+    c.setUint32(24, data.length, true); c.setUint16(28, name.length, true); c.setUint32(42, offset, true);
+    central.push(new Uint8Array(c.buffer), name);
+    offset += 30 + name.length + data.length;
+  }
+  const size = central.reduce((a, b) => a + b.length, 0);
+  const end = new DataView(new ArrayBuffer(22));
+  end.setUint32(0, 0x06054b50, true); end.setUint16(8, files.length, true); end.setUint16(10, files.length, true);
+  end.setUint32(12, size, true); end.setUint32(16, offset, true);
+  return [...parts, ...central, new Uint8Array(end.buffer)];
+}

sample/growth-show-sample.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:54305400196a207ec7454726e23c2653085ae344406aa55b1c4dbea22face38c
+size 1394746

styles.css

@@ -0,0 +1,67 @@
+/* Clipwhit · © 2026 CyberMax. All rights reserved. */
+:root{--bg:#F7F4EE;--bg2:#EFEAE0;--card:#fff;--ink:#14121C;--muted:#5B5868;--line:#E4DED2;--brand:#6C3CF0;--brand-ink:#fff;--acc:#FFD23F;--ok:#0E7C55;--warn:#A4460E;--chip:#EEE9F9;--shadow:0 1px 2px rgba(20,18,28,.06),0 10px 28px rgba(20,18,28,.07);color-scheme:light}
+@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F0E15;--bg2:#15131D;--card:#1A1824;--ink:#EEEAF6;--muted:#A7A2B8;--line:#2B2838;--brand:#A58BFF;--brand-ink:#14121C;--acc:#FFD23F;--ok:#3DDC97;--warn:#FFB27A;--chip:#262236;--shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.3);color-scheme:dark}}
+:root[data-theme=dark]{--bg:#0F0E15;--bg2:#15131D;--card:#1A1824;--ink:#EEEAF6;--muted:#A7A2B8;--line:#2B2838;--brand:#A58BFF;--brand-ink:#14121C;--acc:#FFD23F;--ok:#3DDC97;--warn:#FFB27A;--chip:#262236;color-scheme:dark}
+*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
+a{color:var(--brand)}img,video{max-width:100%}
+.w{max-width:1120px;margin:0 auto;padding:0 16px}
+.top{display:flex;align-items:center;gap:10px;padding:14px 0}.me{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;margin-right:auto}.me img{width:34px;height:34px;border-radius:9px}
+.top nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-size:15px}.top nav a:hover{background:var(--chip);color:var(--ink)}
+@media (max-width:560px){.top nav a.h{display:none}}
+.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:18px 0 8px}.hero>*{min-width:0}
+@media (max-width:860px){.hero{grid-template-columns:1fr}}
+h1{font-size:clamp(32px,5.4vw,54px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 14px;text-wrap:balance}
+.lede{font-size:19px;color:var(--muted);margin:0 0 16px;max-width:640px}
+h2{font-size:clamp(24px,3.3vw,32px);letter-spacing:-.02em;line-height:1.15;margin:56px 0 10px}.sub{color:var(--muted);margin:0 0 18px;max-width:760px}
+.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.badge{font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
+.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:16px}
+.btn:hover{filter:brightness(1.07)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.sm{min-height:38px;padding:6px 12px;font-size:14px;border-radius:10px}
+.phone{justify-self:center;width:min(300px,80vw);aspect-ratio:9/16;border-radius:34px;background:#0c0b12;border:8px solid #22202c;box-shadow:var(--shadow);overflow:hidden;position:relative}
+.phone img,.phone video{width:100%;height:100%;object-fit:cover;display:block}
+.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
+.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.grid3 b{display:block;margin-bottom:4px}.grid3 p{margin:0;color:var(--muted)}
+.n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--chip);color:var(--brand);font-weight:800;margin-bottom:8px}
+/* app */
+#app{scroll-margin-top:12px}
+.app{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);margin-top:18px}
+.apphead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:12px}.apphead h2{margin:0;font-size:24px}
+#tier{font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--chip);color:var(--brand)}#tier[data-tier=pro],#tier[data-tier=agency]{background:var(--brand);color:var(--brand-ink)}
+.drop{border:2px dashed var(--line);border-radius:16px;padding:28px 16px;text-align:center;cursor:pointer;background:var(--bg)}.drop.over,.drop:hover{border-color:var(--brand);background:var(--chip)}.drop b{font-size:19px;display:block}.drop span{color:var(--muted);font-size:14px}
+.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
+.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
+.opts label{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--muted);gap:4px}
+input,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-height:42px;width:100%}
+input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--brand)}input[type=color]{padding:2px;height:42px}
+.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--muted);margin:6px 0}.check input{flex:none;margin-top:2px}
+.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;margin-top:16px}@media (max-width:860px){.work{grid-template-columns:minmax(0,1fr)}}
+#preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9}
+.status{margin:12px 0 4px;font-weight:600;min-height:1.6em}.track{height:8px;background:var(--chip);border-radius:999px;overflow:hidden}#bar{height:100%;width:0;background:var(--brand);transition:width .2s}
+#partial{color:var(--muted);font-size:14px;min-height:1.4em;margin:6px 0 0;overflow-wrap:anywhere}
+.moments,.results{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
+.moment{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--bg)}
+.moment.locked{opacity:.62}.pick{display:flex;flex-direction:column;align-items:center;gap:6px}
+.mhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}.time{font-weight:700}.score{color:var(--ok);font-weight:700}
+.title{font-weight:700;margin:6px 0}.excerpt{margin:0;color:var(--muted);font-size:14px}
+.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--chip)}.chip.tags{background:transparent;border:1px solid var(--line)}
+.nudge{font-size:13px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
+.mini{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:4px 8px;cursor:pointer}
+.lockmsg{font-size:13px;margin:6px 0 0}
+.clip{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--bg)}.clip video{width:150px;height:auto;aspect-ratio:9/16;background:#000;border-radius:10px}
+@media (max-width:420px){.clip{grid-template-columns:1fr}.clip video{width:100%}}
+.cbody p{margin:4px 0;font-size:14px}.muted{color:var(--muted)}.tags{color:var(--brand)}
+.panel{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px;background:var(--bg)}.panel h3{margin:0 0 8px;font-size:16px}
+.note{font-size:14px;color:var(--muted)}.warn{color:var(--warn)}
+.q{font:inherit;border:0;background:none;color:var(--brand);cursor:pointer;padding:0;text-decoration:underline}.q.on{font-weight:800}
+/* sections */
+.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}.tbl th,.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.tbl th{background:var(--chip);font-size:13px;text-transform:uppercase;letter-spacing:.04em}.tbl tr:last-child td{border-bottom:0}.tbl .us{background:color-mix(in srgb,var(--brand) 9%,var(--card))}
+.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
+.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.pl{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}.pl.best{border:2px solid var(--brand)}
+.pl p,.pl ul{margin:0;color:var(--muted);font-size:15px}.pl ul{padding-left:18px}.amt{font-size:38px;font-weight:800;letter-spacing:-.02em}.amt small{font-size:16px;color:var(--muted);font-weight:600}.pl .btn{margin-top:auto}.pl .alt{font-size:14px;text-align:center}
+.tagline{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}
+details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 10px}summary{font-weight:700;cursor:pointer}details p{margin:8px 0 0;color:var(--muted)}
+.band{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--bg);border-radius:18px;padding:22px;margin:40px 0 0}.band h2{margin:0 0 4px;color:var(--bg);font-size:24px}.band p{margin:0;opacity:.8}.band .btn{background:var(--acc);color:#14121C}
+.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.shots figure{margin:0}.shots img{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);display:block;width:100%;height:auto}.shots figcaption{font-size:14px;color:var(--muted);margin-top:6px}
+footer{color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:56px;padding:22px 0 40px}footer a{color:var(--muted)}
+:focus-visible{outline:3px solid var(--acc);outline-offset:2px}[hidden]{display:none!important}

vendor/ffmpeg/NOTICE.txt

@@ -0,0 +1,3 @@
+@ffmpeg/ffmpeg 0.12.15 (ESM build, unmodified), MIT License, Copyright (c) 2019 Jerome Wu.
+https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/LICENSE
+The ffmpeg core (@ffmpeg/core 0.12.10) is loaded at run time from the jsDelivr CDN and is not redistributed here.

vendor/ffmpeg/classes.js

@@ -0,0 +1,306 @@
+import { FFMessageType } from "./const.js";
+import { getMessageID } from "./utils.js";
+import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors.js";
+/**
+ * Provides APIs to interact with ffmpeg web worker.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * ```
+ */
+export class FFmpeg {
+    #worker = null;
+    /**
+     * #resolves and #rejects tracks Promise resolves and rejects to
+     * be called when we receive message from web worker.
+     */
+    #resolves = {};
+    #rejects = {};
+    #logEventCallbacks = [];
+    #progressEventCallbacks = [];
+    loaded = false;
+    /**
+     * register worker message event handlers.
+     */
+    #registerHandlers = () => {
+        if (this.#worker) {
+            this.#worker.onmessage = ({ data: { id, type, data }, }) => {
+                switch (type) {
+                    case FFMessageType.LOAD:
+                        this.loaded = true;
+                        this.#resolves[id](data);
+                        break;
+                    case FFMessageType.MOUNT:
+                    case FFMessageType.UNMOUNT:
+                    case FFMessageType.EXEC:
+                    case FFMessageType.FFPROBE:
+                    case FFMessageType.WRITE_FILE:
+                    case FFMessageType.READ_FILE:
+                    case FFMessageType.DELETE_FILE:
+                    case FFMessageType.RENAME:
+                    case FFMessageType.CREATE_DIR:
+                    case FFMessageType.LIST_DIR:
+                    case FFMessageType.DELETE_DIR:
+                        this.#resolves[id](data);
+                        break;
+                    case FFMessageType.LOG:
+                        this.#logEventCallbacks.forEach((f) => f(data));
+                        break;
+                    case FFMessageType.PROGRESS:
+                        this.#progressEventCallbacks.forEach((f) => f(data));
+                        break;
+                    case FFMessageType.ERROR:
+                        this.#rejects[id](data);
+                        break;
+                }
+                delete this.#resolves[id];
+                delete this.#rejects[id];
+            };
+        }
+    };
+    /**
+     * Generic function to send messages to web worker.
+     */
+    #send = ({ type, data }, trans = [], signal) => {
+        if (!this.#worker) {
+            return Promise.reject(ERROR_NOT_LOADED);
+        }
+        return new Promise((resolve, reject) => {
+            const id = getMessageID();
+            this.#worker && this.#worker.postMessage({ id, type, data }, trans);
+            this.#resolves[id] = resolve;
+            this.#rejects[id] = reject;
+            signal?.addEventListener("abort", () => {
+                reject(new DOMException(`Message # ${id} was aborted`, "AbortError"));
+            }, { once: true });
+        });
+    };
+    on(event, callback) {
+        if (event === "log") {
+            this.#logEventCallbacks.push(callback);
+        }
+        else if (event === "progress") {
+            this.#progressEventCallbacks.push(callback);
+        }
+    }
+    off(event, callback) {
+        if (event === "log") {
+            this.#logEventCallbacks = this.#logEventCallbacks.filter((f) => f !== callback);
+        }
+        else if (event === "progress") {
+            this.#progressEventCallbacks = this.#progressEventCallbacks.filter((f) => f !== callback);
+        }
+    }
+    /**
+     * Loads ffmpeg-core inside web worker. It is required to call this method first
+     * as it initializes WebAssembly and other essential variables.
+     *
+     * @category FFmpeg
+     * @returns `true` if ffmpeg core is loaded for the first time.
+     */
+    load = ({ classWorkerURL, ...config } = {}, { signal } = {}) => {
+        if (!this.#worker) {
+            this.#worker = classWorkerURL ?
+                new Worker(new URL(classWorkerURL, import.meta.url), {
+                    type: "module",
+                }) :
+                // We need to duplicated the code here to enable webpack
+                // to bundle worekr.js here.
+                new Worker(new URL("./worker.js", import.meta.url), {
+                    type: "module",
+                });
+            this.#registerHandlers();
+        }
+        return this.#send({
+            type: FFMessageType.LOAD,
+            data: config,
+        }, undefined, signal);
+    };
+    /**
+     * Execute ffmpeg command.
+     *
+     * @remarks
+     * To avoid common I/O issues, ["-nostdin", "-y"] are prepended to the args
+     * by default.
+     *
+     * @example
+     * ```ts
+     * const ffmpeg = new FFmpeg();
+     * await ffmpeg.load();
+     * await ffmpeg.writeFile("video.avi", ...);
+     * // ffmpeg -i video.avi video.mp4
+     * await ffmpeg.exec(["-i", "video.avi", "video.mp4"]);
+     * const data = ffmpeg.readFile("video.mp4");
+     * ```
+     *
+     * @returns `0` if no error, `!= 0` if timeout (1) or error.
+     * @category FFmpeg
+     */
+    exec = (
+    /** ffmpeg command line args */
+    args, 
+    /**
+     * milliseconds to wait before stopping the command execution.
+     *
+     * @defaultValue -1
+     */
+    timeout = -1, { signal } = {}) => this.#send({
+        type: FFMessageType.EXEC,
+        data: { args, timeout },
+    }, undefined, signal);
+    /**
+     * Execute ffprobe command.
+     *
+     * @example
+     * ```ts
+     * const ffmpeg = new FFmpeg();
+     * await ffmpeg.load();
+     * await ffmpeg.writeFile("video.avi", ...);
+     * // Getting duration of a video in seconds: ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.avi -o output.txt
+     * await ffmpeg.ffprobe(["-v", "error", "-show_entries", "format=duration", "-of", "default=noprint_wrappers=1:nokey=1", "video.avi", "-o", "output.txt"]);
+     * const data = ffmpeg.readFile("output.txt");
+     * ```
+     *
+     * @returns `0` if no error, `!= 0` if timeout (1) or error.
+     * @category FFmpeg
+     */
+    ffprobe = (
+    /** ffprobe command line args */
+    args, 
+    /**
+     * milliseconds to wait before stopping the command execution.
+     *
+     * @defaultValue -1
+     */
+    timeout = -1, { signal } = {}) => this.#send({
+        type: FFMessageType.FFPROBE,
+        data: { args, timeout },
+    }, undefined, signal);
+    /**
+     * Terminate all ongoing API calls and terminate web worker.
+     * `FFmpeg.load()` must be called again before calling any other APIs.
+     *
+     * @category FFmpeg
+     */
+    terminate = () => {
+        const ids = Object.keys(this.#rejects);
+        // rejects all incomplete Promises.
+        for (const id of ids) {
+            this.#rejects[id](ERROR_TERMINATED);
+            delete this.#rejects[id];
+            delete this.#resolves[id];
+        }
+        if (this.#worker) {
+            this.#worker.terminate();
+            this.#worker = null;
+            this.loaded = false;
+        }
+    };
+    /**
+     * Write data to ffmpeg.wasm.
+     *
+     * @example
+     * ```ts
+     * const ffmpeg = new FFmpeg();
+     * await ffmpeg.load();
+     * await ffmpeg.writeFile("video.avi", await fetchFile("../video.avi"));
+     * await ffmpeg.writeFile("text.txt", "hello world");
+     * ```
+     *
+     * @category File System
+     */
+    writeFile = (path, data, { signal } = {}) => {
+        const trans = [];
+        if (data instanceof Uint8Array) {
+            trans.push(data.buffer);
+        }
+        return this.#send({
+            type: FFMessageType.WRITE_FILE,
+            data: { path, data },
+        }, trans, signal);
+    };
+    mount = (fsType, options, mountPoint) => {
+        const trans = [];
+        return this.#send({
+            type: FFMessageType.MOUNT,
+            data: { fsType, options, mountPoint },
+        }, trans);
+    };
+    unmount = (mountPoint) => {
+        const trans = [];
+        return this.#send({
+            type: FFMessageType.UNMOUNT,
+            data: { mountPoint },
+        }, trans);
+    };
+    /**
+     * Read data from ffmpeg.wasm.
+     *
+     * @example
+     * ```ts
+     * const ffmpeg = new FFmpeg();
+     * await ffmpeg.load();
+     * const data = await ffmpeg.readFile("video.mp4");
+     * ```
+     *
+     * @category File System
+     */
+    readFile = (path, 
+    /**
+     * File content encoding, supports two encodings:
+     * - utf8: read file as text file, return data in string type.
+     * - binary: read file as binary file, return data in Uint8Array type.
+     *
+     * @defaultValue binary
+     */
+    encoding = "binary", { signal } = {}) => this.#send({
+        type: FFMessageType.READ_FILE,
+        data: { path, encoding },
+    }, undefined, signal);
+    /**
+     * Delete a file.
+     *
+     * @category File System
+     */
+    deleteFile = (path, { signal } = {}) => this.#send({
+        type: FFMessageType.DELETE_FILE,
+        data: { path },
+    }, undefined, signal);
+    /**
+     * Rename a file or directory.
+     *
+     * @category File System
+     */
+    rename = (oldPath, newPath, { signal } = {}) => this.#send({
+        type: FFMessageType.RENAME,
+        data: { oldPath, newPath },
+    }, undefined, signal);
+    /**
+     * Create a directory.
+     *
+     * @category File System
+     */
+    createDir = (path, { signal } = {}) => this.#send({
+        type: FFMessageType.CREATE_DIR,
+        data: { path },
+    }, undefined, signal);
+    /**
+     * List directory contents.
+     *
+     * @category File System
+     */
+    listDir = (path, { signal } = {}) => this.#send({
+        type: FFMessageType.LIST_DIR,
+        data: { path },
+    }, undefined, signal);
+    /**
+     * Delete an empty directory.
+     *
+     * @category File System
+     */
+    deleteDir = (path, { signal } = {}) => this.#send({
+        type: FFMessageType.DELETE_DIR,
+        data: { path },
+    }, undefined, signal);
+}

vendor/ffmpeg/const.js

@@ -0,0 +1,23 @@
+export const MIME_TYPE_JAVASCRIPT = "text/javascript";
+export const MIME_TYPE_WASM = "application/wasm";
+export const CORE_VERSION = "0.12.9";
+export const CORE_URL = `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
+export var FFMessageType;
+(function (FFMessageType) {
+    FFMessageType["LOAD"] = "LOAD";
+    FFMessageType["EXEC"] = "EXEC";
+    FFMessageType["FFPROBE"] = "FFPROBE";
+    FFMessageType["WRITE_FILE"] = "WRITE_FILE";
+    FFMessageType["READ_FILE"] = "READ_FILE";
+    FFMessageType["DELETE_FILE"] = "DELETE_FILE";
+    FFMessageType["RENAME"] = "RENAME";
+    FFMessageType["CREATE_DIR"] = "CREATE_DIR";
+    FFMessageType["LIST_DIR"] = "LIST_DIR";
+    FFMessageType["DELETE_DIR"] = "DELETE_DIR";
+    FFMessageType["ERROR"] = "ERROR";
+    FFMessageType["DOWNLOAD"] = "DOWNLOAD";
+    FFMessageType["PROGRESS"] = "PROGRESS";
+    FFMessageType["LOG"] = "LOG";
+    FFMessageType["MOUNT"] = "MOUNT";
+    FFMessageType["UNMOUNT"] = "UNMOUNT";
+})(FFMessageType || (FFMessageType = {}));

vendor/ffmpeg/errors.js

@@ -0,0 +1,4 @@
+export const ERROR_UNKNOWN_MESSAGE_TYPE = new Error("unknown message type");
+export const ERROR_NOT_LOADED = new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first");
+export const ERROR_TERMINATED = new Error("called FFmpeg.terminate()");
+export const ERROR_IMPORT_FAILURE = new Error("failed to import ffmpeg-core.js");

vendor/ffmpeg/index.js

@@ -0,0 +1,2 @@
+export * from "./classes.js";
+export * from "./types.js";

vendor/ffmpeg/types.js

@@ -0,0 +1,9 @@
+export var FFFSType;
+(function (FFFSType) {
+    FFFSType["MEMFS"] = "MEMFS";
+    FFFSType["NODEFS"] = "NODEFS";
+    FFFSType["NODERAWFS"] = "NODERAWFS";
+    FFFSType["IDBFS"] = "IDBFS";
+    FFFSType["WORKERFS"] = "WORKERFS";
+    FFFSType["PROXYFS"] = "PROXYFS";
+})(FFFSType || (FFFSType = {}));

vendor/ffmpeg/utils.js

@@ -0,0 +1,7 @@
+/**
+ * Generate an unique message ID.
+ */
+export const getMessageID = (() => {
+    let messageID = 0;
+    return () => messageID++;
+})();

vendor/ffmpeg/worker.js

@@ -0,0 +1,161 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+import { CORE_URL, FFMessageType } from "./const.js";
+import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED, ERROR_IMPORT_FAILURE, } from "./errors.js";
+let ffmpeg;
+const load = async ({ coreURL: _coreURL, wasmURL: _wasmURL, workerURL: _workerURL, }) => {
+    const first = !ffmpeg;
+    try {
+        if (!_coreURL)
+            _coreURL = CORE_URL;
+        // when web worker type is `classic`.
+        importScripts(_coreURL);
+    }
+    catch {
+        if (!_coreURL || _coreURL === CORE_URL)
+            _coreURL = CORE_URL.replace('/umd/', '/esm/');
+        // when web worker type is `module`.
+        self.createFFmpegCore = (await import(
+        /* @vite-ignore */ _coreURL)).default;
+        if (!self.createFFmpegCore) {
+            throw ERROR_IMPORT_FAILURE;
+        }
+    }
+    const coreURL = _coreURL;
+    const wasmURL = _wasmURL ? _wasmURL : _coreURL.replace(/.js$/g, ".wasm");
+    const workerURL = _workerURL
+        ? _workerURL
+        : _coreURL.replace(/.js$/g, ".worker.js");
+    ffmpeg = await self.createFFmpegCore({
+        // Fix `Overload resolution failed.` when using multi-threaded ffmpeg-core.
+        // Encoded wasmURL and workerURL in the URL as a hack to fix locateFile issue.
+        mainScriptUrlOrBlob: `${coreURL}#${btoa(JSON.stringify({ wasmURL, workerURL }))}`,
+    });
+    ffmpeg.setLogger((data) => self.postMessage({ type: FFMessageType.LOG, data }));
+    ffmpeg.setProgress((data) => self.postMessage({
+        type: FFMessageType.PROGRESS,
+        data,
+    }));
+    return first;
+};
+const exec = ({ args, timeout = -1 }) => {
+    ffmpeg.setTimeout(timeout);
+    ffmpeg.exec(...args);
+    const ret = ffmpeg.ret;
+    ffmpeg.reset();
+    return ret;
+};
+const ffprobe = ({ args, timeout = -1 }) => {
+    ffmpeg.setTimeout(timeout);
+    ffmpeg.ffprobe(...args);
+    const ret = ffmpeg.ret;
+    ffmpeg.reset();
+    return ret;
+};
+const writeFile = ({ path, data }) => {
+    ffmpeg.FS.writeFile(path, data);
+    return true;
+};
+const readFile = ({ path, encoding }) => ffmpeg.FS.readFile(path, { encoding });
+// TODO: check if deletion works.
+const deleteFile = ({ path }) => {
+    ffmpeg.FS.unlink(path);
+    return true;
+};
+const rename = ({ oldPath, newPath }) => {
+    ffmpeg.FS.rename(oldPath, newPath);
+    return true;
+};
+// TODO: check if creation works.
+const createDir = ({ path }) => {
+    ffmpeg.FS.mkdir(path);
+    return true;
+};
+const listDir = ({ path }) => {
+    const names = ffmpeg.FS.readdir(path);
+    const nodes = [];
+    for (const name of names) {
+        const stat = ffmpeg.FS.stat(`${path}/${name}`);
+        const isDir = ffmpeg.FS.isDir(stat.mode);
+        nodes.push({ name, isDir });
+    }
+    return nodes;
+};
+// TODO: check if deletion works.
+const deleteDir = ({ path }) => {
+    ffmpeg.FS.rmdir(path);
+    return true;
+};
+const mount = ({ fsType, options, mountPoint }) => {
+    const str = fsType;
+    const fs = ffmpeg.FS.filesystems[str];
+    if (!fs)
+        return false;
+    ffmpeg.FS.mount(fs, options, mountPoint);
+    return true;
+};
+const unmount = ({ mountPoint }) => {
+    ffmpeg.FS.unmount(mountPoint);
+    return true;
+};
+self.onmessage = async ({ data: { id, type, data: _data }, }) => {
+    const trans = [];
+    let data;
+    try {
+        if (type !== FFMessageType.LOAD && !ffmpeg)
+            throw ERROR_NOT_LOADED; // eslint-disable-line
+        switch (type) {
+            case FFMessageType.LOAD:
+                data = await load(_data);
+                break;
+            case FFMessageType.EXEC:
+                data = exec(_data);
+                break;
+            case FFMessageType.FFPROBE:
+                data = ffprobe(_data);
+                break;
+            case FFMessageType.WRITE_FILE:
+                data = writeFile(_data);
+                break;
+            case FFMessageType.READ_FILE:
+                data = readFile(_data);
+                break;
+            case FFMessageType.DELETE_FILE:
+                data = deleteFile(_data);
+                break;
+            case FFMessageType.RENAME:
+                data = rename(_data);
+                break;
+            case FFMessageType.CREATE_DIR:
+                data = createDir(_data);
+                break;
+            case FFMessageType.LIST_DIR:
+                data = listDir(_data);
+                break;
+            case FFMessageType.DELETE_DIR:
+                data = deleteDir(_data);
+                break;
+            case FFMessageType.MOUNT:
+                data = mount(_data);
+                break;
+            case FFMessageType.UNMOUNT:
+                data = unmount(_data);
+                break;
+            default:
+                throw ERROR_UNKNOWN_MESSAGE_TYPE;
+        }
+    }
+    catch (e) {
+        self.postMessage({
+            id,
+            type: FFMessageType.ERROR,
+            data: e.toString(),
+        });
+        return;
+    }
+    if (data instanceof Uint8Array) {
+        trans.push(data.buffer);
+    }
+    self.postMessage({ id, type, data }, trans);
+};