elanous 0.2.0 → 0.2.5

package/skills/motion-broll/engine/render.js

@@ -0,0 +1,22 @@
+// NODE_PATH=motion/node_modules node render.js dist/clip.html out/clip.(mp4|mov) [fps, e.g. 30000/1001 | 25 | 60]
+// 4 subframes per frame across a 180° shutter, blended with ffmpeg tmix. Alpha clips -> ProRes 4444 .mov
+const {chromium}=require('playwright');const {spawn}=require('child_process');const path=require('path');
+(async()=>{
+ const [html,out,fpsArg]=process.argv.slice(2); const FPS=!fpsArg?30000/1001:(fpsArg.includes('/')?fpsArg.split('/')[0]/fpsArg.split('/')[1]:+fpsArg);
+ const b=await chromium.launch();const p=await b.newPage({viewport:{width:1920,height:1080}});
+ const errs=[];p.on('pageerror',e=>errs.push(e.message));
+ await p.goto('file://'+path.resolve(html)+'?render');await p.evaluate(()=>document.fonts.ready);
+ const info=await p.evaluate(()=>({T:window.DURATION,W:document.getElementById('stage').offsetWidth,H:document.getElementById('stage').offsetHeight,alpha:document.documentElement.classList.contains('alpha')}));
+ await p.setViewportSize({width:info.W,height:info.H});
+ const N=Math.round(info.T*FPS), K=4, sub=1/(FPS*2*K);
+ const fr=(fpsArg&&fpsArg.includes('/'))?[fpsArg,`${fpsArg.split('/')[0]*4}/${fpsArg.split('/')[1]}`]:(FPS===30000/1001?['30000/1001','120000/1001']:[String(FPS),String(FPS*4)]);
+ const vf=`format=gbrap,tmix=frames=4:weights='1 1 1 1',select='eq(mod(n\\,4)\\,3)',setpts=N/(${fr[0]})/TB`;
+ const enc=info.alpha?['-c:v','prores_ks','-profile:v','4','-pix_fmt','yuva444p10le','-vendor','apl0']:['-c:v','libx264','-crf','14','-preset','medium','-pix_fmt','yuv420p','-movflags','+faststart'];
+ const ff=spawn('ffmpeg',['-loglevel','error','-y','-f','image2pipe','-framerate',fr[1],'-c:v','png','-i','-','-vf',vf,'-r',fr[0],...enc,out]);
+ ff.stderr.on('data',d=>process.stderr.write(d));
+ for(let f=0;f<N;f++){for(let k=0;k<K;k++){const t=Math.max(0,f/FPS+(k-1.5)*sub);await p.evaluate(t=>seek(t),t);
+   const buf=await p.screenshot({type:'png',omitBackground:info.alpha});
+   if(!ff.stdin.write(buf)) await new Promise(r=>ff.stdin.once('drain',r));}}
+ ff.stdin.end();await new Promise(r=>ff.on('close',r));await b.close();
+ console.log('rendered',out,N,'frames',errs.length?'ERR '+errs[0]:'');
+})();

package/skills/motion-broll/examples/opus-aoe2/01-opus-drop.html

@@ -0,0 +1,41 @@
+<title>01 Opus drop</title>
+<style>
+.lvl{position:absolute;top:-18px;width:200px;text-align:center;color:#fff;font-size:30px;font-weight:500}
+</style>
+<div data-slot="shape">
+  <div class="a" id="pill"></div>
+  <div class="L" id="Lopus"><div class="row" style="transform:translate(-50%,-50%);gap:16px;color:#fff;font-size:48px;font-weight:600;letter-spacing:-.02em"><span id="icSpark"></span>Opus 5.5<span id="badge" style="display:inline-block;background:#FF5A1F;color:#fff;font-size:22px;font-weight:600;letter-spacing:0;border-radius:999px;padding:6px 14px">New</span></div></div>
+  <div class="L" id="Laoe">
+    <div class="a" style="left:-358px;top:-98px;width:196px;height:196px;border-radius:38px;background:#FF5A1F"><div class="a" id="icCastle" style="left:38px;top:34px"></div></div>
+    <div class="a" style="left:-126px;top:-66px;font-size:54px;font-weight:600;letter-spacing:-.025em;white-space:nowrap">Age of Empires II</div>
+    <div class="a" style="left:-124px;top:6px;font-size:25px;color:#8A8782;white-space:nowrap">Browser replica · built by Opus 5.5</div>
+  </div>
+  <div class="L blend" id="Lseg">
+    <div class="lvl" style="left:-436px">Low</div><div class="lvl" style="left:-212px">Medium</div><div class="lvl" style="left:12px">High</div><div class="lvl" style="left:236px">Max</div>
+  </div>
+</div><!--/shape-->
+<script>
+const $=id=>document.getElementById(id);
+$('icSpark').innerHTML=M.icon('sparkle',40,'#FF5A1F');
+$('icCastle').innerHTML=M.icon('castle',120,'#fff',4.2);
+const badge=M.track(0,[[0.63,1,[16,0.7]]]);
+const pL=M.track(-442,[[4.5,-218,M.SLOW],[4.85,6,M.SLOW],[5.3,230,M.SLOW]]);
+const pR=M.track(-230,[[4.5,-6,M.FAST],[4.85,218,M.FAST],[5.3,442,M.FAST]]);
+M.scene({
+  W:1920,H:1080,bg:'#E9E7E2',T:6.2,
+  SH:{opus:{w:440,h:120,r:60,bg:'#0B0B0B',cam:1.9}, aoe:{w:840,h:300,r:44,bg:'#FFFFFF',cam:1.45}, seg:{w:920,h:124,r:62,bg:'#FFFFFF',cam:1.55}},
+  start:'opus', SEQ:[[2.17,'aoe'],[4.06,'seg']],
+  layers:[
+    {el:'Lopus',tin:null,tout:2.17,update:(t)=>{const b=badge(t);$('badge').style.transform=`scale(${Math.max(0,b).toFixed(4)})`;$('badge').style.opacity=Math.min(1,b*1.5);}},
+    {el:'Laoe',tin:2.17,tout:4.06},
+    {el:'Lseg',tin:4.06,tout:null},
+  ],
+  cursor:{size:44,clicks:[4.5,4.85,5.3],keys:[[0,520,320],[1.2,520,320],[1.9,300,130],[3.7,300,130],[4.36,-102,20],[4.56,-102,20],[4.78,122,20],[4.92,122,20],[5.2,346,20]]},
+  extra:(t,g)=>{
+    const v=M.vis(t,4.06,null,{din:0.05,lin:0.2}); const ps=$('pill').style;
+    if(v.o<0.002){ps.display='none';return;}
+    const L=pL(t)+g.w/2, R=pR(t)+g.w/2;
+    Object.assign(ps,{display:'',left:L+'px',width:Math.max(0,R-L)+'px',top:'12px',height:(g.h-24)+'px',borderRadius:((g.h-24)/2)+'px',background:'#0B0B0B',opacity:v.o,filter:v.blur>0.05?`blur(${v.blur}px)`:'none'});
+  }
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/02-pip-builds.html

@@ -0,0 +1,110 @@
+<title>02 PiP builds</title>
+<style>
+.ml{color:#8A8782}
+.lane{position:absolute;left:-510px;width:1020px;height:90px}
+.lane .nm{position:absolute;left:0;top:26px;font-size:30px;font-weight:600;letter-spacing:-.01em}
+.lane .tr{position:absolute;left:190px;top:38px;width:620px;height:14px;border-radius:7px;background:#E2DFD9}
+.lane .fl{position:absolute;left:190px;top:38px;height:14px;border-radius:7px;background:#0B0B0B}
+.lane .stt{position:absolute;right:0;top:30px;font-size:22px;color:#8A8782;width:170px;text-align:right}
+.col{position:absolute;top:0;width:320px}
+.col .hd{position:absolute;left:0;top:0;display:flex;gap:12px;align-items:center;font-size:28px;font-weight:600}
+.col .bar{position:absolute;bottom:0;width:52px;border-radius:12px 12px 6px 6px;background:#0B0B0B}
+.col .xl{position:absolute;width:80px;text-align:center;font-size:17px;color:#8A8782}
+.seg4{position:absolute;width:95px;text-align:center;top:12px;color:#fff;font-size:20px;font-weight:500}
+</style>
+<div data-slot="world">
+  <div class="a" id="tab" style="left:-150px;top:-136px;width:130px;height:44px;border-radius:14px;background:#E14A12"></div>
+  <div class="a" id="fname" style="left:-200px;top:132px;width:400px;text-align:center;color:#fff;font-size:30px;font-weight:500"></div>
+</div><!--/world-->
+<div data-slot="shape">
+  <div class="L" id="Lfolder"><div class="a" style="left:-150px;top:-60px;width:300px;height:170px;border-radius:0 0 26px 26px;background:rgba(255,255,255,.14)"></div></div>
+  <div class="L" id="Lterm">
+    <div class="a" style="left:-506px;top:22px;display:flex;gap:10px"><i style="width:14px;height:14px;border-radius:50%;background:#D6D3CE"></i><i style="width:14px;height:14px;border-radius:50%;background:#D6D3CE"></i><i style="width:14px;height:14px;border-radius:50%;background:#D6D3CE"></i></div>
+    <div class="a mono ml" style="left:-200px;top:17px;width:400px;text-align:center;font-size:19px">aoe2-low — claude</div>
+    <div class="a" style="left:-530px;top:58px;width:1060px;height:1.5px;background:#E2DFD9"></div>
+    <div class="a" style="left:-490px;top:82px;width:980px;height:76px;border:1.5px solid #E2DFD9;border-radius:14px;box-sizing:border-box"></div>
+    <div class="row" style="left:-466px;top:104px;gap:12px;font-size:24px;font-weight:500"><span style="color:#FF5A1F;font-size:28px">✻</span>Welcome to Claude Code</div>
+    <div class="a mono" style="left:-490px;top:196px;width:960px;font-size:26px;line-height:40px"><span class="ml">&gt;&nbsp;</span><span id="typed"></span><span id="caret" style="display:inline-block;width:12px;height:28px;background:#0B0B0B;vertical-align:-5px;margin-left:2px"></span></div>
+    <div class="row" id="building" style="left:-490px;top:356px;gap:12px;font-size:25px;font-weight:500"><span id="star" style="color:#FF5A1F;font-size:30px;display:inline-block">✻</span><span>Building…</span><span class="ml mono" id="elapsed" style="font-size:22px">0:00</span></div>
+    <div class="a mono ml" style="left:-490px;top:560px;font-size:21px">Opus 5.5</div>
+    <div class="a" id="effort" style="left:120px;top:546px;width:380px;height:52px;border-radius:26px;background:#E9E6E0">
+      <div class="a" id="effPill" style="top:4px;height:44px;border-radius:22px;background:#0B0B0B"></div>
+      <div class="a blend" style="left:0;top:0;width:380px;height:52px"><div class="seg4" style="left:0">Low</div><div class="seg4" style="left:95px">Med</div><div class="seg4" style="left:190px">High</div><div class="seg4" style="left:285px">Max</div></div>
+    </div>
+  </div>
+  <div class="L" id="Llanes">
+    <div class="a ml" style="left:-510px;top:40px;font-size:24px;white-space:nowrap">Same prompt · one build per reasoning level</div>
+    <div class="lane" id="ln0" style="top:110px"><div class="nm">Low</div><div class="tr"></div><div class="fl"></div><div class="stt mono"></div></div>
+    <div class="lane" id="ln1" style="top:220px"><div class="nm">Medium</div><div class="tr"></div><div class="fl"></div><div class="stt mono"></div></div>
+    <div class="lane" id="ln2" style="top:330px"><div class="nm">High</div><div class="tr"></div><div class="fl"></div><div class="stt mono"></div></div>
+    <div class="lane" id="ln3" style="top:440px"><div class="nm">Max</div><div class="tr"></div><div class="fl"></div><div class="stt mono"></div></div>
+  </div>
+  <div class="L" id="Lmet">
+    <div class="a ml" style="left:-510px;top:40px;font-size:24px;white-space:nowrap">Measured for every build</div>
+    <div class="col" id="c0" style="left:-510px;top:110px"><div class="hd"><span class="ic"></span>Cost</div></div>
+    <div class="col" id="c1" style="left:-160px;top:110px"><div class="hd"><span class="ic"></span>Time</div></div>
+    <div class="col" id="c2" style="left:190px;top:110px"><div class="hd"><span class="ic"></span>Tokens</div></div>
+  </div>
+</div><!--/shape-->
+<script>
+const $=id=>document.getElementById(id);
+const ACC='#FF5A1F';
+// word times (clip-local = video time - 6.75)
+const PROMPT='Build a faithful replica of Age of Empires II that runs in the browser: villagers, resources, buildings and an AI opponent.';
+const TY0=3.5, TY1=4.75;
+// effort control: High -> Low on "low"
+const SEGX=i=>i*95;
+const eL=M.track(SEGX(2)+4,[[5.75,SEGX(0)+4,M.FAST]]), eR=M.track(SEGX(3)-4,[[5.75,SEGX(1)-4,M.SLOW]]);
+// lanes
+const DUR=[3.0,4.2,5.4,6.8], LS=7.85;
+const prog=(i,t)=>M.clamp((t-LS-0.12*i)/DUR[i]);
+const PULSE=[8.75,9.12,9.32,9.73];
+// metrics
+const COLT=[12.8,13.55,14.65], REL=[[.22,.4,.66,1],[.25,.44,.7,1],[.2,.38,.64,1]];
+const ICN=['coin','clock','chip'];
+for(let c=0;c<3;c++){
+  const col=$('c'+c); col.querySelector('.ic').innerHTML=M.icon(ICN[c],34,'#0B0B0B');
+  ['Low','Med','High','Max'].forEach((n,i)=>{col.insertAdjacentHTML('beforeend',`<div class="bar" id="b${c}${i}" style="left:${i*72}px;top:0"></div><div class="xl" style="left:${i*72-14}px;top:420px">${n}</div>`);});
+}
+const barH=[0,1,2].map(c=>[0,1,2,3].map(i=>M.track(0,[[COLT[c]+0.12+0.07*i,REL[c][i]*300,[13,0.82]]])));
+
+M.scene({
+  W:1920,H:1080,bg:null,T:15.75,center:[1220,540],intro:0.31,
+  SH:{folder:{w:300,h:220,r:26,bg:'#FF5A1F',cam:1.6}, term:{w:1060,h:640,r:26,bg:'#F4F2EE',cam:1.05},
+      lanes:{w:1100,h:600,r:28,bg:'#F4F2EE',cam:1.05}, met:{w:1100,h:620,r:28,bg:'#FFFFFF',cam:1.05}},
+  start:'folder', SEQ:[[2.38,'term'],[7.69,'lanes'],[11.25,'met']],
+  layers:[
+    {el:'Lfolder',tin:0.31,tout:2.38,o:{din:0}},
+    {el:'Lterm',tin:2.38,tout:7.69,anchor:'t',update:(t)=>{
+      const n=Math.round(M.clamp((t-TY0)/(TY1-TY0))*PROMPT.length); M.setText($('typed'),PROMPT.slice(0,n));
+      const typing=t>TY0-0.1&&t<TY1+0.1; $('caret').style.opacity=(typing||t>6.4||Math.floor(t*2.2)%2==0)?(t>6.4?0:1):0;
+      const bv=M.vis(t,6.42,null,{din:0,lin:0.2}); $('building').style.opacity=bv.o; $('building').style.filter=bv.blur>0.05?`blur(${bv.blur}px)`:'none';
+      $('star').style.transform=`rotate(${(t*240)%360}deg)`; M.setText($('elapsed'),'0:0'+Math.max(0,Math.floor((t-6.45)*2)).toString().slice(-1));
+      const L=eL(t),R=eR(t); Object.assign($('effPill').style,{left:L+'px',width:(R-L)+'px'});
+    }},
+    {el:'Llanes',tin:7.69,tout:11.25,anchor:'t',update:(t)=>{
+      for(let i=0;i<4;i++){
+        const ln=$('ln'+i), v=M.vis(t,7.69+0.1*i,null,{din:0.12,lin:0.24});
+        ln.style.opacity=v.o; ln.style.filter=v.blur>0.05?`blur(${v.blur}px)`:'none'; ln.style.transform=`translateY(${(1-v.a)*14}px)`;
+        const p=prog(i,t); ln.querySelector('.fl').style.width=(620*p)+'px';
+        M.setText(ln.querySelector('.stt'),p>=1?'done ✓':(p>0?Math.round(p*100)+'%':'queued'));
+        const k=Math.exp(-Math.pow((t-PULSE[i]-0.12)/0.16,2)); ln.querySelector('.nm').style.color=`rgb(${Math.round(11+(255-11)*k)},${Math.round(11+(90-11)*k)},${Math.round(11+(31-11)*k)})`;
+      }
+    }},
+    {el:'Lmet',tin:11.25,tout:null,anchor:'t',update:(t)=>{
+      for(let c=0;c<3;c++){
+        const col=$('c'+c), v=M.vis(t,COLT[c],null,{din:0,lin:0.22});
+        col.style.opacity=v.o; col.style.filter=v.blur>0.05?`blur(${v.blur}px)`:'none';
+        for(let i=0;i<4;i++){const h=Math.max(0,barH[c][i](t)); Object.assign($('b'+c+i).style,{height:h+'px',top:(400-h)+'px',background:i===0?ACC:'#0B0B0B'});}
+      }
+    }},
+  ],
+  cursor:{size:44,clicks:[2.18,2.32,5.75],keys:[[0,456,362],[1.3,456,362],[1.95,40,30],[2.5,40,30],[5.0,60,140],[5.55,172,262],[5.95,172,262],[6.7,380,380]]},
+  extra:(t,g)=>{
+    const v=M.vis(t,0.31,2.38,{din:0}); const top=g.cy-g.h/2, left=g.cx-g.w/2;
+    Object.assign($('tab').style,{display:v.o<0.002?'none':'',opacity:v.o,left:(left+12)+'px',top:(top-34)+'px',transform:`scale(${g.sc})`,transformOrigin:`${g.w/2-12}px ${g.h/2+34}px`});
+    const nv=M.vis(t,0.85,2.38,{din:0}); const nm='aoe2-low'; const n=Math.round(M.clamp((t-0.95)/0.5)*nm.length);
+    Object.assign($('fname').style,{display:nv.o<0.002?'none':'',opacity:nv.o,top:(g.h/2+26)+'px'}); M.setText($('fname'),nm.slice(0,n)||' ');
+  }
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/03-effort-slider.html

@@ -0,0 +1,38 @@
+<title>03 Effort slider</title>
+<style>.blk{position:absolute;background:#0B0B0B;transform-origin:50% 100%}</style>
+<div data-slot="shape">
+  <div class="L" id="Lcard">
+    <div class="a" style="left:-450px;top:40px;font-size:26px;color:#8A8782;white-space:nowrap">Same prompt · different effort</div>
+    <div class="a" id="scene" style="left:0;top:0"></div>
+    <div class="a" style="left:-330px;top:400px;width:660px;height:2px;background:#E2DFD9"></div>
+    <div class="a" style="left:-400px;top:470px;width:800px;height:12px;border-radius:6px;background:#E6E3DE"></div>
+    <div class="a" id="sfill" style="left:-400px;top:470px;height:12px;border-radius:6px;background:#0B0B0B"></div>
+    <div class="a" id="knob" style="top:458px;width:36px;height:36px;border-radius:50%;background:#fff;border:4px solid #0B0B0B;box-sizing:border-box"></div>
+    <div class="a" style="left:-400px;top:506px;font-size:24px;font-weight:500">Low</div>
+    <div class="a" style="left:300px;top:506px;width:100px;text-align:right;font-size:24px;font-weight:500">Max</div>
+  </div>
+</div><!--/shape-->
+<script>
+const $=id=>document.getElementById(id);
+// castle parts: [threshold, x0, y0, x1, y1, color, radius]
+const P=[[0,-180,300,180,400,'#0B0B0B','6px'],[0.18,-36,336,36,401,'#FFFFFF','36px 36px 0 0'],[0.34,-240,220,-150,400,'#0B0B0B','6px'],[0.48,150,220,240,400,'#0B0B0B','6px'],
+ [0.6,-70,190,70,300,'#0B0B0B','6px'],[0.72,-240,196,-218,220,'#0B0B0B','3px'],[0.74,-206,196,-184,220,'#0B0B0B','3px'],[0.76,-172,196,-150,220,'#0B0B0B','3px'],
+ [0.78,150,196,172,220,'#0B0B0B','3px'],[0.8,184,196,206,220,'#0B0B0B','3px'],[0.82,218,196,240,220,'#0B0B0B','3px'],
+ [0.88,-3,110,3,190,'#0B0B0B','2px'],[0.92,3,112,52,138,'#FF5A1F','2px 8px 8px 2px'],[0.95,-206,260,-184,292,'#FF5A1F','11px 11px 2px 2px'],[0.97,184,260,206,292,'#FF5A1F','11px 11px 2px 2px']];
+$('scene').innerHTML=P.map((p,i)=>`<div class="blk" id="p${i}" style="left:${p[1]}px;top:${p[2]}px;width:${p[3]-p[1]}px;height:${p[4]-p[2]}px;background:${p[5]};border-radius:${p[6]}"></div>`).join('');
+const KX=[[0,760,470],[0.9,760,470],[1.85,-396,476],[2.2,-396,476],[3.1,400,476],[3.4,400,476],[3.8,470,560]];
+const cur=M.path(KX);
+const val=t=>t<2.15?0:M.clamp((Math.min(cur(t).x,cur(3.3).x)+400)/800);
+const CT=M.crossTimes(val,0,4,P.map(p=>p[0])).map(x=>Math.max(x,0.3));
+M.scene({
+  W:1920,H:1080,bg:'#E9E7E2',T:3.8,intro:0.05,
+  SH:{card:{w:1000,h:600,r:40,bg:'#FFFFFF',cam:1.35}}, start:'card', SEQ:[],
+  layers:[{el:'Lcard',tin:0.05,tout:null,anchor:'t',o:{din:0.05},update:(t)=>{
+    const v=val(t), kx=-400+800*v;
+    $('sfill').style.width=(kx+400)+'px'; $('knob').style.left=(kx-18)+'px';
+    $('knob').style.transform=`scale(${1+0.18*M.track(0,[[2.1,1,[30,.8]],[3.3,0,[20,.8]]])(t)})`;
+    P.forEach((p,i)=>{const a=M.S(t-CT[i],17,0.62); const el=$('p'+i); el.style.transform=`scaleY(${Math.max(0,a).toFixed(4)})`; el.style.opacity=t<CT[i]?0:1;});
+  }}],
+  cursor:{size:44,drags:[[2.15,3.3]],keys:KX},
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/04-master-prompt.html

@@ -0,0 +1,56 @@
+<title>04 Master prompt</title>
+<style>
+.sec{position:absolute;left:-330px;width:660px;height:120px}
+.sec .bd{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
+.sec .tt{position:absolute;left:58px;top:4px;font-size:27px;font-weight:600;white-space:nowrap}
+.sk{position:absolute;height:14px;border-radius:7px;background:#E6E3DE}
+.dl{position:absolute;left:-230px;height:12px;border-radius:6px;background:#DCD8D1}
+</style>
+<div data-slot="world">
+  <div class="a" id="ghost" style="left:10px;top:-60px;width:700px;height:120px;border-radius:60px;border:3px dashed #BDB8B0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:500;color:#A29E97">Opus 5.5 · Low</div>
+</div><!--/world-->
+<div data-slot="shape">
+  <div class="L" id="Lnotes">
+    <div class="row" style="left:-330px;top:40px;gap:14px;font-size:34px;font-weight:600;letter-spacing:-.02em"><span id="icPen"></span>Build notes</div>
+    <div class="sec" id="s0" style="top:124px"><div class="bd" style="background:#0B0B0B"></div><div class="tt">Liked</div><div class="sk" style="left:58px;top:56px"></div><div class="sk" style="left:58px;top:84px"></div></div>
+    <div class="sec" id="s1" style="top:262px"><div class="bd" style="background:#0B0B0B"></div><div class="tt">Didn't like</div><div class="sk" style="left:58px;top:56px"></div><div class="sk" style="left:58px;top:84px"></div></div>
+    <div class="sec" id="s2" style="top:400px"><div class="bd" style="background:#FF5A1F"></div><div class="tt">Missing</div><div class="sk" style="left:58px;top:56px"></div><div class="sk" style="left:58px;top:84px"></div></div>
+  </div>
+  <div class="L" id="Ldoc">
+    <div class="row mono" style="left:-230px;top:38px;gap:12px;font-size:25px"><span id="icFile"></span>master-prompt.md</div>
+    <div class="a" style="left:-300px;top:96px;width:600px;height:1.5px;background:#EAE7E2"></div>
+    <div id="lines"></div>
+  </div>
+  <div class="L" id="Lchip"><div class="row mono" style="transform:translate(-50%,-50%);gap:12px;color:#fff;font-size:26px"><span id="icFile2"></span>master-prompt.md</div></div>
+  <div class="L" id="Lsess"><div class="row" style="transform:translate(-50%,-50%);gap:18px;color:#fff;font-size:40px;font-weight:600;letter-spacing:-.02em"><span id="icSpark"></span>Opus 5.5<span id="lowChip" style="font-size:26px;font-weight:600;letter-spacing:0;border-radius:999px;padding:6px 16px">Low</span><span style="font-size:22px;font-weight:500;letter-spacing:0;color:#9A9791" class="mono">+ master-prompt.md</span></div></div>
+</div><!--/shape-->
+<script>
+const $=id=>document.getElementById(id);
+$('icPen').innerHTML=M.icon('pencil',32,'#0B0B0B'); $('icFile').innerHTML=M.icon('file',30,'#0B0B0B'); $('icFile2').innerHTML=M.icon('file',30,'#fff'); $('icSpark').innerHTML=M.icon('sparkle',38,'#FF5A1F');
+['check','x','plus'].forEach((n,i)=>$('s'+i).querySelector('.bd').innerHTML=M.icon(n,24,'#fff',3));
+const SEC=[1.8,2.12,3.68], SKW=[[520,380],[460,300],[500,340]];
+const LW=[430,380,440,300,0,260,420,400,350,0,300,410,240];
+$('lines').innerHTML=LW.map((w,i)=>`<div class="dl" id="d${i}" style="top:${130+i*42}px;height:${i==0?20:12}px;${i==0?'background:#FF5A1F;':''}"></div>`).join('');
+const KX=[[0,760,460],[1.2,760,460],[1.9,330,250],[6.2,330,250],[6.75,0,30],[6.95,0,30],[7.55,360,20],[7.85,360,20],[8.5,470,170]];
+const cur=M.path(KX);
+const fxT=M.track(0,[[6.95,180,M.SOFT],[7.6,360,M.SOFT]]);
+const lowOn=M.track(0,[[8.31,1,[18,.8]]]);
+M.scene({
+  W:1920,H:1080,bg:'#E9E7E2',T:10,intro:0.15,
+  SH:{notes:{w:780,h:560,r:36,bg:'#FFFFFF',cam:1.3}, doc:{w:600,h:720,r:28,bg:'#FFFFFF',cam:1.2},
+      chip:{w:420,h:96,r:48,bg:'#0B0B0B',cam:1.5}, sess:{w:720,h:120,r:60,bg:'#0B0B0B',cam:1.75}},
+  start:'notes', SEQ:[[5.1,'doc'],[6.9,'chip'],[7.8,'sess']],
+  layers:[
+    {el:'Lnotes',tin:0.15,tout:5.1,anchor:'t',o:{din:0.05},update:(t)=>{
+      for(let i=0;i<3;i++){const s=$('s'+i),v=M.vis(t,SEC[i],null,{din:0,lin:0.22}); s.style.opacity=v.o; s.style.filter=v.blur>0.05?`blur(${v.blur}px)`:'none'; s.style.transform=`translateY(${(1-v.a)*12}px)`;
+        s.querySelectorAll('.sk').forEach((k,j)=>k.style.width=(SKW[i][j]*M.eio((t-SEC[i]-0.15-0.18*j)/0.45))+'px');}
+    }},
+    {el:'Ldoc',tin:5.1,tout:6.9,anchor:'t',update:(t)=>{LW.forEach((w,i)=>$('d'+i).style.width=(w*M.eio((t-5.35-0.075*i)/0.3))+'px');}},
+    {el:'Lchip',tin:6.9,tout:7.8,o:{din:0.04}},
+    {el:'Lsess',tin:7.8,tout:null,update:(t)=>{const k=M.clamp(lowOn(t)); const c=$('lowChip').style; c.background=`rgba(255,90,31,${k})`; c.color='#fff'; c.boxShadow=`inset 0 0 0 2px rgba(255,255,255,${0.35*(1-k)})`; c.transform=`scale(${1+0.12*Math.sin(Math.PI*M.clamp((t-8.31)/0.3))})`;}},
+  ],
+  cursor:{size:44,drags:[[6.9,7.8]],keys:KX},
+  geom:(t,g)=>{g.fx=fxT(t); if(t>=6.9){const c=t<7.8?cur(t):cur(7.8); g.cx=c.x; g.cy=c.y-30; if(t>=7.8){g.cx=360; g.cy=M.lerp(c.y-30,0,M.S(t-7.8,15,0.84));}} return g;},
+  extra:(t,g)=>{const v=M.vis(t,6.95,7.8,{din:0,lin:0.2,lout:0.15}); const s=$('ghost').style; s.display=v.o<0.002?'none':''; s.opacity=v.o; s.transform=`scale(${v.s})`;}
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/05-low-vs-max.html

@@ -0,0 +1,49 @@
+<title>05 Low vs Max</title>
+<style>
+.inf{position:absolute;left:-310px;width:620px;height:64px;display:flex;align-items:center;gap:16px;font-size:25px;font-weight:500}
+.inf .ib{width:40px;height:40px;border-radius:12px;background:#F1EFEB;display:flex;align-items:center;justify-content:center}
+.side{position:absolute;top:0;width:440px}
+.side .nm{font-size:48px;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
+.side .sub{margin-top:8px;font-size:22px;color:#8A8782;white-space:nowrap}
+.side .trk{position:absolute;top:170px;left:0;width:440px;height:18px;border-radius:9px;background:#EDEAE5}
+.side .fil{position:absolute;top:170px;left:0;height:18px;border-radius:9px;background:#0B0B0B}
+.side .lb{position:absolute;top:130px;left:0;font-size:20px;color:#8A8782}
+</style>
+<div data-slot="shape">
+  <div class="L" id="Lsess"><div class="row" style="transform:translate(-50%,-50%);gap:18px;color:#fff;font-size:40px;font-weight:600;letter-spacing:-.02em"><span id="icSpark"></span>Opus 5.5<span style="font-size:26px;font-weight:600;letter-spacing:0;border-radius:999px;padding:6px 16px;background:#FF5A1F">Low</span></div></div>
+  <div class="L" id="Lctx">
+    <div class="row" style="left:-310px;top:40px;gap:14px;font-size:30px;font-weight:600"><span id="icSpark2"></span>Opus 5.5<span style="font-size:20px;border-radius:999px;padding:4px 12px;background:#FF5A1F;color:#fff">Low</span><span style="font-size:22px;color:#8A8782;font-weight:500">· given up front</span></div>
+    <div class="inf" id="i0" style="top:110px"><span class="ib"></span><span class="mono" style="font-size:23px">master-prompt.md</span></div>
+    <div class="inf" id="i1" style="top:184px"><span class="ib"></span>What worked</div>
+    <div class="inf" id="i2" style="top:258px"><span class="ib"></span>What didn't</div>
+    <div class="inf" id="i3" style="top:332px"><span class="ib"></span>What was missing</div>
+  </div>
+  <div class="L" id="Lvs">
+    <div class="side" style="left:-540px;top:80px"><div class="nm">Low</div><div class="sub">+ master prompt</div><div class="lb">Result</div><div class="trk"></div><div class="fil" id="fL" style="background:#FF5A1F"></div></div>
+    <div class="side" style="left:100px;top:80px"><div class="nm" id="rn">Max</div><div class="sub">default prompt</div><div class="lb">Result</div><div class="trk"></div><div class="fil" id="fR"></div></div>
+    <div class="a" id="vs" style="left:-48px;top:112px;width:96px;height:96px;border-radius:50%;background:#0B0B0B;color:#fff;font-size:34px;font-weight:600;display:flex;align-items:center;justify-content:center"><span id="vsT">vs</span></div>
+  </div>
+</div><!--/shape-->
+<script>
+const $=id=>document.getElementById(id);
+$('icSpark').innerHTML=M.icon('sparkle',38,'#FF5A1F'); $('icSpark2').innerHTML=M.icon('sparkle',30,'#FF5A1F');
+['file','check','x','plus'].forEach((n,i)=>$('i'+i).querySelector('.ib').innerHTML=M.icon(n,24,'#0B0B0B'));
+const IT=[0.95,1.22,1.5,1.82];
+const fR=M.track(0,[[3.2,0.86,[11,0.9]]]), fL=M.track(0,[[4.05,0.5,[11,0.9]],[4.75,0.86,[9,0.86]]]);
+const q=M.track(0,[[6.68,1,[16,0.7]]]);
+M.scene({
+  W:1920,H:1080,bg:'#E9E7E2',T:7.2,intro:0.02,
+  SH:{sess:{w:560,h:120,r:60,bg:'#0B0B0B',cam:1.8}, ctx:{w:720,h:440,r:36,bg:'#FFFFFF',cam:1.4}, vs:{w:1240,h:330,r:40,bg:'#FFFFFF',cam:1.2}},
+  start:'sess', SEQ:[[0.54,'ctx'],[2.67,'vs']],
+  layers:[
+    {el:'Lsess',tin:null,tout:0.54},
+    {el:'Lctx',tin:0.54,tout:2.67,anchor:'t',update:(t)=>{for(let i=0;i<4;i++){const e=$('i'+i),v=M.vis(t,IT[i],null,{din:0,lin:0.2}); e.style.opacity=v.o; e.style.filter=v.blur>0.05?`blur(${v.blur}px)`:'none'; e.style.transform=`translateX(${(1-v.a)*-18}px)`;}}},
+    {el:'Lvs',tin:2.67,tout:null,anchor:'t',update:(t)=>{
+      $('fL').style.width=(440*Math.max(0,fL(t)))+'px'; $('fR').style.width=(440*Math.max(0,fR(t)))+'px';
+      M.setText($('rn'),t<6.17?'Max':t<6.6?'High':'High / Max');
+      const k=q(t); const vs=$('vs').style; vs.background=k>0.5?'#FF5A1F':'#0B0B0B'; M.setText($('vsT'),t<6.68?'vs':'?'); vs.transform=`scale(${1+0.25*Math.sin(Math.PI*M.clamp((t-6.68)/0.35))})`;
+    }},
+  ],
+  cursor:{size:44,keys:[[0,900,520],[5.2,900,520],[6.0,60,160],[7.2,60,160]]},
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/06-chapter.html

@@ -0,0 +1,18 @@
+<title>06 Chapter</title>
+<div data-slot="shape">
+  <div class="L" id="Lnext"><div class="row" style="transform:translate(-50%,-50%);gap:12px;color:#fff;font-size:32px;font-weight:500">Up next<span id="icA"></span></div></div>
+  <div class="L" id="Lch">
+    <div class="a" style="left:-300px;top:-86px;font-size:150px;line-height:150px;font-weight:600;letter-spacing:-.05em;color:#FF5A1F">01</div>
+    <div class="a" style="left:-68px;top:-62px;font-size:60px;font-weight:600;letter-spacing:-.03em;color:#fff;white-space:nowrap">First build</div>
+    <div class="a" style="left:-66px;top:16px;font-size:28px;color:#9A9791;white-space:nowrap">Opus 5.5 · Low effort</div>
+  </div>
+</div><!--/shape-->
+<script>
+document.getElementById('icA').innerHTML=M.icon('arrow',30,'#fff');
+M.scene({
+  W:1920,H:1080,bg:'#E9E7E2',T:2.9,intro:0.08,
+  SH:{next:{w:260,h:92,r:46,bg:'#0B0B0B',cam:2.0}, ch:{w:820,h:300,r:48,bg:'#0B0B0B',cam:1.5}},
+  start:'next', SEQ:[[0.95,'ch']],
+  layers:[{el:'Lnext',tin:0.08,tout:0.95,o:{din:0.03}},{el:'Lch',tin:0.95,tout:null}],
+});
+</script>

package/skills/motion-broll/examples/opus-aoe2/plan.json

@@ -0,0 +1,14 @@
+{
+  "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 … a replica of Age of Empires II against every reasoning level.”","in":0.30,"out":6.75,"kind":"full","file":"out/01-opus-drop_0m00s30.mp4"},
+    {"id":"02","title":"Folder → Claude Code → four builds → cost, time, tokens","line":"“I created a blank folder … opened up Claude Code, gave it this prompt, and set Opus 5.5 to low …”","in":6.75,"out":22.5,"kind":"panel","file":"out/02-pip-builds_0m06s75.mov"},
+    {"id":"03","title":"Effort slider builds the castle","line":"“The results are gonna vary quite a lot between the low effort and the max effort.”","in":25.8,"out":29.6,"kind":"full","file":"out/03-effort-slider_0m25s80.mp4"},
+    {"id":"04","title":"Notes → master prompt → Low session","line":"“Taking notes of all the things that I liked, didn’t like … one more master prompt …”","in":32.4,"out":42.3,"kind":"full","file":"out/04-master-prompt_0m32s40.mp4"},
+    {"id":"05","title":"Low + master prompt vs Max","line":"“Could I get outstanding results from the low that will rival … a high or a max?”","in":42.3,"out":49.4,"kind":"full","file":"out/05-low-vs-max_0m42s30.mp4"},
+    {"id":"06","title":"Chapter card · First build","line":"“Okay, let’s get into the first build.”","in":52.4,"out":53.92,"kind":"full","file":"out/06-chapter_0m52s40.mp4"}
+  ],
+  "notes": ["The typed prompt and the cost/time/tokens bars are illustrative (relative size only)."]
+}

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))