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/web/border-beam/preview.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>border-beam · motion-anything recipe</title>
+  <link rel="stylesheet" href="border-beam.css" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 22px;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 120% at 50% 0%, #1b1c24, #0b0b12); color: #e7e8ee; }
+    .badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8b7cf6; }
+    .beam { padding: 28px 32px; max-width: 300px; text-align: center; }
+    .beam h3 { margin: 0 0 8px; font-size: 18px; }
+    .beam p { margin: 0; font-size: 13px; color: #a2a4b0; line-height: 1.5; }
+    .hint { font-size: 13px; color: #7c7f8c; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · ambient</div>
+  <div class="beam">
+    <h3>✦ New</h3>
+    <p>A bright comet travels the border — livelier than a full-border glow.</p>
+  </div>
+  <p class="hint">One beaming element per view · brighter than shine-border · static under reduced-motion.</p>
+</body>
+</html>

package/assets/upstream/recipes/web/border-beam/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,57 @@
+spec_version: 1
+id: border-beam
+name: Border Beam
+description: A small bright comet of light travels around the border once and again — a lively accent for one card.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, button, section]
+intent: ambient
+runtime: [css]
+export: [skill, motion-json, html]
+category: ambient
+tags: [border, beam, comet, ambient, glow, accent]
+tech: [css]
+dependencies: []
+intent_keywords:
+  - border beam
+  - traveling light border
+  - comet border
+  - animated outline accent
+  - 边框光点
+  - 环绕流光
+best_for:
+  - A single "new" / "featured" card or a hero CTA that should feel lively
+  - Drawing a beat of attention to one element without shouting
+avoid_when:
+  - Several elements at once (competing beams = noise)
+  - Calm / serious contexts
+  - When a quieter full-border glow fits better (use shine-border instead)
+restraint:
+  max_per_view: 1
+  notes: >
+    One beaming element per view. It is brighter/livelier than shine-border — use it sparingly.
+    Fully static under reduced-motion.
+motion:
+  duration_ms: 3000
+  easing: linear
+  reduced_motion: static      # beam stops; a plain static border remains
+  gpu_safe: true              # animates a masked conic-gradient rotation
+entry: preview.html
+implementations:
+  - tech: css
+    files: [border-beam.css]
+    usage: |
+      Wrap content in an element with class "beam". A masked rotating conic-gradient paints a small
+      bright comet that travels the border. Tune --beam-color / --beam-size / duration. Pure CSS.
+license:
+  spdx: Apache-2.0
+  upstream: "https://magicui.design/docs/components/border-beam"
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/bounce-cards/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: bounce-cards
+description: |
+  A stack of cards springs and fans into place on view — a lively hero for a small set (3–5). One set per view. Shown flat/instant under prefers-reduced-motion.
+triggers: ["bounce cards","fan in cards","弹跳卡片","展开卡组"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# bounce-cards
+Bounce Cards Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="bcards"><div class="bc">…</div><div class="bc">…</div><div class="bc">…</div></div>`.

package/assets/upstream/recipes/web/bounce-cards/bounce-cards.css ADDED Viewed

@@ -0,0 +1,9 @@
+/* bounce-cards.css — entrance · cards spring + fan out on load, staggered. transform/opacity only. */
+.bcards{ position:relative; width:220px; height:150px; }
+.bcards .bc{ position:absolute; inset:0; margin:auto; width:180px; height:120px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.4);
+  opacity:0; transform: translateY(20px) rotate(0deg) scale(.9); transition: opacity .5s ease-out, transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay:var(--bc-d,0ms); }
+.bcards.in .bc{ opacity:1; }
+.bcards.in .bc:nth-child(1){ transform: translateX(-46px) rotate(-9deg); }
+.bcards.in .bc:nth-child(2){ transform: translateX(0) rotate(0deg); }
+.bcards.in .bc:nth-child(3){ transform: translateX(46px) rotate(9deg); }
+@media (prefers-reduced-motion: reduce){ .bcards .bc{ transition:none; opacity:1 } }

package/assets/upstream/recipes/web/bounce-cards/bounce-cards.js ADDED Viewed

@@ -0,0 +1,8 @@
+/* bounce-cards.js — entrance · trigger the fan-out on view; stagger via --bc-d. Reduced-motion → shown. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function init(){ var els=document.querySelectorAll('.bcards'); els.forEach(function(el){ [].slice.call(el.querySelectorAll('.bc')).forEach(function(c,i){ c.style.setProperty('--bc-d',(i*90)+'ms'); });
+    if(red()){ el.classList.add('in'); return; } if(!('IntersectionObserver' in g)){ el.classList.add('in'); return; }
+    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } }); }, {threshold:.3}); io.observe(el); }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/bounce-cards/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>bounce-cards · recipe</title><link rel="stylesheet" href="bounce-cards.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}</style></head>
+<body><div class="badge">motion-anything · entrance</div><div class="bcards"><div class="bc" style="background:linear-gradient(135deg,#8b7cf6,#6d54e6)"></div><div class="bc" style="background:linear-gradient(135deg,#39d98a,#2b9e73)"></div><div class="bc" style="background:linear-gradient(135deg,#ff8bd0,#d94f9a)"></div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="bounce-cards.js"></script></body></html>

package/assets/upstream/recipes/web/bounce-cards/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: bounce-cards
+name: Bounce Cards
+description: A stack of cards springs and fans into place on load — a lively hero for a small set.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card]
+intent: entrance
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: entrance
+tech: [css,js]
+dependencies: []
+tags: [bounce cards,fan in cards,弹跳卡片,展开卡组]
+intent_keywords: [bounce cards,fan in cards,弹跳卡片,展开卡组]
+best_for: ["Bounce Cards — one tasteful use"]
+avoid_when: ["Overuse; touch-only where relevant; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [bounce-cards.css,bounce-cards.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/bounce-cards, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/card-lift-hover/SKILL.md ADDED Viewed

@@ -0,0 +1,45 @@
+---
+name: card-lift-hover
+description: |
+  Lift a clickable card toward the viewer on hover with a deepening shadow — a tactile, responsive
+  cue. Pure CSS, no JS. Only use on actually-clickable cards (motion implies clickability). Honors
+  prefers-reduced-motion (static). Avoid on very dense grids where many lifts feel noisy.
+triggers:
+  - "hover lift"
+  - "card hover effect"
+  - "elevate on hover"
+  - "悬停抬升"
+  - "卡片悬浮"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use card-lift-hover on the clickable cards in this grid: a small lift + deeper shadow on hover,
+    pure CSS, static under prefers-reduced-motion.
+---
+# card-lift-hover
+A clickable card that lifts on hover. Pure CSS. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Clickable cards / tiles in a grid that should feel tactile.
+## When NOT to use it (restraint)
+- Non-interactive cards — the lift implies it is clickable.
+- Very dense grids where many simultaneous lifts feel noisy.
+## How to apply
+1. Copy `card-lift-hover.css` and link it.
+2. Add the class: `<a class="lift-card" href="…">…</a>`. No JavaScript needed.
+## Accessibility & performance
+- `prefers-reduced-motion`: no lift (a subtle shadow change remains). Transform + shadow only.

package/assets/upstream/recipes/web/card-lift-hover/card-lift-hover.css ADDED Viewed

@@ -0,0 +1,24 @@
+/* card-lift-hover.css — motion-anything recipe · category: hover-press
+ * Pure CSS. Transform + shadow only. Static under reduced-motion. */
+.lift-card {
+  transform: translateY(0);
+  box-shadow: 0 2px 10px rgba(20, 18, 14, 0.06);
+  /* fast band, ease-out */
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+.lift-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 32px rgba(20, 18, 14, 0.13);
+}
+.lift-card:active {
+  transform: translateY(-2px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .lift-card,
+  .lift-card:hover,
+  .lift-card:active { transform: none; transition: box-shadow 120ms ease; }
+}

package/assets/upstream/recipes/web/card-lift-hover/preview.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>card-lift-hover · motion-anything recipe</title>
+  <link rel="stylesheet" href="card-lift-hover.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin:0; min-height:100vh; display:grid; place-items:center;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 120% at 50% 0%, #fff, #f4f5f7); color:#1a1d24; }
+    .wrap { text-align:center; }
+    .badge { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8b909a; margin-bottom:22px; }
+    .grid { display:flex; gap:20px; }
+    .lift-card { width:180px; height:130px; border-radius:16px; background:#fff; border:1px solid #e7e4dd;
+      cursor:pointer; display:grid; place-items:center; color:#6b7280; font-size:14px; }
+    .hint { margin-top:26px; font-size:13px; color:#9aa0aa; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="badge">motion-anything · hover-press</div>
+    <div class="grid">
+      <div class="lift-card">Hover me</div>
+      <div class="lift-card">Hover me</div>
+      <div class="lift-card">Hover me</div>
+    </div>
+    <p class="hint">Lifts on hover · static under reduced-motion · pure CSS.</p>
+  </div>
+</body>
+</html>

package/assets/upstream/recipes/web/card-lift-hover/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,47 @@
+spec_version: 1
+id: card-lift-hover
+name: Card Lift
+description: A card that lifts toward the viewer on hover, with a deepening shadow.
+surfaces: [web, interaction]
+category: hover-press
+tech: [css]
+dependencies: []
+tags: [hover, card, lift, elevation, shadow, tactile]
+intent_keywords:
+  - hover lift
+  - card hover
+  - elevate on hover
+  - 悬停抬升
+  - 卡片悬浮
+best_for:
+  - Cards / tiles in a grid that are clickable
+  - Giving clickable surfaces a tactile, responsive feel
+avoid_when:
+  - Non-interactive cards (motion implies it is clickable)
+  - Very dense grids where many lifts at once feel noisy
+restraint:
+  max_per_view: 12
+  notes: Only on actually-clickable cards. Keep the lift small (a few px) and the shadow subtle.
+motion:
+  duration_ms: 200
+  easing: ease-out
+  reduced_motion: none      # static; no lift
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [card-lift-hover.css]
+    usage: |
+      Add class "lift-card" to a clickable card. Pure CSS — no JavaScript required.
+license:
+  spdx: Apache-2.0
+  upstream: null
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/circular-text/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: circular-text
+description: |
+  Text curves around a circle and slowly rotates — a decorative badge/seal accent. Decorative only; keep the phrase short. Static ring under prefers-reduced-motion.
+triggers: ["circular text","text on circle","环形文字","圆形排版"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# circular-text
+Circular Text Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="circ" data-text="• MOTION • ANYTHING "></div>`.

package/assets/upstream/recipes/web/circular-text/circular-text.css ADDED Viewed

@@ -0,0 +1,5 @@
+/* circular-text.css — ambient · characters placed on a circle; the ring slowly rotates. transform only. */
+.circ{ position:relative; width:160px; height:160px; animation: circ-spin 12s linear infinite; }
+.circ .circ-c{ position:absolute; left:50%; top:0; transform-origin: 0 80px; font:600 14px ui-sans-serif,system-ui,sans-serif; color:#c8bdff; }
+@keyframes circ-spin{ to{ transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce){ .circ{ animation:none } }

package/assets/upstream/recipes/web/circular-text/circular-text.js ADDED Viewed

@@ -0,0 +1,8 @@
+/* circular-text.js — ambient · lay characters of data-text around the ring. */
+(function(g){ 'use strict';
+  function attach(el){ if(el.__c) return; el.__c=1; var t=(el.getAttribute('data-text')||el.textContent).trim(); el.textContent='';
+    for(var i=0;i<t.length;i++){ var s=document.createElement('span'); s.className='circ-c'; s.textContent=t[i];
+      s.style.transform='rotate('+(i*(360/t.length))+'deg)'; el.appendChild(s); } }
+  function init(){ var els=document.querySelectorAll('.circ'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/circular-text/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>circular-text · recipe</title><link rel="stylesheet" href="circular-text.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}h1{margin:0}</style></head>
+<body><div class="badge">motion-anything · ambient</div><div class="circ" data-text="• MOTION • ANYTHING "></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="circular-text.js"></script></body></html>

package/assets/upstream/recipes/web/circular-text/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: circular-text
+name: Circular Text
+description: Text curves around a circle and slowly rotates — a decorative badge/seal accent.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: ambient
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css,js]
+dependencies: []
+tags: [circular text,text on circle,环形文字,圆形排版]
+intent_keywords: [circular text,text on circle,环形文字,圆形排版]
+best_for: ["Circular Text — one tasteful use"]
+avoid_when: ["Overuse; dense grids; reduced-motion contexts where it distracts"]
+restraint: { max_per_view: 3, notes: "Use sparingly. Plain/static under reduced-motion." }
+motion: { duration_ms: 600, easing: ease-out, reduced_motion: graceful, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [circular-text.css,circular-text.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/text-animations/circular-text, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/click-spark/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: click-spark
+description: |
+  A quick burst of sparks flies from the point you click — a playful tap accent. Reserve for a delightful primary action; skip on serious/destructive ones. No sparks under prefers-reduced-motion.
+triggers: ["click spark","tap burst","点击火花","点按迸发"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# click-spark
+Sparks burst from the click point. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `click-spark.js`; add class `click-spark` (optional `data-spark="#hex"`). Auto-attaches.

package/assets/upstream/recipes/web/click-spark/click-spark.js ADDED Viewed

@@ -0,0 +1,12 @@
+/* click-spark.js — feedback-delight · sparks fly from the click point. transform/opacity only. Off under reduced-motion. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function burst(el, x, y){ var n=8, host=document.createElement('div'); host.style.cssText='position:fixed;left:'+x+'px;top:'+y+'px;pointer-events:none;z-index:9999';
+    for(var i=0;i<n;i++){ var s=document.createElement('span'); var a=(i/n)*Math.PI*2, d=18+Math.random()*10;
+      s.style.cssText='position:absolute;width:4px;height:4px;border-radius:2px;background:'+(el.getAttribute('data-spark')||'#8b7cf6')+';transform:translate(-50%,-50%)';
+      host.appendChild(s); (function(sp,dx,dy){ sp.animate([{transform:'translate(-50%,-50%) translate(0,0)',opacity:1},{transform:'translate(-50%,-50%) translate('+dx+'px,'+dy+'px)',opacity:0}],{duration:480,easing:'cubic-bezier(.2,.7,.3,1)'}); })(s, Math.cos(a)*d, Math.sin(a)*d);
+    } document.body.appendChild(host); setTimeout(function(){ host.remove(); }, 520); }
+  function attach(el){ if(el.__spark) return; el.__spark=1; el.addEventListener('click', function(e){ if(!red()) burst(el, e.clientX, e.clientY); }); }
+  function init(){ var els=document.querySelectorAll('.click-spark'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  g.attachClickSpark=attach; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/click-spark/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>click-spark · recipe</title>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}h1{margin:0}</style></head>
+<body><div class="badge">motion-anything · feedback-delight</div><button class="click-spark" data-spark="#39d98a" style="border:0;background:#8b7cf6;color:#fff;font:600 15px ui-sans-serif;padding:14px 24px;border-radius:12px;cursor:pointer">✦ Click me</button><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="click-spark.js"></script></body></html>

package/assets/upstream/recipes/web/click-spark/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: click-spark
+name: Click Spark
+description: A quick burst of sparks flies from the point you click — a playful tap accent.
+surfaces: [web, interaction]
+canvas: [web]
+target: [button,section]
+intent: feedback-delight
+runtime: [js]
+export: [skill, motion-json, html]
+category: feedback-delight
+tech: [js]
+dependencies: []
+tags: [spark,click,burst,tap,delight]
+intent_keywords: [click spark, tap burst, 点击火花, 点按迸发]
+best_for: ["A playful primary action"]
+avoid_when: ["Serious/destructive actions; many at once"]
+restraint: { max_per_view: 6, notes: "Use sparingly; tasteful. Plain/static under reduced-motion." }
+motion: { duration_ms: 500, easing: ease-out, reduced_motion: graceful, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [click-spark.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: null, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/count-up/SKILL.md ADDED Viewed

@@ -0,0 +1,46 @@
+---
+name: count-up
+description: |
+  Animate a number counting up to its target as it scrolls into view, once. Use for stat/metric
+  blocks to draw the eye to an impressive figure. Honors prefers-reduced-motion (final value shown
+  instantly). Avoid for precise values the user must read while animating, or many counters at once.
+triggers:
+  - "count up"
+  - "animated number"
+  - "stat counter"
+  - "数字滚动"
+  - "数据强调"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use count-up on the stats row: animate each number up to its target when the section enters
+    the viewport, with thousands separators and a prefers-reduced-motion fallback.
+---
+# count-up
+A number that animates up to its target on enter. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Stat / metric blocks; drawing the eye to one impressive figure.
+## When NOT to use it (restraint)
+- Precise values the reader must read exactly mid-animation.
+- Many counters firing at once — pick the one that matters.
+## How to apply
+1. Copy `count-up.css` and `count-up.js` and link them.
+2. Mark numbers: `<span data-count="10000" data-count-suffix="+">0</span>`
+   (optional `data-count-prefix="$"`, `data-count-duration="900"`).
+## Accessibility & performance
+- `prefers-reduced-motion`: final value shown immediately. Tabular figures keep width steady.

package/assets/upstream/recipes/web/count-up/count-up.css ADDED Viewed

@@ -0,0 +1,7 @@
+/* count-up.css — motion-anything recipe · category: emphasis
+ * Tabular figures keep the width steady while the number animates. */
+[data-count] {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}

package/assets/upstream/recipes/web/count-up/count-up.js ADDED Viewed

@@ -0,0 +1,58 @@
+/* count-up.js — motion-anything recipe · category: emphasis
+ *
+ * Animates [data-count] elements up to their target when they enter the viewport, once.
+ * - data-count="10000"  (target)   data-count-suffix="+"   data-count-prefix="$"
+ * - Honors prefers-reduced-motion (sets the final value immediately).
+ * - Uses an ease-out curve; updates textContent (no layout thrash with tabular figures).
+ *
+ * Usage:  <span data-count="10000" data-count-suffix="+">0</span>
+ */
+(function () {
+  'use strict';
+  function format(n, prefix, suffix) {
+    return (prefix || '') + Math.round(n).toLocaleString() + (suffix || '');
+  }
+  function run(el) {
+    var target = parseFloat(el.getAttribute('data-count')) || 0;
+    var prefix = el.getAttribute('data-count-prefix') || '';
+    var suffix = el.getAttribute('data-count-suffix') || '';
+    var dur = parseInt(el.getAttribute('data-count-duration'), 10) || 900;
+    var start = null;
+    function step(ts) {
+      if (start === null) start = ts;
+      var p = Math.min((ts - start) / dur, 1);
+      var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
+      el.textContent = format(target * eased, prefix, suffix);
+      if (p < 1) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
+  function init() {
+    var els = document.querySelectorAll('[data-count]');
+    if (!els.length) return;
+    var reduce = window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce || !('IntersectionObserver' in window)) {
+      els.forEach(function (el) {
+        el.textContent = format(parseFloat(el.getAttribute('data-count')) || 0,
+          el.getAttribute('data-count-prefix') || '', el.getAttribute('data-count-suffix') || '');
+      });
+      return;
+    }
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) { run(entry.target); io.unobserve(entry.target); }
+      });
+    }, { threshold: 0.5 });
+    els.forEach(function (el) { io.observe(el); });
+  }
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();

package/assets/upstream/recipes/web/count-up/preview.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>count-up · motion-anything recipe</title>
+  <link rel="stylesheet" href="count-up.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin:0; min-height:100vh; display:grid; place-items:center;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 120% at 50% 0%, #fff, #f4f5f7); color:#1a1d24; }
+    .badge { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8b909a; text-align:center; margin-bottom:20px; }
+    .stats { display:flex; gap:48px; justify-content:center; flex-wrap:wrap; }
+    .stat { text-align:center; }
+    .num { font:700 46px ui-sans-serif, system-ui, sans-serif; color:#1a1d24; }
+    .lbl { color:#6b7280; font-size:14px; margin-top:4px; }
+    .replay { display:block; margin:34px auto 0; font-size:13px; color:#9aa0aa; background:none; border:0; cursor:pointer; text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge">motion-anything · emphasis</div>
+    <div class="stats">
+      <div class="stat"><div class="num"><span data-count="10000" data-count-suffix="+">0</span></div><div class="lbl">Users</div></div>
+      <div class="stat"><div class="num"><span data-count="142" data-count-suffix="">0</span></div><div class="lbl">Design systems</div></div>
+      <div class="stat"><div class="num"><span data-count="99" data-count-suffix="%">0</span></div><div class="lbl">Tasteful</div></div>
+    </div>
+    <button class="replay" onclick="location.reload()">↻ replay</button>
+  </div>
+  <script src="count-up.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/count-up/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,47 @@
+spec_version: 1
+id: count-up
+name: Count Up
+description: Animate a number counting up to its target when it scrolls into view.
+surfaces: [web]
+category: emphasis
+tech: [css, js]
+dependencies: []
+tags: [number, counter, stat, metric, emphasis]
+intent_keywords:
+  - count up
+  - animated number
+  - stat counter
+  - 数字滚动
+  - 强调数据
+best_for:
+  - Stat / metric blocks ("10,000+ users")
+  - Drawing the eye to a single impressive figure
+avoid_when:
+  - Precise values the user must read exactly while it animates
+  - Many counters firing at once (pick the one that matters)
+restraint:
+  max_per_view: 3
+  notes: Keep durations short (~base band). Animate once, on enter; don't loop.
+motion:
+  duration_ms: 900
+  easing: ease-out
+  reduced_motion: none      # show the final number instantly
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [count-up.css, count-up.js]
+    usage: |
+      <span data-count="10000" data-count-suffix="+">0</span> — animates to 10,000+ on enter.
+license:
+  spdx: Apache-2.0
+  upstream: null
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/counter/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: counter
+description: |
+  Digits roll like an odometer up to the target number — a satisfying stat reveal on view. One or two key numbers per view. Under prefers-reduced-motion the final number shows instantly.
+triggers: ["counter","odometer","number roll","数字滚动","里程表"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# counter
+Counter Roll Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<span class="counter" data-to="1280">1280</span>`.

package/assets/upstream/recipes/web/counter/counter.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* counter.css — emphasis · digits roll vertically to the target. transform only. */
+.counter{ display:inline-flex; font:800 56px ui-sans-serif,system-ui,sans-serif; line-height:1; }
+.counter .dig{ display:inline-block; height:1em; overflow:hidden; }
+.counter .dig .strip{ display:flex; flex-direction:column; transition: transform 1s cubic-bezier(.16,1,.3,1); }
+.counter .dig .strip span{ height:1em; }
+@media (prefers-reduced-motion: reduce){ .counter .dig .strip{ transition:none } }