@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/web/target-cursor/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: target-cursor
+name: Target Cursor
+description: An animated target ring replaces the cursor and snaps onto interactive elements.
+surfaces: [web, interaction]
+canvas: [web]
+target: [button,section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [target cursor,ring cursor,靶心光标,吸附指针]
+intent_keywords: [target cursor,ring cursor,靶心光标,吸附指针]
+best_for: ["Target Cursor — one tasteful use"]
+avoid_when: ["Touch-only contexts; overuse; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Off/plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [target-cursor.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/target-cursor, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/target-cursor/target-cursor.js

@@ -0,0 +1,10 @@
+/* target-cursor.js — ambient · a ring follows the pointer and grows over .tc-target elements. transform only. */
+(function(g){ 'use strict';
+  function off(){ return g.matchMedia && (g.matchMedia('(prefers-reduced-motion: reduce)').matches || g.matchMedia('(hover: none)').matches); }
+  function init(){ if(off()) return; var r=document.createElement('div');
+    r.style.cssText='position:fixed;left:0;top:0;width:26px;height:26px;border:2px solid #8b7cf6;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .18s,height .18s,border-color .18s';
+    document.body.appendChild(r);
+    addEventListener('pointermove', function(e){ r.style.left=e.clientX+'px'; r.style.top=e.clientY+'px'; var t=e.target.closest && e.target.closest('.tc-target,a,button');
+      if(t){ r.style.width='44px'; r.style.height='44px'; r.style.borderColor='#39d98a'; } else { r.style.width='26px'; r.style.height='26px'; r.style.borderColor='#8b7cf6'; } }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/text-scramble/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: text-scramble
+description: |
+  Resolve one short headline from random glyphs — a techy decode reveal. One short line only; keep
+  it fast. The resolved text is the real, accessible content; under prefers-reduced-motion it appears
+  instantly with no scramble. Avoid on body copy and calm/luxury tones.
+triggers:
+  - "text scramble"
+  - "decode text"
+  - "glitch text reveal"
+  - "matrix text"
+  - "解码文字"
+  - "科技感标题"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://tympanus.net/Development/TextScrambleEffect/"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use text-scramble on the hero line for a technical product: it resolves from noise, fast. Just
+    the one line; instant under reduced-motion.
+---
+
+# text-scramble
+
+A line of text that resolves from random glyphs. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by Codrops, reimplemented dependency-free.
+
+## When to use it
+- A hero word / short headline with a technical or futuristic tone; cycling a few phrases on one line.
+
+## When NOT to use it (restraint)
+- Long text or body copy — unreadable while scrambling. **One short line.**
+- Calm / editorial / luxury tones (feels gimmicky).
+
+## How to apply
+1. Copy `text-scramble.js` into the project and link it.
+2. Mark the element:
+   ```html
+   <span class="scramble" data-text="motion, anything"></span>
+   ```
+3. Auto-plays `data-text` on load. To change the phrase later: `scrambleTo(el, "next phrase")`.
+
+## Accessibility & performance
+- Under `prefers-reduced-motion` the final text appears instantly (no scramble). The resolved
+  `data-text` is always the real content.
+- Swaps text content on rAF; keep the line short so it stays cheap.
+
+## Framework notes
+- React: keep a ref and call `scrambleTo(ref.current, text)` on mount / when the phrase changes.

package/assets/upstream/recipes/web/text-scramble/preview.html

@@ -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>text-scramble · motion-anything 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-monospace, "SF Mono", Menlo, monospace;
+      background: radial-gradient(120% 120% at 50% 0%, #12131a, #06070c); color: #d7f7e6; }
+    .badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #39d98a; font-family: ui-sans-serif, system-ui, sans-serif; }
+    h1 { font-size: 44px; margin: 0; font-weight: 700; letter-spacing: .02em; min-height: 1.2em; }
+    button { margin-top: 6px; border: 1px solid #2b6; background: transparent; color: #39d98a; font: 600 13px ui-sans-serif, system-ui, sans-serif;
+      padding: 9px 16px; border-radius: 10px; cursor: pointer; }
+    .hint { font-size: 13px; color: #6f7c75; font-family: ui-sans-serif, system-ui, sans-serif; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · text-kinetic</div>
+  <h1><span class="scramble" data-text="motion, anything"></span></h1>
+  <button id="again">↻ decode again</button>
+  <p class="hint">One short line resolves from noise · final text is the real content · instant under reduced-motion.</p>
+  <script src="text-scramble.js"></script>
+  <script>
+    var phrases = ['motion, anything', 'launch, faster', 'ship, tasteful'];
+    var i = 0, el = document.querySelector('.scramble');
+    document.getElementById('again').addEventListener('click', function () {
+      i = (i + 1) % phrases.length; window.scrambleTo(el, phrases[i]);
+    });
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/web/text-scramble/recipe.motion.yaml

@@ -0,0 +1,58 @@
+spec_version: 1
+id: text-scramble
+name: Text Scramble
+description: Glyphs shuffle then resolve into the final word — a techy decode reveal for one short line.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: text-kinetic
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: text-kinetic
+tech: [css, js]
+dependencies: []
+tags: [scramble, decode, glitch, matrix, kinetic, headline]
+
+intent_keywords:
+  - text scramble
+  - decode text
+  - glitch reveal
+  - matrix text
+  - 乱码解码
+  - 解码文字
+  - 科技感标题
+best_for:
+  - A hero word / short headline with a technical or futuristic tone
+  - Cycling between a few phrases on one line
+avoid_when:
+  - Long text or body copy (unreadable while scrambling)
+  - Calm / editorial / luxury tones (feels gimmicky)
+  - Anything that must be readable by a screen reader mid-animation
+restraint:
+  max_per_view: 1
+  notes: >
+    One short line only. Keep it fast (well under a second per phrase). The final, resolved text is
+    the accessible value — under reduced-motion it appears instantly with no scramble.
+
+motion:
+  duration_ms: 700
+  easing: linear
+  reduced_motion: instant     # shows final text immediately, no scramble
+  gpu_safe: true              # text content swaps only; no layout thrash beyond the line
+
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [text-scramble.js]
+    usage: |
+      Add class "scramble" and data-text="Final words" to an element. Call the exported
+      scrambleTo(el, text) to animate, or it auto-plays data-text on load. Respects reduced-motion.
+
+license:
+  spdx: Apache-2.0
+  upstream: "https://tympanus.net/Development/TextScrambleEffect/"   # technique popularized by Codrops
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/text-scramble/text-scramble.js

@@ -0,0 +1,65 @@
+/* text-scramble.js — motion-anything recipe · category: text-kinetic
+ *
+ * Resolves a line of text from random glyphs — a techy decode reveal. One short line.
+ * - Under prefers-reduced-motion the final text appears instantly (no scramble).
+ * - The resolved text is the real content; keep it short and readable.
+ *
+ * Usage:
+ *   <span class="scramble" data-text="motion, anything"></span>
+ *   // or programmatically: scrambleTo(el, "next phrase")
+ */
+(function (global) {
+  'use strict';
+
+  var CHARS = '!<>-_\\/[]{}—=+*^?#________';
+  function reduced() { return global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+
+  function scrambleTo(el, newText) {
+    newText = newText != null ? newText : (el.getAttribute('data-text') || el.textContent || '');
+    if (reduced()) { el.textContent = newText; return Promise.resolve(); }
+    var oldText = el.textContent || '';
+    var len = Math.max(oldText.length, newText.length);
+    var queue = [];
+    for (var i = 0; i < len; i++) {
+      var from = oldText[i] || '';
+      var to = newText[i] || '';
+      var start = Math.floor(Math.random() * 20);
+      var end = start + Math.floor(Math.random() * 20) + 8;
+      queue.push({ from: from, to: to, start: start, end: end, char: '' });
+    }
+    if (el.__scrambleRaf) cancelAnimationFrame(el.__scrambleRaf);
+    return new Promise(function (resolve) {
+      var frame = 0;
+      function update() {
+        var out = '', done = 0;
+        for (var i = 0; i < queue.length; i++) {
+          var q = queue[i];
+          if (frame >= q.end) { done++; out += q.to; }
+          else if (frame >= q.start) {
+            if (!q.char || Math.random() < 0.28) q.char = CHARS[Math.floor(Math.random() * CHARS.length)];
+            out += '<span style="opacity:.55">' + q.char + '</span>';
+          } else { out += q.from; }
+        }
+        el.innerHTML = out;
+        if (done === queue.length) { el.textContent = newText; resolve(); return; }
+        frame++;
+        el.__scrambleRaf = requestAnimationFrame(update);
+      }
+      update();
+    });
+  }
+
+  function init() {
+    var els = document.querySelectorAll('.scramble');
+    for (var i = 0; i < els.length; i++) {
+      var el = els[i], txt = el.getAttribute('data-text') || el.textContent || '';
+      // start blank so it decodes in; but on a hidden tab (rAF paused) keep the real text visible
+      el.textContent = document.hidden ? txt : '';
+      scrambleTo(el, txt);
+    }
+  }
+
+  global.scrambleTo = scrambleTo;
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/threads/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: threads
+description: |
+  A distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero
+  backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
+triggers: ["threads","shader background","webgl background","着色器背景","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# threads
+A GPU fragment-shader background (dependency-free WebGL).
+## How to apply
+Copy `_fx/shaderbg.js` + `threads.js`; add `<div class="threads" style="position:absolute;inset:0"></div>` behind content.

package/assets/upstream/recipes/web/threads/preview.html

@@ -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>threads · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.threads{position:absolute;inset:0}.cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:12px ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);z-index:2}</style></head>
+<body><div class="threads"></div><div class="cap">motion-anything · ambient · threads</div><script src="../_fx/shaderbg.js"></script><script src="threads.js"></script></body></html>

package/assets/upstream/recipes/web/threads/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: threads
+name: Threads
+description: A distinctive GPU shader background — faithful fragment shader in dependency-free WebGL.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [shader, webgl, background, hero, ambient, threads]
+intent_keywords: [threads, shader background, webgl background, 着色器背景, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple GPU backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One GPU background per view; scrim behind text. Static frame under reduced-motion." }
+motion: { duration_ms: 0, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [../_fx/shaderbg.js, threads.js], usage: "Copy _fx/shaderbg.js + threads.js; add a full-bleed <div class=\"threads\"></div>." }
+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/threads/threads.js

@@ -0,0 +1,7 @@
+/* threads.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\nprecision highp float;\n\nuniform float iTime;\nuniform vec3 iResolution;\nuniform vec3 uColor;\nuniform float uAmplitude;\nuniform float uDistance;\nuniform vec2 uMouse;\n\n#define PI 3.1415926538\n\nconst int u_line_count = 40;\nconst float u_line_width = 7.0;\nconst float u_line_blur = 10.0;\n\nfloat Perlin2D(vec2 P) {\n    vec2 Pi = floor(P);\n    vec4 Pf_Pfmin1 = P.xyxy - vec4(Pi, Pi + 1.0);\n    vec4 Pt = vec4(Pi.xy, Pi.xy + 1.0);\n    Pt = Pt - floor(Pt * (1.0 / 71.0)) * 71.0;\n    Pt += vec2(26.0, 161.0).xyxy;\n    Pt *= Pt;\n    Pt = Pt.xzxz * Pt.yyww;\n    vec4 hash_x = fract(Pt * (1.0 / 951.135664));\n    vec4 hash_y = fract(Pt * (1.0 / 642.949883));\n    vec4 grad_x = hash_x - 0.49999;\n    vec4 grad_y = hash_y - 0.49999;\n    vec4 grad_results = inversesqrt(grad_x * grad_x + grad_y * grad_y)\n        * (grad_x * Pf_Pfmin1.xzxz + grad_y * Pf_Pfmin1.yyww);\n    grad_results *= 1.4142135623730950;\n    vec2 blend = Pf_Pfmin1.xy * Pf_Pfmin1.xy * Pf_Pfmin1.xy\n               * (Pf_Pfmin1.xy * (Pf_Pfmin1.xy * 6.0 - 15.0) + 10.0);\n    vec4 blend2 = vec4(blend, vec2(1.0 - blend));\n    return dot(grad_results, blend2.zxzx * blend2.wwyy);\n}\n\nfloat pixel(float count, vec2 resolution) {\n    return (1.0 / max(resolution.x, resolution.y)) * count;\n}\n\nfloat lineFn(vec2 st, float width, float perc, float offset, vec2 mouse, float time, float amplitude, float distance) {\n    float split_offset = (perc * 0.4);\n    float split_point = 0.1 + split_offset;\n\n    float amplitude_normal = smoothstep(split_point, 0.7, st.x);\n    float amplitude_strength = 0.5;\n    float finalAmplitude = amplitude_normal * amplitude_strength\n                           * amplitude * (1.0 + (mouse.y - 0.5) * 0.2);\n\n    float time_scaled = time / 10.0 + (mouse.x - 0.5) * 1.0;\n    float blur = smoothstep(split_point, split_point + 0.05, st.x) * perc;\n\n    float xnoise = mix(\n        Perlin2D(vec2(time_scaled, st.x + perc) * 2.5),\n        Perlin2D(vec2(time_scaled, st.x + time_scaled) * 3.5) / 1.5,\n        st.x * 0.3\n    );\n\n    float y = 0.5 + (perc - 0.5) * distance + xnoise / 2.0 * finalAmplitude;\n\n    float line_start = smoothstep(\n        y + (width / 2.0) + (u_line_blur * pixel(1.0, iResolution.xy) * blur),\n        y,\n        st.y\n    );\n\n    float line_end = smoothstep(\n        y,\n        y - (width / 2.0) - (u_line_blur * pixel(1.0, iResolution.xy) * blur),\n        st.y\n    );\n\n    return clamp(\n        (line_start - line_end) * (1.0 - smoothstep(0.0, 1.0, pow(perc, 0.3))),\n        0.0,\n        1.0\n    );\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = fragCoord / iResolution.xy;\n\n    float line_strength = 1.0;\n    for (int i = 0; i < u_line_count; i++) {\n        float p = float(i) / float(u_line_count);\n        line_strength *= (1.0 - lineFn(\n            uv,\n            u_line_width * pixel(1.0, iResolution.xy) * (1.0 - p),\n            p,\n            (PI * 1.0) * p,\n            uMouse,\n            iTime,\n            uAmplitude,\n            uDistance\n        ));\n    }\n\n    float colorVal = 1.0 - line_strength;\n    fragColor = vec4(uColor * colorVal, colorVal);\n}\n\nvoid main() {\n    mainImage(gl_FragColor, gl_FragCoord.xy);\n}\n';
+  function init(){ var els=document.querySelectorAll('.threads'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uColor":{"t":"3f","v":[0.55,0.5,1]},"uAmplitude":{"t":"1f","v":0.3},"uDistance":{"t":"1f","v":0.5}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/tilt-3d/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: tilt-3d
+description: |
+  Add tactile depth to a hero card or cover image: it tilts in 3D toward the pointer with a soft
+  glare. Keep the max angle small (~10°) and reserve it for one or a few hero cards, not a grid.
+  Flat under prefers-reduced-motion and on touch.
+triggers:
+  - "3d tilt"
+  - "tilt on hover"
+  - "parallax card"
+  - "tactile card"
+  - "3D 倾斜"
+  - "立体 hover"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://micku7zu.github.io/vanilla-tilt.js/"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use tilt-3d on the hero product card: a small 3D tilt toward the cursor with a soft glare. Just
+    the hero card; flat under reduced-motion and on touch.
+---
+
+# tilt-3d
+
+A card that tilts in 3D toward the pointer. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by vanilla-tilt.js, reimplemented dependency-free.
+
+## When to use it
+- A hero product card, cover image, or a few portfolio thumbnails where depth adds delight.
+
+## When NOT to use it (restraint)
+- Dense grids — many tilting cards feel chaotic and can induce motion sickness. **A few hero cards.**
+- Text-heavy cards (tilt hurts readability); touch-only contexts (it stays flat automatically).
+
+## How to apply
+1. Copy `tilt-3d.css` and `tilt-3d.js` into the project, and link them.
+2. Mark the card:
+   ```html
+   <div class="tilt" data-tilt-max="10"> … </div>
+   ```
+3. Auto-attaches to `.tilt`. Keep `data-tilt-max` small (8–10). Resets flat on `pointerleave`.
+
+## Accessibility & performance
+- Flat under `prefers-reduced-motion` and on `(hover: none)` touch devices.
+- `transform: rotateX/rotateY` + a masked glare only — GPU-safe.
+
+## Framework notes
+- React: call `attachTilt(ref.current)` in `useEffect`, guarded by the same checks.

package/assets/upstream/recipes/web/tilt-3d/preview.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>tilt-3d · motion-anything recipe</title>
+  <link rel="stylesheet" href="tilt-3d.css" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 22px; text-align: center;
+      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; }
+    .tilt { width: 260px; height: 160px; padding: 22px; text-align: left;
+      background: linear-gradient(135deg, #2a2551, #14151c); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
+    .tilt h3 { margin: 0 0 6px; font-size: 18px; }
+    .tilt p { margin: 0; font-size: 13px; color: #b7b9c6; }
+    .hint { font-size: 13px; color: #7c7f8c; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · hover-press</div>
+  <div class="tilt" data-tilt-max="10">
+    <h3>motion, anything</h3>
+    <p>Tilt toward the pointer · soft glare · gentle depth.</p>
+  </div>
+  <p class="hint">Move your cursor over the card · small 3D tilt + glare · flat on touch &amp; reduced-motion.</p>
+  <script src="tilt-3d.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/tilt-3d/recipe.motion.yaml

@@ -0,0 +1,58 @@
+spec_version: 1
+id: tilt-3d
+name: 3D Tilt
+description: A card tilts in 3D toward the pointer with a soft glare — tactile depth on hover.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, image]
+intent: hover-press
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css, js]
+dependencies: []
+tags: [tilt, 3d, parallax, pointer, glare, card, depth]
+
+intent_keywords:
+  - 3d tilt
+  - card tilt on hover
+  - parallax tilt
+  - tactile card
+  - 3D 倾斜
+  - 卡片翻转跟随
+  - 立体 hover
+best_for:
+  - A hero product card, cover image, or single feature tile
+  - Portfolio thumbnails where depth adds delight
+avoid_when:
+  - Dense grids (many tilting cards feel chaotic and can induce motion sickness)
+  - Touch-only contexts (no pointer) — it stays flat
+  - Text-heavy cards where the tilt hurts readability
+restraint:
+  max_per_view: 3
+  notes: >
+    Keep the max tilt small (~8–10°). One or a few hero cards, not a whole grid. Flat under
+    reduced-motion and on touch.
+
+motion:
+  duration_ms: 200
+  easing: ease-out
+  reduced_motion: none        # stays flat
+  gpu_safe: true              # transform: rotateX/rotateY only
+
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [tilt-3d.css, tilt-3d.js]
+    usage: |
+      Add class "tilt" to a card. JS maps the pointer position to rotateX/rotateY (and a glare
+      position via --gx/--gy) within a max angle (data-tilt-max, default 10). Resets on leave.
+
+license:
+  spdx: Apache-2.0
+  upstream: "https://micku7zu.github.io/vanilla-tilt.js/"   # technique popularized by vanilla-tilt.js
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/tilt-3d/tilt-3d.css

@@ -0,0 +1,37 @@
+/* tilt-3d.css — motion-anything recipe · category: hover-press
+ * Pointer-driven 3D tilt (rotateX/rotateY) with a soft glare. Transform only — GPU-safe.
+ * Flat under reduced-motion / touch. */
+
+.tilt {
+  --rx: 0deg;
+  --ry: 0deg;
+  --gx: 50%;
+  --gy: 50%;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
+  transition: transform 200ms ease-out;
+  will-change: transform;
+  border-radius: 16px;
+  overflow: hidden;
+}
+/* soft glare that tracks the pointer */
+.tilt::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  background: radial-gradient(200px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.22), transparent 60%);
+}
+.tilt:hover::after { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .tilt { transform: none; transition: none; }
+  .tilt::after { display: none; }
+}
+@media (hover: none) {
+  .tilt { transform: none; }
+  .tilt::after { display: none; }
+}

package/assets/upstream/recipes/web/tilt-3d/tilt-3d.js

@@ -0,0 +1,43 @@
+/* tilt-3d.js — motion-anything recipe · category: hover-press
+ *
+ * Maps the pointer position over a .tilt card to a small 3D rotation + glare position.
+ * - Max angle via data-tilt-max (default 10°). Transform only. Flat under reduced-motion / touch.
+ *
+ * Usage:  <div class="tilt" data-tilt-max="10"> … </div>
+ */
+(function (global) {
+  'use strict';
+
+  function reduced() { return global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function isTouch() { return global.matchMedia && global.matchMedia('(hover: none)').matches; }
+
+  function attach(card) {
+    if (card.__tiltBound) return;
+    card.__tiltBound = true;
+    var max = parseFloat(card.getAttribute('data-tilt-max')) || 10;
+
+    card.addEventListener('pointermove', function (e) {
+      var r = card.getBoundingClientRect();
+      var px = (e.clientX - r.left) / r.width;      // 0..1
+      var py = (e.clientY - r.top) / r.height;      // 0..1
+      card.style.setProperty('--ry', ((px - 0.5) * 2 * max).toFixed(2) + 'deg');
+      card.style.setProperty('--rx', ((0.5 - py) * 2 * max).toFixed(2) + 'deg');
+      card.style.setProperty('--gx', (px * 100).toFixed(1) + '%');
+      card.style.setProperty('--gy', (py * 100).toFixed(1) + '%');
+    });
+    card.addEventListener('pointerleave', function () {
+      card.style.setProperty('--rx', '0deg');
+      card.style.setProperty('--ry', '0deg');
+    });
+  }
+
+  function init() {
+    if (reduced() || isTouch()) return;       // leave cards flat
+    var els = document.querySelectorAll('.tilt');
+    for (var i = 0; i < els.length; i++) attach(els[i]);
+  }
+
+  global.attachTilt = attach;
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/toggle-spring/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: toggle-spring
+description: |
+  A switch whose knob springs across on toggle — a tactile, satisfying on/off state change. Use for
+  settings/form switches. Honors prefers-reduced-motion (quick linear slide). Trigger on user intent
+  only; keep the spring subtle — never to convey loading/progress.
+triggers:
+  - "toggle switch"
+  - "springy switch"
+  - "satisfying toggle"
+  - "开关动效"
+  - "弹簧切换"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use toggle-spring for the settings switches: the knob springs across on toggle with a gentle
+    overshoot, aria-pressed reflects state, and a prefers-reduced-motion fallback shortens it.
+---
+
+# toggle-spring
+
+A switch whose knob springs across on toggle. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+
+## When to use it
+- On/off switches in settings and forms; any binary state the user flips themselves.
+
+## When NOT to use it (restraint)
+- To convey loading/progress (use a spinner/skeleton). Keep the overshoot subtle, not gimmicky.
+
+## How to apply
+1. Copy `toggle-spring.css` and `toggle-spring.js` and link them.
+2. Markup: `<button class="ms-toggle" data-toggle aria-pressed="false"><span class="knob"></span></button>`.
+
+## Accessibility & performance
+- `prefers-reduced-motion`: quick linear slide, no overshoot. `aria-pressed` reflects state. Transform only.

package/assets/upstream/recipes/web/toggle-spring/preview.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>toggle-spring · motion-anything recipe</title>
+  <link rel="stylesheet" href="toggle-spring.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:18px; }
+    .panel { width:300px; background:#fff; border:1px solid #ececf1; border-radius:16px; padding:6px 18px;
+      box-shadow:0 10px 30px rgba(0,0,0,.05); }
+    .opt { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid #f1f1f4; }
+    .opt:last-child { border-bottom:0; }
+    .opt span { font-size:15px; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge">motion-anything · feedback</div>
+    <div class="panel">
+      <div class="opt"><span>Reduced motion</span>
+        <button class="ms-toggle" data-toggle aria-pressed="false"><span class="knob"></span></button></div>
+      <div class="opt"><span>Auto-replay</span>
+        <button class="ms-toggle on" data-toggle aria-pressed="true"><span class="knob"></span></button></div>
+      <div class="opt"><span>Sound</span>
+        <button class="ms-toggle" data-toggle aria-pressed="false"><span class="knob"></span></button></div>
+    </div>
+  </div>
+  <script src="toggle-spring.js"></script>
+</body>
+</html>