@hiai-gg/hiai-opencode 0.2.1 → 0.2.2

package/skills/design-templates/html-ppt/assets/animations/fx/_util.js

@@ -0,0 +1,63 @@
+/* html-ppt fx :: shared helpers */
+(function(){
+  window.HPX = window.HPX || {};
+  const U = window.HPX._u = {};
+
+  U.css = (el, name, fb) => {
+    const v = getComputedStyle(el).getPropertyValue(name).trim();
+    return v || fb;
+  };
+
+  U.accent = (el, fb) => U.css(el, '--accent', fb || '#7c5cff');
+  U.accent2 = (el, fb) => U.css(el, '--accent-2', fb || '#22d3ee');
+  U.text = (el, fb) => U.css(el, '--text-1', fb || '#eaeaf2');
+
+  U.palette = (el) => [
+    U.accent(el, '#7c5cff'),
+    U.accent2(el, '#22d3ee'),
+    U.css(el, '--ok', '#22c55e'),
+    U.css(el, '--warn', '#f59e0b'),
+    U.css(el, '--danger', '#ef4444'),
+  ];
+
+  U.canvas = (el) => {
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const c = document.createElement('canvas');
+    c.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;';
+    el.appendChild(c);
+    const ctx = c.getContext('2d');
+    let w = 0, h = 0, dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));
+    const fit = () => {
+      const r = el.getBoundingClientRect();
+      w = Math.max(1, r.width|0);
+      h = Math.max(1, r.height|0);
+      c.width = (w*dpr)|0;
+      c.height = (h*dpr)|0;
+      ctx.setTransform(dpr,0,0,dpr,0,0);
+    };
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return {
+      c, ctx,
+      get w(){return w;}, get h(){return h;}, get dpr(){return dpr;},
+      destroy(){
+        try{ro.disconnect();}catch(e){}
+        if (c.parentNode) c.parentNode.removeChild(c);
+      }
+    };
+  };
+
+  U.loop = (fn) => {
+    let raf = 0, stopped = false, t0 = performance.now();
+    const tick = (t) => {
+      if (stopped) return;
+      fn((t - t0)/1000);
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => { stopped = true; cancelAnimationFrame(raf); };
+  };
+
+  U.rand = (a,b) => a + Math.random()*(b-a);
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/chain-react.js

@@ -0,0 +1,41 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['chain-react'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    const N = 8;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const cy = k.h/2;
+      const pad = 60;
+      const dx = (k.w - pad*2)/(N-1);
+      const period = 2.4;
+      const phase = (t % period) / period; // 0..1
+      for (let i=0;i<N;i++){
+        const x = pad + i*dx;
+        const my = i/(N-1);
+        const d = Math.abs(phase - my);
+        const pulse = Math.max(0, 1 - d*6);
+        const r = 18 + pulse*18;
+        // glow
+        const g = ctx.createRadialGradient(x,cy,0,x,cy,r*2);
+        g.addColorStop(0, `rgba(124,92,255,${0.4*pulse})`);
+        g.addColorStop(1, 'rgba(0,0,0,0)');
+        ctx.fillStyle = g;
+        ctx.fillRect(x-r*2, cy-r*2, r*4, r*4);
+        // circle
+        ctx.fillStyle = pulse>0.1 ? ac2 : ac;
+        ctx.beginPath(); ctx.arc(x,cy,r,0,Math.PI*2); ctx.fill();
+        ctx.strokeStyle='rgba(255,255,255,0.4)'; ctx.lineWidth=2;
+        ctx.stroke();
+        // connectors
+        if (i<N-1){
+          ctx.strokeStyle='rgba(200,200,230,0.3)'; ctx.lineWidth=2;
+          ctx.beginPath(); ctx.moveTo(x+r,cy); ctx.lineTo(x+dx-r,cy); ctx.stroke();
+        }
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/confetti-cannon.js

@@ -0,0 +1,49 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['confetti-cannon'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let parts = [];
+    const fire = () => {
+      for (let side=0; side<2; side++){
+        const x0 = side===0 ? 20 : k.w-20;
+        const y0 = k.h - 20;
+        for (let i=0;i<40;i++){
+          const a = side===0 ? U.rand(-Math.PI*0.7, -Math.PI*0.4) : U.rand(-Math.PI*0.6, -Math.PI*0.3) - Math.PI/2 - Math.PI/6;
+          const spd = U.rand(300, 520);
+          parts.push({
+            x: x0, y: y0,
+            vx: Math.cos(a)*spd, vy: Math.sin(a)*spd,
+            w: U.rand(6,12), h: U.rand(3,7),
+            rot: Math.random()*Math.PI, vr: U.rand(-6,6),
+            c: pal[(Math.random()*pal.length)|0],
+            life: 1
+          });
+        }
+      }
+    };
+    fire();
+    let last = 0;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - last > 3) { fire(); last = t; }
+      const dt = 1/60;
+      parts = parts.filter(p => p.life > 0 && p.y < k.h+40);
+      for (const p of parts){
+        p.vy += 520*dt;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.rot += p.vr*dt;
+        p.life -= 0.006;
+        ctx.save();
+        ctx.translate(p.x, p.y); ctx.rotate(p.rot);
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.fillRect(-p.w/2, -p.h/2, p.w, p.h);
+        ctx.restore();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/constellation.js

@@ -0,0 +1,44 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['constellation'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#9fb4ff');
+    const N = 70;
+    let pts = [];
+    const seed = () => {
+      pts = Array.from({length:N}, () => ({
+        x: Math.random()*k.w, y: Math.random()*k.h,
+        vx: U.rand(-0.3,0.3), vy: U.rand(-0.3,0.3)
+      }));
+    };
+    seed();
+    let lw=k.w, lh=k.h;
+    const stop = U.loop(() => {
+      if (k.w!==lw||k.h!==lh){ seed(); lw=k.w; lh=k.h; }
+      ctx.clearRect(0,0,k.w,k.h);
+      for (const p of pts){
+        p.x += p.vx; p.y += p.vy;
+        if (p.x<0||p.x>k.w) p.vx*=-1;
+        if (p.y<0||p.y>k.h) p.vy*=-1;
+      }
+      for (let i=0;i<N;i++){
+        for (let j=i+1;j<N;j++){
+          const a=pts[i], b=pts[j];
+          const d = Math.hypot(a.x-b.x, a.y-b.y);
+          if (d < 150){
+            ctx.globalAlpha = 1 - d/150;
+            ctx.strokeStyle = ac; ctx.lineWidth=1;
+            ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = ac;
+      for (const p of pts){
+        ctx.beginPath(); ctx.arc(p.x,p.y,1.8,0,Math.PI*2); ctx.fill();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/counter-explosion.js

@@ -0,0 +1,58 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['counter-explosion'] = function(el){
+    const U = window.HPX._u;
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const target = parseInt(el.getAttribute('data-fx-to') || '2400', 10);
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    // number overlay
+    const num = document.createElement('div');
+    num.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 120px system-ui,sans-serif;color:var(--text-1,#fff);pointer-events:none;text-shadow:0 4px 40px rgba(124,92,255,0.5);';
+    num.textContent = '0';
+    el.appendChild(num);
+    let parts = [];
+    let state = 'count'; // count | burst | hold
+    let stateT = 0;
+    let value = 0;
+    let cycle = 0;
+    const burst = () => {
+      const cx = k.w/2, cy = k.h/2;
+      for (let i=0;i<120;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(120, 400);
+        parts.push({x:cx,y:cy,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:1,r:U.rand(2,5),c:pal[(Math.random()*pal.length)|0]});
+      }
+    };
+    const stop = U.loop(() => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const dt = 1/60;
+      stateT += dt;
+      if (state === 'count'){
+        const dur = 2.2;
+        const p = Math.min(1, stateT/dur);
+        const eased = 1 - Math.pow(1-p,3);
+        value = Math.round(target*eased);
+        num.textContent = value.toLocaleString();
+        if (p >= 1){ state='burst'; stateT=0; burst(); }
+      } else if (state === 'burst'){
+        if (stateT > 0.05 && stateT < 0.3 && parts.length < 200) {}
+        if (stateT > 2.5){ state='hold'; stateT=0; }
+      } else if (state === 'hold'){
+        if (stateT > 1.5){
+          state='count'; stateT=0; value=0; num.textContent='0'; cycle++;
+        }
+      }
+      parts = parts.filter(p => p.life > 0);
+      for (const p of parts){
+        p.vy += 260*dt; p.vx *= 0.985; p.vy *= 0.985;
+        p.x += p.vx*dt; p.y += p.vy*dt; p.life -= 0.01;
+        ctx.globalAlpha = Math.max(0,p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); if (num.parentNode) num.parentNode.removeChild(num); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/data-stream.js

@@ -0,0 +1,45 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['data-stream'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#22d3ee'), ac2 = U.accent2(el,'#7c5cff');
+    const rows = [];
+    const rh = 22;
+    const genRow = (y) => ({
+      y, dir: Math.random()<0.5?-1:1,
+      speed: U.rand(30, 90),
+      offset: Math.random()*2000,
+      text: Array.from({length:120}, () => {
+        const r = Math.random();
+        if (r<0.3) return Math.random()<0.5?'0':'1';
+        if (r<0.6) return '0x' + Math.floor(Math.random()*256).toString(16).padStart(2,'0');
+        return Math.random().toString(16).slice(2,6);
+      }).join(' ')
+    });
+    const init = () => {
+      rows.length = 0;
+      const n = Math.ceil(k.h/rh);
+      for (let i=0;i<n;i++) rows.push(genRow(i*rh + rh*0.7));
+    };
+    init();
+    let lh = k.h;
+    const stop = U.loop((t) => {
+      if (k.h!==lh){ init(); lh=k.h; }
+      ctx.fillStyle = 'rgba(5,8,14,0.35)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.font = '13px ui-monospace,Menlo,monospace';
+      for (let i=0;i<rows.length;i++){
+        const r = rows[i];
+        const x = r.dir>0
+          ? ((t*r.speed + r.offset) % (k.w+400)) - 400
+          : k.w - (((t*r.speed + r.offset) % (k.w+400)) - 400);
+        ctx.fillStyle = (i%3===0)?ac:ac2;
+        ctx.globalAlpha = 0.65 + (i%2)*0.3;
+        ctx.fillText(r.text, x, r.y);
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/firework.js

@@ -0,0 +1,51 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['firework'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let rockets = [], sparks = [];
+    const launch = () => {
+      rockets.push({
+        x: U.rand(k.w*0.2, k.w*0.8), y: k.h+10,
+        vx: U.rand(-30,30), vy: U.rand(-520,-380),
+        tgtY: U.rand(k.h*0.15, k.h*0.45),
+        c: pal[(Math.random()*pal.length)|0]
+      });
+    };
+    const burst = (x, y, c) => {
+      const n = 70;
+      for (let i=0;i<n;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(60, 240);
+        sparks.push({x,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:1,c});
+      }
+    };
+    let last = -1;
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.18)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (t - last > 0.7) { launch(); last = t; }
+      const dt = 1/60;
+      rockets = rockets.filter(r => {
+        r.x += r.vx*dt; r.y += r.vy*dt; r.vy += 260*dt;
+        ctx.fillStyle = r.c;
+        ctx.beginPath(); ctx.arc(r.x, r.y, 2.5, 0, Math.PI*2); ctx.fill();
+        if (r.y <= r.tgtY || r.vy >= 0) { burst(r.x, r.y, r.c); return false; }
+        return true;
+      });
+      sparks = sparks.filter(p => p.life > 0);
+      for (const p of sparks){
+        p.vy += 90*dt;
+        p.vx *= 0.98; p.vy *= 0.98;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.life -= 0.012;
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/galaxy-swirl.js

@@ -0,0 +1,33 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['galaxy-swirl'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const N = 800;
+    const parts = Array.from({length:N}, (_,i) => {
+      const arm = i%3;
+      const t = Math.random();
+      const r = t*180 + 8;
+      const base = (arm/3)*Math.PI*2;
+      return { r, a: base + Math.log(r+1)*1.6 + U.rand(-0.2,0.2),
+               c: pal[arm%pal.length],
+               s: U.rand(0.8, 2.2) };
+    });
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.15)';
+      ctx.fillRect(0,0,k.w,k.h);
+      const cx=k.w/2, cy=k.h/2;
+      for (const p of parts){
+        const a = p.a + t*0.15;
+        const x = cx + Math.cos(a)*p.r;
+        const y = cy + Math.sin(a)*p.r*0.7;
+        ctx.fillStyle = p.c;
+        ctx.globalAlpha = 0.7;
+        ctx.beginPath(); ctx.arc(x,y,p.s,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/gradient-blob.js

@@ -0,0 +1,39 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['gradient-blob'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const blobs = Array.from({length:4}, (_,i) => ({
+      x: U.rand(0,1), y: U.rand(0,1),
+      vx: U.rand(-0.08,0.08), vy: U.rand(-0.08,0.08),
+      r: U.rand(180,320),
+      c: pal[i%pal.length]
+    }));
+    const hex2rgb = (h) => {
+      const m = h.replace('#','').match(/.{2}/g);
+      if (!m) return [124,92,255];
+      return m.map(x=>parseInt(x,16));
+    };
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(10,12,22,0.2)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.globalCompositeOperation = 'lighter';
+      for (const b of blobs){
+        b.x += b.vx*0.01; b.y += b.vy*0.01;
+        if (b.x<0||b.x>1) b.vx*=-1;
+        if (b.y<0||b.y>1) b.vy*=-1;
+        const px = b.x*k.w, py = b.y*k.h;
+        const r = b.r + Math.sin(t*0.8 + b.x*6)*30;
+        const [R,G,B] = hex2rgb(b.c);
+        const grad = ctx.createRadialGradient(px,py,0,px,py,r);
+        grad.addColorStop(0, `rgba(${R},${G},${B},0.55)`);
+        grad.addColorStop(1, `rgba(${R},${G},${B},0)`);
+        ctx.fillStyle = grad;
+        ctx.beginPath(); ctx.arc(px,py,r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/knowledge-graph.js

@@ -0,0 +1,69 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['knowledge-graph'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const tx = U.text(el, '#e7e7ef');
+    const labels = ['AI','ML','LLM','Graph','Node','Edge','Claude','GPT','RAG','Vector',
+      'Embed','Neural','Agent','Tool','Memory','Logic','Data','Train','Infer','Token',
+      'Prompt','Chain','Plan','Skill','Cloud','Edge','GPU','Code','Task','Flow'];
+    const N = 28;
+    const nodes = Array.from({length:N}, (_,i) => ({
+      x: U.rand(40, 300), y: U.rand(40, 200),
+      vx: 0, vy: 0, label: labels[i%labels.length],
+      c: pal[i%pal.length]
+    }));
+    const edges = [];
+    const made = new Set();
+    while (edges.length < 50){
+      const a = (Math.random()*N)|0, b = (Math.random()*N)|0;
+      if (a===b) continue;
+      const key = a<b ? a+'-'+b : b+'-'+a;
+      if (made.has(key)) continue;
+      made.add(key); edges.push([a,b]);
+    }
+    const stop = U.loop(() => {
+      // physics
+      for (let i=0;i<N;i++){
+        for (let j=i+1;j<N;j++){
+          const a=nodes[i], b=nodes[j];
+          const dx=b.x-a.x, dy=b.y-a.y;
+          let d2=dx*dx+dy*dy; if (d2<1) d2=1;
+          const d=Math.sqrt(d2);
+          const f=1600/d2;
+          const fx=(dx/d)*f, fy=(dy/d)*f;
+          a.vx-=fx; a.vy-=fy; b.vx+=fx; b.vy+=fy;
+        }
+      }
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        const dx=b.x-a.x, dy=b.y-a.y, d=Math.hypot(dx,dy)||1;
+        const f=(d-90)*0.008;
+        const fx=(dx/d)*f, fy=(dy/d)*f;
+        a.vx+=fx; a.vy+=fy; b.vx-=fx; b.vy-=fy;
+      }
+      const cx=k.w/2, cy=k.h/2;
+      for (const n of nodes){
+        n.vx += (cx-n.x)*0.002;
+        n.vy += (cy-n.y)*0.002;
+        n.vx *= 0.85; n.vy *= 0.85;
+        n.x += n.vx; n.y += n.vy;
+      }
+      ctx.clearRect(0,0,k.w,k.h);
+      ctx.strokeStyle = 'rgba(180,180,220,0.25)'; ctx.lineWidth=1;
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+      }
+      ctx.font='11px system-ui,sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
+      for (const n of nodes){
+        ctx.fillStyle = n.c;
+        ctx.beginPath(); ctx.arc(n.x,n.y,7,0,Math.PI*2); ctx.fill();
+        ctx.fillStyle = tx;
+        ctx.fillText(n.label, n.x, n.y-14);
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/letter-explode.js

@@ -0,0 +1,50 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['letter-explode'] = function(el){
+    const U = window.HPX._u;
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const src = el.querySelector('[data-fx-text]') || el;
+    const text = (el.getAttribute('data-fx-text-value') || src.textContent || 'EXPLODE').trim();
+    // Build a container, hide source text
+    const wrap = document.createElement('div');
+    wrap.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;';
+    const inner = document.createElement('div');
+    inner.style.cssText = 'font-size:64px;font-weight:900;letter-spacing:0.02em;color:var(--text-1,#fff);white-space:nowrap;';
+    wrap.appendChild(inner);
+    el.appendChild(wrap);
+    const spans = [];
+    for (const ch of text){
+      const s = document.createElement('span');
+      s.textContent = ch === ' ' ? '\u00A0' : ch;
+      s.style.display='inline-block';
+      s.style.transform='translate(0,0)';
+      s.style.transition='transform 900ms cubic-bezier(.2,.9,.3,1), opacity 900ms';
+      s.style.opacity='0';
+      inner.appendChild(s);
+      spans.push(s);
+    }
+    let stopped = false;
+    const run = () => {
+      if (stopped) return;
+      spans.forEach((s,i) => {
+        const dx = U.rand(-400, 400), dy = U.rand(-300, 300);
+        s.style.transition='none';
+        s.style.transform=`translate(${dx}px,${dy}px) rotate(${U.rand(-180,180)}deg)`;
+        s.style.opacity='0';
+      });
+      // force reflow
+      void inner.offsetWidth;
+      spans.forEach((s,i) => {
+        setTimeout(() => {
+          if (stopped) return;
+          s.style.transition='transform 900ms cubic-bezier(.2,.9,.3,1), opacity 900ms';
+          s.style.transform='translate(0,0) rotate(0deg)';
+          s.style.opacity='1';
+        }, i*35);
+      });
+    };
+    run();
+    const iv = setInterval(run, 4500);
+    return { stop(){ stopped=true; clearInterval(iv); if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/magnetic-field.js

@@ -0,0 +1,40 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['magnetic-field'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const N = 60;
+    const parts = Array.from({length:N}, (_,i) => ({
+      phase: Math.random()*Math.PI*2,
+      freq: U.rand(0.4, 1.2),
+      amp: U.rand(30, 90),
+      y0: U.rand(0.15, 0.85),
+      c: pal[i%pal.length],
+      trail: []
+    }));
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.08)';
+      ctx.fillRect(0,0,k.w,k.h);
+      for (const p of parts){
+        const x = ((t*80 + p.phase*50) % (k.w+100)) - 50;
+        const y = k.h*p.y0 + Math.sin(x*0.02 + p.phase + t*p.freq)*p.amp;
+        p.trail.push([x,y]);
+        if (p.trail.length > 18) p.trail.shift();
+        ctx.strokeStyle = p.c;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        for (let i=0;i<p.trail.length;i++){
+          const [tx,ty] = p.trail[i];
+          if (i===0) ctx.moveTo(tx,ty); else ctx.lineTo(tx,ty);
+        }
+        ctx.globalAlpha = 0.7;
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(x,y,2.5,0,Math.PI*2); ctx.fill();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/matrix-rain.js

@@ -0,0 +1,33 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['matrix-rain'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const glyphs = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF'.split('');
+    const fs = 16;
+    let cols = 0, drops = [];
+    const init = () => {
+      cols = Math.ceil(k.w/fs);
+      drops = Array.from({length:cols}, () => U.rand(-20, 0));
+    };
+    init();
+    let lw = k.w, lh = k.h;
+    const stop = U.loop(() => {
+      if (k.w!==lw || k.h!==lh){ init(); lw=k.w; lh=k.h; }
+      ctx.fillStyle = 'rgba(0,0,0,0.08)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.font = fs+'px monospace';
+      for (let i=0;i<cols;i++){
+        const ch = glyphs[(Math.random()*glyphs.length)|0];
+        const x = i*fs, y = drops[i]*fs;
+        ctx.fillStyle = '#9fffc9';
+        ctx.fillText(ch, x, y);
+        ctx.fillStyle = '#00ff6a';
+        ctx.fillText(ch, x, y - fs);
+        drops[i] += 1;
+        if (y > k.h && Math.random() > 0.975) drops[i] = 0;
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();