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/lightning/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/lightning/lightning.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* lightning.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\n      precision mediump float;\n      uniform vec2 iResolution;\n      uniform float iTime;\n      uniform float uHue;\n      uniform float uXOffset;\n      uniform float uSpeed;\n      uniform float uIntensity;\n      uniform float uSize;\n      \n      #define OCTAVE_COUNT 10\n\n      vec3 hsv2rgb(vec3 c) {\n          vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);\n          return c.z * mix(vec3(1.0), rgb, c.y);\n      }\n\n      float hash11(float p) {\n          p = fract(p * .1031);\n          p *= p + 33.33;\n          p *= p + p;\n          return fract(p);\n      }\n\n      float hash12(vec2 p) {\n          vec3 p3 = fract(vec3(p.xyx) * .1031);\n          p3 += dot(p3, p3.yzx + 33.33);\n          return fract((p3.x + p3.y) * p3.z);\n      }\n\n      mat2 rotate2d(float theta) {\n          float c = cos(theta);\n          float s = sin(theta);\n          return mat2(c, -s, s, c);\n      }\n\n      float noise(vec2 p) {\n          vec2 ip = floor(p);\n          vec2 fp = fract(p);\n          float a = hash12(ip);\n          float b = hash12(ip + vec2(1.0, 0.0));\n          float c = hash12(ip + vec2(0.0, 1.0));\n          float d = hash12(ip + vec2(1.0, 1.0));\n          \n          vec2 t = smoothstep(0.0, 1.0, fp);\n          return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);\n      }\n\n      float fbm(vec2 p) {\n          float value = 0.0;\n          float amplitude = 0.5;\n          for (int i = 0; i < OCTAVE_COUNT; ++i) {\n              value += amplitude * noise(p);\n              p *= rotate2d(0.45);\n              p *= 2.0;\n              amplitude *= 0.5;\n          }\n          return value;\n      }\n\n      void mainImage( out vec4 fragColor, in vec2 fragCoord ) {\n          vec2 uv = fragCoord / iResolution.xy;\n          uv = 2.0 * uv - 1.0;\n          uv.x *= iResolution.x / iResolution.y;\n          uv.x += uXOffset;\n          \n          uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;\n          \n          float dist = abs(uv.x);\n          vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));\n          vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity;\n          col = pow(col, vec3(1.0));\n          float a = clamp(max(col.r, max(col.g, col.b)), 0.0, 1.0);\n          fragColor = vec4(col, a);\n      }\n\n      void main() {\n          mainImage(gl_FragColor, gl_FragCoord.xy);\n      }\n    ';
+  function init(){ var els=document.querySelectorAll('.lightning'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    var h=g.ShaderBG(els[i], FRAG, {"uniforms":{"uHue":{"t":"1f","v":230},"uXOffset":{"t":"1f","v":0},"uSpeed":{"t":"1f","v":1},"uIntensity":{"t":"1f","v":1},"uSize":{"t":"1f","v":1}}}); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: lightning
+name: Lightning
+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, lightning]
+intent_keywords: [lightning, 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, lightning.js], usage: "Copy _fx/shaderbg.js + lightning.js; add a full-bleed <div class=\"lightning\"></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/like-burst/SKILL.md ADDED Viewed

@@ -0,0 +1,65 @@
+---
+name: like-burst
+description: |
+  Add a celebratory particle burst to a like / favorite / reaction button. A delight
+  micro-interaction that fires on user tap only (never on load), bursts on the "like"
+  transition (not un-like), and ships a prefers-reduced-motion fallback. Use when a small,
+  earned moment of positive feedback will feel good — and only one such moment per screen.
+triggers:
+  - "like animation"
+  - "reaction effect"
+  - "celebration burst"
+  - "delightful like"
+  - "点赞特效"
+  - "惊喜感"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use the like-burst recipe on the heart button in this page: pop the icon on toggle and
+    emit a short particle burst on like only, with a prefers-reduced-motion fallback. Keep it
+    to one celebratory moment on screen.
+---
+# like-burst
+A celebratory particle burst for like / favorite / reaction buttons. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Like / favorite / upvote / reaction buttons.
+- A small, *earned* moment of positive feedback.
+## When NOT to use it (restraint)
+- Destructive or neutral actions (delete, dismiss, close).
+- When more than one burst could fire at once — **one celebratory moment per screen**.
+- On load / autoplay. This must be **user-triggered**.
+## How to apply
+1. Copy `like-burst.css` and `like-burst.js` into the project.
+2. Link them, and mark the button:
+   ```html
+   <link rel="stylesheet" href="like-burst.css" />
+   <button class="like-btn" data-like-burst aria-pressed="false" aria-label="Like">♥</button>
+   <script src="like-burst.js"></script>
+   ```
+3. It auto-attaches to any `[data-like-burst]`, or call `attachLikeBurst(el)` manually.
+## Tuning
+- `PARTICLE_COUNT` / `COLORS` in `like-burst.js` (keep particle count modest — taste over spectacle).
+- Pop feel: the `lb-pop` keyframe (currently `420ms`, ease-out). Burst spread: `dist` in `spawnParticles`.
+## Accessibility & performance
+- Honors `prefers-reduced-motion`: particles are suppressed, a quiet color/scale cue remains.
+- Animates `transform`/`opacity` only; removes injected particle nodes after ~700ms.
+## Framework notes
+- React: call `attachLikeBurst(ref.current)` in `useEffect`; or port the click handler into your
+  component and keep the CSS as-is.

package/assets/upstream/recipes/web/like-burst/like-burst.css ADDED Viewed

@@ -0,0 +1,71 @@
+/* like-burst.css — motion-anything recipe · category: feedback-delight
+ * Timing/easing pulled from MOTION-SPEC.md. Transforms + opacity only (GPU-safe).
+ * Always ships a prefers-reduced-motion fallback. */
+.like-btn {
+  --lb-size: 56px;
+  --lb-on: #ff4d6d;
+  --lb-off: #c9ccd3;
+  width: var(--lb-size);
+  height: var(--lb-size);
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #fff;
+  color: var(--lb-off);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  /* fast band (140–220ms), ease-out default for user-responsive UI */
+  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.like-btn:hover { transform: scale(1.06); }
+.like-btn:active { transform: scale(0.92); }
+.like-btn.is-liked { color: var(--lb-on); }
+/* Icon "pop" on toggle — a punchy scale that settles. */
+@keyframes lb-pop {
+  0%   { transform: scale(1); }
+  30%  { transform: scale(0.8); }
+  60%  { transform: scale(1.25); }
+  100% { transform: scale(1); }
+}
+.like-btn.lb-pop { animation: lb-pop 420ms cubic-bezier(0.16, 1, 0.3, 1); }
+/* Particle layer is appended to <body>, positioned at the burst origin. */
+.lb-particles {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+.lb-particle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 7px;
+  height: 7px;
+  margin: -3.5px;
+  border-radius: 50%;
+  /* deliberate band (~600ms) for a celebratory moment */
+  animation: lb-fly 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@keyframes lb-fly {
+  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
+  70%  { opacity: 1; }
+  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
+}
+/* Accessibility: honor reduced-motion. Keep only a minimal color/scale cue. */
+@media (prefers-reduced-motion: reduce) {
+  .like-btn,
+  .like-btn:hover,
+  .like-btn:active { transition: color 120ms ease; transform: none; }
+  .like-btn.lb-pop { animation: none; }
+  .lb-particles { display: none; }
+}

package/assets/upstream/recipes/web/like-burst/like-burst.js ADDED Viewed

@@ -0,0 +1,82 @@
+/* like-burst.js — motion-anything recipe · category: feedback-delight
+ *
+ * A celebratory particle burst for like / favorite / reaction buttons.
+ * - Fires on user tap only (never auto-plays).
+ * - Bursts on the "like" transition only, not on un-like.
+ * - Respects prefers-reduced-motion (scale-only fallback).
+ * - Cleans up its DOM nodes after the animation (per MOTION-SPEC §5).
+ *
+ * Usage:
+ *   <button class="like-btn" data-like-burst aria-pressed="false">♥</button>
+ *   // auto-attaches to [data-like-burst], or:  attachLikeBurst(el)
+ */
+(function (global) {
+  'use strict';
+  var PARTICLE_COUNT = 14;
+  var COLORS = ['#ff4d6d', '#ffd166', '#06d6a0', '#4d96ff', '#c77dff'];
+  function prefersReducedMotion() {
+    return (
+      global.matchMedia &&
+      global.matchMedia('(prefers-reduced-motion: reduce)').matches
+    );
+  }
+  function spawnParticles(btn) {
+    var rect = btn.getBoundingClientRect();
+    var cx = rect.left + rect.width / 2 + global.scrollX;
+    var cy = rect.top + rect.height / 2 + global.scrollY;
+    var layer = document.createElement('div');
+    layer.className = 'lb-particles';
+    layer.style.left = cx + 'px';
+    layer.style.top = cy + 'px';
+    document.body.appendChild(layer);
+    for (var i = 0; i < PARTICLE_COUNT; i++) {
+      var p = document.createElement('span');
+      p.className = 'lb-particle';
+      var angle = (Math.PI * 2 * i) / PARTICLE_COUNT + Math.random() * 0.4;
+      var dist = 26 + Math.random() * 26;
+      p.style.setProperty('--dx', Math.cos(angle) * dist + 'px');
+      p.style.setProperty('--dy', Math.sin(angle) * dist + 'px');
+      p.style.background = COLORS[i % COLORS.length];
+      p.style.animationDelay = Math.random() * 40 + 'ms';
+      layer.appendChild(p);
+    }
+    // Clean up after the burst finishes (600ms anim + max 40ms delay + margin).
+    setTimeout(function () {
+      layer.remove();
+    }, 700);
+  }
+  function attachLikeBurst(btn) {
+    if (!btn || btn.__likeBurstBound) return;
+    btn.__likeBurstBound = true;
+    btn.addEventListener('click', function () {
+      var liked = btn.classList.toggle('is-liked');
+      btn.setAttribute('aria-pressed', String(liked));
+      // Restart the pop animation from the top.
+      btn.classList.remove('lb-pop');
+      void btn.offsetWidth; // force reflow so the animation re-triggers
+      btn.classList.add('lb-pop');
+      if (liked && !prefersReducedMotion()) {
+        spawnParticles(btn);
+      }
+    });
+  }
+  function autoAttach() {
+    var els = document.querySelectorAll('[data-like-burst]');
+    for (var i = 0; i < els.length; i++) attachLikeBurst(els[i]);
+  }
+  global.attachLikeBurst = attachLikeBurst;
+  if (document.readyState !== 'loading') autoAttach();
+  else document.addEventListener('DOMContentLoaded', autoAttach);
+})(window);

package/assets/upstream/recipes/web/like-burst/preview.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>like-burst · motion-anything recipe</title>
+  <link rel="stylesheet" href="like-burst.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 0%, #f4f5f7 100%);
+      color: #1a1d24;
+    }
+    .stage { text-align: center; }
+    .badge {
+      display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
+      color: #8b909a; margin-bottom: 18px;
+    }
+    h1 { font-size: 22px; margin: 0 0 4px; }
+    p.sub { margin: 0 0 32px; color: #6b7280; font-size: 14px; }
+    .row { display: flex; gap: 28px; justify-content: center; align-items: center; }
+    .hint { margin-top: 34px; font-size: 13px; color: #9aa0aa; }
+    code { background: #eceef1; padding: 2px 6px; border-radius: 5px; font-size: 12px; }
+  </style>
+</head>
+<body>
+  <div class="stage">
+    <span class="badge">motion-anything · feedback-delight</span>
+    <h1>Like Burst</h1>
+    <p class="sub">Tap a heart. Delight fires on the <em>like</em>, never on load.</p>
+    <div class="row">
+      <button class="like-btn" data-like-burst aria-pressed="false" aria-label="Like">♥</button>
+      <button class="like-btn" data-like-burst aria-pressed="false" aria-label="Like">♥</button>
+      <button class="like-btn" data-like-burst aria-pressed="false" aria-label="Like">♥</button>
+    </div>
+    <p class="hint">Respects <code>prefers-reduced-motion</code> — the burst becomes a quiet color cue.</p>
+  </div>
+  <script src="like-burst.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/like-burst/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,55 @@
+spec_version: 1
+id: like-burst
+name: Like Burst
+description: A celebratory particle burst on tap, for likes / favorites / reactions.
+surfaces: [web, interaction]
+category: feedback-delight
+tech: [css, js]
+dependencies: []
+tags: [like, reaction, particles, celebration, micro-interaction, delight]
+# ── the three soul fields (what makes motion-anything different) ──────────
+intent_keywords:
+  - delightful like
+  - celebration burst
+  - reaction effect
+  - 点赞特效
+  - 惊喜感
+  - 好玩的反馈
+best_for:
+  - Like / favorite / upvote / reaction buttons
+  - Small, earned moments of positive feedback
+avoid_when:
+  - Destructive or neutral actions (delete, dismiss, close)
+  - Anywhere more than one celebratory burst could fire at once
+  - On page load / auto-play — this must be user-triggered
+restraint:
+  max_per_view: 1
+  notes: >
+    One celebratory moment per screen. Trigger on user intent only (tap), never on load.
+    Fires the particle burst on the "like" transition only, not on un-like.
+# ─────────────────────────────────────────────────────────────────────────
+motion:
+  duration_ms: 600
+  easing: ease-out            # cubic-bezier(0.16, 1, 0.3, 1)
+  reduced_motion: scale-only  # drop particles + travel, keep a small color/scale cue
+  gpu_safe: true              # transform + opacity only
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [like-burst.css, like-burst.js]
+    usage: |
+      Add the <button class="like-btn" data-like-burst aria-pressed="false">♥</button> markup,
+      link like-burst.css and like-burst.js. Auto-attaches to any [data-like-burst] element,
+      or call attachLikeBurst(el) manually.
+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/line-waves/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/line-waves/line-waves.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* line-waves.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 uTime;\nuniform vec3 uResolution;\nuniform float uSpeed;\nuniform float uInnerLines;\nuniform float uOuterLines;\nuniform float uWarpIntensity;\nuniform float uRotation;\nuniform float uEdgeFadeWidth;\nuniform float uColorCycleSpeed;\nuniform float uBrightness;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform vec2 uMouse;\nuniform float uMouseInfluence;\nuniform bool uEnableMouse;\n\n#define HALF_PI 1.5707963\n\nfloat hashF(float n) {\n  return fract(sin(n * 127.1) * 43758.5453123);\n}\n\nfloat smoothNoise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  return mix(hashF(i), hashF(i + 1.0), u);\n}\n\nfloat displaceA(float coord, float t) {\n  float result = sin(coord * 2.123) * 0.2;\n  result += sin(coord * 3.234 + t * 4.345) * 0.1;\n  result += sin(coord * 0.589 + t * 0.934) * 0.5;\n  return result;\n}\n\nfloat displaceB(float coord, float t) {\n  float result = sin(coord * 1.345) * 0.3;\n  result += sin(coord * 2.734 + t * 3.345) * 0.2;\n  result += sin(coord * 0.189 + t * 0.934) * 0.3;\n  return result;\n}\n\nvec2 rotate2D(vec2 p, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);\n}\n\nvoid main() {\n  vec2 coords = gl_FragCoord.xy / uResolution.xy;\n  coords = coords * 2.0 - 1.0;\n  coords = rotate2D(coords, uRotation);\n\n  float halfT = uTime * uSpeed * 0.5;\n  float fullT = uTime * uSpeed;\n\n  float mouseWarp = 0.0;\n  if (uEnableMouse) {\n    vec2 mPos = rotate2D(uMouse * 2.0 - 1.0, uRotation);\n    float mDist = length(coords - mPos);\n    mouseWarp = uMouseInfluence * exp(-mDist * mDist * 4.0);\n  }\n\n  float warpAx = coords.x + displaceA(coords.y, halfT) * uWarpIntensity + mouseWarp;\n  float warpAy = coords.y - displaceA(coords.x * cos(fullT) * 1.235, halfT) * uWarpIntensity;\n  float warpBx = coords.x + displaceB(coords.y, halfT) * uWarpIntensity + mouseWarp;\n  float warpBy = coords.y - displaceB(coords.x * sin(fullT) * 1.235, halfT) * uWarpIntensity;\n\n  vec2 fieldA = vec2(warpAx, warpAy);\n  vec2 fieldB = vec2(warpBx, warpBy);\n  vec2 blended = mix(fieldA, fieldB, mix(fieldA, fieldB, 0.5));\n\n  float fadeTop = smoothstep(uEdgeFadeWidth, uEdgeFadeWidth + 0.4, blended.y);\n  float fadeBottom = smoothstep(-uEdgeFadeWidth, -(uEdgeFadeWidth + 0.4), blended.y);\n  float vMask = 1.0 - max(fadeTop, fadeBottom);\n\n  float tileCount = mix(uOuterLines, uInnerLines, vMask);\n  float scaledY = blended.y * tileCount;\n  float nY = smoothNoise(abs(scaledY));\n\n  float ridge = pow(\n    step(abs(nY - blended.x) * 2.0, HALF_PI) * cos(2.0 * (nY - blended.x)),\n    5.0\n  );\n\n  float lines = 0.0;\n  for (float i = 1.0; i < 3.0; i += 1.0) {\n    lines += pow(max(fract(scaledY), fract(-scaledY)), i * 2.0);\n  }\n\n  float pattern = vMask * lines;\n\n  float cycleT = fullT * uColorCycleSpeed;\n  float rChannel = (pattern + lines * ridge) * (cos(blended.y + cycleT * 0.234) * 0.5 + 1.0);\n  float gChannel = (pattern + vMask * ridge) * (sin(blended.x + cycleT * 1.745) * 0.5 + 1.0);\n  float bChannel = (pattern + lines * ridge) * (cos(blended.x + cycleT * 0.534) * 0.5 + 1.0);\n\n  vec3 col = (rChannel * uColor1 + gChannel * uColor2 + bChannel * uColor3) * uBrightness;\n  float alpha = clamp(length(col), 0.0, 1.0);\n\n  gl_FragColor = vec4(col, alpha);\n}\n';
+  function init(){ var els=document.querySelectorAll('.line-waves'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uSpeed":{"t":"1f","v":0.3},"uInnerLines":{"t":"1f","v":32},"uOuterLines":{"t":"1f","v":36},"uWarpIntensity":{"t":"1f","v":1},"uRotation":{"t":"1f","v":0},"uEdgeFadeWidth":{"t":"1f","v":0},"uColorCycleSpeed":{"t":"1f","v":1},"uBrightness":{"t":"1f","v":0.2},"uColor1":{"t":"3f","v":[1,1,1]},"uColor2":{"t":"3f","v":[1,1,1]},"uColor3":{"t":"3f","v":[1,1,1]},"uMouseInfluence":{"t":"1f","v":0},"uEnableMouse":{"t":"1i","v":0}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/line-waves/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: line-waves
+name: Line Waves
+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, line-waves]
+intent_keywords: [line-waves, 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, line-waves.js], usage: "Copy _fx/shaderbg.js + line-waves.js; add a full-bleed <div class=\"line-waves\"></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/liquid-chrome/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/liquid-chrome/liquid-chrome.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* liquid-chrome.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      uniform float uTime;\n      uniform vec3 uResolution;\n      uniform vec3 uBaseColor;\n      uniform float uAmplitude;\n      uniform float uFrequencyX;\n      uniform float uFrequencyY;\n      uniform vec2 uMouse;\n      varying vec2 vUv;\n\n      vec4 renderImage(vec2 uvCoord) {\n          vec2 fragCoord = uvCoord * uResolution.xy;\n          vec2 uv = (2.0 * fragCoord - uResolution.xy) / min(uResolution.x, uResolution.y);\n\n          for (float i = 1.0; i < 10.0; i++){\n              uv.x += uAmplitude / i * cos(i * uFrequencyX * uv.y + uTime + uMouse.x * 3.14159);\n              uv.y += uAmplitude / i * cos(i * uFrequencyY * uv.x + uTime + uMouse.y * 3.14159);\n          }\n\n          vec2 diff = (uvCoord - uMouse);\n          float dist = length(diff);\n          float falloff = exp(-dist * 20.0);\n          float ripple = sin(10.0 * dist - uTime * 2.0) * 0.03;\n          uv += (diff / (dist + 0.0001)) * ripple * falloff;\n\n          vec3 color = uBaseColor / abs(sin(uTime - uv.y - uv.x));\n          return vec4(color, 1.0);\n      }\n\n      void main() {\n          vec4 col = vec4(0.0);\n          int samples = 0;\n          for (int i = -1; i <= 1; i++){\n              for (int j = -1; j <= 1; j++){\n                  vec2 offset = vec2(float(i), float(j)) * (1.0 / min(uResolution.x, uResolution.y));\n                  col += renderImage(vUv + offset);\n                  samples++;\n              }\n          }\n          gl_FragColor = col / float(samples);\n      }\n    ';
+  function init(){ var els=document.querySelectorAll('.liquid-chrome'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uBaseColor":{"t":"3f","v":[0.55,0.5,1]},"uAmplitude":{"t":"1f","v":0.3},"uFrequencyX":{"t":"1f","v":2},"uFrequencyY":{"t":"1f","v":2}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/liquid-chrome/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: liquid-chrome
+name: Liquid Chrome
+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, liquid-chrome]
+intent_keywords: [liquid-chrome, 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, liquid-chrome.js], usage: "Copy _fx/shaderbg.js + liquid-chrome.js; add a full-bleed <div class=\"liquid-chrome\"></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/loading-shimmer/SKILL.md ADDED Viewed

@@ -0,0 +1,45 @@
+---
+name: loading-shimmer
+description: |
+  Skeleton placeholders with a soft sweeping shimmer while content loads. Use to fill space for
+  cards/lists/profiles that are still loading and make the wait feel shorter. Honors
+  prefers-reduced-motion (static skeleton). Only show while real content is loading — never as decoration.
+triggers:
+  - "loading skeleton"
+  - "shimmer placeholder"
+  - "content loading state"
+  - "骨架屏"
+  - "加载占位"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use loading-shimmer for the card while it loads: an avatar circle, two text lines and a media
+    block as skeletons with a soft sweep, plus a prefers-reduced-motion fallback (static skeleton).
+---
+# loading-shimmer
+Skeleton placeholders with a soft sweeping highlight. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Placeholders for content still loading (cards, lists, profiles, media). Improves perceived performance.
+## When NOT to use it (restraint)
+- Loads under ~300ms (a skeleton flash is worse than nothing). Never as pure decoration.
+## How to apply
+1. Copy `loading-shimmer.css` and link it.
+2. Add `data-skeleton` to placeholder blocks (give each a width/height).
+3. Remove the placeholders (or the attribute) the moment real content arrives.
+## Accessibility & performance
+- `prefers-reduced-motion`: static skeleton, no sweep. The sweep uses `transform` only (GPU-safe).

package/assets/upstream/recipes/web/loading-shimmer/loading-shimmer.css ADDED Viewed

@@ -0,0 +1,30 @@
+/* loading-shimmer.css — motion-anything recipe · category: loading
+ * Skeleton placeholders with a soft sweeping highlight.
+ * The sweep is a pseudo-element moved with transform (GPU-safe — no layout/paint thrash).
+ * reduced-motion: static skeleton, no sweep. */
+[data-skeleton] {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #e9eaee;
+}
+[data-skeleton]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0) 100%);
+  animation: ma-shimmer 1.4s ease-in-out infinite;
+  will-change: transform;
+}
+@keyframes ma-shimmer {
+  100% { transform: translateX(100%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-skeleton]::after { animation: none; display: none; }
+}

package/assets/upstream/recipes/web/loading-shimmer/preview.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>loading-shimmer · motion-anything recipe</title>
+  <link rel="stylesheet" href="loading-shimmer.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:14px; }
+    .card { width:340px; background:#fff; border:1px solid #ececf1; border-radius:16px; padding:18px;
+      box-shadow:0 10px 30px rgba(0,0,0,.05); }
+    .row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
+    .avatar { width:48px; height:48px; border-radius:50%; }
+    .lines { flex:1; }
+    .line { height:12px; margin-bottom:8px; }
+    .line:last-child { margin-bottom:0; }
+    .w70 { width:70%; } .w40 { width:40%; } .w100 { width:100%; } .w90 { width:90%; }
+    .block { height:120px; border-radius:12px; margin-bottom:14px; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge">motion-anything · loading</div>
+    <div class="card">
+      <div class="row">
+        <div class="avatar" data-skeleton></div>
+        <div class="lines">
+          <div class="line w70" data-skeleton></div>
+          <div class="line w40" data-skeleton></div>
+        </div>
+      </div>
+      <div class="block" data-skeleton></div>
+      <div class="line w100" data-skeleton></div>
+      <div class="line w90" data-skeleton></div>
+    </div>
+  </div>
+</body>
+</html>