npm - @xpert-ai/plugin-motion - Versions diffs - 0.1.0 - Mend

@xpert-ai/plugin-motion 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2457) hide show

package/assets/upstream/recipes/slides/fx-chain-react/chain-react.js ADDED Viewed

@@ -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/assets/upstream/recipes/slides/fx-chain-react/preview.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>fx-chain-react · motion-anything recipe</title>
+  <style>
+    :root { --accent:#7c5cff; --accent-2:#22d3ee; --text-1:#eaeaf2; color-scheme:dark; }
+    html, body { margin:0; height:100%; }
+    body { background:#0b0b12; overflow:hidden; }
+    .stage { position:relative; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
+      font-family: ui-sans-serif, system-ui, sans-serif; }
+    .replay { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:13px; color:#9aa0aa;
+      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 14px; cursor:pointer; }
+      @media (max-height:240px){ .replay{ display:none; } }
+  </style>
+</head>
+<body>
+  <div class="stage" data-fx="chain-react"></div>
+  <button class="replay" onclick="location.reload()">↻ replay</button>
+  <script src="_util.js"></script>
+  <script src="chain-react.js"></script>
+  <script>
+    if (!window.matchMedia || !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      HPX['chain-react'](document.querySelector('.stage'));
+    }
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/slides/fx-chain-react/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,53 @@
+spec_version: 1
+id: fx-chain-react
+name: Chain Reaction
+description: A chain reaction of bursts ripples across the frame.
+surfaces: [video]
+category: feedback-delight
+tech: [js]
+# 五维分类（建库标准）
+canvas:  [slides, video]
+target:  [section]
+intent:  feedback-delight
+runtime: [js]
+export:  [skill, html]
+dependencies: []
+tags: [chain, reaction, particles, delight]
+intent_keywords:
+  - chain
+  - reaction
+  - 链式反应
+best_for:
+  - Title cards, section breaks, or hero moments in slides / launch videos
+avoid_when:
+  - Web body content or anything that needs focused reading
+  - More than one bold effect on screen at once
+restraint:
+  max_per_view: 1
+  notes: A bold, attention-grabbing effect — slides / video first. On web pages use sparingly, one per screen.
+motion:
+  duration_ms: 0
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: js
+    files: [chain-react.js, _util.js]
+    usage: |
+      Add data-fx="chain-react" to a positioned container, then call HPX['chain-react'](el).
+      Canvas-based; from Open Design's html-ppt fx pack. Guard prefers-reduced-motion.
+license:
+  spdx: Apache-2.0
+  upstream: "https://github.com/nexu-io/open-design"
+  attribution_required: true
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/slides/fx-confetti/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: fx-confetti
+description: |
+  Confetti fires across the frame — for wins and reveals. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch
+  videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
+triggers:
+  - "confetti"
+  - "彩纸庆祝"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/nexu-io/open-design"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use fx-confetti as a section effect on a slide or hero: call HPX['confetti-cannon'](el) on a positioned dark
+    container; keep to one bold effect per screen, with a reduced-motion guard.
+---
+# Confetti Cannon
+Confetti fires across the frame — for wins and reveals. From [Open Design](https://github.com/nexu-io/open-design)'s html-ppt fx pack (Apache-2.0).
+Part of [motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Title cards, section breaks, or hero moments in slides / launch videos.
+## When NOT to use it (restraint)
+- Web body content or anything needing focused reading. Never more than one bold effect at once.
+## How to apply
+1. Copy `confetti-cannon.js` and `_util.js` and link them.
+2. Add `data-fx="confetti-cannon"` to a positioned container; call `HPX['confetti-cannon'](el)` (guard prefers-reduced-motion).
+## Accessibility & performance
+- Guard with prefers-reduced-motion (don't start). Canvas-based; isolated compositing layer.

package/assets/upstream/recipes/slides/fx-confetti/_util.js ADDED Viewed

@@ -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/assets/upstream/recipes/slides/fx-confetti/confetti-cannon.js ADDED Viewed

@@ -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/assets/upstream/recipes/slides/fx-confetti/preview.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>fx-confetti · motion-anything recipe</title>
+  <style>
+    :root { --accent:#7c5cff; --accent-2:#22d3ee; --text-1:#eaeaf2; color-scheme:dark; }
+    html, body { margin:0; height:100%; }
+    body { background:#0b0b12; overflow:hidden; }
+    .stage { position:relative; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
+      font-family: ui-sans-serif, system-ui, sans-serif; }
+    .replay { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:13px; color:#9aa0aa;
+      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 14px; cursor:pointer; }
+      @media (max-height:240px){ .replay{ display:none; } }
+  </style>
+</head>
+<body>
+  <div class="stage" data-fx="confetti-cannon"></div>
+  <button class="replay" onclick="location.reload()">↻ replay</button>
+  <script src="_util.js"></script>
+  <script src="confetti-cannon.js"></script>
+  <script>
+    if (!window.matchMedia || !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      HPX['confetti-cannon'](document.querySelector('.stage'));
+    }
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/slides/fx-confetti/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,53 @@
+spec_version: 1
+id: fx-confetti
+name: Confetti Cannon
+description: Confetti fires across the frame — for wins and reveals.
+surfaces: [video]
+category: feedback-delight
+tech: [js]
+# 五维分类（建库标准）
+canvas:  [slides, video]
+target:  [section]
+intent:  feedback-delight
+runtime: [js]
+export:  [skill, html]
+dependencies: []
+tags: [confetti, celebration, delight]
+intent_keywords:
+  - confetti
+  - celebration
+  - 彩纸庆祝
+best_for:
+  - Title cards, section breaks, or hero moments in slides / launch videos
+avoid_when:
+  - Web body content or anything that needs focused reading
+  - More than one bold effect on screen at once
+restraint:
+  max_per_view: 1
+  notes: A bold, attention-grabbing effect — slides / video first. On web pages use sparingly, one per screen.
+motion:
+  duration_ms: 0
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: js
+    files: [confetti-cannon.js, _util.js]
+    usage: |
+      Add data-fx="confetti-cannon" to a positioned container, then call HPX['confetti-cannon'](el).
+      Canvas-based; from Open Design's html-ppt fx pack. Guard prefers-reduced-motion.
+license:
+  spdx: Apache-2.0
+  upstream: "https://github.com/nexu-io/open-design"
+  attribution_required: true
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/slides/fx-constellation/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: fx-constellation
+description: |
+  Connected points like a constellation — quiet motion. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch
+  videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
+triggers:
+  - "constellation"
+  - "星座连线"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/nexu-io/open-design"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use fx-constellation as a background effect on a slide or hero: call HPX['constellation'](el) on a positioned dark
+    container; keep to one bold effect per screen, with a reduced-motion guard.
+---
+# Constellation
+Connected points like a constellation — quiet motion. From [Open Design](https://github.com/nexu-io/open-design)'s html-ppt fx pack (Apache-2.0).
+Part of [motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Title cards, section breaks, or hero moments in slides / launch videos.
+## When NOT to use it (restraint)
+- Web body content or anything needing focused reading. Never more than one bold effect at once.
+## How to apply
+1. Copy `constellation.js` and `_util.js` and link them.
+2. Add `data-fx="constellation"` to a positioned container; call `HPX['constellation'](el)` (guard prefers-reduced-motion).
+## Accessibility & performance
+- Guard with prefers-reduced-motion (don't start). Canvas-based; isolated compositing layer.

package/assets/upstream/recipes/slides/fx-constellation/_util.js ADDED Viewed

@@ -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/assets/upstream/recipes/slides/fx-constellation/constellation.js ADDED Viewed

@@ -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/assets/upstream/recipes/slides/fx-constellation/preview.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>fx-constellation · motion-anything recipe</title>
+  <style>
+    :root { --accent:#7c5cff; --accent-2:#22d3ee; --text-1:#eaeaf2; color-scheme:dark; }
+    html, body { margin:0; height:100%; }
+    body { background:#0b0b12; overflow:hidden; }
+    .stage { position:relative; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
+      font-family: ui-sans-serif, system-ui, sans-serif; }
+    .replay { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:13px; color:#9aa0aa;
+      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 14px; cursor:pointer; }
+      @media (max-height:240px){ .replay{ display:none; } }
+  </style>
+</head>
+<body>
+  <div class="stage" data-fx="constellation"></div>
+  <button class="replay" onclick="location.reload()">↻ replay</button>
+  <script src="_util.js"></script>
+  <script src="constellation.js"></script>
+  <script>
+    if (!window.matchMedia || !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      HPX['constellation'](document.querySelector('.stage'));
+    }
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/slides/fx-constellation/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,53 @@
+spec_version: 1
+id: fx-constellation
+name: Constellation
+description: Connected points like a constellation — quiet motion.
+surfaces: [video]
+category: ambient
+tech: [js]
+# 五维分类（建库标准）
+canvas:  [slides, video]
+target:  [background]
+intent:  ambient
+runtime: [js]
+export:  [skill, html]
+dependencies: []
+tags: [constellation, points, ambient, background]
+intent_keywords:
+  - constellation
+  - points
+  - 星座连线
+best_for:
+  - Title cards, section breaks, or hero moments in slides / launch videos
+avoid_when:
+  - Web body content or anything that needs focused reading
+  - More than one bold effect on screen at once
+restraint:
+  max_per_view: 1
+  notes: A bold, attention-grabbing effect — slides / video first. On web pages use sparingly, one per screen.
+motion:
+  duration_ms: 0
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: js
+    files: [constellation.js, _util.js]
+    usage: |
+      Add data-fx="constellation" to a positioned container, then call HPX['constellation'](el).
+      Canvas-based; from Open Design's html-ppt fx pack. Guard prefers-reduced-motion.
+license:
+  spdx: Apache-2.0
+  upstream: "https://github.com/nexu-io/open-design"
+  attribution_required: true
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/slides/fx-counter-explosion/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: fx-counter-explosion
+description: |
+  A number counts up then bursts — for a big stat. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch
+  videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
+triggers:
+  - "counter"
+  - "数字爆炸"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/nexu-io/open-design"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use fx-counter-explosion as a number effect on a slide or hero: call HPX['counter-explosion'](el) on a positioned dark
+    container; keep to one bold effect per screen, with a reduced-motion guard.
+---
+# Counter Explosion
+A number counts up then bursts — for a big stat. From [Open Design](https://github.com/nexu-io/open-design)'s html-ppt fx pack (Apache-2.0).
+Part of [motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Title cards, section breaks, or hero moments in slides / launch videos.
+## When NOT to use it (restraint)
+- Web body content or anything needing focused reading. Never more than one bold effect at once.
+## How to apply
+1. Copy `counter-explosion.js` and `_util.js` and link them.
+2. Add `data-fx="counter-explosion"` to a positioned container; call `HPX['counter-explosion'](el)` (guard prefers-reduced-motion).
+## Accessibility & performance
+- Guard with prefers-reduced-motion (don't start). Canvas-based; isolated compositing layer.