elanous 0.2.0 → 0.2.4

package/skills/motion-broll/engine/fonts/OFL-Geist.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -0,0 +1,146 @@
+/* motion-kit engine: one shape that never cuts.
+   Every style is a pure function of time inside seek(t). No CSS transitions, no timers. */
+(function(){
+const M = window.M = {};
+const clamp = M.clamp = (x,a=0,b=1)=>Math.min(b,Math.max(a,x));
+M.lerp = (a,b,u)=>a+(b-a)*u;
+const eo = M.eo = x=>{x=clamp(x);return 1-Math.pow(1-x,3)};
+const eio = M.eio = x=>{x=clamp(x);return x*x*x*(x*(6*x-15)+10)};
+
+// closed-form spring step response 0 -> 1 (zero initial velocity)
+const S = M.S = (tau,w,z)=>{
+  if(tau<=0) return 0;
+  if(!isFinite(w)) return 1;
+  if(z<1){const wd=w*Math.sqrt(1-z*z);return 1-Math.exp(-z*w*tau)*(Math.cos(wd*tau)+z*w/wd*Math.sin(wd*tau));}
+  return 1-Math.exp(-w*tau)*(1+w*tau);
+};
+M.MORPH=[15,0.84]; M.FAST=[27,0.86]; M.SLOW=[12.5,0.9]; M.SOFT=[10,0.95]; M.CAM=[7.5,1]; M.INSTANT=[Infinity,1];
+
+// a value that changes target many times = the sum of one spring per change.
+// period>0 and a closed loop adds the previous cycle's residue so t=period == t=0.
+M.track = (v0,keys,def=M.MORPH,period=0)=>{
+  let prev=v0; const ks=[];
+  for(const k of keys){const d=k[1]-prev; prev=k[1]; const sp=k[2]||def; if(d!==0) ks.push([k[0],d,sp[0],sp[1]]);}
+  const loop = period>0 && Math.abs(prev-v0)<1e-9;
+  return t=>{let v=v0; for(const k of ks){v+=k[1]*S(t-k[0],k[2],k[3]); if(loop) v+=k[1]*(S(t+period-k[0],k[2],k[3])-1);} return v;};
+};
+const hex = M.hex = h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16));
+M.ctrack = (h0,keys,def=[20,1],period=0)=>{
+  const c0=hex(h0); const tr=[0,1,2].map(i=>M.track(c0[i],keys.map(k=>[k[0],hex(k[1])[i],k[2]]),def,period));
+  return t=>`rgb(${tr.map(f=>Math.round(clamp(f(t),0,255))).join(',')})`;
+};
+// step helper: pick the latest value whose time has passed
+M.step = (v0,keys)=>t=>{let v=v0; for(const k of keys) if(t>=k[0]) v=k[1]; return v;};
+
+// content swap: exit blurs out fast; enter waits, then blurs in (own timings -> no overlap)
+M.vis = (t,tin,tout,o={})=>{
+  const din=o.din??0.07, lin=o.lin??0.26, lout=o.lout??0.12, bl=o.blur??12;
+  const a = tin==null?1:eo((t-tin-din)/lin);
+  const b = tout==null?0:eo((t-tout)/lout);
+  return {o:a*(1-b), blur:(1-a)*bl+b*bl*0.8, s:(0.94+0.06*a)*(1-0.03*b), a, b};
+};
+M.apply = (el,v,extra='')=>{
+  if(v.o<0.002){el.style.display='none';return false;}
+  el.style.display=''; el.style.opacity=v.o.toFixed(4);
+  el.style.filter=v.blur>0.05?`blur(${v.blur.toFixed(2)}px)`:'none';
+  el.style.transform=`scale(${v.s.toFixed(4)})${extra}`;
+  return true;
+};
+M.setText = (el,s)=>{ if(el._t!==s){ el.textContent=s; el._t=s; } };
+
+// one icon set, 24-grid, stroke normalised so every icon has the same world stroke width
+M.IC = {
+ arrow:['M5 12h14','M13 5l7 7-7 7'], check:['M20 6 9 17l-5-5'], x:['M18 6 6 18','M6 6l12 12'], plus:['M5 12h14','M12 5v14'],
+ folder:['M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'],
+ terminal:['m4 17 6-6-6-6','M12 19h8'], file:['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z','M14 2v4a2 2 0 0 0 2 2h4','M8 13h8','M8 17h5'],
+ pencil:['M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z','m15 5 4 4'],
+ coin:['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z','M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8','M12 18V6'],
+ clock:['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z','M12 6v6l4 2'],
+ chip:['M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z','M9 9h6v6H9z','M9 1v3','M15 1v3','M9 20v3','M15 20v3','M20 9h3','M20 14h3','M1 9h3','M1 14h3'],
+ sparkle:['M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'],
+ castle:['M3 21V9l3-1v2h3V7l3-2 3 2v3h3V8l3 1v12','M3 21h18','M10 21v-4a2 2 0 0 1 4 0v4','M6 13h1','M17 13h1'],
+ search:['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z','m21 21-4.3-4.3'],
+};
+M.icon = (name,size,color,sw=2.2)=>`<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="${(sw*24/size).toFixed(3)}" stroke-linecap="round" stroke-linejoin="round">${M.IC[name].map(d=>`<path d="${d}"/>`).join('')}</svg>`;
+
+// cursor path: keyframes [t,x,y] in world coords, eased between keys with a slight human arc
+M.path = (CK)=>t=>{
+  if(t<=CK[0][0]) return {x:CK[0][1],y:CK[0][2]};
+  const L=CK[CK.length-1]; if(t>=L[0]) return {x:L[1],y:L[2]};
+  let i=0; while(t>=CK[i+1][0]) i++;
+  const [t0,x0,y0]=CK[i],[t1,x1,y1]=CK[i+1];
+  const u=eio((t-t0)/(t1-t0)), dx=x1-x0, dy=y1-y0, arc=Math.sin(Math.PI*u)*0.06;
+  return {x:x0+dx*u-dy*arc, y:y0+dy*u+dx*arc};
+};
+M.presses = (clicks=[],drags=[])=>{
+  const k=[];
+  for(const c of clicks){k.push([c-0.07,1,[45,1]],[c+0.035,0,[22,0.72]]);}
+  for(const [a,b] of drags){k.push([a-0.04,1,[45,1]],[b,0,[22,0.72]]);}
+  k.sort((a,b)=>a[0]-b[0]); return M.track(0,k);
+};
+// time at which a monotonic function first crosses a threshold (precomputed at 1ms)
+M.crossTimes = (f,t0,t1,ths)=>ths.map(th=>{for(let t=t0;t<=t1;t+=0.001) if(f(t)>=th) return t; return Infinity;});
+
+/* scene runner
+ cfg = { W,H, center:[x,y], bg:'#hex'|null(alpha), SH:{name:{w,h,r,bg,cam}}, start:'name', SEQ:[[t,'name'],...],
+         layers:[{el,tin,tout,anchor:'c'|'t'|'l',o,update(t,g)}], cursor:{keys,clicks,drags,size}, shapePress:[t],
+         intro:t|null, geom(t,g) -> g, extra(t,g), T }                                                              */
+M.scene = (cfg)=>{
+  const $=id=>document.getElementById(id);
+  const {W,H}=cfg; const [CX,CY]=cfg.center||[W/2,H/2];
+  const stage=$('stage'), world=$('world'), shape=$('shape'), cur=$('cursor');
+  stage.style.width=W+'px'; stage.style.height=H+'px'; $('wrap').style.width=W+'px'; $('wrap').style.height=H+'px';
+  stage.style.background=cfg.bg||'transparent';
+  if(!cfg.bg) document.documentElement.classList.add('alpha');
+  const P0=cfg.SH[cfg.start], SEQ=cfg.SEQ;
+  const sp=cfg.spring||M.MORPH;
+  const tr=k=>M.track(P0[k],SEQ.map(([t,n])=>[t,cfg.SH[n][k]]),sp);
+  const shW=tr('w'), shH=tr('h'), shR=tr('r');
+  const shBG=M.ctrack(P0.bg,SEQ.map(([t,n])=>[t,cfg.SH[n].bg]),[20,1]);
+  const cam=M.track(P0.cam,SEQ.map(([t,n])=>[t,cfg.SH[n].cam]),cfg.camSpring||M.CAM);
+  const press=M.track(0,(cfg.shapePress||[]).flatMap(c=>[[c-0.07,1,[45,1]],[c+0.035,0,[22,.72]]]));
+  const intro=cfg.intro===undefined?0.02:cfg.intro;
+  const cpath=cfg.cursor?M.path(cfg.cursor.keys):null, cpress=cfg.cursor?M.presses(cfg.cursor.clicks,cfg.cursor.drags):null;
+  if(cfg.cursor) cur.style.width=(cfg.cursor.size||46)+'px'; else cur.style.display='none';
+  const layers=(cfg.layers||[]).map(L=>({...L,node:$(L.el)}));
+  const seek=(t)=>{
+    let g={t, w:shW(t), h:shH(t), r:shR(t), bg:shBG(t), s:cam(t), cx:0, cy:0, fx:0, fy:0, sc:1-0.035*press(t), op:1};
+    if(intro!=null){const a=S(t-intro,13,0.78); g.sc*=0.55+0.45*a; g.op=clamp((t-intro)/0.12);}
+    g.cursor=cpath?cpath(t):null;
+    if(cfg.geom) g=cfg.geom(t,g)||g;
+    g.r=Math.min(g.r,g.h/2,g.w/2);
+    world.style.transform=`translate(${(CX-g.s*g.fx).toFixed(3)}px,${(CY-g.s*g.fy).toFixed(3)}px) scale(${g.s.toFixed(5)})`;
+    const st=shape.style;
+    st.left=(g.cx-g.w/2).toFixed(3)+'px'; st.top=(g.cy-g.h/2).toFixed(3)+'px';
+    st.width=g.w.toFixed(3)+'px'; st.height=g.h.toFixed(3)+'px'; st.borderRadius=g.r.toFixed(3)+'px';
+    st.background=g.bg; st.transform=`scale(${g.sc.toFixed(5)})`; st.opacity=g.op.toFixed(4);
+    for(const L of layers){
+      const v=M.vis(t,L.tin,L.tout,L.o||{});
+      if(M.apply(L.node,v)){
+        const an=L.anchor||'c';
+        L.node.style.left=(an==='l'?0:g.w/2).toFixed(3)+'px';
+        L.node.style.top=(an==='t'?0:g.h/2).toFixed(3)+'px';
+        if(L.update) L.update(t,g,v);
+      }
+    }
+    if(cfg.extra) cfg.extra(t,g);
+    if(cpath){
+      const c=g.cursor, sx=CX+g.s*(c.x-g.fx), sy=CY+g.s*(c.y-g.fy);
+      cur.style.transform=`translate(${(sx-3).toFixed(2)}px,${(sy-3).toFixed(2)}px) scale(${(1-0.13*cpress(t)).toFixed(4)})`;
+    }
+  };
+  window.seek=seek; window.DURATION=cfg.T;
+  // preview mode: loop in the browser, scaled to fit
+  const RENDER=location.search.includes('render');
+  document.body.classList.add(RENDER?'render':'preview');
+  seek(0);
+  if(!RENDER){
+    const fit=()=>{const k=Math.min(innerWidth/W,(innerHeight-30)/H);const wr=$('wrap');wr.style.transform=`translate(-50%,-50%) scale(${k})`;};
+    fit(); addEventListener('resize',fit);
+    const t0=performance.now();
+    const loop=()=>{seek(((performance.now()-t0)/1000)%(cfg.T+0.8));requestAnimationFrame(loop);};
+    requestAnimationFrame(loop);
+  }
+  return seek;
+};
+})();

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)."]
+}