elanous 0.2.0 → 0.2.4

package/skills/motion-broll/reference/engine-api.md

@@ -0,0 +1,106 @@
+# Writing a clip
+
+A clip is a small HTML fragment in `motion/clips/NN-name.html`. `engine/build.py` wraps it with the engine, fonts and a cursor into one self-contained page, where `seek(t)` draws the frame at time `t`. Every style is a pure function of `t`: no CSS transitions, no timers, no state carried between frames. That is what makes frame-by-frame rendering with motion blur possible.
+
+## Fragment skeleton
+
+```html
+<title>04 Master prompt</title>
+<style>/* clip-specific CSS */</style>
+
+<div data-slot="world">  <!-- optional: elements beside the shape (a drop target, a folder tab) --> </div><!--/world-->
+<div data-slot="shape">
+  <!-- one layer per state; .L layers are anchored inside the shape -->
+  <div class="L" id="Lnotes"> … </div>
+  <div class="L" id="Ldoc"> … </div>
+</div><!--/shape-->
+
+<script>
+M.scene({
+  W:1920, H:1080, T:10,            // frame size (match the video) and clip length in seconds
+  bg:'#E9E7E2',                    // canvas colour; null = transparent (panel clip → render to .mov)
+  center:[960,540],                // screen point the camera centres on (move it for panels)
+  intro:0.15,                      // shape pops in at this time; null = already on screen
+  SH:{                             // the states the one shape morphs through
+    notes:{w:780,h:560,r:36,bg:'#FFFFFF',cam:1.3},
+    doc:{w:600,h:720,r:28,bg:'#FFFFFF',cam:1.2},
+  },
+  start:'notes', SEQ:[[5.1,'doc']],               // [clip-local time, state] – put each on its word
+  layers:[
+    {el:'Lnotes', tin:0.15, tout:5.1, anchor:'t'}, // anchor 'c' centre (default), 't' top-centre, 'l' left-centre
+    {el:'Ldoc', tin:5.1, tout:null, anchor:'t', update:(t,g)=>{ /* per-frame content, e.g. typing */ }},
+  ],
+  cursor:{size:44, clicks:[2.3], drags:[[6.9,7.8]], keys:[[0,760,460],[1.2,760,460],[1.9,330,250]]},
+  geom:(t,g)=>g,     // optional: change geometry (e.g. follow the cursor while dragged, g.fx/g.fy camera focus)
+  extra:(t,g)=>{},   // optional: per-frame work outside layers (world elements, indicators)
+});
+</script>
+```
+
+Coordinates are **world pixels**. The shape is centred at world (0,0) unless `geom` moves it (`g.cx`, `g.cy`). The camera draws world → screen as `center + cam × (world − focus)`. Choose `cam` per state so the state fills the frame: roughly 1.2–1.6 for cards, 1.8–2.2 for pills. The cursor keeps a constant size on screen.
+
+Layer content is positioned relative to its anchor, e.g. `left:-330px; top:40px` inside an `anchor:'t'` layer = 330px left of centre, 40px below the shape's top edge. Top-anchored content rides the top edge when the shape grows.
+
+## Engine API (`window.M`)
+
+| Call | What it does |
+|---|---|
+| `M.track(v0, [[t, value, spring?], …])` | A value that changes target many times: the sum of one closed-form spring per change. Returns `t => value`. |
+| `M.ctrack('#hex', [[t,'#hex'], …])` | The same for colours. Returns `t => 'rgb(...)'`. |
+| `M.MORPH`, `M.FAST`, `M.SLOW`, `M.SOFT`, `M.CAM`, `M.INSTANT` | Spring presets `[stiffness ω, damping ζ]`. FAST/SLOW for leading/trailing edges; INSTANT for invisible resets. |
+| `M.vis(t, tin, tout, {din, lin, lout})` | Content swap: exit blurs out fast, enter waits `din` then blurs in over `lin`. Returns `{o, blur, s, a, b}`. |
+| `M.apply(el, v)` | Applies a `vis` result to an element (opacity, blur, scale). |
+| `M.path([[t,x,y], …])` | Cursor or any point path, eased between keys with a slight human arc. |
+| `M.crossTimes(f, t0, t1, thresholds)` | When a rising value first crosses each threshold. Use it to trigger springs from a dragged value. |
+| `M.icon(name, size, colour, strokeW?)` | Icon from the set in `M.IC`, with stroke normalised so all icons match. |
+| `M.setText(el, s)` | Set text only when it changed (cheap per frame). |
+| `M.eo`, `M.eio`, `M.clamp`, `M.lerp`, `M.S` | Easing and spring helpers. |
+
+Icons in `M.IC`: arrow, check, x, plus, folder, terminal, file, pencil, coin, clock, chip, sparkle, castle, search. Add more as 24-grid stroke paths (e.g. from Lucide, ISC licence).
+
+## Patterns (see `examples/opus-aoe2/`)
+
+| Pattern | How | Example |
+|---|---|---|
+| Pill → card → control | SH states + layers with tin/tout | 01 |
+| Liquid indicator | Two `M.track`s for left/right edges; the edge moving forward uses `M.FAST`, the trailing one `M.SLOW` | 01 (levels), 02 (effort) |
+| Typing | `PROMPT.slice(0, n)` with `n` from time, and a caret | 02 |
+| Rows or bars appearing on words | Per-row `M.vis(t, wordTime, …)` + width or height from a spring | 02, 04, 05 |
+| Direct manipulation | While the cursor is held, the value comes from its position; on release it springs from where it was | 03 (slider) |
+| Drag and drop | `geom` sets `g.cx/cy` from the cursor while held; a world-slot drop target; `g.fx` moves the camera focus | 04 |
+| Transparent panel | `bg:null`, `center` in the empty area, light shapes | 02 |
+
+## Interaction vocabulary
+
+Map what the speaker says onto these:
+- primary action (pill + click)
+- progress (loader, bars, lanes)
+- confirmation (check, toast)
+- live status (island)
+- detail card with a drag
+- slider with rubber band
+- toggle
+- tabs
+- chart with tooltip
+- search and filter list
+- file → drag → drop target
+- terminal typing
+- side-by-side comparison
+- chapter card
+
+## plan.json
+
+```json
+{
+  "title": "Opus 5.5 · Age of Empires II",
+  "video": "work/source.mp4",
+  "fps": "30000/1001",
+  "clips": [
+    {"id":"01","title":"Opus 5.5 drop","line":"“Opus 5.5 just came out …”","in":0.30,"out":6.75,"kind":"full","file":"out/01-opus-drop_0m00s30.mp4"},
+    {"id":"02","title":"Folder → Claude Code → four builds","line":"“I created a blank folder …”","in":6.75,"out":22.5,"kind":"panel","file":"out/02-pip-builds_0m06s75.mov"}
+  ],
+  "notes": ["The typed prompt and the cost/time/tokens bars are illustrative."]
+}
+```
+
+Paths are relative to `plan.json`. `out` is when the clip leaves the timeline; if the clip is shorter, the composite holds its last frame.

package/skills/motion-broll/scripts/composite.py

@@ -0,0 +1,14 @@
+"""Preview composite: lay the rendered clips over the source video (hard cuts, original audio).
+usage: python3 composite.py motion/plan.json motion/out/preview.mp4
+Clips shorter than their slot hold their last frame. Transparent .mov clips composite with alpha."""
+import json, sys, subprocess, pathlib
+P = json.load(open(sys.argv[1])); base = pathlib.Path(sys.argv[1]).parent; out = sys.argv[2]
+rel = lambda f: str((base/f).resolve()) if not pathlib.Path(f).is_absolute() else f
+cmd = ['ffmpeg', '-loglevel', 'error', '-y', '-i', rel(P['video'])]; fc = []; last = '0:v'
+for i, c in enumerate(P['clips'], 1):
+    cmd += ['-i', rel(c['file'])]
+    fc.append(f"[{i}:v]format=yuva444p,tpad=stop_mode=clone:stop_duration=2,setpts=PTS-STARTPTS+{c['in']}/TB[c{i}]")
+    fc.append(f"[{last}][c{i}]overlay=enable='between(t,{c['in']},{c['out']})':eof_action=pass[v{i}]"); last = f'v{i}'
+fc.append(f'[{last}]format=yuv420p[v]')
+cmd += ['-filter_complex', ';'.join(fc), '-map', '[v]', '-map', '0:a?', '-c:v', 'libx264', '-crf', '18', '-c:a', 'copy', '-movflags', '+faststart', '-shortest', out]
+subprocess.run(cmd, check=True); print('wrote', out)

package/skills/motion-broll/scripts/inspect_video.py

@@ -0,0 +1,34 @@
+"""Inspect a talking-head video: specs, a contact sheet, and regions that are empty (e.g. a picture-in-picture layout).
+usage: python3 inspect_video.py video.mp4 outdir"""
+import sys, json, subprocess, numpy as np, os
+v, out = sys.argv[1], sys.argv[2]; os.makedirs(out, exist_ok=True)
+p = json.loads(subprocess.run(['ffprobe','-v','error','-print_format','json','-show_streams','-show_format',v],capture_output=True,text=True).stdout)
+vs = [s for s in p['streams'] if s['codec_type']=='video'][0]
+W, H = int(vs['width']), int(vs['height']); fps = vs['r_frame_rate']; dur = float(p['format']['duration'])
+subprocess.run(['ffmpeg','-loglevel','error','-y','-i',v,'-vf',f'fps=1/{max(1,dur/16):.2f},scale=480:-1,tile=4x4:padding=4','-frames:v','1',f'{out}/contact.png'])
+raw = subprocess.run(['ffmpeg','-loglevel','error','-i',v,'-vf','fps=4,scale=96:54,format=gray','-f','rawvideo','-'],capture_output=True).stdout
+fr = np.frombuffer(raw,np.uint8).reshape(-1,54,96)
+# a column band that is near-black for a stretch = free space for an overlay panel
+sections=[]; prev=None; start=0
+for i,f in enumerate(fr):
+    dark = f[:,60:].mean()<8 or f[:,:36].mean()<8
+    if dark!=prev:
+        if prev is not None: sections.append({'from':start/4,'to':i/4,'layout':'pip' if prev else 'full'})
+        start=i; prev=dark
+sections.append({'from':start/4,'to':len(fr)/4,'layout':'pip' if prev else 'full'})
+# track the subject box through each PiP section; flag any resize (a panel sized for one box can collide with another)
+for s in sections:
+    if s['layout']!='pip': continue
+    boxes=[]
+    for i in range(int(s['from']*4),int(s['to']*4)):
+        f=fr[i]; cols=np.where(f.max(0)>20)[0]; rows=np.where(f.max(1)>20)[0]
+        if len(cols)==0: continue
+        boxes.append((i/4,[int(cols.min()*W/96),int(rows.min()*H/54),int((cols.max()+1)*W/96),int((rows.max()+1)*H/54)]))
+    s['subject_box']=[min(b[1][0] for b in boxes),min(b[1][1] for b in boxes),max(b[1][2] for b in boxes),max(b[1][3] for b in boxes)]
+    changes=[]; ref=boxes[0][1]
+    for t,b in boxes:
+        if max(abs(b[k]-ref[k]) for k in range(4))>2*W/96: changes.append({'at':t,'box':b}); ref=b
+    s['box_changes']=changes
+    if changes: print(f"WARNING: subject box changes size/position inside PiP section {s['from']}-{s['to']}s at {[c['at'] for c in changes]}. Keep panels clear of the largest box, or ask the user whether the change is intended.")
+info={'width':W,'height':H,'fps':fps,'duration':dur,'sections':sections}
+json.dump(info,open(f'{out}/video.json','w'),indent=1); print(json.dumps(info,indent=1))

package/skills/motion-broll/scripts/make_pages.py

@@ -0,0 +1,34 @@
+"""Write viewer.html (step through clips) and compare.html (original vs preview, synced) next to the renders.
+usage: python3 make_pages.py motion/plan.json motion/out/preview.mp4"""
+import json, sys, pathlib, os
+S = pathlib.Path(__file__).resolve().parent.parent / 'templates'
+plan_p = pathlib.Path(sys.argv[1]); P = json.load(open(plan_p)); base = plan_p.parent
+preview = pathlib.Path(sys.argv[2]).resolve(); out = preview.parent
+rel = lambda f: os.path.relpath((base / f).resolve(), out)
+fmt = lambda t: f"{int(t//60)}:{t%60:05.2f}"
+title = P.get('title', 'Video')
+def web_src(c):
+    f = (base / c['file']).resolve()
+    if f.suffix.lower() == '.mov':  # browsers can't play ProRes: make an on-black preview for the page
+        pv = out / (f.stem + '_preview.mp4')
+        os.system(f'ffmpeg -loglevel error -y -f lavfi -i color=black:s=1920x1080 -i "{f}" -filter_complex "[0][1]overlay=shortest=1" -c:v libx264 -crf 20 -pix_fmt yuv420p "{pv}"')
+        return pv.name
+    return os.path.relpath(f, out)
+clips = [{'n': c['id'], 't': c['title'], 'tc': f"{fmt(c['in'])} – {fmt(c['out'])}", 'q': c.get('line', ''), 'f': pathlib.Path(c['file']).name,
+          'src': web_src(c), **({'alpha': True} if c.get('kind') == 'panel' else {})} for c in P['clips']]
+clips.insert(0, {'n': '▶', 'full': True, 't': 'Full preview · your video with every clip', 'tc': 'whole video', 'q': 'Composite for review. For the final cut, place the clips in your editor.', 'f': preview.name, 'src': preview.name})
+v = open(S / 'viewer.html').read().replace('/*CLIPS*/[]', json.dumps(clips, ensure_ascii=False)).replace('/*TITLE*/', title).replace('/*SUB*/', f"{len(P['clips'])} clips + full preview")
+open(out / 'viewer.html', 'w').write(v)
+dur = float(os.popen(f'ffprobe -v error -show_entries format=duration -of csv=p=0 "{preview}"').read().strip() or 0)
+marks = [[c['in'], c['out'], c['id'], c['title']] for c in P['clips']]
+c = (open(S / 'compare.html').read().replace('/*DUR*/0', f'{dur:.2f}').replace('/*MARKS*/[]', json.dumps(marks, ensure_ascii=False))
+     .replace('/*ORIG*/', rel(P['video'])).replace('/*BROLL*/', preview.name).replace('/*TITLE*/', title)
+     .replace('/*SUB*/', 'Left or top is the original. Right or bottom has the motion graphics cut in.'))
+open(out / 'compare.html', 'w').write(c); print('wrote', out / 'viewer.html', 'and', out / 'compare.html')
+# TIMING.md for the editor
+rows = ['| File | In | Out | Treatment | Covers the line |', '|---|---|---|---|---|']
+for c in P['clips']:
+    rows.append(f"| {pathlib.Path(c['file']).name} | {fmt(c['in'])} | {fmt(c['out'])} | {'transparent panel' if c.get('kind') == 'panel' else 'full-frame cutaway'} | {c.get('line', '')} |")
+notes = P.get('notes', [])
+open(out / 'TIMING.md', 'w').write(f"# Motion graphics for {title}\n\nEach file name ends with its timeline in-point (`0m32s40` = 0:32.40). Transparent panels are ProRes 4444 .mov files: put them on a track above the video.\n\n" + '\n'.join(rows) + ('\n\nNotes\n' + '\n'.join('- ' + n for n in notes) if notes else '') + '\n')
+print('wrote', out / 'TIMING.md')

package/skills/motion-broll/scripts/setup.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# One-time setup in the user's project. Installs Playwright + Chromium into ./motion/node_modules.
+set -e
+MOTION_DIR="${1:-./motion}"
+mkdir -p "$MOTION_DIR"/{clips,dist,out,work}
+missing=()
+command -v node >/dev/null || missing+=("node (https://nodejs.org)")
+command -v ffmpeg >/dev/null || missing+=("ffmpeg (macOS: brew install ffmpeg)")
+command -v python3 >/dev/null || missing+=("python3")
+if [ ${#missing[@]} -gt 0 ]; then echo "Missing: ${missing[*]}"; exit 1; fi
+python3 -c "import numpy" 2>/dev/null || python3 -m pip install --user numpy || python3 -m pip install --break-system-packages numpy
+if [ ! -d "$MOTION_DIR/node_modules/playwright" ]; then
+  (cd "$MOTION_DIR" && [ -f package.json ] || echo '{"private":true}' > "$MOTION_DIR/package.json"; cd "$MOTION_DIR" && npm install --silent playwright && npx playwright install chromium)
+fi
+ffmpeg -hide_banner -encoders 2>/dev/null | grep -q prores_ks || echo "Note: your ffmpeg has no prores_ks encoder; transparent panel clips will fail."
+echo "Ready. Clips go in $MOTION_DIR/clips, renders in $MOTION_DIR/out."

package/skills/motion-broll/scripts/words.py

@@ -0,0 +1,13 @@
+"""SRT -> estimated word timestamps (spreads each cue across its characters; ~0.2s accuracy).
+If faster-whisper is installed, prefer real word timestamps from the audio.
+usage: python3 words.py transcript.srt > words.txt"""
+import sys
+def ts(x):
+    h,m,r=x.strip().split(':'); s,ms=r.replace('.',',').split(','); return int(h)*3600+int(m)*60+int(s)+int(ms)/1000
+for blk in open(sys.argv[1],encoding='utf-8').read().strip().split('\n\n'):
+    L=blk.strip().split('\n')
+    if len(L)<3 or '-->' not in L[1]: continue
+    a,b=[ts(x) for x in L[1].split('-->')]; words=' '.join(L[2:]).split(); n=sum(len(w)+1 for w in words); c=0
+    out=[]; c=0
+    for w in words: out.append(f'{a+(b-a)*c/n:.2f}:{w}'); c+=len(w)+1
+    print(' '.join(out))

package/skills/motion-broll/templates/compare.html

@@ -0,0 +1,135 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>/*TITLE*/ before and after</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap">
+<style>
+:root{--bg:#E9E7E2;--panel:#FFFFFF;--ink:#0B0B0B;--muted:#7D7A74;--line:#DAD6CF;--soft:#F3F1ED;--acc:#FF5A1F;--stage:#0B0B0B;
+ --sans:'Geist',system-ui,-apple-system,sans-serif;--mono:'Geist Mono',ui-monospace,monospace}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141412;--panel:#1D1C1A;--ink:#F2F0EC;--muted:#9C9891;--line:#34322E;--soft:#262522;color-scheme:dark}}
+:root[data-theme="dark"]{--bg:#141412;--panel:#1D1C1A;--ink:#F2F0EC;--muted:#9C9891;--line:#34322E;--soft:#262522;color-scheme:dark}
+body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
+.wrap{max-width:1400px;margin:0 auto;padding-inline:20px;padding-block:24px 44px;display:grid;gap:16px}
+header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
+h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
+.sub{color:var(--muted);font-size:14px}
+.seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
+.seg button{font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:transparent;border:0;border-radius:9px;padding:6px 13px;cursor:pointer}
+.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
+button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
+.views{display:grid;gap:14px}
+.views.side{grid-template-columns:1fr 1fr}
+.views.stack{grid-template-columns:minmax(0,960px);justify-content:center}
+@media (max-width:760px){.views.side{grid-template-columns:1fr}}
+.card{background:var(--panel);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px -14px rgba(0,0,0,.2)}
+.lab{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:14px;font-weight:600}
+.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
+.card.after .dot{background:var(--acc)}
+.screen{position:relative;aspect-ratio:16/9;background:var(--stage);max-width:100%}
+video{position:absolute;inset:0;width:100%;height:100%;display:block}
+.wipe{display:none}
+.views.wipe-mode .card.before,.views.wipe-mode .card.after{display:none}
+.views.wipe-mode{grid-template-columns:minmax(0,1100px);justify-content:center}
+.views.wipe-mode .wipe{display:block}
+#wTop{clip-path:inset(0 0 0 50%)}
+.handle{position:absolute;top:0;bottom:0;width:3px;background:#fff;left:50%;transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
+.handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.3)}
+.wl{position:absolute;top:10px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);border-radius:999px;padding:3px 10px}
+.bar{background:var(--panel);border-radius:16px;padding:14px 16px;display:grid;gap:12px}
+.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
+.btn{font:inherit;font-size:14px;font-weight:500;color:var(--bg);background:var(--ink);border:0;border-radius:10px;padding:8px 16px;cursor:pointer;min-width:84px}
+.btn.ghost{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
+.time{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
+.now{font-size:14px;font-weight:500}
+.now b{color:var(--acc);font-weight:600}
+.track{position:relative;height:44px;cursor:pointer;touch-action:none}
+.rail{position:absolute;left:0;right:0;top:26px;height:6px;border-radius:3px;background:var(--soft)}
+.fill{position:absolute;left:0;top:26px;height:6px;border-radius:3px;background:var(--ink)}
+.mk{position:absolute;top:0;height:20px;border-radius:6px;background:color-mix(in srgb,var(--acc) 18%,transparent);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);overflow:hidden;box-sizing:border-box}
+.mk.on{background:var(--acc);color:#fff;border-color:var(--acc)}
+.knob{position:absolute;top:20px;width:18px;height:18px;border-radius:50%;background:var(--ink);transform:translateX(-9px);box-shadow:0 0 0 3px var(--panel)}
+.foot{font-size:13px;color:var(--muted);max-width:80ch;margin:0}
+</style>
+
+<div class="wrap">
+  <header>
+    <div><h1>Before and after · motion B-roll</h1><div class="sub">/*SUB*/</div></div>
+    <div class="seg" role="group" aria-label="Layout">
+      <button type="button" data-mode="side" aria-pressed="true">Side by side</button>
+      <button type="button" data-mode="stack" aria-pressed="false">Stacked</button>
+      <button type="button" data-mode="wipe-mode" aria-pressed="false">Wipe</button>
+    </div>
+  </header>
+
+  <div class="views side" id="views">
+    <div class="card before"><div class="lab"><span class="dot"></span>Original</div><div class="screen"><video id="vA" src="/*ORIG*/" muted playsinline preload="auto"></video></div></div>
+    <div class="card after"><div class="lab"><span class="dot"></span>With motion B-roll</div><div class="screen"><video id="vB" src="/*BROLL*/" muted playsinline preload="auto"></video></div></div>
+    <div class="card wipe"><div class="lab"><span class="dot"></span>Drag across the picture to compare</div>
+      <div class="screen" id="wScreen" style="touch-action:none;cursor:ew-resize">
+        <video id="wBot" src="/*ORIG*/" muted playsinline preload="auto"></video>
+        <video id="wTop" src="/*BROLL*/" muted playsinline preload="auto"></video>
+        <span class="wl" style="left:10px">Original</span><span class="wl" style="right:10px">B-roll</span>
+        <div class="handle" id="handle"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bar">
+    <div class="ctl">
+      <button class="btn" id="play" type="button">Play</button>
+      <button class="btn ghost" id="snd" type="button">Sound on</button>
+      <span class="time" id="time">0:00.0</span>
+      <span class="now" id="now">Speaker only</span>
+    </div>
+    <div class="track" id="track" role="slider" aria-label="Seek" tabindex="0" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
+      <div class="rail"></div><div class="fill" id="fill"></div><div id="marks"></div><div class="knob" id="knob"></div>
+    </div>
+  </div>
+  <p class="foot">Orange blocks on the timeline are where an animation is on screen. Click one to jump to it. Arrow keys skip 2 seconds, space plays and pauses.</p>
+</div>
+
+<script>
+const D=/*DUR*/0;
+const CL=/*MARKS*/[];
+const $=id=>document.getElementById(id);
+const views=$('views'); let mode='side';
+const master=()=>mode==='wipe-mode'?$('wTop'):$('vB');
+const followers=()=>mode==='wipe-mode'?[$('wBot')]:[$('vA')];
+const all=['vA','vB','wBot','wTop'].map($);
+$('marks').innerHTML=CL.map((c,i)=>`<div class="mk" data-i="${i}" style="left:${c[0]/D*100}%;width:${(c[1]-c[0])/D*100}%">${c[2]}</div>`).join('');
+function fmt(t){const m=Math.floor(t/60),s=t-m*60;return m+':'+(s<10?'0':'')+s.toFixed(1);}
+function seek(t){t=Math.max(0,Math.min(D-0.05,t));all.forEach(v=>{try{v.currentTime=t}catch(e){}});paint(t);}
+function paint(t){
+  $('fill').style.width=(t/D*100)+'%';$('knob').style.left=(t/D*100)+'%';$('time').textContent=fmt(t)+' / '+fmt(D);$('track').setAttribute('aria-valuenow',t.toFixed(1));
+  const c=CL.findIndex(c=>t>=c[0]&&t<c[1]);$('now').innerHTML=c<0?'Speaker only':`<b>${CL[c][2]}</b> · ${CL[c][3]}`;
+  document.querySelectorAll('.mk').forEach(m=>m.classList.toggle('on',+m.dataset.i===c));
+}
+function tick(){const m=master();const t=m.currentTime;for(const f of followers()){if(Math.abs(f.currentTime-t)>0.08){try{f.currentTime=t}catch(e){}} if(m.paused!==f.paused){m.paused?f.pause():f.play().catch(()=>{});}}paint(t);requestAnimationFrame(tick);}
+requestAnimationFrame(tick);
+function setPlay(p){const m=master();if(p){m.play().catch(()=>{});followers().forEach(f=>f.play().catch(()=>{}));}else{all.forEach(v=>v.pause());}$('play').textContent=p?'Pause':'Play';}
+$('play').onclick=()=>setPlay(master().paused);
+master().addEventListener('ended',()=>setPlay(false));
+all.forEach(v=>v.addEventListener('ended',()=>{if(v===master()){setPlay(false);seek(0);}}));
+let sound=false;function applySound(){all.forEach(v=>v.muted=true);master().muted=!sound;$('snd').textContent=sound?'Sound off':'Sound on';}
+$('snd').onclick=()=>{sound=!sound;applySound();};
+document.querySelectorAll('.seg button').forEach(b=>b.onclick=()=>{
+  const t=master().currentTime, playing=!master().paused; all.forEach(v=>v.pause());
+  mode=b.dataset.mode; views.className='views '+mode; document.querySelectorAll('.seg button').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));
+  seek(t); applySound(); if(playing) setPlay(true);
+});
+// scrubbing
+const tr=$('track');let drag=false;
+const tAt=e=>{const r=tr.getBoundingClientRect();return (e.clientX-r.left)/r.width*D;};
+tr.addEventListener('pointerdown',e=>{const mk=e.target.closest('.mk');if(mk){seek(CL[+mk.dataset.i][0]+0.05);return;}drag=true;tr.setPointerCapture(e.pointerId);seek(tAt(e));});
+tr.addEventListener('pointermove',e=>{if(drag)seek(tAt(e));});
+tr.addEventListener('pointerup',()=>drag=false);
+document.addEventListener('keydown',e=>{if(e.key===' '){e.preventDefault();$('play').click();}else if(e.key==='ArrowRight'){seek(master().currentTime+2);}else if(e.key==='ArrowLeft'){seek(master().currentTime-2);}});
+// wipe
+const ws=$('wScreen');let wd=false;
+function setWipe(e){const r=ws.getBoundingClientRect();const p=Math.max(0,Math.min(1,(e.clientX-r.left)/r.width));$('wTop').style.clipPath=`inset(0 0 0 ${p*100}%)`;$('handle').style.left=(p*100)+'%';}
+ws.addEventListener('pointerdown',e=>{wd=true;ws.setPointerCapture(e.pointerId);setWipe(e);});
+ws.addEventListener('pointermove',e=>{if(wd)setWipe(e);});
+ws.addEventListener('pointerup',()=>wd=false);
+applySound();paint(0);
+</script>
+
+</html>

package/skills/motion-broll/templates/viewer.html

@@ -0,0 +1,97 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>/*TITLE*/ B-roll</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap">
+<style>
+:root{
+  --bg:#E9E7E2; --panel:#FFFFFF; --ink:#0B0B0B; --muted:#7D7A74; --line:#DEDAD3; --soft:#F3F1ED; --acc:#FF5A1F; --stage:#D9D6D0;
+  --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
+}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#141412;--panel:#1D1C1A;--ink:#F2F0EC;--muted:#9C9891;--line:#34322E;--soft:#262522;--stage:#0B0B0A;color-scheme:dark}}
+:root[data-theme="dark"]{--bg:#141412;--panel:#1D1C1A;--ink:#F2F0EC;--muted:#9C9891;--line:#34322E;--soft:#262522;--stage:#0B0B0A;color-scheme:dark}
+body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
+.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:28px 48px;display:grid;gap:20px}
+header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
+h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
+.sub{color:var(--muted);font-size:14px}
+.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
+@media (max-width:860px){.main{grid-template-columns:1fr}}
+.player{background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px -14px rgba(0,0,0,.18)}
+.screen{position:relative;aspect-ratio:16/9;background:var(--stage);max-width:100%}
+video{position:absolute;inset:0;width:100%;height:100%;display:block}
+.info{padding:16px 18px 18px;display:grid;gap:10px}
+.meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
+.tc{font-family:var(--mono);font-size:13px;background:var(--soft);border-radius:8px;padding:3px 9px;font-variant-numeric:tabular-nums}
+.tag{font-size:12px;font-weight:500;color:#fff;background:var(--acc);border-radius:999px;padding:2px 9px}
+.title{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
+.quote{margin:0;color:var(--muted);font-size:15px;max-width:65ch}
+.file{font-family:var(--mono);font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
+.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+button{font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:7px 13px;cursor:pointer}
+button:hover{border-color:var(--muted)}
+button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
+button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
+.spacer{flex:1}
+.hint{font-size:12.5px;color:var(--muted)}
+.list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
+.item button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;text-align:left;background:var(--panel);border:1px solid transparent;border-radius:14px;padding:11px 12px}
+.item button[aria-current="true"]{border-color:var(--ink)}
+.num{font-family:var(--mono);font-size:13px;width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center}
+.item button[aria-current="true"] .num{background:var(--acc);color:#fff}
+.it{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
+.iq{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.itc{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
+.foot{font-size:13px;color:var(--muted);max-width:75ch}
+@media (prefers-reduced-motion: reduce){video{animation:none}}
+</style>
+
+<div class="wrap">
+  <header>
+    <h1>/*TITLE*/ · B-roll</h1>
+    <span class="sub">/*SUB*/</span>
+  </header>
+  <div class="main">
+    <section class="player" aria-label="Clip player">
+      <div class="screen"><video id="vid" playsinline muted autoplay loop preload="auto"></video></div>
+      <div class="info">
+        <div class="meta"><span class="tc" id="tc"></span><button type="button" id="snd" style="padding:3px 10px;font-size:13px">Sound on</button><span class="tag" id="tag" hidden>Transparent overlay</span></div>
+        <h2 class="title" id="title"></h2>
+        <p class="quote" id="quote"></p>
+        <div class="file" id="file"></div>
+        <div class="controls">
+          <button id="prev" type="button">← Prev</button>
+          <button id="play" type="button" class="primary">Pause</button>
+          <button id="next" type="button">Next →</button>
+          <span class="spacer"></span>
+          <label class="hint"><input type="checkbox" id="auto"> Play all in order</label>
+        </div>
+      </div>
+    </section>
+    <ol class="list" id="list"></ol>
+  </div>
+  <p class="foot">The timecode is where each clip goes in your edit. Transparent panel clips are shown here on black; in your edit they sit in the empty area of the shot. Arrow keys switch clips and space pauses.</p>
+</div>
+
+<script>
+const CLIPS=/*CLIPS*/[];
+const $=id=>document.getElementById(id);
+const vid=$('vid'), list=$('list');
+let cur=0, touched=false; addEventListener('pointerdown',()=>{touched=true;},{capture:true}); addEventListener('keydown',()=>{touched=true;},{capture:true});
+list.innerHTML=CLIPS.map((c,i)=>`<li class="item"><button type="button" data-i="${i}"><span class="num">${c.n}</span><span><div class="it">${c.t}</div><div class="itc">${c.tc}</div><div class="iq">${c.q}</div></span></button></li>`).join('');
+function show(i){
+  cur=(i+CLIPS.length)%CLIPS.length; const c=CLIPS[cur];
+  $('tc').textContent=c.tc; $('title').textContent=c.n+' · '+c.t; $('quote').textContent=c.q; $('file').textContent=c.f; $('tag').hidden=!c.alpha;
+  vid.loop=!$('auto').checked; vid.muted=!(c.full&&touched); vid.src=c.src; vid.play().catch(()=>{}); $('play').textContent='Pause'; $('snd').hidden=!c.full; $('snd').textContent=vid.muted?'Sound on':'Sound off';
+  list.querySelectorAll('button').forEach(b=>b.setAttribute('aria-current',String(+b.dataset.i===cur)));
+}
+list.addEventListener('click',e=>{const b=e.target.closest('button[data-i]'); if(b) show(+b.dataset.i);});
+$('snd').onclick=()=>{vid.muted=!vid.muted;$('snd').textContent=vid.muted?'Sound on':'Sound off';};
+$('prev').onclick=()=>show(cur-1); $('next').onclick=()=>show(cur+1);
+$('play').onclick=()=>{if(vid.paused){vid.play();$('play').textContent='Pause';}else{vid.pause();$('play').textContent='Play';}};
+$('auto').onchange=()=>{vid.loop=!$('auto').checked; if($('auto').checked){vid.currentTime=0;vid.play();}};
+vid.addEventListener('ended',()=>{if($('auto').checked) show(cur+1);});
+document.addEventListener('keydown',e=>{if(e.target.tagName==='INPUT')return; if(e.key==='ArrowRight'){show(cur+1);e.preventDefault();} else if(e.key==='ArrowLeft'){show(cur-1);e.preventDefault();} else if(e.key===' '){$('play').click();e.preventDefault();}});
+show(0);
+</script>
+
+</html>