@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/web/pixel-blast/SKILL.md

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

package/assets/upstream/recipes/web/pixel-blast/pixel-blast.js

@@ -0,0 +1,14 @@
+/* pixel-blast.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='#version 300 es\nprecision highp float;\nprecision highp float;\n\nuniform vec3  uColor;\nuniform vec2  uResolution;\nuniform float uTime;\nuniform float uPixelSize;\nuniform float uScale;\nuniform float uDensity;\nuniform float uPixelJitter;\nuniform int   uEnableRipples;\nuniform float uRippleSpeed;\nuniform float uRippleThickness;\nuniform float uRippleIntensity;\nuniform float uEdgeFade;\n\nuniform int   uShapeType;\nconst int SHAPE_SQUARE   = 0;\nconst int SHAPE_CIRCLE   = 1;\nconst int SHAPE_TRIANGLE = 2;\nconst int SHAPE_DIAMOND  = 3;\n\nconst int   MAX_CLICKS = 10;\n\nuniform vec2  uClickPos  [MAX_CLICKS];\nuniform float uClickTimes[MAX_CLICKS];\n\nout vec4 fragColor;\n\nfloat Bayer2(vec2 a) {\n  a = floor(a);\n  return fract(a.x / 2. + a.y * a.y * .75);\n}\n#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))\n#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))\n\n#define FBM_OCTAVES     5\n#define FBM_LACUNARITY  1.25\n#define FBM_GAIN        1.0\n\nfloat hash11(float n){ return fract(sin(n)*43758.5453); }\n\nfloat vnoise(vec3 p){\n  vec3 ip = floor(p);\n  vec3 fp = fract(p);\n  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);\n  float x00 = mix(n000, n100, w.x);\n  float x10 = mix(n010, n110, w.x);\n  float x01 = mix(n001, n101, w.x);\n  float x11 = mix(n011, n111, w.x);\n  float y0  = mix(x00, x10, w.y);\n  float y1  = mix(x01, x11, w.y);\n  return mix(y0, y1, w.z) * 2.0 - 1.0;\n}\n\nfloat fbm2(vec2 uv, float t){\n  vec3 p = vec3(uv * uScale, t);\n  float amp = 1.0;\n  float freq = 1.0;\n  float sum = 1.0;\n  for (int i = 0; i < FBM_OCTAVES; ++i){\n    sum  += amp * vnoise(p * freq);\n    freq *= FBM_LACUNARITY;\n    amp  *= FBM_GAIN;\n  }\n  return sum * 0.5 + 0.5;\n}\n\nfloat maskCircle(vec2 p, float cov){\n  float r = sqrt(cov) * .25;\n  float d = length(p - 0.5) - r;\n  float aa = 0.5 * fwidth(d);\n  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));\n}\n\nfloat maskTriangle(vec2 p, vec2 id, float cov){\n  bool flip = mod(id.x + id.y, 2.0) > 0.5;\n  if (flip) p.x = 1.0 - p.x;\n  float r = sqrt(cov);\n  float d  = p.y - r*(1.0 - p.x);\n  float aa = fwidth(d);\n  return cov * clamp(0.5 - d/aa, 0.0, 1.0);\n}\n\nfloat maskDiamond(vec2 p, float cov){\n  float r = sqrt(cov) * 0.564;\n  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);\n}\n\nvoid main(){\n  float pixelSize = uPixelSize;\n  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;\n  float aspectRatio = uResolution.x / uResolution.y;\n\n  vec2 pixelId = floor(fragCoord / pixelSize);\n  vec2 pixelUV = fract(fragCoord / pixelSize);\n\n  float cellPixelSize = 8.0 * pixelSize;\n  vec2 cellId = floor(fragCoord / cellPixelSize);\n  vec2 cellCoord = cellId * cellPixelSize;\n  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);\n\n  float base = fbm2(uv, uTime * 0.05);\n  base = base * 0.5 - 0.65;\n\n  float feed = base + (uDensity - 0.5) * 0.3;\n\n  float speed     = uRippleSpeed;\n  float thickness = uRippleThickness;\n  const float dampT     = 1.0;\n  const float dampR     = 10.0;\n\n  if (uEnableRipples == 1) {\n    for (int i = 0; i < MAX_CLICKS; ++i){\n      vec2 pos = uClickPos[i];\n      if (pos.x < 0.0) continue;\n      float cellPixelSize = 8.0 * pixelSize;\n      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);\n      float t = max(uTime - uClickTimes[i], 0.0);\n      float r = distance(uv, cuv);\n      float waveR = speed * t;\n      float ring  = exp(-pow((r - waveR) / thickness, 2.0));\n      float atten = exp(-dampT * t) * exp(-dampR * r);\n      feed = max(feed, ring * atten * uRippleIntensity);\n    }\n  }\n\n  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;\n  float bw = step(0.5, feed + bayer);\n\n  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);\n  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;\n  float coverage = bw * jitterScale;\n  float M;\n  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);\n  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);\n  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);\n  else                                   M = coverage;\n\n  if (uEdgeFade > 0.0) {\n    vec2 norm = gl_FragCoord.xy / uResolution;\n    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));\n    float fade = smoothstep(0.0, uEdgeFade, edge);\n    M *= fade;\n  }\n\n  vec3 color = uColor;\n\n  // sRGB gamma correction - convert linear to sRGB for accurate color output\n  vec3 srgbColor = mix(\n    color * 12.92,\n    1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055,\n    step(0.0031308, color)\n  );\n\n  fragColor = vec4(srgbColor * M, M);\n}\n';
+  function init(){ var els=document.querySelectorAll('.pixel-blast'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    var h=g.ShaderBG(els[i], FRAG, {"timeScale":0.5,"uniforms":{"uColor":{"t":"3f","v":[0.7058823529411765,0.592156862745098,0.8117647058823529]},"uShapeType":{"t":"1i","v":0},"uPixelSize":{"t":"1f","v":3},"uScale":{"t":"1f","v":2},"uDensity":{"t":"1f","v":1},"uPixelJitter":{"t":"1f","v":0},"uEnableRipples":{"t":"1i","v":1},"uRippleSpeed":{"t":"1f","v":0.3},"uRippleThickness":{"t":"1f","v":0.1},"uRippleIntensity":{"t":"1f","v":1},"uEdgeFade":{"t":"1f","v":0.5},"uClickPos":{"t":"2fv","v":[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]},"uClickTimes":{"t":"1fv","v":[0,0,0,0,0,0,0,0,0,0]}}});
+    if(h){ (function(){ var N=10, pos=new Array(2*N), times=new Array(N), ix=0, k;
+      for(k=0;k<N;k++){ pos[2*k]=-1; pos[2*k+1]=-1; times[k]=0; }
+      h.el.addEventListener('pointerdown', function(e){ var r=h.el.getBoundingClientRect();
+        var sx=h.canvas.width/r.width, sy=h.canvas.height/r.height;
+        pos[2*ix]=(e.clientX-r.left)*sx; pos[2*ix+1]=(r.height-(e.clientY-r.top))*sy;
+        times[ix]=h.time(); ix=(ix+1)%N;
+        h.set('uClickPos',{t:'2fv',v:pos}); h.set('uClickTimes',{t:'1fv',v:times}); }); })(); } } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/pixel-blast/recipe.motion.yaml

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

@@ -0,0 +1,11 @@
+---
+name: pixel-card
+description: |
+  Pixel tiles light up in a wave across a card on hover — a subtle retro shimmer. A few cards, not a grid. Static under prefers-reduced-motion.
+triggers: ["pixel card","retro shimmer","像素卡片","方块微光"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# pixel-card
+Pixel Card Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="pxc"><div class="content">…</div><div class="pxc-grid"></div></div>`.

package/assets/upstream/recipes/web/pixel-card/pixel-card.css

@@ -0,0 +1,6 @@
+/* pixel-card.css — hover-press · pixel overlay shimmers on hover. opacity only. */
+.pxc{ position:relative; overflow:hidden; border-radius:14px; }
+.pxc .pxc-grid{ position:absolute; inset:0; display:grid; pointer-events:none; }
+.pxc .pxc-grid i{ background:var(--pxc-color,rgba(139,124,246,.5)); opacity:0; transition:opacity .4s ease; }
+.pxc:hover .pxc-grid i{ opacity:1; transition-delay:var(--d,0ms); }
+@media (prefers-reduced-motion: reduce){ .pxc:hover .pxc-grid i{ transition:none } }

package/assets/upstream/recipes/web/pixel-card/pixel-card.js

@@ -0,0 +1,8 @@
+/* pixel-card.js — hover-press · build a light pixel overlay with staggered delays. */
+(function(g){ 'use strict';
+  function attach(el){ if(el.__pc) return; el.__pc=1; var grid=el.querySelector('.pxc-grid'); if(!grid) return; var n=+el.getAttribute('data-grid')||8;
+    grid.style.gridTemplateColumns='repeat('+n+',1fr)'; grid.style.gridTemplateRows='repeat('+n+',1fr)';
+    for(var i=0;i<n*n;i++){ var d=document.createElement('i'); d.style.setProperty('--d',(Math.random()*300|0)+'ms'); grid.appendChild(d); } }
+  function init(){ var els=document.querySelectorAll('.pxc'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/pixel-card/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>pixel-card · recipe</title><link rel="stylesheet" href="pixel-card.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 class="pxc" data-grid="8" style="width:260px;height:160px;background:#14151c"><div style="display:grid;place-items:center;height:100%;color:#e7e8ee;position:relative;z-index:1">Hover me</div><div class="pxc-grid"></div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="pixel-card.js"></script></body></html>

package/assets/upstream/recipes/web/pixel-card/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: pixel-card
+name: Pixel Card
+description: Pixel tiles light up in a wave across a card on hover — a subtle retro shimmer.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card]
+intent: hover-press
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css,js]
+dependencies: []
+tags: [pixel card,retro shimmer,像素卡片,方块微光]
+intent_keywords: [pixel card,retro shimmer,像素卡片,方块微光]
+best_for: ["Pixel Card — 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: [pixel-card.css,pixel-card.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/pixel-card, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/pixel-snow/SKILL.md

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

package/assets/upstream/recipes/web/pixel-snow/pixel-snow.js

@@ -0,0 +1,7 @@
+/* pixel-snow.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='#version 300 es\nprecision highp float;\nout vec4 fragColor;\nprecision mediump float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uFlakeSize;\nuniform float uMinFlakeSize;\nuniform float uPixelResolution;\nuniform float uSpeed;\nuniform float uDepthFade;\nuniform float uFarPlane;\nuniform vec3 uColor;\nuniform float uBrightness;\nuniform float uGamma;\nuniform float uDensity;\nuniform float uVariant;\nuniform float uDirection;\n\n// Precomputed constants\n#define PI 3.14159265\n#define PI_OVER_6 0.5235988\n#define PI_OVER_3 1.0471976\n#define INV_SQRT3 0.57735027\n#define M1 1597334677U\n#define M2 3812015801U\n#define M3 3299493293U\n#define F0 2.3283064e-10\n\n// Optimized hash - inline multiplication\n#define hash(n) (n * (n ^ (n >> 15)))\n#define coord3(p) (uvec3(p).x * M1 ^ uvec3(p).y * M2 ^ uvec3(p).z * M3)\n\n// Precomputed camera basis vectors (normalized vec3(1,1,1), vec3(1,0,-1))\nconst vec3 camK = vec3(0.57735027, 0.57735027, 0.57735027);\nconst vec3 camI = vec3(0.70710678, 0.0, -0.70710678);\nconst vec3 camJ = vec3(-0.40824829, 0.81649658, -0.40824829);\n\n// Precomputed branch direction\nconst vec2 b1d = vec2(0.574, 0.819);\n\nvec3 hash3(uint n) {\n  uvec3 hashed = hash(n) * uvec3(1U, 511U, 262143U);\n  return vec3(hashed) * F0;\n}\n\nfloat snowflakeDist(vec2 p) {\n  float r = length(p);\n  float a = atan(p.y, p.x);\n  a = abs(mod(a + PI_OVER_6, PI_OVER_3) - PI_OVER_6);\n  vec2 q = r * vec2(cos(a), sin(a));\n  float dMain = max(abs(q.y), max(-q.x, q.x - 1.0));\n  float b1t = clamp(dot(q - vec2(0.4, 0.0), b1d), 0.0, 0.4);\n  float dB1 = length(q - vec2(0.4, 0.0) - b1t * b1d);\n  float b2t = clamp(dot(q - vec2(0.7, 0.0), b1d), 0.0, 0.25);\n  float dB2 = length(q - vec2(0.7, 0.0) - b2t * b1d);\n  return min(dMain, min(dB1, dB2)) * 10.0;\n}\n\nvoid main() {\n  // Precompute reciprocals to avoid division\n  float invPixelRes = 1.0 / uPixelResolution;\n  float pixelSize = max(1.0, floor(0.5 + uResolution.x * invPixelRes));\n  float invPixelSize = 1.0 / pixelSize;\n  \n  vec2 fragCoord = floor(gl_FragCoord.xy * invPixelSize);\n  vec2 res = uResolution * invPixelSize;\n  float invResX = 1.0 / res.x;\n\n  vec3 ray = normalize(vec3((fragCoord - res * 0.5) * invResX, 1.0));\n  ray = ray.x * camI + ray.y * camJ + ray.z * camK;\n\n  // Precompute time-based values\n  float timeSpeed = uTime * uSpeed;\n  float windX = cos(uDirection) * 0.4;\n  float windY = sin(uDirection) * 0.4;\n  vec3 camPos = (windX * camI + windY * camJ + 0.1 * camK) * timeSpeed;\n  vec3 pos = camPos;\n\n  // Precompute ray reciprocal for strides\n  vec3 absRay = max(abs(ray), vec3(0.001));\n  vec3 strides = 1.0 / absRay;\n  vec3 raySign = step(ray, vec3(0.0));\n  vec3 phase = fract(pos) * strides;\n  phase = mix(strides - phase, phase, raySign);\n\n  // Precompute for intersection test\n  float rayDotCamK = dot(ray, camK);\n  float invRayDotCamK = 1.0 / rayDotCamK;\n  float invDepthFade = 1.0 / uDepthFade;\n  float halfInvResX = 0.5 * invResX;\n  vec3 timeAnim = timeSpeed * 0.1 * vec3(7.0, 8.0, 5.0);\n\n  float t = 0.0;\n  for (int i = 0; i < 128; i++) {\n    if (t >= uFarPlane) break;\n    \n    vec3 fpos = floor(pos);\n    uint cellCoord = coord3(fpos);\n    float cellHash = hash3(cellCoord).x;\n\n    if (cellHash < uDensity) {\n      vec3 h = hash3(cellCoord);\n      \n      // Optimized flake position calculation\n      vec3 sinArg1 = fpos.yzx * 0.073;\n      vec3 sinArg2 = fpos.zxy * 0.27;\n      vec3 flakePos = 0.5 - 0.5 * cos(4.0 * sin(sinArg1) + 4.0 * sin(sinArg2) + 2.0 * h + timeAnim);\n      flakePos = flakePos * 0.8 + 0.1 + fpos;\n\n      float toIntersection = dot(flakePos - pos, camK) * invRayDotCamK;\n      \n      if (toIntersection > 0.0) {\n        vec3 testPos = pos + ray * toIntersection - flakePos;\n        float testX = dot(testPos, camI);\n        float testY = dot(testPos, camJ);\n        vec2 testUV = abs(vec2(testX, testY));\n        \n        float depth = dot(flakePos - camPos, camK);\n        float flakeSize = max(uFlakeSize, uMinFlakeSize * depth * halfInvResX);\n        \n        // Avoid branching with step functions where possible\n        float dist;\n        if (uVariant < 0.5) {\n          dist = max(testUV.x, testUV.y);\n        } else if (uVariant < 1.5) {\n          dist = length(testUV);\n        } else {\n          float invFlakeSize = 1.0 / flakeSize;\n          dist = snowflakeDist(vec2(testX, testY) * invFlakeSize) * flakeSize;\n        }\n\n        if (dist < flakeSize) {\n          float flakeSizeRatio = uFlakeSize / flakeSize;\n          float intensity = exp2(-(t + toIntersection) * invDepthFade) *\n                           min(1.0, flakeSizeRatio * flakeSizeRatio) * uBrightness;\n          fragColor = vec4(uColor * pow(vec3(intensity), vec3(uGamma)), 1.0);\n          return;\n        }\n      }\n    }\n\n    float nextStep = min(min(phase.x, phase.y), phase.z);\n    vec3 sel = step(phase, vec3(nextStep));\n    phase = phase - nextStep + strides * sel;\n    t += nextStep;\n    pos = mix(pos + ray * nextStep, floor(pos + ray * nextStep + 0.5), sel);\n  }\n\n  fragColor = vec4(0.0);\n}\n';
+  function init(){ var els=document.querySelectorAll('.pixel-snow'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    var h=g.ShaderBG(els[i], FRAG, {"uniforms":{"uFlakeSize":{"t":"1f","v":0.01},"uMinFlakeSize":{"t":"1f","v":1.25},"uPixelResolution":{"t":"1f","v":200},"uSpeed":{"t":"1f","v":1.25},"uDepthFade":{"t":"1f","v":8},"uFarPlane":{"t":"1f","v":20},"uColor":{"t":"3f","v":[1,1,1]},"uBrightness":{"t":"1f","v":1},"uGamma":{"t":"1f","v":0.4545},"uDensity":{"t":"1f","v":0.3},"uVariant":{"t":"1f","v":0},"uDirection":{"t":"1f","v":2.1816615649929116}}}); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/pixel-snow/recipe.motion.yaml

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

@@ -0,0 +1,11 @@
+---
+name: pixel-transition
+description: |
+  A card reveals a second face through a burst of pixel tiles on hover — a retro reveal. A few cards, not a grid. Under prefers-reduced-motion the back face just appears.
+triggers: ["pixel transition","pixelate reveal","像素转场","方块揭示"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# pixel-transition
+Pixel Transition Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="pixt"><div class="front">…</div><div class="pixt-back"></div></div>` (data-grid sets density).

package/assets/upstream/recipes/web/pixel-transition/pixel-transition.css

@@ -0,0 +1,7 @@
+/* pixel-transition.css — hover-press · pixel tiles flip in to reveal the back face on hover. opacity only. */
+.pixt{ position:relative; overflow:hidden; border-radius:14px; }
+.pixt .pixt-back{ position:absolute; inset:0; display:grid; opacity:0; }
+.pixt .px{ background:var(--pixt-color,#8b7cf6); opacity:0; transition:opacity .01s; }
+.pixt:hover .pixt-back{ opacity:1; }
+.pixt:hover .px{ opacity:1; transition-delay:var(--d,0ms); }
+@media (prefers-reduced-motion: reduce){ .pixt .pixt-back{ transition:none } .pixt:hover .px{ transition:none; opacity:1 } }

package/assets/upstream/recipes/web/pixel-transition/pixel-transition.js

@@ -0,0 +1,8 @@
+/* pixel-transition.js — hover-press · build a pixel grid over the card; randomized reveal delays. */
+(function(g){ 'use strict';
+  function attach(el){ if(el.__px) return; el.__px=1; var back=el.querySelector('.pixt-back'); if(!back) return;
+    var n=+el.getAttribute('data-grid')||10; back.style.gridTemplateColumns='repeat('+n+',1fr)'; back.style.gridTemplateRows='repeat('+n+',1fr)';
+    for(var i=0;i<n*n;i++){ var d=document.createElement('div'); d.className='px'; d.style.setProperty('--d',(Math.random()*260|0)+'ms'); back.appendChild(d); } }
+  function init(){ var els=document.querySelectorAll('.pixt'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/pixel-transition/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>pixel-transition · recipe</title><link rel="stylesheet" href="pixel-transition.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 class="pixt" data-grid="10" style="width:260px;height:160px;background:#14151c"><div style="display:grid;place-items:center;height:100%;color:#e7e8ee">Hover me</div><div class="pixt-back" style="--pixt-color:#39d98a"></div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="pixel-transition.js"></script></body></html>

package/assets/upstream/recipes/web/pixel-transition/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: pixel-transition
+name: Pixel Transition
+description: A card flips to a second face through a burst of pixel tiles — a retro reveal on hover.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card,image]
+intent: hover-press
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css,js]
+dependencies: []
+tags: [pixel transition,pixelate reveal,像素转场,方块揭示]
+intent_keywords: [pixel transition,pixelate reveal,像素转场,方块揭示]
+best_for: ["Pixel Transition — 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: [pixel-transition.css,pixel-transition.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/pixel-transition, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

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

package/assets/upstream/recipes/web/plasma/plasma.js

@@ -0,0 +1,7 @@
+/* plasma.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform vec3 uCustomColor;\nuniform float uUseCustomColor;\nuniform float uSpeed;\nuniform float uDirection;\nuniform float uScale;\nuniform float uOpacity;\nuniform vec2 uMouse;\nuniform float uMouseInteractive;\nout vec4 fragColor;\n\nvoid mainImage(out vec4 o, vec2 C) {\n  vec2 center = iResolution.xy * 0.5;\n  C = (C - center) / uScale + center;\n  \n  vec2 mouseOffset = (uMouse - center) * 0.0002;\n  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);\n  \n  float i, d, z, T = iTime * uSpeed * uDirection;\n  vec3 O, p, S;\n\n  for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {\n    p = z*normalize(vec3(C-.5*r,r.y)); \n    p.z -= 4.; \n    S = p;\n    d = p.y-T;\n    \n    p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05); \n    Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T)); \n    z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4; \n    o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));\n  }\n  \n  o.xyz = tanh(O/1e4);\n}\n\nbool finite1(float x){ return !(isnan(x) || isinf(x)); }\nvec3 sanitize(vec3 c){\n  return vec3(\n    finite1(c.r) ? c.r : 0.0,\n    finite1(c.g) ? c.g : 0.0,\n    finite1(c.b) ? c.b : 0.0\n  );\n}\n\nvoid main() {\n  vec4 o = vec4(0.0);\n  mainImage(o, gl_FragCoord.xy);\n  vec3 rgb = sanitize(o.rgb);\n  \n  float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;\n  vec3 customColor = intensity * uCustomColor;\n  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));\n  \n  float alpha = length(rgb) * uOpacity;\n  fragColor = vec4(finalColor, alpha);\n}';
+  function init(){ var els=document.querySelectorAll('.plasma'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uCustomColor":{"t":"3f","v":[0.55,0.5,1]},"uUseCustomColor":{"t":"1f","v":1},"uSpeed":{"t":"1f","v":1},"uDirection":{"t":"1f","v":1},"uScale":{"t":"1f","v":1},"uOpacity":{"t":"1f","v":1},"uMouseInteractive":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

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

package/assets/upstream/recipes/web/plasma-wave/plasma-wave.js

@@ -0,0 +1,7 @@
+/* plasma-wave.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\nprecision mediump float;\nuniform float iTime;\nuniform vec2  iResolution;\nuniform vec2  uOffset;\nuniform float uRotation;\nuniform float uFocalLength;\nuniform float uSpeed1;\nuniform float uSpeed2;\nuniform float uDir2;\nuniform float uBend1;\nuniform float uBend2;\nuniform vec3  uColor1;\nuniform vec3  uColor2;\n\nconst float lt   = 0.3;\nconst float pi   = 3.14159;\nconst float pi2  = 6.28318;\nconst float pi_2 = 1.5708;\n#define MAX_STEPS 14\n\nvoid mainImage(out vec4 C, in vec2 U) {\n  float t = iTime * pi;\n  float s = 1.0;\n  float d = 0.0;\n  vec2  R = iResolution;\n\n  vec3 o = vec3(0.0, 0.0, -7.0);\n  vec3 u = normalize(vec3((U - 0.5 * R) / R.y, uFocalLength));\n  vec2 k = vec2(0.0);\n  vec3 p;\n\n  float t1 = t * 0.7;\n  float t2 = t * 0.9;\n  float tSpeed1 = t * uSpeed1;\n  float tSpeed2 = t * uSpeed2 * uDir2;\n\n  for (int i = 0; i < MAX_STEPS; ++i) {\n    p = o + u * d;\n    p.x -= 15.0;\n\n    float px = p.x;\n    float wob1 = uBend1 + sin(t1 + px * 0.8) * 0.1;\n    float wob2 = uBend2 + cos(t2 + px * 1.1) * 0.1;\n\n    float px2 = px + pi_2;\n    vec2 sinOffset = sin(vec2(px, px2) + tSpeed1) * wob1;\n    vec2 cosOffset = cos(vec2(px, px2) + tSpeed2) * wob2;\n\n    vec2 yz = p.yz;\n    float pxLt = px + lt;\n    k.x = max(pxLt, length(yz - sinOffset) - lt);\n    k.y = max(pxLt, length(yz - cosOffset) - lt);\n\n    float current = min(k.x, k.y);\n    s = min(s, current);\n    if (s < 0.001 || d > 300.0) break;\n    d += s * 0.7;\n  }\n\n  float sqrtD = sqrt(d);\n  vec3 raw = max(cos(d * pi2) - s * sqrtD - vec3(k, 0.0), 0.0);\n  raw.gb += 0.1;\n  float maxC = max(raw.r, max(raw.g, raw.b));\n  if (maxC < 0.15) discard;\n  raw = raw * 0.4 + raw.brg * 0.6 + raw * raw;\n  float lum = dot(raw, vec3(0.299, 0.587, 0.114));\n  float w1 = max(0.0, 1.0 - k.x * 2.0);\n  float w2 = max(0.0, 1.0 - k.y * 2.0);\n  float wt = w1 + w2 + 0.001;\n  vec3 c = (uColor1 * w1 + uColor2 * w2) / wt * lum * 3.5;\n  C = vec4(c, 1.0);\n}\n\nvoid main() {\n  vec2 coord = gl_FragCoord.xy + uOffset;\n  coord -= 0.5 * iResolution;\n  float c = cos(uRotation), s = sin(uRotation);\n  coord = mat2(c, -s, s, c) * coord;\n  coord += 0.5 * iResolution;\n\n  vec4 color;\n  mainImage(color, coord);\n  gl_FragColor = color;\n}\n';
+  function init(){ var els=document.querySelectorAll('.plasma-wave'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uOffset":{"t":"2f","v":[0.5,0.5]},"uRotation":{"t":"1f","v":1},"uFocalLength":{"t":"1f","v":1},"uSpeed1":{"t":"1f","v":1},"uSpeed2":{"t":"1f","v":1},"uDir2":{"t":"1f","v":1},"uBend1":{"t":"1f","v":1},"uBend2":{"t":"1f","v":1},"uColor1":{"t":"3f","v":[0.55,0.5,1]},"uColor2":{"t":"3f","v":[0.55,0.5,1]}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/plasma-wave/recipe.motion.yaml

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

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

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

package/assets/upstream/recipes/web/prism/prism.js

@@ -0,0 +1,7 @@
+/* prism.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 vec2  iResolution;\n      uniform float iTime;\n\n      uniform float uHeight;\n      uniform float uBaseHalf;\n      uniform mat3  uRot;\n      uniform int   uUseBaseWobble;\n      uniform float uGlow;\n      uniform vec2  uOffsetPx;\n      uniform float uNoise;\n      uniform float uSaturation;\n      uniform float uScale;\n      uniform float uHueShift;\n      uniform float uColorFreq;\n      uniform float uBloom;\n      uniform float uCenterShift;\n      uniform float uInvBaseHalf;\n      uniform float uInvHeight;\n      uniform float uMinAxis;\n      uniform float uPxScale;\n      uniform float uTimeScale;\n\n      vec4 tanh4(vec4 x){\n        vec4 e2x = exp(2.0*x);\n        return (e2x - 1.0) / (e2x + 1.0);\n      }\n\n      float rand(vec2 co){\n        return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);\n      }\n\n      float sdOctaAnisoInv(vec3 p){\n        vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);\n        float m = q.x + q.y + q.z - 1.0;\n        return m * uMinAxis * 0.5773502691896258;\n      }\n\n      float sdPyramidUpInv(vec3 p){\n        float oct = sdOctaAnisoInv(p);\n        float halfSpace = -p.y;\n        return max(oct, halfSpace);\n      }\n\n      mat3 hueRotation(float a){\n        float c = cos(a), s = sin(a);\n        mat3 W = mat3(\n          0.299, 0.587, 0.114,\n          0.299, 0.587, 0.114,\n          0.299, 0.587, 0.114\n        );\n        mat3 U = mat3(\n           0.701, -0.587, -0.114,\n          -0.299,  0.413, -0.114,\n          -0.300, -0.588,  0.886\n        );\n        mat3 V = mat3(\n           0.168, -0.331,  0.500,\n           0.328,  0.035, -0.500,\n          -0.497,  0.296,  0.201\n        );\n        return W + U * c + V * s;\n      }\n\n      void main(){\n        vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;\n\n        float z = 5.0;\n        float d = 0.0;\n\n        vec3 p;\n        vec4 o = vec4(0.0);\n\n        float centerShift = uCenterShift;\n        float cf = uColorFreq;\n\n        mat2 wob = mat2(1.0);\n        if (uUseBaseWobble == 1) {\n          float t = iTime * uTimeScale;\n          float c0 = cos(t + 0.0);\n          float c1 = cos(t + 33.0);\n          float c2 = cos(t + 11.0);\n          wob = mat2(c0, c1, c2, c0);\n        }\n\n        const int STEPS = 100;\n        for (int i = 0; i < STEPS; i++) {\n          p = vec3(f, z);\n          p.xz = p.xz * wob;\n          p = uRot * p;\n          vec3 q = p;\n          q.y += centerShift;\n          d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));\n          z -= d;\n          o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;\n        }\n\n        o = tanh4(o * o * (uGlow * uBloom) / 1e5);\n\n        vec3 col = o.rgb;\n        float n = rand(gl_FragCoord.xy + vec2(iTime));\n        col += (n - 0.5) * uNoise;\n        col = clamp(col, 0.0, 1.0);\n\n        float L = dot(col, vec3(0.2126, 0.7152, 0.0722));\n        col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);\n\n        if(abs(uHueShift) > 0.0001){\n          col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);\n        }\n\n        gl_FragColor = vec4(col, o.a);\n      }\n    ';
+  function init(){ var els=document.querySelectorAll('.prism'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uHeight":{"t":"1f","v":1},"uBaseHalf":{"t":"1f","v":1},"uUseBaseWobble":{"t":"1i","v":1},"uGlow":{"t":"1f","v":1},"uOffsetPx":{"t":"2f","v":[0.5,0.5]},"uNoise":{"t":"1f","v":0.12},"uSaturation":{"t":"1f","v":1},"uScale":{"t":"1f","v":1},"uHueShift":{"t":"1f","v":0},"uColorFreq":{"t":"1f","v":2},"uBloom":{"t":"1f","v":1},"uCenterShift":{"t":"1f","v":1},"uInvBaseHalf":{"t":"1f","v":1},"uInvHeight":{"t":"1f","v":1},"uMinAxis":{"t":"1f","v":1},"uPxScale":{"t":"1f","v":1},"uTimeScale":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

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

package/assets/upstream/recipes/web/prismatic-burst/prismatic-burst.js

@@ -0,0 +1,7 @@
+/* prismatic-burst.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='#version 300 es\nprecision highp float;\nprecision highp int;\n\nout vec4 fragColor;\n\nuniform vec2  uResolution;\nuniform float uTime;\n\nuniform float uIntensity;\nuniform float uSpeed;\nuniform int   uAnimType;\nuniform vec2  uMouse;\nuniform int   uColorCount;\nuniform float uDistort;\nuniform vec2  uOffset;\nuniform sampler2D uGradient;\nuniform float uNoiseAmount;\nuniform int   uRayCount;\n\nfloat hash21(vec2 p){\n    p = floor(p);\n    float f = 52.9829189 * fract(dot(p, vec2(0.065, 0.005)));\n    return fract(f);\n}\n\nmat2 rot30(){ return mat2(0.8, -0.5, 0.5, 0.8); }\n\nfloat layeredNoise(vec2 fragPx){\n    vec2 p = mod(fragPx + vec2(uTime * 30.0, -uTime * 21.0), 1024.0);\n    vec2 q = rot30() * p;\n    float n = 0.0;\n    n += 0.40 * hash21(q);\n    n += 0.25 * hash21(q * 2.0 + 17.0);\n    n += 0.20 * hash21(q * 4.0 + 47.0);\n    n += 0.10 * hash21(q * 8.0 + 113.0);\n    n += 0.05 * hash21(q * 16.0 + 191.0);\n    return n;\n}\n\nvec3 rayDir(vec2 frag, vec2 res, vec2 offset, float dist){\n    float focal = res.y * max(dist, 1e-3);\n    return normalize(vec3(2.0 * (frag - offset) - res, focal));\n}\n\nfloat edgeFade(vec2 frag, vec2 res, vec2 offset){\n    vec2 toC = frag - 0.5 * res - offset;\n    float r = length(toC) / (0.5 * min(res.x, res.y));\n    float x = clamp(r, 0.0, 1.0);\n    float q = x * x * x * (x * (x * 6.0 - 15.0) + 10.0);\n    float s = q * 0.5;\n    s = pow(s, 1.5);\n    float tail = 1.0 - pow(1.0 - s, 2.0);\n    s = mix(s, tail, 0.2);\n    float dn = (layeredNoise(frag * 0.15) - 0.5) * 0.0015 * s;\n    return clamp(s + dn, 0.0, 1.0);\n}\n\nmat3 rotX(float a){ float c = cos(a), s = sin(a); return mat3(1.0,0.0,0.0, 0.0,c,-s, 0.0,s,c); }\nmat3 rotY(float a){ float c = cos(a), s = sin(a); return mat3(c,0.0,s, 0.0,1.0,0.0, -s,0.0,c); }\nmat3 rotZ(float a){ float c = cos(a), s = sin(a); return mat3(c,-s,0.0, s,c,0.0, 0.0,0.0,1.0); }\n\nvec3 sampleGradient(float t){\n    t = clamp(t, 0.0, 1.0);\n    return 0.5 + 0.5 * cos(6.28318 * (t + vec3(0.0, 0.33, 0.67)));\n}\n\nvec2 rot2(vec2 v, float a){\n    float s = sin(a), c = cos(a);\n    return mat2(c, -s, s, c) * v;\n}\n\nfloat bendAngle(vec3 q, float t){\n    float a = 0.8 * sin(q.x * 0.55 + t * 0.6)\n            + 0.7 * sin(q.y * 0.50 - t * 0.5)\n            + 0.6 * sin(q.z * 0.60 + t * 0.7);\n    return a;\n}\n\nvoid main(){\n    vec2 frag = gl_FragCoord.xy;\n    float t = uTime * uSpeed;\n    float jitterAmp = 0.1 * clamp(uNoiseAmount, 0.0, 1.0);\n    vec3 dir = rayDir(frag, uResolution, uOffset, 1.0);\n    float marchT = 0.0;\n    vec3 col = vec3(0.0);\n    float n = layeredNoise(frag);\n    vec4 c = cos(t * 0.2 + vec4(0.0, 33.0, 11.0, 0.0));\n    mat2 M2 = mat2(c.x, c.y, c.z, c.w);\n    float amp = clamp(uDistort, 0.0, 50.0) * 0.15;\n\n    mat3 rot3dMat = mat3(1.0);\n    if(uAnimType == 1){\n      vec3 ang = vec3(t * 0.31, t * 0.21, t * 0.17);\n      rot3dMat = rotZ(ang.z) * rotY(ang.y) * rotX(ang.x);\n    }\n    mat3 hoverMat = mat3(1.0);\n    if(uAnimType == 2){\n      vec2 m = uMouse * 2.0 - 1.0;\n      vec3 ang = vec3(m.y * 0.6, m.x * 0.6, 0.0);\n      hoverMat = rotY(ang.y) * rotX(ang.x);\n    }\n\n    for (int i = 0; i < 44; ++i) {\n        vec3 P = marchT * dir;\n        P.z -= 2.0;\n        float rad = length(P);\n        vec3 Pl = P * (10.0 / max(rad, 1e-6));\n\n        if(uAnimType == 0){\n            Pl.xz *= M2;\n        } else if(uAnimType == 1){\n      Pl = rot3dMat * Pl;\n        } else {\n      Pl = hoverMat * Pl;\n        }\n\n        float stepLen = min(rad - 0.3, n * jitterAmp) + 0.1;\n\n        float grow = smoothstep(0.35, 3.0, marchT);\n        float a1 = amp * grow * bendAngle(Pl * 0.6, t);\n        float a2 = 0.5 * amp * grow * bendAngle(Pl.zyx * 0.5 + 3.1, t * 0.9);\n        vec3 Pb = Pl;\n        Pb.xz = rot2(Pb.xz, a1);\n        Pb.xy = rot2(Pb.xy, a2);\n\n        float rayPattern = smoothstep(\n            0.5, 0.7,\n            sin(Pb.x + cos(Pb.y) * cos(Pb.z)) *\n            sin(Pb.z + sin(Pb.y) * cos(Pb.x + t))\n        );\n\n        if (uRayCount > 0) {\n            float ang = atan(Pb.y, Pb.x);\n            float comb = 0.5 + 0.5 * cos(float(uRayCount) * ang);\n            comb = pow(comb, 3.0);\n            rayPattern *= smoothstep(0.15, 0.95, comb);\n        }\n\n        vec3 spectralDefault = 1.0 + vec3(\n            cos(marchT * 3.0 + 0.0),\n            cos(marchT * 3.0 + 1.0),\n            cos(marchT * 3.0 + 2.0)\n        );\n\n        float saw = fract(marchT * 0.25);\n        float tRay = saw * saw * (3.0 - 2.0 * saw);\n        vec3 userGradient = 2.0 * sampleGradient(tRay);\n        vec3 spectral = (uColorCount > 0) ? userGradient : spectralDefault;\n        vec3 base = (0.05 / (0.4 + stepLen))\n                  * smoothstep(5.0, 0.0, rad)\n                  * spectral;\n\n        col += base * rayPattern;\n        marchT += stepLen;\n    }\n\n    col *= edgeFade(frag, uResolution, uOffset);\n    col *= uIntensity;\n\n    fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}';
+  function init(){ var els=document.querySelectorAll('.prismatic-burst'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uIntensity":{"t":"1f","v":1},"uSpeed":{"t":"1f","v":1},"uAnimType":{"t":"1i","v":1},"uColorCount":{"t":"1i","v":1},"uDistort":{"t":"1f","v":0.5},"uOffset":{"t":"2f","v":[0.5,0.5]},"uNoiseAmount":{"t":"1f","v":0.12},"uRayCount":{"t":"1i","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/prismatic-burst/recipe.motion.yaml

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

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

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

package/assets/upstream/recipes/web/radar/radar.js

@@ -0,0 +1,7 @@
+/* radar.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 uScale;\nuniform float uRingCount;\nuniform float uSpokeCount;\nuniform float uRingThickness;\nuniform float uSpokeThickness;\nuniform float uSweepSpeed;\nuniform float uSweepWidth;\nuniform float uSweepLobes;\nuniform vec3 uColor;\nuniform vec3 uBgColor;\nuniform float uFalloff;\nuniform float uBrightness;\nuniform vec2 uMouse;\nuniform float uMouseInfluence;\nuniform bool uEnableMouse;\n\n#define TAU 6.28318530718\n#define PI 3.14159265359\n\nvoid main() {\n  vec2 st = gl_FragCoord.xy / uResolution.xy;\n  st = st * 2.0 - 1.0;\n  st.x *= uResolution.x / uResolution.y;\n\n  if (uEnableMouse) {\n    vec2 mShift = (uMouse * 2.0 - 1.0);\n    mShift.x *= uResolution.x / uResolution.y;\n    st -= mShift * uMouseInfluence;\n  }\n\n  st *= uScale;\n\n  float dist = length(st);\n  float theta = atan(st.y, st.x);\n  float t = uTime * uSpeed;\n\n  float ringPhase = dist * uRingCount - t;\n  float ringDist = abs(fract(ringPhase) - 0.5);\n  float ringGlow = 1.0 - smoothstep(0.0, uRingThickness, ringDist);\n\n  float spokeAngle = abs(fract(theta * uSpokeCount / TAU + 0.5) - 0.5) * TAU / uSpokeCount;\n  float arcDist = spokeAngle * dist;\n  float spokeGlow = (1.0 - smoothstep(0.0, uSpokeThickness, arcDist)) * smoothstep(0.0, 0.1, dist);\n\n  float sweepPhase = t * uSweepSpeed;\n  float sweepBeam = pow(max(0.5 * sin(uSweepLobes * theta + sweepPhase) + 0.5, 0.0), uSweepWidth);\n\n  float fade = smoothstep(1.05, 0.85, dist) * pow(max(1.0 - dist, 0.0), uFalloff);\n\n  float intensity = max((ringGlow + spokeGlow + sweepBeam) * fade * uBrightness, 0.0);\n  vec3 col = uColor * intensity + uBgColor;\n\n  float alpha = clamp(length(col), 0.0, 1.0);\n  gl_FragColor = vec4(col, alpha);\n}\n';
+  function init(){ var els=document.querySelectorAll('.radar'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uSpeed":{"t":"1f","v":1},"uScale":{"t":"1f","v":0.5},"uRingCount":{"t":"1f","v":10},"uSpokeCount":{"t":"1f","v":10},"uRingThickness":{"t":"1f","v":0.05},"uSpokeThickness":{"t":"1f","v":0.01},"uSweepSpeed":{"t":"1f","v":1},"uSweepWidth":{"t":"1f","v":2},"uSweepLobes":{"t":"1f","v":1},"uColor":{"t":"3f","v":[0.6235294117647059,0.1607843137254902,1]},"uBgColor":{"t":"3f","v":[0,0,0]},"uFalloff":{"t":"1f","v":2},"uBrightness":{"t":"1f","v":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/radar/recipe.motion.yaml

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

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