@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/web/ferrofluid/SKILL.md

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

package/dist/assets/upstream/recipes/web/ferrofluid/ferrofluid.js

@@ -0,0 +1,7 @@
+/* ferrofluid.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 vec3  iResolution;\nuniform vec2  iMouse;\nuniform float iTime;\n\nuniform vec3  uColor0;\nuniform vec3  uColor1;\nuniform vec3  uColor2;\nuniform vec3  uColor3;\nuniform vec3  uColor4;\nuniform vec3  uColor5;\nuniform vec3  uColor6;\nuniform vec3  uColor7;\nuniform int   uColorCount;\n\nuniform vec3  uMouseColor;\nuniform vec2  uFlow;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uTurbulence;\nuniform float uFluidity;\nuniform float uRimWidth;\nuniform float uSharpness;\nuniform float uShimmer;\nuniform float uGlow;\nuniform float uOpacity;\nuniform float uMouseEnabled;\nuniform float uMouseStrength;\nuniform float uMouseRadius;\n\nvarying vec2 vUv;\n\n#define PI 3.14159265\n\nvec3 palette(float h) {\n  int count = uColorCount;\n  if (count < 1) count = 1;\n  int idx = int(floor(clamp(h, 0.0, 0.999999) * float(count)));\n  if (idx <= 0) return uColor0;\n  if (idx == 1) return uColor1;\n  if (idx == 2) return uColor2;\n  if (idx == 3) return uColor3;\n  if (idx == 4) return uColor4;\n  if (idx == 5) return uColor5;\n  if (idx == 6) return uColor6;\n  return uColor7;\n}\n\nfloat hash(vec3 p3) {\n  p3 = fract(p3 * 0.1031);\n  p3 += dot(p3, p3.zyx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat smin(float a, float b, float k) {\n  float r = exp2(-a / k) + exp2(-b / k);\n  return -k * log2(r);\n}\n\nfloat sinlerp(float a, float b, float w) {\n  return mix(a, b, (sin(w * PI - PI / 2.0) + 1.0) / 2.0);\n}\n\nfloat vn(vec2 p, float s, float seed) {\n  vec2 cellp = floor(p / s);\n  vec2 relp = mod(p, s);\n  float g1 = hash(vec3(cellp, seed));\n  float g2 = hash(vec3(cellp.x + 1.0, cellp.y, seed));\n  float g3 = hash(vec3(cellp.x + 1.0, cellp.y + 1.0, seed));\n  float g4 = hash(vec3(cellp.x, cellp.y + 1.0, seed));\n  float bx = sinlerp(g1, g2, relp.x / s);\n  float tx = sinlerp(g4, g3, relp.x / s);\n  return sinlerp(bx, tx, relp.y / s);\n}\n\nfloat dbn(vec2 p, float s, float seed) {\n  float o = s / 2.0;\n  float n0 = vn(p, s, seed);\n  float n1 = vn(p + vec2(o, o), s, seed + 0.1);\n  float n2 = vn(p + vec2(-o, o), s, seed + 0.2);\n  float n3 = vn(p + vec2(o, -o), s, seed + 0.3);\n  float n4 = vn(p + vec2(-o, -o), s, seed + 0.4);\n  return (2.0 * n0 + 1.5 * n1 + 1.25 * n2 + 1.125 * n3 + n4) / 7.0;\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  float ref = 700.0 / max(uScale, 0.05);\n  vec2 p = fragCoord / iResolution.y * ref;\n\n  float spd = 200.0 * uSpeed;\n  float t = iTime;\n\n  vec2 dir = uFlow;\n  vec2 perp = vec2(-dir.y, dir.x);\n\n  float distort1 = vn(p + perp * (t * spd), 60.0, 10.0) * 50.0 * uTurbulence;\n  float distort2 = vn(p - perp * (t * spd), 120.0, 15.0) * 100.0 * uTurbulence;\n\n  float peaks = dbn(p + distort1 + dir * (t * spd * 0.5), 40.0, 1.0);\n  float peaks2 = dbn(p + distort2 - dir * (t * spd * 0.5), 40.0, 0.0);\n\n  float mapeaks = smin(peaks, peaks2, max(uFluidity, 0.001));\n\n  float mGlow = 0.0;\n  if (uMouseEnabled > 0.5) {\n    vec2 mp = iMouse / iResolution.y * ref;\n    float md = length(p - mp) / ref;\n    float rr = max(uMouseRadius, 0.02);\n    mGlow = exp(-md * md / (rr * rr)) * uMouseStrength;\n  }\n\n  float band = (uRimWidth - abs((mapeaks - 0.4) * 2.0)) * 5.0;\n  float ltn = clamp(band - vn(p + dir * (t * spd * 0.5), 60.0, 12.0) * uShimmer, 0.0, 1.0);\n  ltn = pow(ltn, uSharpness) * uGlow;\n  ltn *= clamp(1.0 - mGlow, 0.0, 1.0);\n\n  float h = clamp(0.5 + (peaks - peaks2) * 0.8, 0.0, 1.0);\n  vec3 col = palette(h);\n\n  vec3 outc = col * ltn;\n  float a = clamp(max(outc.r, max(outc.g, outc.b)), 0.0, 1.0);\n  fragColor = vec4(outc, a * uOpacity);\n}\n\nvoid main() {\n  vec4 color;\n  mainImage(color, vUv * iResolution.xy);\n  gl_FragColor = color;\n}\n';
+  function init(){ var els=document.querySelectorAll('.ferrofluid'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uColor0":{"t":"3f","v":[1,1,1]},"uColor1":{"t":"3f","v":[1,1,1]},"uColor2":{"t":"3f","v":[1,1,1]},"uColor3":{"t":"3f","v":[1,1,1]},"uColor4":{"t":"3f","v":[1,1,1]},"uColor5":{"t":"3f","v":[1,1,1]},"uColor6":{"t":"3f","v":[1,1,1]},"uColor7":{"t":"3f","v":[1,1,1]},"uColorCount":{"t":"1i","v":3},"uMouseColor":{"t":"3f","v":[1,1,1]},"uFlow":{"t":"2f","v":[0,-1]},"uSpeed":{"t":"1f","v":0.5},"uScale":{"t":"1f","v":1.6},"uTurbulence":{"t":"1f","v":1},"uFluidity":{"t":"1f","v":0.1},"uRimWidth":{"t":"1f","v":0.2},"uSharpness":{"t":"1f","v":2.5},"uShimmer":{"t":"1f","v":1.5},"uGlow":{"t":"1f","v":2},"uOpacity":{"t":"1f","v":1},"uMouseEnabled":{"t":"1f","v":0},"uMouseStrength":{"t":"1f","v":1},"uMouseRadius":{"t":"1f","v":0.35}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/dist/assets/upstream/recipes/web/ferrofluid/recipe.motion.yaml

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

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

package/dist/assets/upstream/recipes/web/galaxy/galaxy.js

@@ -0,0 +1,7 @@
+/* galaxy.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 vec2 uFocal;\nuniform vec2 uRotation;\nuniform float uStarSpeed;\nuniform float uDensity;\nuniform float uHueShift;\nuniform float uSpeed;\nuniform vec2 uMouse;\nuniform float uGlowIntensity;\nuniform float uSaturation;\nuniform bool uMouseRepulsion;\nuniform float uTwinkleIntensity;\nuniform float uRotationSpeed;\nuniform float uRepulsionStrength;\nuniform float uMouseActiveFactor;\nuniform float uAutoCenterRepulsion;\nuniform bool uTransparent;\n\nvarying vec2 vUv;\n\n#define NUM_LAYER 4.0\n#define STAR_COLOR_CUTOFF 0.2\n#define MAT45 mat2(0.7071, -0.7071, 0.7071, 0.7071)\n#define PERIOD 3.0\n\nfloat Hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat tri(float x) {\n  return abs(fract(x) * 2.0 - 1.0);\n}\n\nfloat tris(float x) {\n  float t = fract(x);\n  return 1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0));\n}\n\nfloat trisn(float x) {\n  float t = fract(x);\n  return 2.0 * (1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0))) - 1.0;\n}\n\nvec3 hsv2rgb(vec3 c) {\n  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nfloat Star(vec2 uv, float flare) {\n  float d = length(uv);\n  float m = (0.05 * uGlowIntensity) / d;\n  float rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n  m += rays * flare * uGlowIntensity;\n  uv *= MAT45;\n  rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n  m += rays * 0.3 * flare * uGlowIntensity;\n  m *= smoothstep(1.0, 0.2, d);\n  return m;\n}\n\nvec3 StarLayer(vec2 uv) {\n  vec3 col = vec3(0.0);\n\n  vec2 gv = fract(uv) - 0.5; \n  vec2 id = floor(uv);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 offset = vec2(float(x), float(y));\n      vec2 si = id + vec2(float(x), float(y));\n      float seed = Hash21(si);\n      float size = fract(seed * 345.32);\n      float glossLocal = tri(uStarSpeed / (PERIOD * seed + 1.0));\n      float flareSize = smoothstep(0.9, 1.0, size) * glossLocal;\n\n      float red = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 1.0)) + STAR_COLOR_CUTOFF;\n      float blu = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 3.0)) + STAR_COLOR_CUTOFF;\n      float grn = min(red, blu) * seed;\n      vec3 base = vec3(red, grn, blu);\n      \n      float hue = atan(base.g - base.r, base.b - base.r) / (2.0 * 3.14159) + 0.5;\n      hue = fract(hue + uHueShift / 360.0);\n      float sat = length(base - vec3(dot(base, vec3(0.299, 0.587, 0.114)))) * uSaturation;\n      float val = max(max(base.r, base.g), base.b);\n      base = hsv2rgb(vec3(hue, sat, val));\n\n      vec2 pad = vec2(tris(seed * 34.0 + uTime * uSpeed / 10.0), tris(seed * 38.0 + uTime * uSpeed / 30.0)) - 0.5;\n\n      float star = Star(gv - offset - pad, flareSize);\n      vec3 color = base;\n\n      float twinkle = trisn(uTime * uSpeed + seed * 6.2831) * 0.5 + 1.0;\n      twinkle = mix(1.0, twinkle, uTwinkleIntensity);\n      star *= twinkle;\n      \n      col += star * size * color;\n    }\n  }\n\n  return col;\n}\n\nvoid main() {\n  vec2 focalPx = uFocal * uResolution.xy;\n  vec2 uv = (vUv * uResolution.xy - focalPx) / uResolution.y;\n\n  vec2 mouseNorm = uMouse - vec2(0.5);\n  \n  if (uAutoCenterRepulsion > 0.0) {\n    vec2 centerUV = vec2(0.0, 0.0);\n    float centerDist = length(uv - centerUV);\n    vec2 repulsion = normalize(uv - centerUV) * (uAutoCenterRepulsion / (centerDist + 0.1));\n    uv += repulsion * 0.05;\n  } else if (uMouseRepulsion) {\n    vec2 mousePosUV = (uMouse * uResolution.xy - focalPx) / uResolution.y;\n    float mouseDist = length(uv - mousePosUV);\n    vec2 repulsion = normalize(uv - mousePosUV) * (uRepulsionStrength / (mouseDist + 0.1));\n    uv += repulsion * 0.05 * uMouseActiveFactor;\n  } else {\n    vec2 mouseOffset = mouseNorm * 0.1 * uMouseActiveFactor;\n    uv += mouseOffset;\n  }\n\n  float autoRotAngle = uTime * uRotationSpeed;\n  mat2 autoRot = mat2(cos(autoRotAngle), -sin(autoRotAngle), sin(autoRotAngle), cos(autoRotAngle));\n  uv = autoRot * uv;\n\n  uv = mat2(uRotation.x, -uRotation.y, uRotation.y, uRotation.x) * uv;\n\n  vec3 col = vec3(0.0);\n\n  for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYER) {\n    float depth = fract(i + uStarSpeed * uSpeed);\n    float scale = mix(20.0 * uDensity, 0.5 * uDensity, depth);\n    float fade = depth * smoothstep(1.0, 0.9, depth);\n    col += StarLayer(uv * scale + i * 453.32) * fade;\n  }\n\n  if (uTransparent) {\n    float alpha = length(col);\n    alpha = smoothstep(0.0, 0.3, alpha);\n    alpha = min(alpha, 1.0);\n    gl_FragColor = vec4(col, alpha);\n  } else {\n    gl_FragColor = vec4(col, 1.0);\n  }\n}\n';
+  function init(){ var els=document.querySelectorAll('.galaxy'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uFocal":{"t":"2f","v":[0.5,0.5]},"uRotation":{"t":"2f","v":[0.5,0.5]},"uStarSpeed":{"t":"1f","v":1},"uDensity":{"t":"1f","v":1},"uHueShift":{"t":"1f","v":0},"uSpeed":{"t":"1f","v":1},"uGlowIntensity":{"t":"1f","v":1},"uSaturation":{"t":"1f","v":1},"uTwinkleIntensity":{"t":"1f","v":1},"uRotationSpeed":{"t":"1f","v":1},"uRepulsionStrength":{"t":"1f","v":1},"uMouseActiveFactor":{"t":"1f","v":1},"uAutoCenterRepulsion":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/dist/assets/upstream/recipes/web/galaxy/recipe.motion.yaml

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

@@ -0,0 +1,12 @@
+---
+name: glare-hover
+description: |
+  A soft glare sweeps across a card following the cursor on hover — a premium, tactile sheen. Keep it
+  subtle; a few hero cards, not a grid. Disabled on touch and under prefers-reduced-motion.
+triggers: ["glare hover","sheen on hover","premium card hover","高光扫过","卡片光泽"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/animations/glare-hover", preview: { type: html }, design_system: { requires: false } }
+---
+# glare-hover
+A glare that follows the cursor across a card. Dependency-free, reduced-motion + touch safe.
+## How to apply
+Copy `glare-hover.css` + `glare-hover.js`; `<div class="glare"> … </div>`. Auto-attaches; JS writes `--gx/--gy`.

package/dist/assets/upstream/recipes/web/glare-hover/glare-hover.css

@@ -0,0 +1,9 @@
+/* glare-hover.css — category: hover-press · a glare tracks the cursor across a card. Paint only; off on touch/reduced-motion. */
+.glare { --gx: 50%; --gy: 50%; position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; }
+.glare::after {
+  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 220ms ease-out;
+  background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(255,255,255,.22), transparent 55%);
+}
+.glare:hover::after { opacity: 1; }
+@media (prefers-reduced-motion: reduce) { .glare::after { display: none; } }
+@media (hover: none) { .glare::after { display: none; } }

package/dist/assets/upstream/recipes/web/glare-hover/glare-hover.js

@@ -0,0 +1,8 @@
+/* glare-hover.js — category: hover-press · writes --gx/--gy from the pointer; CSS paints the glare. Off on touch/reduced-motion. */
+(function (g) {
+  'use strict';
+  function off(){ return g.matchMedia && (g.matchMedia('(prefers-reduced-motion: reduce)').matches || g.matchMedia('(hover: none)').matches); }
+  function attach(el){ if(el.__glare) return; el.__glare=1; el.addEventListener('pointermove', function(e){ var r=el.getBoundingClientRect(); el.style.setProperty('--gx',(e.clientX-r.left)+'px'); el.style.setProperty('--gy',(e.clientY-r.top)+'px'); }); }
+  function init(){ if(off()) return; var els=document.querySelectorAll('.glare'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  g.attachGlare=attach; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/dist/assets/upstream/recipes/web/glare-hover/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>glare-hover · recipe</title><link rel="stylesheet" href="glare-hover.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,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}.glare{width:280px;height:170px;padding:22px;text-align:left;background:linear-gradient(135deg,#2a2551,#14151c);box-shadow:0 18px 40px rgba(0,0,0,.4)}.glare h3{margin:0 0 6px}.glare 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="glare"><h3>motion, anything</h3><p>Move your cursor across the card — a soft glare follows.</p></div><p class="hint">Glare tracks the pointer · flat on touch &amp; reduced-motion.</p><script src="glare-hover.js"></script></body></html>

package/dist/assets/upstream/recipes/web/glare-hover/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: glare-hover
+name: Glare Hover
+description: A soft glare sweeps across a card following the cursor on hover — a premium, tactile sheen.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, image, button]
+intent: hover-press
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css, js]
+dependencies: []
+tags: [glare, sheen, hover, card, premium, cursor]
+intent_keywords: [glare hover, sheen on hover, premium card hover, 高光扫过, 卡片光泽]
+best_for: ["A hero card, cover image, or a few feature tiles"]
+avoid_when: ["Dense grids", "Touch-only contexts (no cursor)", "Text-dense reading cards"]
+restraint: { max_per_view: 4, notes: "Keep the glare subtle. Disabled on touch and under reduced-motion." }
+motion: { duration_ms: 220, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css+js, files: [glare-hover.css, glare-hover.js], usage: "Add class 'glare' to a card. JS writes --gx/--gy; CSS paints a glare there on hover." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/animations/glare-hover", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/dist/assets/upstream/recipes/web/glass-icons/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: glass-icons
+description: |
+  Glassmorphic icon buttons that lift and glow on hover — a tactile toolbar or social row. Use for a small row of actions. Flat under prefers-reduced-motion.
+triggers: ["glass icons","glassmorphism buttons","玻璃图标","毛玻璃按钮"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# glass-icons
+Glass Icons Dependency-free, reduced-motion safe.
+## How to apply
+Copy `glass-icons.css`; `<button class="gi">★</button>`. Pairs well with the reicon SVGs.

package/dist/assets/upstream/recipes/web/glass-icons/glass-icons.css

@@ -0,0 +1,7 @@
+/* glass-icons.css — hover-press · glassmorphic icon buttons that lift + glow on hover. transform/opacity only. */
+.gi{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px;
+  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18);
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color:#fff; font-size:22px; cursor:pointer;
+  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
+.gi:hover{ transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 30px rgba(139,124,246,.4); }
+@media (prefers-reduced-motion: reduce){ .gi{ transition:none } .gi:hover{ transform:none } }

package/dist/assets/upstream/recipes/web/glass-icons/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>glass-icons · recipe</title><link rel="stylesheet" href="glass-icons.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 · hover-press</div><div style="display:flex;gap:14px"><button class="gi">★</button><button class="gi">♥</button><button class="gi">✦</button><button class="gi">➜</button></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p></body></html>

package/dist/assets/upstream/recipes/web/glass-icons/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: glass-icons
+name: Glass Icons
+description: Glassmorphic icon buttons that lift and glow on hover — a tactile toolbar/social row.
+surfaces: [web, interaction]
+canvas: [web]
+target: [button,icon]
+intent: hover-press
+runtime: [css]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css]
+dependencies: []
+tags: [glass icons,glassmorphism buttons,玻璃图标,毛玻璃按钮]
+intent_keywords: [glass icons,glassmorphism buttons,玻璃图标,毛玻璃按钮]
+best_for: ["Glass Icons — 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, files: [glass-icons.css], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/glass-icons, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/dist/assets/upstream/recipes/web/glitch-text/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: glitch-text
+description: |
+  An RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.
+triggers: ["glitch text","cyberpunk headline","故障文字","抖动标题"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# glitch-text
+A headline with an RGB-split glitch. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `glitch-text.css`; `<h1 class="glitch" data-text="HELLO">HELLO</h1>` (data-text must match the text).

package/dist/assets/upstream/recipes/web/glitch-text/glitch-text.css

@@ -0,0 +1,7 @@
+/* glitch-text.css — text-kinetic · RGB-split glitch. transform/clip only. Steady under reduced-motion. */
+.glitch { position: relative; color: #e7e8ee; font-weight: 800; letter-spacing: .02em; }
+.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }
+.glitch::before { color: #ff2d78; animation: glitch-x 2.6s infinite steps(2); clip-path: inset(0 0 55% 0); }
+.glitch::after { color: #2de2ff; animation: glitch-x 3.1s infinite reverse steps(2); clip-path: inset(55% 0 0 0); }
+@keyframes glitch-x { 0%,92%,100%{transform:translate(0)} 93%{transform:translate(-2px,1px)} 95%{transform:translate(2px,-1px)} 97%{transform:translate(-1px,-1px)} }
+@media (prefers-reduced-motion: reduce){ .glitch::before,.glitch::after{ display:none } }

package/dist/assets/upstream/recipes/web/glitch-text/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>glitch-text · recipe</title><link rel="stylesheet" href="glitch-text.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}h1{margin:0}</style></head>
+<body><div class="badge">motion-anything · text-kinetic</div><h1 class="glitch" data-text="SYSTEM ONLINE" style="font-size:44px">SYSTEM ONLINE</h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: glitch-text
+name: Glitch Text
+description: An RGB-split glitch flickers across a headline — a techy, edgy reveal.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: text-kinetic
+runtime: [css]
+export: [skill, motion-json, html]
+category: text-kinetic
+tech: [css]
+dependencies: []
+tags: [glitch,text,rgb,cyberpunk,techy]
+intent_keywords: [glitch text, cyberpunk headline, 故障文字, 抖动标题]
+best_for: ["A short techy headline"]
+avoid_when: ["Calm/editorial tones; body copy"]
+restraint: { max_per_view: 1, notes: "Use sparingly; tasteful. Plain/static under reduced-motion." }
+motion: { duration_ms: 700, easing: ease-out, reduced_motion: graceful, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css, files: [glitch-text.css], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: null, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/dist/assets/upstream/recipes/web/gooey-nav/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: gooey-nav
+description: |
+  A pill slides under the active nav item with a springy merge — a smooth segmented control. One per view. Under prefers-reduced-motion the pill jumps without easing.
+triggers: ["gooey nav","liquid tabs","果冻导航","液态标签"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# gooey-nav
+Gooey Nav Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<nav class="gnav"><span class="gn-pill"></span><button class="on">Home</button>…</nav>`.

package/dist/assets/upstream/recipes/web/gooey-nav/gooey-nav.css

@@ -0,0 +1,6 @@
+/* gooey-nav.css — hover-press · a pill slides under the active item. transform only. */
+.gnav{ position:relative; display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:#14151c; border:1px solid #2a2b36; }
+.gnav .gn-pill{ position:absolute; top:5px; bottom:5px; border-radius:999px; background:linear-gradient(90deg,#8b7cf6,#6d54e6); transition: transform .35s cubic-bezier(.34,1.4,.5,1), width .35s cubic-bezier(.34,1.4,.5,1); z-index:0; }
+.gnav button{ position:relative; z-index:1; border:0; background:none; color:#c8c9d4; font:600 14px ui-sans-serif,system-ui,sans-serif; padding:9px 18px; border-radius:999px; cursor:pointer; transition:color .2s; }
+.gnav button.on{ color:#fff; }
+@media (prefers-reduced-motion: reduce){ .gnav .gn-pill{ transition:none } }

package/dist/assets/upstream/recipes/web/gooey-nav/gooey-nav.js

@@ -0,0 +1,8 @@
+/* gooey-nav.js — hover-press · move the pill under the clicked item. */
+(function(g){ 'use strict';
+  function attach(el){ if(el.__gn) return; el.__gn=1; var pill=el.querySelector('.gn-pill'), btns=[].slice.call(el.querySelectorAll('button'));
+    function move(b){ btns.forEach(function(x){ x.classList.toggle('on', x===b); }); pill.style.width=b.offsetWidth+'px'; pill.style.transform='translateX('+(b.offsetLeft-5)+'px)'; }
+    btns.forEach(function(b){ b.addEventListener('click', function(){ move(b); }); }); var init=el.querySelector('button.on')||btns[0]; if(init) move(init); }
+  function init(){ var els=document.querySelectorAll('.gnav'); 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/gooey-nav/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>gooey-nav · recipe</title><link rel="stylesheet" href="gooey-nav.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}</style></head>
+<body><div class="badge">motion-anything · hover-press</div><nav class="gnav"><span class="gn-pill"></span><button class="on">Home</button><button>Work</button><button>About</button></nav><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="gooey-nav.js"></script></body></html>

package/dist/assets/upstream/recipes/web/gooey-nav/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: gooey-nav
+name: Gooey Nav
+description: A gooey pill slides under the active nav item with a liquid merge — a smooth segmented control.
+surfaces: [web, interaction]
+canvas: [web]
+target: [list,button]
+intent: hover-press
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css,js]
+dependencies: []
+tags: [gooey nav,liquid tabs,果冻导航,液态标签]
+intent_keywords: [gooey nav,liquid tabs,果冻导航,液态标签]
+best_for: ["Gooey Nav — one tasteful use"]
+avoid_when: ["Overuse; touch-only where relevant; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [gooey-nav.css,gooey-nav.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/gooey-nav, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/dist/assets/upstream/recipes/web/gradient-blinds/SKILL.md

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

package/dist/assets/upstream/recipes/web/gradient-blinds/gradient-blinds.js

@@ -0,0 +1,7 @@
+/* gradient-blinds.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\n#ifdef GL_ES\nprecision mediump float;\n#endif\n\nuniform vec3  iResolution;\nuniform vec2  iMouse;\nuniform float iTime;\n\nuniform float uAngle;\nuniform float uNoise;\nuniform float uBlindCount;\nuniform float uSpotlightRadius;\nuniform float uSpotlightSoftness;\nuniform float uSpotlightOpacity;\nuniform float uMirror;\nuniform float uDistort;\nuniform float uShineFlip;\nuniform vec3  uColor0;\nuniform vec3  uColor1;\nuniform vec3  uColor2;\nuniform vec3  uColor3;\nuniform vec3  uColor4;\nuniform vec3  uColor5;\nuniform vec3  uColor6;\nuniform vec3  uColor7;\nuniform int   uColorCount;\n\nvarying vec2 vUv;\n\nfloat rand(vec2 co){\n  return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvec2 rotate2D(vec2 p, float a){\n  float c = cos(a);\n  float s = sin(a);\n  return mat2(c, -s, s, c) * p;\n}\n\nvec3 getGradientColor(float t){\n  float tt = clamp(t, 0.0, 1.0);\n  int count = uColorCount;\n  if (count < 2) count = 2;\n  float scaled = tt * float(count - 1);\n  float seg = floor(scaled);\n  float f = fract(scaled);\n\n  if (seg < 1.0) return mix(uColor0, uColor1, f);\n  if (seg < 2.0 && count > 2) return mix(uColor1, uColor2, f);\n  if (seg < 3.0 && count > 3) return mix(uColor2, uColor3, f);\n  if (seg < 4.0 && count > 4) return mix(uColor3, uColor4, f);\n  if (seg < 5.0 && count > 5) return mix(uColor4, uColor5, f);\n  if (seg < 6.0 && count > 6) return mix(uColor5, uColor6, f);\n  if (seg < 7.0 && count > 7) return mix(uColor6, uColor7, f);\n  if (count > 7) return uColor7;\n  if (count > 6) return uColor6;\n  if (count > 5) return uColor5;\n  if (count > 4) return uColor4;\n  if (count > 3) return uColor3;\n  if (count > 2) return uColor2;\n  return uColor1;\n}\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n    vec2 uv0 = fragCoord.xy / iResolution.xy;\n\n    float aspect = iResolution.x / iResolution.y;\n    vec2 p = uv0 * 2.0 - 1.0;\n    p.x *= aspect;\n    vec2 pr = rotate2D(p, uAngle);\n    pr.x /= aspect;\n    vec2 uv = pr * 0.5 + 0.5;\n\n    vec2 uvMod = uv;\n    if (uDistort > 0.0) {\n      float a = uvMod.y * 6.0;\n      float b = uvMod.x * 6.0;\n      float w = 0.01 * uDistort;\n      uvMod.x += sin(a) * w;\n      uvMod.y += cos(b) * w;\n    }\n    float t = uvMod.x;\n    if (uMirror > 0.5) {\n      t = 1.0 - abs(1.0 - 2.0 * fract(t));\n    }\n    vec3 base = getGradientColor(t);\n\n    vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y);\n  float d = length(uv0 - offset);\n  float r = max(uSpotlightRadius, 1e-4);\n  float dn = d / r;\n  float spot = (1.0 - 2.0 * pow(dn, uSpotlightSoftness)) * uSpotlightOpacity;\n  vec3 cir = vec3(spot);\n  float stripe = fract(uvMod.x * max(uBlindCount, 1.0));\n  if (uShineFlip > 0.5) stripe = 1.0 - stripe;\n    vec3 ran = vec3(stripe);\n\n    vec3 col = cir + base - ran;\n    col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise;\n\n    fragColor = vec4(col, 1.0);\n}\n\nvoid main() {\n    vec4 color;\n    mainImage(color, vUv * iResolution.xy);\n    gl_FragColor = color;\n}\n';
+  function init(){ var els=document.querySelectorAll('.gradient-blinds'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"iMouse":{"t":"2f","v":[0,0]},"uAngle":{"t":"1f","v":0},"uNoise":{"t":"1f","v":0.3},"uBlindCount":{"t":"1f","v":16},"uSpotlightRadius":{"t":"1f","v":0.5},"uSpotlightSoftness":{"t":"1f","v":1},"uSpotlightOpacity":{"t":"1f","v":1},"uMirror":{"t":"1f","v":0},"uDistort":{"t":"1f","v":0},"uShineFlip":{"t":"1f","v":0},"uColor0":{"t":"3f","v":[1,0.6235294117647059,0.9882352941176471]},"uColor1":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor2":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor3":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor4":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor5":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor6":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColor7":{"t":"3f","v":[0.3215686274509804,0.15294117647058825,1]},"uColorCount":{"t":"1i","v":2}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/dist/assets/upstream/recipes/web/gradient-blinds/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: gradient-blinds
+name: Gradient Blinds
+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, gradient-blinds]
+intent_keywords: [gradient-blinds, 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, gradient-blinds.js], usage: "Copy _fx/shaderbg.js + gradient-blinds.js; add a full-bleed <div class=\"gradient-blinds\"></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/gradient-text/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: gradient-text
+description: |
+  Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type.
+  One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color
+  under prefers-reduced-motion.
+triggers:
+  - "gradient text"
+  - "animated headline"
+  - "shimmering title"
+  - "premium heading color"
+  - "渐变文字"
+  - "流光标题"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://magicui.design/docs/components/animated-gradient-text"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use gradient-text on the hero word only: a slow on-brand gradient drifts through it. Keep the
+    rest of the type solid; solid color under reduced-motion.
+---
+
+# gradient-text
+
+A gradient that drifts through a headline. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by Magic UI, reimplemented dependency-free (pure CSS).
+
+## When to use it
+- One hero word / short headline / brand name / key metric you want to feel premium.
+
+## When NOT to use it (restraint)
+- Body copy or long text — it hurts readability and contrast. **One short phrase per view.**
+- When guaranteed color contrast is required for accessibility.
+
+## How to apply
+1. Copy `gradient-text.css` into the project and link it.
+2. Wrap the phrase:
+   ```html
+   <h1><span class="gradient-text">motion, anything</span></h1>
+   ```
+3. Set brand colors via `--g1/--g2/--g3`; tune the duration (default 6s).
+
+## Accessibility & performance
+- Under `prefers-reduced-motion` the drift stops and the text renders in a solid `--g1` color.
+- Animates `background-position` of a text-clipped gradient — GPU-safe.
+
+## Framework notes
+- Pure CSS; works in any framework. Keep the base `--g1` readable as the reduced-motion fallback.

package/dist/assets/upstream/recipes/web/gradient-text/gradient-text.css

@@ -0,0 +1,30 @@
+/* gradient-text.css — motion-anything recipe · category: text-kinetic
+ * A gradient clipped to the text drifts slowly. Reserve for one short headline.
+ * Animates background-position only — GPU-safe; solid color under reduced-motion. */
+
+.gradient-text {
+  --g1: #8b7cf6;
+  --g2: #39d98a;
+  --g3: #ff8bd0;
+  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g1));
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: gradient-text-drift 6s ease-in-out infinite;
+}
+@keyframes gradient-text-drift {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gradient-text {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+    color: var(--g1);                 /* fall back to a solid brand color */
+  }
+}

package/dist/assets/upstream/recipes/web/gradient-text/preview.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>gradient-text · motion-anything recipe</title>
+  <link rel="stylesheet" href="gradient-text.css" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 18px; 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; }
+    h1 { font-size: 56px; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
+    .hint { font-size: 13px; color: #7c7f8c; max-width: 340px; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · text-kinetic</div>
+  <h1><span class="gradient-text">motion, anything</span></h1>
+  <p class="hint">One short headline · slow, on-brand drift · solid color under reduced-motion.</p>
+</body>
+</html>

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

@@ -0,0 +1,58 @@
+spec_version: 1
+id: gradient-text
+name: Animated Gradient Text
+description: A slow gradient drifts through a headline — quiet premium emphasis on one line of type.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: text-kinetic
+runtime: [css]
+export: [skill, motion-json, html]
+category: text-kinetic
+tech: [css]
+dependencies: []
+tags: [gradient, text, headline, ambient, premium, type]
+
+intent_keywords:
+  - gradient text
+  - animated headline color
+  - shimmering text
+  - premium heading
+  - 渐变文字
+  - 流光标题
+  - 高级感标题
+best_for:
+  - One hero word / short headline you want to feel premium
+  - A brand name or key metric that should quietly draw the eye
+avoid_when:
+  - Body copy or long text (hurts readability and contrast)
+  - More than one gradient headline on screen
+  - When strong color contrast for accessibility is required
+restraint:
+  max_per_view: 1
+  notes: >
+    One short phrase only. Keep the palette on-brand and the drift slow. Ensure a readable base
+    color; the animation stops (solid color) under reduced-motion.
+
+motion:
+  duration_ms: 6000
+  easing: ease-in-out
+  reduced_motion: static      # solid color, no drift
+  gpu_safe: true              # animates background-position of a text-clipped gradient
+
+entry: preview.html
+implementations:
+  - tech: css
+    files: [gradient-text.css]
+    usage: |
+      Add class "gradient-text" to an inline heading/span. A background gradient is clipped to the
+      text and its position animates. Set --g1/--g2/--g3 for brand colors. Pure CSS.
+
+license:
+  spdx: Apache-2.0
+  upstream: "https://magicui.design/docs/components/animated-gradient-text"
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0