@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/web/_fx/shaderbg.js

@@ -0,0 +1,58 @@
+/* shaderbg.js — motion-anything · a tiny dependency-free full-screen fragment-shader runner.
+ * Replaces ogl/three for react-bits-style background shaders. Handles both WebGL1
+ * (attribute/varying/gl_FragColor) and WebGL2 (#version 300 es / in / out) fragment shaders.
+ *
+ * Usage:  ShaderBG(container, FRAG, { uniforms:{ uColor:{t:'3f',v:[1,1,1]}, uSpeed:{t:'1f',v:1} } })
+ *   - Auto uniforms (set each frame if present): uTime/iTime (seconds), uResolution/iResolution
+ *     (vec2 or vec3, auto-detected), uMouse (vec2, 0..1, follows the pointer).
+ *   - Renders a static frame under prefers-reduced-motion. Falls back to data-fallback bg if no WebGL. */
+(function (g) {
+  'use strict';
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function compile(gl, type, src){ var s=gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
+    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.warn('[shaderbg]', gl.getShaderInfoLog(s)); return s; }
+
+  g.ShaderBG = function (el, FRAG, opts) {
+    if(!el || el.__sbg) return; el.__sbg = 1; opts = opts || {};
+    var isGL2 = /#version\s+300/.test(FRAG);
+    var canvas=document.createElement('canvas'); canvas.style.cssText='width:100%;height:100%;display:block'; el.appendChild(canvas);
+    var gl = isGL2 ? canvas.getContext('webgl2', {alpha:true, premultipliedAlpha:true, antialias:true}) : null;
+    if(!gl) gl = canvas.getContext('webgl', {alpha:true, premultipliedAlpha:true, antialias:true});
+    if(!gl){ el.style.background = el.getAttribute('data-fallback') || '#0b0b12'; return; }
+    var gl2 = isGL2 && (gl instanceof (g.WebGL2RenderingContext||function(){}));
+    var VERT = gl2
+      ? '#version 300 es\nin vec2 position;\nin vec2 uv;\nout vec2 vUv;\nvoid main(){ vUv=uv; gl_Position=vec4(position,0.0,1.0); }\n'
+      : 'attribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\nvoid main(){ vUv=uv; gl_Position=vec4(position,0.0,1.0); }\n';
+    gl.clearColor(0,0,0,0); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    var p=gl.createProgram(); gl.attachShader(p, compile(gl,gl.VERTEX_SHADER,VERT)); gl.attachShader(p, compile(gl,gl.FRAGMENT_SHADER,FRAG)); gl.linkProgram(p);
+    if(!gl.getProgramParameter(p, gl.LINK_STATUS)){ console.warn('[shaderbg] link', gl.getProgramInfoLog(p)); el.style.background = el.getAttribute('data-fallback') || '#0b0b12'; return; }
+    gl.useProgram(p);
+    // full-screen triangle: position + matching uv
+    var pos=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,pos); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1, 3,-1, -1,3]),gl.STATIC_DRAW);
+    var lp=gl.getAttribLocation(p,'position'); gl.enableVertexAttribArray(lp); gl.vertexAttribPointer(lp,2,gl.FLOAT,false,0,0);
+    var lu=gl.getAttribLocation(p,'uv'); if(lu>=0){ var uvb=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,uvb); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([0,0, 2,0, 0,2]),gl.STATIC_DRAW); gl.enableVertexAttribArray(lu); gl.vertexAttribPointer(lu,2,gl.FLOAT,false,0,0); }
+    // uniform locations
+    var U={}; ['uTime','iTime','uResolution','iResolution','uMouse'].forEach(function(n){ U[n]=gl.getUniformLocation(p,n); });
+    var resDim3 = /vec3\s+(uResolution|iResolution)/.test(FRAG);
+    var custom=[]; var uni=opts.uniforms||{}; Object.keys(uni).forEach(function(n){ var loc=gl.getUniformLocation(p,n); if(loc!=null) custom.push({loc:loc, s:uni[n]}); });
+    function setU(c){ var t=c.s.t, v=c.s.v; if(t==='1f') gl.uniform1f(c.loc,v); else if(t==='2f') gl.uniform2f(c.loc,v[0],v[1]); else if(t==='3f') gl.uniform3f(c.loc,v[0],v[1],v[2]); else if(t==='1i') gl.uniform1i(c.loc,v); else if(t==='3fv') gl.uniform3fv(c.loc,new Float32Array(v)); else if(t==='2fv') gl.uniform2fv(c.loc,new Float32Array(v)); else if(t==='1fv') gl.uniform1fv(c.loc,new Float32Array(v)); }
+    custom.forEach(setU);
+    var mouse=[0.5,0.5]; el.addEventListener('pointermove', function(e){ var r=el.getBoundingClientRect(); mouse=[(e.clientX-r.left)/r.width, 1.0-(e.clientY-r.top)/r.height]; });
+    var W=1,H=1; function resize(){ W=Math.max(1,el.offsetWidth||600); H=Math.max(1,el.offsetHeight||360); canvas.width=W; canvas.height=H; gl.viewport(0,0,W,H); }
+    g.addEventListener('resize', resize); resize();
+    var red=reduced();
+    var ts=opts.timeScale||1, lastTime=red?2.0:0;
+    function frame(t){ var time = red ? 2.0 : t*0.001*ts; lastTime=time;
+      if(U.uTime) gl.uniform1f(U.uTime, time); if(U.iTime) gl.uniform1f(U.iTime, time);
+      if(U.uResolution){ resDim3 ? gl.uniform3f(U.uResolution,W,H,1) : gl.uniform2f(U.uResolution,W,H); }
+      if(U.iResolution){ resDim3 ? gl.uniform3f(U.iResolution,W,H,1) : gl.uniform2f(U.iResolution,W,H); }
+      if(U.uMouse) gl.uniform2f(U.uMouse, mouse[0], mouse[1]);
+      gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,0,3); if(!red) requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+    // Handle for interactive recipes (e.g. click-ripple uniforms): set a custom uniform at runtime.
+    return { gl:gl, program:p, canvas:canvas, el:el,
+      time:function(){ return lastTime; },
+      set:function(name, spec){ var loc=gl.getUniformLocation(p,name); if(loc==null) return; setU({loc:loc, s:spec}); } };
+  };
+})(window);

package/assets/upstream/recipes/web/attention-pulse/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: attention-pulse
+description: |
+  A soft expanding ring that draws the eye to ONE element — a primary CTA, an unread badge, a new
+  dot. Honors prefers-reduced-motion. One per screen; never use more than one at once or as pure
+  decoration (attention splits and nothing wins).
+triggers:
+  - "draw attention"
+  - "pulse ring"
+  - "notification dot"
+  - "引导注意"
+  - "脉冲提示"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use attention-pulse on the primary CTA only: a soft expanding ring on a gentle loop, with a
+    prefers-reduced-motion fallback. Just one pulsing element on the screen.
+---
+
+# attention-pulse
+
+A soft expanding ring to draw the eye to one element. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+
+## When to use it
+- A single primary CTA, an unread/new badge, or a notification dot.
+
+## When NOT to use it (restraint)
+- More than one pulsing element at once. As decoration with no real call to act.
+
+## How to apply
+1. Copy `attention-pulse.css` and link it.
+2. Add `data-pulse` to the element (set `--pulse-color` to match your accent).
+
+## Accessibility & performance
+- `prefers-reduced-motion`: no pulse. Transform/opacity only (GPU-safe).

package/assets/upstream/recipes/web/attention-pulse/attention-pulse.css

@@ -0,0 +1,26 @@
+/* attention-pulse.css — motion-anything recipe · category: attention
+ * A soft expanding ring to draw the eye to ONE element. Transform + opacity only.
+ * reduced-motion: no pulse. */
+
+[data-pulse] { position: relative; }
+[data-pulse]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 2px solid var(--pulse-color, #8b7cf6);
+  opacity: 0;
+  transform: scale(1);
+  animation: ma-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+@keyframes ma-pulse {
+  0%   { opacity: 0.5; transform: scale(1); }
+  70%  { opacity: 0;   transform: scale(1.5); }
+  100% { opacity: 0;   transform: scale(1.5); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-pulse]::after { animation: none; display: none; }
+}

package/assets/upstream/recipes/web/attention-pulse/preview.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>attention-pulse · motion-anything recipe</title>
+  <link rel="stylesheet" href="attention-pulse.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin:0; min-height:100vh; display:grid; place-items:center; gap:30px;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 120% at 50% 0%, #fff, #f4f5f7); color:#1a1d24; }
+    .badge { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8b909a; }
+    .cta { border:0; background:#8b7cf6; color:#fff; padding:14px 26px; border-radius:14px; font-size:16px; font-weight:600; }
+    .bell { position:relative; width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid #ececf1;
+      display:grid; place-items:center; font-size:20px; }
+    .dot { position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:#e0683c; }
+  </style>
+</head>
+<body>
+  <div style="text-align:center">
+    <div class="badge">motion-anything · attention</div>
+  </div>
+  <button class="cta" data-pulse>Start free</button>
+  <div class="bell">🔔<span class="dot" data-pulse style="--pulse-color:#e0683c"></span></div>
+</body>
+</html>

package/assets/upstream/recipes/web/attention-pulse/recipe.motion.yaml

@@ -0,0 +1,57 @@
+spec_version: 1
+id: attention-pulse
+name: Attention Pulse
+description: A soft expanding ring that draws the eye to one element — a CTA, a badge, a new dot.
+
+# legacy aliases (kept for CLI / back-compat)
+surfaces: [web, interaction]
+category: attention
+tech: [css]
+
+# 五维分类（建库标准）
+canvas:  [web, app]
+target:  [button, icon]
+intent:  attention
+runtime: [css]
+export:  [skill, motion-json, html]
+
+dependencies: []
+tags: [attention, pulse, ring, cta, badge, nudge]
+
+intent_keywords:
+  - draw attention
+  - pulse ring
+  - notify dot
+  - 引导注意
+  - 脉冲提示
+best_for:
+  - A single primary CTA you want noticed
+  - An unread / new badge or notification dot
+avoid_when:
+  - More than one pulsing element on screen (attention splits, nothing wins)
+  - As decoration with no real call to act
+restraint:
+  max_per_view: 1
+  notes: One nudge per screen. A soft ring, not a strobe — never loop aggressively.
+
+motion:
+  duration_ms: 2000
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+
+entry: preview.html
+implementations:
+  - tech: css
+    files: [attention-pulse.css]
+    usage: |
+      Add data-pulse to the element (set --pulse-color to taste). A soft ring expands and fades on loop.
+
+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/aurora/SKILL.md

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

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

@@ -0,0 +1,55 @@
+/* aurora.js — motion-anything recipe · category: ambient
+ * A living aurora gradient mesh — a GPU fragment shader run in dependency-free raw WebGL2.
+ * (Faithful port of the Aurora shader; ogl replaced with plain WebGL2.) Static frame under reduced-motion. */
+(function (g) {
+  'use strict';
+  var VERT = '#version 300 es\nin vec2 position;\nvoid main(){ gl_Position = vec4(position, 0.0, 1.0); }\n';
+  var FRAG = '#version 300 es\n\
+precision highp float;\n\
+uniform float uTime; uniform float uAmplitude; uniform vec3 uColorStops[3]; uniform vec2 uResolution; uniform float uBlend;\n\
+out vec4 fragColor;\n\
+vec3 permute(vec3 x){ return mod(((x*34.0)+1.0)*x, 289.0); }\n\
+float snoise(vec2 v){ const vec4 C = vec4(0.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);\n\
+  vec2 i=floor(v+dot(v,C.yy)); vec2 x0=v-i+dot(i,C.xx); vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);\n\
+  vec4 x12=x0.xyxy+C.xxzz; x12.xy-=i1; i=mod(i,289.0);\n\
+  vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));\n\
+  vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0); m=m*m; m=m*m;\n\
+  vec3 x=2.0*fract(p*C.www)-1.0; vec3 h=abs(x)-0.5; vec3 ox=floor(x+0.5); vec3 a0=x-ox;\n\
+  m*=1.79284291400159-0.85373472095314*(a0*a0+h*h);\n\
+  vec3 gg; gg.x=a0.x*x0.x+h.x*x0.y; gg.yz=a0.yz*x12.xz+h.yz*x12.yw; return 130.0*dot(m,gg); }\n\
+struct ColorStop { vec3 color; float position; };\n\
+#define COLOR_RAMP(colors,factor,finalColor){ int index=0; for(int i=0;i<2;i++){ ColorStop cc=colors[i]; bool ib=cc.position<=factor; index=int(mix(float(index),float(i),float(ib))); } ColorStop cc=colors[index]; ColorStop nc=colors[index+1]; float range=nc.position-cc.position; float lf=(factor-cc.position)/range; finalColor=mix(cc.color,nc.color,lf); }\n\
+void main(){ vec2 uv=gl_FragCoord.xy/uResolution;\n\
+  ColorStop colors[3]; colors[0]=ColorStop(uColorStops[0],0.0); colors[1]=ColorStop(uColorStops[1],0.5); colors[2]=ColorStop(uColorStops[2],1.0);\n\
+  vec3 rampColor; COLOR_RAMP(colors, uv.x, rampColor);\n\
+  float height=snoise(vec2(uv.x*2.0+uTime*0.1, uTime*0.25))*0.5*uAmplitude; height=exp(height); height=(uv.y*2.0-height+0.2);\n\
+  float intensity=0.6*height; float midPoint=0.20; float aa=smoothstep(midPoint-uBlend*0.5, midPoint+uBlend*0.5, intensity);\n\
+  vec3 auroraColor=intensity*rampColor; fragColor=vec4(auroraColor*aa, aa); }\n';
+
+  function hex(h){ h=String(h).replace('#',''); return [parseInt(h.substr(0,2),16)/255, parseInt(h.substr(2,2),16)/255, parseInt(h.substr(4,2),16)/255]; }
+  function sh(gl, t, src){ var s=gl.createShader(t); gl.shaderSource(s, src); gl.compileShader(s); if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.warn(gl.getShaderInfoLog(s)); return s; }
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+
+  function run(ctn){
+    var canvas=document.createElement('canvas'); canvas.style.cssText='width:100%;height:100%;display:block'; ctn.appendChild(canvas);
+    var gl=canvas.getContext('webgl2',{alpha:true, premultipliedAlpha:true, antialias:true});
+    if(!gl){ ctn.style.background='linear-gradient(135deg,#5227FF,#7cff67)'; return; }
+    gl.clearColor(0,0,0,0); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    var p=gl.createProgram(); gl.attachShader(p, sh(gl,gl.VERTEX_SHADER,VERT)); gl.attachShader(p, sh(gl,gl.FRAGMENT_SHADER,FRAG)); gl.linkProgram(p); gl.useProgram(p);
+    var buf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
+    var loc=gl.getAttribLocation(p,'position'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
+    var uTime=gl.getUniformLocation(p,'uTime'), uRes=gl.getUniformLocation(p,'uResolution'), uAmp=gl.getUniformLocation(p,'uAmplitude'), uBlend=gl.getUniformLocation(p,'uBlend'), uStops=gl.getUniformLocation(p,'uColorStops');
+    var stops=(ctn.getAttribute('data-colors')||'#5227FF,#7cff67,#5227FF').split(',');
+    var flat=[]; stops.slice(0,3).forEach(function(c){ flat=flat.concat(hex(c)); });
+    function resize(){ var w=ctn.offsetWidth||600, h=ctn.offsetHeight||360; canvas.width=w; canvas.height=h; gl.viewport(0,0,w,h); gl.uniform2f(uRes,w,h); }
+    g.addEventListener('resize', resize); resize();
+    gl.uniform1f(uAmp, parseFloat(ctn.getAttribute('data-amp'))||1.0);
+    gl.uniform1f(uBlend, parseFloat(ctn.getAttribute('data-blend'))||0.5);
+    gl.uniform3fv(uStops, new Float32Array(flat));
+    var red=reduced();
+    function frame(t){ gl.uniform1f(uTime, (red?2000:t)*0.001); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,0,3); if(!red) requestAnimationFrame(frame); }
+    requestAnimationFrame(frame);
+  }
+  function init(){ var els=document.querySelectorAll('.aurora'); for(var i=0;i<els.length;i++) if(!els[i].__a){ els[i].__a=1; run(els[i]); } }
+  g.attachAurora=run; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/aurora/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>aurora · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;background:#05060a;overflow:hidden}.aurora{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="aurora" data-colors="#5227FF,#7cff67,#5227FF" data-amp="1.0" data-blend="0.5"></div><div class="cap">motion-anything · ambient · aurora (dependency-free WebGL2)</div><script src="aurora.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: aurora
+name: Aurora
+description: A living GPU shader background — faithful fragment shader run 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, gradient, hero, ambient]
+intent_keywords: [aurora, shader background, webgl gradient, 着色器背景, 动态背景]
+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; put a scrim behind text. Renders a 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, aurora.js], usage: "Copy _fx/shaderbg.js + aurora.js; add a full-bleed <div class=\"aurora\"></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/balatro/SKILL.md

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

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

@@ -0,0 +1,7 @@
+/* balatro.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\n#define PI 3.14159265359\n\nuniform float iTime;\nuniform vec3 iResolution;\nuniform float uSpinRotation;\nuniform float uSpinSpeed;\nuniform vec2 uOffset;\nuniform vec4 uColor1;\nuniform vec4 uColor2;\nuniform vec4 uColor3;\nuniform float uContrast;\nuniform float uLighting;\nuniform float uSpinAmount;\nuniform float uPixelFilter;\nuniform float uSpinEase;\nuniform bool uIsRotate;\nuniform vec2 uMouse;\n\nvarying vec2 vUv;\n\nvec4 effect(vec2 screenSize, vec2 screen_coords) {\n    float pixel_size = length(screenSize.xy) / uPixelFilter;\n    vec2 uv = (floor(screen_coords.xy * (1.0 / pixel_size)) * pixel_size - 0.5 * screenSize.xy) / length(screenSize.xy) - uOffset;\n    float uv_len = length(uv);\n    \n    float speed = (uSpinRotation * uSpinEase * 0.2);\n    if(uIsRotate){\n       speed = iTime * speed;\n    }\n    speed += 302.2;\n    \n    float mouseInfluence = (uMouse.x * 2.0 - 1.0);\n    speed += mouseInfluence * 0.1;\n    \n    float new_pixel_angle = atan(uv.y, uv.x) + speed - uSpinEase * 20.0 * (uSpinAmount * uv_len + (1.0 - uSpinAmount));\n    vec2 mid = (screenSize.xy / length(screenSize.xy)) / 2.0;\n    uv = (vec2(uv_len * cos(new_pixel_angle) + mid.x, uv_len * sin(new_pixel_angle) + mid.y) - mid);\n    \n    uv *= 30.0;\n    float baseSpeed = iTime * uSpinSpeed;\n    speed = baseSpeed + mouseInfluence * 2.0;\n    \n    vec2 uv2 = vec2(uv.x + uv.y);\n    \n    for(int i = 0; i < 5; i++) {\n        uv2 += sin(max(uv.x, uv.y)) + uv;\n        uv += 0.5 * vec2(\n            cos(5.1123314 + 0.353 * uv2.y + speed * 0.131121),\n            sin(uv2.x - 0.113 * speed)\n        );\n        uv -= cos(uv.x + uv.y) - sin(uv.x * 0.711 - uv.y);\n    }\n    \n    float contrast_mod = (0.25 * uContrast + 0.5 * uSpinAmount + 1.2);\n    float paint_res = min(2.0, max(0.0, length(uv) * 0.035 * contrast_mod));\n    float c1p = max(0.0, 1.0 - contrast_mod * abs(1.0 - paint_res));\n    float c2p = max(0.0, 1.0 - contrast_mod * abs(paint_res));\n    float c3p = 1.0 - min(1.0, c1p + c2p);\n    float light = (uLighting - 0.2) * max(c1p * 5.0 - 4.0, 0.0) + uLighting * max(c2p * 5.0 - 4.0, 0.0);\n    \n    return (0.3 / uContrast) * uColor1 + (1.0 - 0.3 / uContrast) * (uColor1 * c1p + uColor2 * c2p + vec4(c3p * uColor3.rgb, c3p * uColor1.a)) + light;\n}\n\nvoid main() {\n    vec2 uv = vUv * iResolution.xy;\n    gl_FragColor = effect(iResolution.xy, uv);\n}\n';
+  function init(){ var els=document.querySelectorAll('.balatro'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uSpinRotation":{"t":"1f","v":1},"uSpinSpeed":{"t":"1f","v":1},"uOffset":{"t":"2f","v":[0.5,0.5]},"uColor1":{"t":"3f","v":[1,1,1]},"uColor2":{"t":"3f","v":[1,1,1]},"uColor3":{"t":"3f","v":[1,1,1]},"uContrast":{"t":"1f","v":1},"uLighting":{"t":"1f","v":1},"uSpinAmount":{"t":"1f","v":1},"uPixelFilter":{"t":"1f","v":1},"uSpinEase":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

@@ -0,0 +1,11 @@
+---
+name: blob-cursor
+description: |
+  A soft gooey blob trails the cursor with a springy lag — a playful custom pointer for a hero section. One per page; can distract on content-heavy pages. Hidden on touch and under prefers-reduced-motion.
+triggers: ["blob cursor","gooey pointer","果冻光标","跟随色块"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# blob-cursor
+Blob Cursor Dependency-free, reduced-motion safe.
+## How to apply
+Copy `blob-cursor.js` and include it — a blob follows the pointer page-wide.

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

@@ -0,0 +1,10 @@
+/* blob-cursor.js — ambient · a springy blob follows the pointer. transform only. Hidden 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 init(){ if(off()) return; var b=document.createElement('div');
+    b.style.cssText='position:fixed;left:0;top:0;width:34px;height:34px;border-radius:50%;pointer-events:none;z-index:9998;background:radial-gradient(circle at 35% 35%,#a99bff,#6d54e6);filter:blur(2px);mix-blend-mode:screen;transform:translate(-50%,-50%)';
+    document.body.appendChild(b); var tx=innerWidth/2, ty=innerHeight/2, x=tx, y=ty;
+    addEventListener('pointermove', function(e){ tx=e.clientX; ty=e.clientY; });
+    (function loop(){ x+=(tx-x)*.18; y+=(ty-y)*.18; b.style.left=x+'px'; b.style.top=y+'px'; requestAnimationFrame(loop); })(); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/blob-cursor/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>blob-cursor · recipe</title>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-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 · ambient</div><h1 style="font-size:34px;font-weight:800">move your cursor around ✦</h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="blob-cursor.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: blob-cursor
+name: Blob Cursor
+description: A soft gooey blob trails the cursor with a springy lag — a playful custom pointer.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background,section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [blob cursor,gooey pointer,果冻光标,跟随色块]
+intent_keywords: [blob cursor,gooey pointer,果冻光标,跟随色块]
+best_for: ["Blob Cursor — one tasteful use"]
+avoid_when: ["Touch-only contexts; overuse; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Off/plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [blob-cursor.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/blob-cursor, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

@@ -0,0 +1,12 @@
+---
+name: blur-text
+description: |
+  Words resolve from a soft blur, one after another — a calm, premium headline entrance. One headline
+  per view; not body copy. Under prefers-reduced-motion it appears instantly and sharp.
+triggers: ["blur text","blur in headline","模糊入场","虚化聚焦文字"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/text-animations/blur-text", preview: { type: html }, design_system: { requires: false } }
+---
+# blur-text
+A headline that resolves from blur, word by word. Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<h1 data-blur-text>Your headline</h1>`.

package/assets/upstream/recipes/web/blur-text/blur-text.css

@@ -0,0 +1,5 @@
+/* blur-text.css — text-kinetic · words resolve from blur, staggered. filter/opacity only. */
+[data-blur-text] .bt-w { display:inline-block; opacity:0; filter:blur(8px); transition: opacity .62s ease-out, filter .62s ease-out; transition-delay: var(--bt-d,0ms); }
+[data-blur-text].in .bt-w { opacity:1; filter:blur(0); }
+[data-blur-text] .bt-sp { display:inline-block; width:.28em; }
+@media (prefers-reduced-motion: reduce){ [data-blur-text] .bt-w{ opacity:1; filter:none; transition:none } }

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

@@ -0,0 +1,11 @@
+/* blur-text.js — text-kinetic · split words + stagger a blur→focus. Reduced-motion → instant. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function split(el){ var parts=el.textContent.split(/(\s+)/); el.textContent=''; var i=0;
+    parts.forEach(function(p){ if(p===''){return;} if(/^\s+$/.test(p)){ var sp=document.createElement('span'); sp.className='bt-sp'; el.appendChild(sp); return; }
+      var w=document.createElement('span'); w.className='bt-w'; w.textContent=p; w.style.setProperty('--bt-d',(i*90)+'ms'); i++; el.appendChild(w); }); }
+  function init(){ var els=document.querySelectorAll('[data-blur-text]'); if(!els.length) return;
+    els.forEach(split); if(red()){ els.forEach(function(e){ e.classList.add('in'); }); return; }
+    requestAnimationFrame(function(){ requestAnimationFrame(function(){ els.forEach(function(e){ e.classList.add('in'); }); }); }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/blur-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>blur-text · recipe</title><link rel="stylesheet" href="blur-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 data-blur-text style="font-size:40px;font-weight:800">motion that means something</h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="blur-text.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: blur-text
+name: Blur Text
+description: Words resolve from a soft blur, one after another — a calm, premium headline entrance.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: text-kinetic
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: text-kinetic
+tech: [css, js]
+dependencies: []
+tags: [text, blur, focus, entrance, headline, premium]
+intent_keywords: [blur text, blur in headline, 模糊入场, 虚化聚焦文字]
+best_for: ["A hero headline that should arrive calmly"]
+avoid_when: ["Body copy; more than one per view"]
+restraint: { max_per_view: 1, notes: "One headline. Under reduced-motion it appears instantly, sharp." }
+motion: { duration_ms: 620, easing: ease-out, reduced_motion: instant, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css+js, files: [blur-text.css, blur-text.js], usage: "Add data-blur-text to a heading; JS splits into words, CSS blurs→focuses each with stagger." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/text-animations/blur-text", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/border-beam/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: border-beam
+description: |
+  Give one card or CTA a lively accent: a small bright comet of light travels around its border.
+  Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view.
+  Pure CSS; fully static under prefers-reduced-motion.
+triggers:
+  - "border beam"
+  - "traveling light border"
+  - "comet border"
+  - "animated outline accent"
+  - "边框光点"
+  - "环绕流光"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://magicui.design/docs/components/border-beam"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use border-beam on the "New" feature card: a small bright comet travels the border. Just that one
+    card; static under reduced-motion.
+---
+
+# border-beam
+
+A bright comet that travels an element's border. 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
+- A single "new" / "featured" card or a hero CTA that should feel lively for a beat.
+
+## When NOT to use it (restraint)
+- Several at once (competing beams = noise). **One per view.**
+- Calm/serious contexts — or when a quieter full-border glow fits: use **shine-border** instead.
+
+## How to apply
+1. Copy `border-beam.css` into the project and link it.
+2. Mark the element:
+   ```html
+   <div class="beam"> … </div>
+   ```
+3. Tune `--beam-color`, `--beam-size`, and the animation duration (default 3s).
+
+## Accessibility & performance
+- Under `prefers-reduced-motion` the beam stops; a plain static border remains.
+- Animates a masked conic-gradient (via `@property --beam-angle`) — compositor-friendly.
+
+## Framework notes
+- Pure CSS; works in any framework. Scope `--beam-*` per component.

package/assets/upstream/recipes/web/border-beam/border-beam.css

@@ -0,0 +1,52 @@
+/* border-beam.css — motion-anything recipe · category: ambient
+ * A small bright comet travels the border via a rotating conic-gradient masked to a thin ring.
+ * Livelier than shine-border. Compositor-friendly; fully static under reduced-motion. */
+
+@property --beam-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.beam {
+  --beam-angle: 0deg;
+  --beam-color: #8b7cf6;
+  --beam-size: 1.5px;
+  position: relative;
+  border-radius: 16px;
+  background: #14151c;
+  color: #e7e8ee;
+  isolation: isolate;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.beam::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  padding: var(--beam-size);
+  /* a tight bright arc (the comet head) + faint tail, everything else transparent */
+  background: conic-gradient(
+    from var(--beam-angle),
+    transparent 0%,
+    color-mix(in srgb, var(--beam-color) 30%, transparent) 4%,
+    var(--beam-color) 8%,
+    #fff 9%,
+    var(--beam-color) 10%,
+    transparent 16%,
+    transparent 100%
+  );
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  filter: drop-shadow(0 0 3px var(--beam-color));
+  animation: beam-travel 3s linear infinite;
+}
+@keyframes beam-travel { to { --beam-angle: 360deg; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .beam::before { animation: none; background: none; filter: none;
+    border: var(--beam-size) solid rgba(139, 124, 246, 0.4); }
+}