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/dist/assets/upstream/recipes/web/loading-shimmer/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,48 @@
+spec_version: 1
+id: loading-shimmer
+name: Loading Shimmer
+description: Skeleton placeholders with a soft sweeping shimmer while real content loads.
+surfaces: [web, interaction]
+category: loading
+tech: [css]
+dependencies: []
+tags: [loading, skeleton, shimmer, placeholder, perceived-performance]
+intent_keywords:
+  - loading skeleton
+  - shimmer placeholder
+  - content loading state
+  - 骨架屏
+  - 加载占位
+best_for:
+  - Placeholders for content still loading (cards, lists, profiles, media)
+  - Making a wait feel shorter (perceived performance)
+avoid_when:
+  - Loads under ~300ms — a flash of skeleton is worse than nothing
+  - As decoration when nothing is actually loading
+restraint:
+  max_per_view: 1
+  notes: One skeleton set per loading region. Not a delight effect — remove it the instant real content arrives.
+motion:
+  duration_ms: 1400
+  easing: ease-in-out
+  reduced_motion: static-skeleton
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [loading-shimmer.css]
+    usage: |
+      Add data-skeleton to placeholder blocks (give each a width/height). A soft highlight sweeps
+      across via transform. Remove the elements (or the attribute) when real content loads.
+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/dist/assets/upstream/recipes/web/magnet-lines/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: magnet-lines
+description: |
+  A grid of little lines all point toward the cursor — a hypnotic interactive field for a hero/background. One field per view; it's attention-grabbing. Frozen under prefers-reduced-motion.
+triggers: ["magnet lines","pointer field","磁力线","指向光标"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# magnet-lines
+Magnet Lines Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="mag-lines" data-rows="9" data-cols="9"></div>`.

package/dist/assets/upstream/recipes/web/magnet-lines/magnet-lines.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* magnet-lines.css — ambient · a grid of lines that rotate toward the pointer. transform only. */
+.mag-lines{ display:grid; gap:10px; }
+.mag-lines .ml{ width:6px; height:26px; border-radius:3px; background:linear-gradient(#8b7cf6,#3a2f63); margin:auto; transition: transform .12s ease-out; }
+@media (prefers-reduced-motion: reduce){ .mag-lines .ml{ transition:none; transform:none !important } }

package/dist/assets/upstream/recipes/web/magnet-lines/magnet-lines.js ADDED Viewed

@@ -0,0 +1,10 @@
+/* magnet-lines.js — ambient · build a grid; each line rotates to face the pointer. Off under reduced-motion. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function attach(el){ if(el.__ml) return; el.__ml=1; var rows=+el.getAttribute('data-rows')||9, cols=+el.getAttribute('data-cols')||9;
+    el.style.gridTemplateColumns='repeat('+cols+',1fr)'; var items=[]; for(var i=0;i<rows*cols;i++){ var d=document.createElement('div'); d.className='ml'; el.appendChild(d); items.push(d); }
+    if(red()) return;
+    el.addEventListener('pointermove', function(e){ items.forEach(function(d){ var r=d.getBoundingClientRect(); var a=Math.atan2(e.clientY-(r.top+r.height/2), e.clientX-(r.left+r.width/2)); d.style.transform='rotate('+(a+Math.PI/2)+'rad)'; }); }); }
+  function init(){ var els=document.querySelectorAll('.mag-lines'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/magnet-lines/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>magnet-lines · recipe</title><link rel="stylesheet" href="magnet-lines.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="mag-lines" data-rows="8" data-cols="8"></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="magnet-lines.js"></script></body></html>

package/dist/assets/upstream/recipes/web/magnet-lines/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: magnet-lines
+name: Magnet Lines
+description: A grid of little lines all point toward the cursor — a hypnotic interactive field.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background,section]
+intent: ambient
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css,js]
+dependencies: []
+tags: [magnet lines,pointer field,磁力线,指向光标]
+intent_keywords: [magnet lines,pointer field,磁力线,指向光标]
+best_for: ["Magnet Lines — 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: [magnet-lines.css,magnet-lines.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/magnet-lines, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/dist/assets/upstream/recipes/web/magnetic-button/SKILL.md ADDED Viewed

@@ -0,0 +1,54 @@
+---
+name: magnetic-button
+description: |
+  Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then
+  springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch
+  and under prefers-reduced-motion. Do not use it on dense UIs full of buttons.
+triggers:
+  - "magnetic button"
+  - "playful hover"
+  - "button that follows cursor"
+  - "make this button alive"
+  - "磁吸按钮"
+  - "活泼"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use magnetic-button on the hero "Get started" CTA: a subtle pull toward the cursor with a
+    snappy spring back. Only the primary button; disable on touch and reduced-motion.
+---
+# magnetic-button
+A button that leans toward the cursor, then springs back. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- A single primary call-to-action you want to feel alive (hero "Get started" / "Try it").
+## When NOT to use it (restraint)
+- Dense UIs with many buttons — it becomes chaotic. Reserve for 1–2 primary targets.
+- Touch-only contexts (no cursor). The recipe disables itself there automatically.
+## How to apply
+1. Copy `magnetic-button.css` and `magnetic-button.js` into the project, and link them.
+2. Mark the button:
+   ```html
+   <button class="magnetic" data-magnet-strength="0.3">Get started</button>
+   ```
+3. Auto-attaches to `.magnetic`. Keep `strength` small (~0.2–0.4) so the pull stays subtle.
+## Accessibility & performance
+- Disabled under `prefers-reduced-motion` and on `(hover: none)` touch devices.
+- Transform only; resets on `pointerleave`.
+## Framework notes
+- React: call `attachMagnetic(ref.current)` in `useEffect`, guarded by the same reduced-motion/touch checks.

package/dist/assets/upstream/recipes/web/magnetic-button/magnetic-button.css ADDED Viewed

@@ -0,0 +1,24 @@
+/* magnetic-button.css — motion-anything recipe · category: hover-press
+ * Transform only (GPU-safe). Static under reduced-motion / touch. */
+.magnetic {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  background: #8b7cf6;
+  color: #fff;
+  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
+  padding: 14px 22px;
+  border-radius: 12px;
+  cursor: pointer;
+  /* fast band; snappy spring-like settle back to rest */
+  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform;
+  -webkit-tap-highlight-color: transparent;
+}
+.magnetic:active { transform: scale(0.97); }
+@media (prefers-reduced-motion: reduce) {
+  .magnetic { transition: none; }
+}

package/dist/assets/upstream/recipes/web/magnetic-button/magnetic-button.js ADDED Viewed

@@ -0,0 +1,46 @@
+/* magnetic-button.js — motion-anything recipe · category: hover-press
+ *
+ * Pulls a button toward the pointer as it nears, then springs back on leave.
+ * - Subtle by design (a few px). Strength via data-magnet-strength (default 0.3).
+ * - Disabled under prefers-reduced-motion and on touch (no cursor to attract).
+ * - Uses transform only; resets cleanly on pointerleave.
+ *
+ * Usage:
+ *   <button class="magnetic" data-magnet-strength="0.3">Get started</button>
+ */
+(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(btn) {
+    if (btn.__magnetBound) return;
+    btn.__magnetBound = true;
+    var strength = parseFloat(btn.getAttribute('data-magnet-strength')) || 0.3;
+    btn.addEventListener('pointermove', function (e) {
+      var r = btn.getBoundingClientRect();
+      var dx = e.clientX - (r.left + r.width / 2);
+      var dy = e.clientY - (r.top + r.height / 2);
+      btn.style.transform = 'translate(' + dx * strength + 'px,' + dy * strength + 'px)';
+    });
+    btn.addEventListener('pointerleave', function () {
+      btn.style.transform = '';
+    });
+  }
+  function init() {
+    if (reduced() || isTouch()) return; // leave buttons static
+    var els = document.querySelectorAll('.magnetic');
+    for (var i = 0; i < els.length; i++) attach(els[i]);
+  }
+  global.attachMagnetic = attach;
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/magnetic-button/preview.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>magnetic-button · motion-anything recipe</title>
+  <link rel="stylesheet" href="magnetic-button.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; 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%, #fff, #f4f5f7); color: #1a1d24; }
+    .badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8b909a; margin-bottom: 18px; }
+    h1 { font-size: 22px; margin: 0 0 28px; }
+    .hint { margin-top: 28px; font-size: 13px; color: #9aa0aa; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge">motion-anything · hover-press</div>
+    <h1>Move your cursor near the button</h1>
+    <button class="magnetic" data-magnet-strength="0.35">✦ Get started</button>
+    <p class="hint">Subtle pull toward the pointer · springs back · static on touch &amp; reduced-motion.</p>
+  </div>
+  <script src="magnetic-button.js"></script>
+</body>
+</html>

package/dist/assets/upstream/recipes/web/magnetic-button/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,53 @@
+spec_version: 1
+id: magnetic-button
+name: Magnetic Button
+description: A button that subtly leans toward the cursor as it approaches, then springs back.
+surfaces: [web, interaction]
+category: hover-press
+tech: [css, js]
+dependencies: []
+tags: [hover, magnetic, cursor, button, playful, micro-interaction]
+intent_keywords:
+  - magnetic button
+  - playful hover
+  - alive
+  - snappy
+  - 磁吸
+  - 有生命力
+  - 活泼
+best_for:
+  - A single primary call-to-action you want to feel alive
+  - Hero buttons, "Get started" / "Try it"
+avoid_when:
+  - Dense UIs with many buttons (it would feel chaotic)
+  - Touch-only contexts (there is no cursor to attract)
+  - More than one or two magnetic targets on a screen
+restraint:
+  max_per_view: 2
+  notes: >
+    Reserve for the primary action(s). Keep the pull subtle (a few px) — it should feel alive,
+    not gimmicky. Disable on touch and under reduced-motion.
+motion:
+  duration_ms: 180
+  easing: spring-snappy
+  reduced_motion: none      # no movement; static button
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [magnetic-button.css, magnetic-button.js]
+    usage: |
+      Add class "magnetic" to a button (optionally data-magnet-strength="0.3"). Link the css + js;
+      it auto-attaches to .magnetic elements and pulls them toward the pointer within a hover radius.
+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/dist/assets/upstream/recipes/web/noise/SKILL.md ADDED Viewed

@@ -0,0 +1,12 @@
+---
+name: noise
+description: |
+  A film-grain noise overlay — subtle animated texture over any background. A marketing-grade hero backdrop. One per view; scrim behind text.
+  Renders a static frame under prefers-reduced-motion.
+triggers: ["noise","animated background","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# noise
+A film-grain noise overlay — subtle animated texture over any background.
+## How to apply
+Copy `noise.js`; add `<div class="noise" style="position:absolute;inset:0"></div>` behind content.

package/dist/assets/upstream/recipes/web/noise/noise.js ADDED Viewed

@@ -0,0 +1,25 @@
+/* noise.js — motion-anything recipe · ambient · faithful canvas 2D port (dependency-free).
+ * Film-grain noise overlay: a 1024² random-luminance pattern refreshed every N frames,
+ * stretched over the container with pixelated rendering. Real defaults from source. */
+(function(g){ 'use strict';
+  var DEF = { patternRefreshInterval: 2, patternAlpha: 15 };
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function start(el){
+    if(el.__ma) return; el.__ma = 1;
+    var canvas = document.createElement('canvas');
+    canvas.style.cssText = 'width:100%;height:100%;display:block;image-rendering:pixelated';
+    el.appendChild(canvas);
+    var ctx = canvas.getContext('2d', { alpha:true });
+    var SIZE = 1024; canvas.width = SIZE; canvas.height = SIZE;
+    var frame = 0;
+    function drawGrain(){
+      var imageData = ctx.createImageData(SIZE, SIZE), data = imageData.data;
+      for(var i=0;i<data.length;i+=4){ var v = Math.random()*255; data[i]=v; data[i+1]=v; data[i+2]=v; data[i+3]=DEF.patternAlpha; }
+      ctx.putImageData(imageData, 0, 0);
+    }
+    if(reduced()){ drawGrain(); return; }
+    (function loop(){ if(frame % DEF.patternRefreshInterval === 0) drawGrain(); frame++; requestAnimationFrame(loop); })();
+  }
+  function init(){ var els=document.querySelectorAll('.noise'); for(var i=0;i<els.length;i++) start(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/noise/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>noise · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.noise{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="noise"></div><div class="cap">motion-anything · ambient · noise</div><script src="noise.js"></script></body></html>

package/dist/assets/upstream/recipes/web/noise/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: noise
+name: Noise
+description: A film-grain noise overlay — subtle animated texture over any background.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [background, hero, ambient, noise]
+intent_keywords: [noise, animated background, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple animated backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One animated 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: [noise.js], usage: "Copy the file(s); add a full-bleed <div class=\"noise\"></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/dist/assets/upstream/recipes/web/orb/SKILL.md ADDED Viewed

@@ -0,0 +1,12 @@
+---
+name: orb
+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: ["orb","shader background","webgl background","着色器背景","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# orb
+A GPU fragment-shader background (dependency-free WebGL).
+## How to apply
+Copy `_fx/shaderbg.js` + `orb.js`; add `<div class="orb" style="position:absolute;inset:0"></div>` behind content.

package/dist/assets/upstream/recipes/web/orb/orb.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* orb.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\n    precision highp float;\n\n    uniform float iTime;\n    uniform vec3 iResolution;\n    uniform float hue;\n    uniform float hover;\n    uniform float rot;\n    uniform float hoverIntensity;\n    uniform vec3 backgroundColor;\n    varying vec2 vUv;\n\n    vec3 rgb2yiq(vec3 c) {\n      float y = dot(c, vec3(0.299, 0.587, 0.114));\n      float i = dot(c, vec3(0.596, -0.274, -0.322));\n      float q = dot(c, vec3(0.211, -0.523, 0.312));\n      return vec3(y, i, q);\n    }\n    \n    vec3 yiq2rgb(vec3 c) {\n      float r = c.x + 0.956 * c.y + 0.621 * c.z;\n      float g = c.x - 0.272 * c.y - 0.647 * c.z;\n      float b = c.x - 1.106 * c.y + 1.703 * c.z;\n      return vec3(r, g, b);\n    }\n    \n    vec3 adjustHue(vec3 color, float hueDeg) {\n      float hueRad = hueDeg * 3.14159265 / 180.0;\n      vec3 yiq = rgb2yiq(color);\n      float cosA = cos(hueRad);\n      float sinA = sin(hueRad);\n      float i = yiq.y * cosA - yiq.z * sinA;\n      float q = yiq.y * sinA + yiq.z * cosA;\n      yiq.y = i;\n      yiq.z = q;\n      return yiq2rgb(yiq);\n    }\n\n    vec3 hash33(vec3 p3) {\n      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));\n      p3 += dot(p3, p3.yxz + 19.19);\n      return -1.0 + 2.0 * fract(vec3(\n        p3.x + p3.y,\n        p3.x + p3.z,\n        p3.y + p3.z\n      ) * p3.zyx);\n    }\n\n    float snoise3(vec3 p) {\n      const float K1 = 0.333333333;\n      const float K2 = 0.166666667;\n      vec3 i = floor(p + (p.x + p.y + p.z) * K1);\n      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);\n      vec3 e = step(vec3(0.0), d0 - d0.yzx);\n      vec3 i1 = e * (1.0 - e.zxy);\n      vec3 i2 = 1.0 - e.zxy * (1.0 - e);\n      vec3 d1 = d0 - (i1 - K2);\n      vec3 d2 = d0 - (i2 - K1);\n      vec3 d3 = d0 - 0.5;\n      vec4 h = max(0.6 - vec4(\n        dot(d0, d0),\n        dot(d1, d1),\n        dot(d2, d2),\n        dot(d3, d3)\n      ), 0.0);\n      vec4 n = h * h * h * h * vec4(\n        dot(d0, hash33(i)),\n        dot(d1, hash33(i + i1)),\n        dot(d2, hash33(i + i2)),\n        dot(d3, hash33(i + 1.0))\n      );\n      return dot(vec4(31.316), n);\n    }\n\n    vec4 extractAlpha(vec3 colorIn) {\n      float a = max(max(colorIn.r, colorIn.g), colorIn.b);\n      return vec4(colorIn.rgb / (a + 1e-5), a);\n    }\n\n    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);\n    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);\n    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);\n    const float innerRadius = 0.6;\n    const float noiseScale = 0.65;\n\n    float light1(float intensity, float attenuation, float dist) {\n      return intensity / (1.0 + dist * attenuation);\n    }\n    float light2(float intensity, float attenuation, float dist) {\n      return intensity / (1.0 + dist * dist * attenuation);\n    }\n\n    vec4 draw(vec2 uv) {\n      vec3 color1 = adjustHue(baseColor1, hue);\n      vec3 color2 = adjustHue(baseColor2, hue);\n      vec3 color3 = adjustHue(baseColor3, hue);\n      \n      float ang = atan(uv.y, uv.x);\n      float len = length(uv);\n      float invLen = len > 0.0 ? 1.0 / len : 0.0;\n\n      float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));\n      \n      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;\n      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);\n      float d0 = distance(uv, (r0 * invLen) * uv);\n      float v0 = light1(1.0, 10.0, d0);\n\n      v0 *= smoothstep(r0 * 1.05, r0, len);\n      float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);\n      v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);\n      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;\n      \n      float a = iTime * -1.0;\n      vec2 pos = vec2(cos(a), sin(a)) * r0;\n      float d = distance(uv, pos);\n      float v1 = light2(1.5, 5.0, d);\n      v1 *= light1(1.0, 50.0, d0);\n      \n      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);\n      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);\n      \n      vec3 colBase = mix(color1, color2, cl);\n      float fadeAmount = mix(1.0, 0.1, bgLuminance);\n      \n      vec3 darkCol = mix(color3, colBase, v0);\n      darkCol = (darkCol + v1) * v2 * v3;\n      darkCol = clamp(darkCol, 0.0, 1.0);\n      \n      vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);\n      lightCol = mix(backgroundColor, lightCol, v0);\n      lightCol = clamp(lightCol, 0.0, 1.0);\n      \n      vec3 finalCol = mix(darkCol, lightCol, bgLuminance);\n      \n      return extractAlpha(finalCol);\n    }\n\n    vec4 mainImage(vec2 fragCoord) {\n      vec2 center = iResolution.xy * 0.5;\n      float size = min(iResolution.x, iResolution.y);\n      vec2 uv = (fragCoord - center) / size * 2.0;\n      \n      float angle = rot;\n      float s = sin(angle);\n      float c = cos(angle);\n      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);\n      \n      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);\n      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);\n      \n      return draw(uv);\n    }\n\n    void main() {\n      vec2 fragCoord = vUv * iResolution.xy;\n      vec4 col = mainImage(fragCoord);\n      gl_FragColor = vec4(col.rgb * col.a, col.a);\n    }\n  ';
+  function init(){ var els=document.querySelectorAll('.orb'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"hue":{"t":"1f","v":0},"hover":{"t":"1f","v":1},"rot":{"t":"1f","v":1},"hoverIntensity":{"t":"1f","v":1},"backgroundColor":{"t":"3f","v":[0,0,0]}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/orb/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>orb · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.orb{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="orb"></div><div class="cap">motion-anything · ambient · orb</div><script src="../_fx/shaderbg.js"></script><script src="orb.js"></script></body></html>

package/dist/assets/upstream/recipes/web/orb/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: orb
+name: Orb
+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, orb]
+intent_keywords: [orb, 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, orb.js], usage: "Copy _fx/shaderbg.js + orb.js; add a full-bleed <div class=\"orb\"></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/dist/assets/upstream/recipes/web/particles/SKILL.md ADDED Viewed

@@ -0,0 +1,12 @@
+---
+name: particles
+description: |
+  A floating particle cloud — soft round sprites drifting in 3D with a slow scene wobble. A marketing-grade hero backdrop. One per view; scrim behind text.
+  Renders a static frame under prefers-reduced-motion.
+triggers: ["particles","animated background","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# particles
+A floating particle cloud — soft round sprites drifting in 3D with a slow scene wobble.
+## How to apply
+Copy `particles.js`; add `<div class="particles" style="position:absolute;inset:0"></div>` behind content.

package/dist/assets/upstream/recipes/web/particles/particles.js ADDED Viewed

@@ -0,0 +1,131 @@
+/* particles.js — motion-anything recipe · ambient · faithful raw-WebGL port (dependency-free).
+ * Floating particle cloud (react-bits "Particles", originally ogl POINTS): 200 points in a sphere,
+ * per-point drift in the vertex shader, slow scene wobble/rotation, soft round sprites.
+ * ogl is replaced by ~40 lines of matrix math + a POINTS draw. Real defaults from source. */
+(function(g){ 'use strict';
+  var DEF = { particleCount:200, particleSpread:10, speed:0.1, particleBaseSize:100,
+    sizeRandomness:1, cameraDistance:20, alphaParticles:0 };
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  var VERT = ''
+  + 'attribute vec3 position;\n'
+  + 'attribute vec4 random;\n'
+  + 'attribute vec3 color;\n'
+  + 'uniform mat4 modelMatrix;\n'
+  + 'uniform mat4 viewMatrix;\n'
+  + 'uniform mat4 projectionMatrix;\n'
+  + 'uniform float uTime;\n'
+  + 'uniform float uSpread;\n'
+  + 'uniform float uBaseSize;\n'
+  + 'uniform float uSizeRandomness;\n'
+  + 'varying vec4 vRandom;\n'
+  + 'varying vec3 vColor;\n'
+  + 'void main() {\n'
+  + '  vRandom = random;\n'
+  + '  vColor = color;\n'
+  + '  vec3 pos = position * uSpread;\n'
+  + '  pos.z *= 10.0;\n'
+  + '  vec4 mPos = modelMatrix * vec4(pos, 1.0);\n'
+  + '  float t = uTime;\n'
+  + '  mPos.x += sin(t * random.z + 6.28 * random.w) * mix(0.1, 1.5, random.x);\n'
+  + '  mPos.y += sin(t * random.y + 6.28 * random.x) * mix(0.1, 1.5, random.w);\n'
+  + '  mPos.z += sin(t * random.w + 6.28 * random.y) * mix(0.1, 1.5, random.z);\n'
+  + '  vec4 mvPos = viewMatrix * mPos;\n'
+  + '  if (uSizeRandomness == 0.0) { gl_PointSize = uBaseSize; }\n'
+  + '  else { gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz); }\n'
+  + '  gl_Position = projectionMatrix * mvPos;\n'
+  + '}\n';
+  var FRAG = ''
+  + 'precision highp float;\n'
+  + 'uniform float uTime;\n'
+  + 'uniform float uAlphaParticles;\n'
+  + 'varying vec4 vRandom;\n'
+  + 'varying vec3 vColor;\n'
+  + 'void main() {\n'
+  + '  vec2 uv = gl_PointCoord.xy;\n'
+  + '  float d = length(uv - vec2(0.5));\n'
+  + '  if(uAlphaParticles < 0.5) {\n'
+  + '    if(d > 0.5) { discard; }\n'
+  + '    gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), 1.0);\n'
+  + '  } else {\n'
+  + '    float circle = smoothstep(0.5, 0.4, d) * 0.8;\n'
+  + '    gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);\n'
+  + '  }\n'
+  + '}\n';
+  // --- minimal mat4 (column-major, WebGL layout) ---
+  function persp(fovDeg, aspect, near, far){
+    var f = 1/Math.tan(fovDeg*Math.PI/360), nf = 1/(near-far);
+    return [f/aspect,0,0,0, 0,f,0,0, 0,0,(far+near)*nf,-1, 0,0,2*far*near*nf,0];
+  }
+  function euler(rx, ry, rz){ // R = Rz·Ry·Rx, small-angle wobble
+    var cx=Math.cos(rx),sx=Math.sin(rx),cy=Math.cos(ry),sy=Math.sin(ry),cz=Math.cos(rz),sz=Math.sin(rz);
+    return [ cy*cz, cy*sz, -sy, 0,
+      sx*sy*cz-cx*sz, sx*sy*sz+cx*cz, sx*cy, 0,
+      cx*sy*cz+sx*sz, cx*sy*sz-sx*cz, cx*cy, 0,
+      0, 0, 0, 1 ];
+  }
+  function compile(gl, type, src){ var s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s);
+    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.warn('[particles]', gl.getShaderInfoLog(s)); return s; }
+  function hexToRgb(hex){ hex = hex.replace(/^#/, '');
+    var n = parseInt(hex, 16); return [((n>>16)&255)/255, ((n>>8)&255)/255, (n&255)/255]; }
+  function start(el){
+    if(el.__ma) return; el.__ma = 1;
+    var canvas = document.createElement('canvas');
+    canvas.style.cssText = 'width:100%;height:100%;display:block';
+    el.appendChild(canvas);
+    var gl = canvas.getContext('webgl', { alpha:true, premultipliedAlpha:false, depth:false });
+    if(!gl){ el.style.background = el.getAttribute('data-fallback') || '#0b0b12'; return; }
+    gl.clearColor(0,0,0,0); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    var p = gl.createProgram();
+    gl.attachShader(p, compile(gl, gl.VERTEX_SHADER, VERT));
+    gl.attachShader(p, compile(gl, gl.FRAGMENT_SHADER, FRAG));
+    gl.linkProgram(p);
+    if(!gl.getProgramParameter(p, gl.LINK_STATUS)){ console.warn('[particles] link', gl.getProgramInfoLog(p)); return; }
+    gl.useProgram(p);
+    // geometry — uniform sphere via rejection sampling + cbrt radius (as source)
+    var count = DEF.particleCount;
+    var positions = new Float32Array(count*3), randoms = new Float32Array(count*4), colors = new Float32Array(count*3);
+    var palette = ['#ffffff', '#ffffff', '#ffffff'];
+    for(var i=0;i<count;i++){
+      var x, y, z, len;
+      do { x = Math.random()*2-1; y = Math.random()*2-1; z = Math.random()*2-1; len = x*x+y*y+z*z; }
+      while(len > 1 || len === 0);
+      var r = Math.cbrt(Math.random());
+      positions[i*3] = x*r; positions[i*3+1] = y*r; positions[i*3+2] = z*r;
+      randoms[i*4] = Math.random(); randoms[i*4+1] = Math.random(); randoms[i*4+2] = Math.random(); randoms[i*4+3] = Math.random();
+      var col = hexToRgb(palette[Math.floor(Math.random()*palette.length)]);
+      colors[i*3] = col[0]; colors[i*3+1] = col[1]; colors[i*3+2] = col[2];
+    }
+    function attrib(name, data, size){ var b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b);
+      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+      var loc = gl.getAttribLocation(p, name); gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); }
+    attrib('position', positions, 3); attrib('random', randoms, 4); attrib('color', colors, 3);
+    var U = {}; ['modelMatrix','viewMatrix','projectionMatrix','uTime','uSpread','uBaseSize','uSizeRandomness','uAlphaParticles']
+      .forEach(function(n){ U[n] = gl.getUniformLocation(p, n); });
+    gl.uniform1f(U.uSpread, DEF.particleSpread);
+    gl.uniform1f(U.uBaseSize, DEF.particleBaseSize);
+    gl.uniform1f(U.uSizeRandomness, DEF.sizeRandomness);
+    gl.uniform1f(U.uAlphaParticles, DEF.alphaParticles);
+    var view = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,-DEF.cameraDistance,1];
+    gl.uniformMatrix4fv(U.viewMatrix, false, new Float32Array(view));
+    var W=1, H=1;
+    function resize(){ W = Math.max(1, el.offsetWidth||600); H = Math.max(1, el.offsetHeight||360);
+      canvas.width = W; canvas.height = H; gl.viewport(0, 0, W, H);
+      gl.uniformMatrix4fv(U.projectionMatrix, false, new Float32Array(persp(15, W/H, 0.1, 100))); }
+    g.addEventListener('resize', resize); resize();
+    var red = reduced(), lastTime = performance.now(), elapsed = red ? 2000 : 0, rotZ = 0;
+    function frame(t){
+      var delta = t - lastTime; lastTime = t;
+      if(!red){ elapsed += delta*DEF.speed; rotZ += 0.01*DEF.speed; }
+      gl.uniform1f(U.uTime, elapsed*0.001);
+      gl.uniformMatrix4fv(U.modelMatrix, false, new Float32Array(
+        euler(Math.sin(elapsed*0.0002)*0.1, Math.cos(elapsed*0.0005)*0.15, rotZ)));
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.drawArrays(gl.POINTS, 0, count);
+      if(!red) requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  }
+  function init(){ var els=document.querySelectorAll('.particles'); for(var i=0;i<els.length;i++) start(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/particles/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>particles · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.particles{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="particles"></div><div class="cap">motion-anything · ambient · particles</div><script src="particles.js"></script></body></html>

package/dist/assets/upstream/recipes/web/particles/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: particles
+name: Particles
+description: A floating particle cloud — soft round sprites drifting in 3D with a slow scene wobble.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [background, hero, ambient, particles]
+intent_keywords: [particles, animated background, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple animated backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One animated 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: [particles.js], usage: "Copy the file(s); add a full-bleed <div class=\"particles\"></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