npm - @xpert-ai/plugin-motion - Versions diffs - 0.1.0 - Mend

@xpert-ai/plugin-motion 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2457) hide show

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

@@ -0,0 +1,13 @@
+/* counter.js — emphasis · roll digit strips to the number on view. Reduced-motion → set instantly. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function build(el){ var n=String(el.getAttribute('data-to')||el.textContent||'0').replace(/[^0-9]/g,''); el.textContent='';
+    var strips=[]; for(var i=0;i<n.length;i++){ var d=document.createElement('span'); d.className='dig'; var strip=document.createElement('span'); strip.className='strip';
+      for(var k=0;k<=9;k++){ var s=document.createElement('span'); s.textContent=k; strip.appendChild(s); } d.appendChild(strip); el.appendChild(d); strips.push({strip:strip, target:+n[i]}); }
+    return strips; }
+  function run(strips){ strips.forEach(function(o){ o.strip.style.transform= red()?('translateY(-'+o.target+'em)'):'translateY(0)'; });
+    if(red()) return; requestAnimationFrame(function(){ requestAnimationFrame(function(){ strips.forEach(function(o){ o.strip.style.transform='translateY(-'+o.target+'em)'; }); }); }); }
+  function init(){ var els=document.querySelectorAll('.counter'); els.forEach(function(el){ var strips=build(el);
+    if(!('IntersectionObserver' in g)){ run(strips); return; } var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ run(strips); io.unobserve(e.target); } }); }, {threshold:.4}); io.observe(el); }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/counter/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>counter · recipe</title><link rel="stylesheet" href="counter.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}</style></head>
+<body><div class="badge">motion-anything · emphasis</div><span class="counter" data-to="1280" style="color:#8b7cf6">1280</span><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="counter.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: counter
+name: Counter Roll
+description: Digits roll like an odometer up to the target number — a satisfying stat reveal.
+surfaces: [web, interaction]
+canvas: [web]
+target: [number]
+intent: emphasis
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: emphasis
+tech: [css,js]
+dependencies: []
+tags: [counter,odometer,number roll,数字滚动,里程表]
+intent_keywords: [counter,odometer,number roll,数字滚动,里程表]
+best_for: ["Counter Roll — 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: css,js, files: [counter.css,counter.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/counter, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/crosshair/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: crosshair
+description: |
+  A thin crosshair spans the viewport and tracks the pointer — a precise, techy custom cursor. One per page; suits tools/dashboards. Off on touch and under prefers-reduced-motion.
+triggers: ["crosshair cursor","targeting lines","准星光标","十字定位"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# crosshair
+Crosshair Cursor Dependency-free, reduced-motion safe.
+## How to apply
+Copy `crosshair.js` and include it. Set `window.__chColor` before load to tint.

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

@@ -0,0 +1,8 @@
+/* crosshair.js — ambient · full-viewport crosshair tracks the pointer. transform only. Off on touch / reduced-motion. */
+(function(g){ 'use strict';
+  function off(){ return g.matchMedia && (g.matchMedia('(prefers-reduced-motion: reduce)').matches || g.matchMedia('(hover: none)').matches); }
+  function line(v){ var d=document.createElement('div'); d.style.cssText='position:fixed;pointer-events:none;z-index:9998;background:'+ (g.__chColor||'rgba(139,124,246,.6)') + (v?';top:0;bottom:0;width:1px':';left:0;right:0;height:1px'); document.body.appendChild(d); return d; }
+  function init(){ if(off()) return; var vx=line(true), hz=line(false);
+    addEventListener('pointermove', function(e){ vx.style.left=e.clientX+'px'; hz.style.top=e.clientY+'px'; }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/crosshair/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>crosshair · 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">precision pointer</h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="crosshair.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: crosshair
+name: Crosshair Cursor
+description: A thin crosshair spans the viewport and tracks the pointer — a precise, techy custom cursor.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background,section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [crosshair cursor,targeting lines,准星光标,十字定位]
+intent_keywords: [crosshair cursor,targeting lines,准星光标,十字定位]
+best_for: ["Crosshair 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: [crosshair.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/crosshair, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/dark-veil/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/dark-veil/dark-veil.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* dark-veil.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\n#ifdef GL_ES\nprecision lowp float;\n#endif\nuniform vec2 uResolution;\nuniform float uTime;\nuniform float uHueShift;\nuniform float uNoise;\nuniform float uScan;\nuniform float uScanFreq;\nuniform float uWarp;\n#define iTime uTime\n#define iResolution uResolution\n\nvec4 buf[8];\nfloat rand(vec2 c){return fract(sin(dot(c,vec2(12.9898,78.233)))*43758.5453);}\n\nmat3 rgb2yiq=mat3(0.299,0.587,0.114,0.596,-0.274,-0.322,0.211,-0.523,0.312);\nmat3 yiq2rgb=mat3(1.0,0.956,0.621,1.0,-0.272,-0.647,1.0,-1.106,1.703);\n\nvec3 hueShiftRGB(vec3 col,float deg){\n    vec3 yiq=rgb2yiq*col;\n    float rad=radians(deg);\n    float cosh=cos(rad),sinh=sin(rad);\n    vec3 yiqShift=vec3(yiq.x,yiq.y*cosh-yiq.z*sinh,yiq.y*sinh+yiq.z*cosh);\n    return clamp(yiq2rgb*yiqShift,0.0,1.0);\n}\n\nvec4 sigmoid(vec4 x){return 1./(1.+exp(-x));}\n\nvec4 cppn_fn(vec2 coordinate,float in0,float in1,float in2){\n    buf[6]=vec4(coordinate.x,coordinate.y,0.3948333106474662+in0,0.36+in1);\n    buf[7]=vec4(0.14+in2,sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y),0.,0.);\n    buf[0]=mat4(vec4(6.5404263,-3.6126034,0.7590882,-1.13613),vec4(2.4582713,3.1660357,1.2219609,0.06276096),vec4(-5.478085,-6.159632,1.8701609,-4.7742867),vec4(6.039214,-5.542865,-0.90925294,3.251348))*buf[6]+mat4(vec4(0.8473259,-5.722911,3.975766,1.6522468),vec4(-0.24321538,0.5839259,-1.7661959,-5.350116),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(0.21808943,1.1243913,-1.7969975,5.0294676);\n    buf[1]=mat4(vec4(-3.3522482,-6.0612736,0.55641043,-4.4719114),vec4(0.8631464,1.7432913,5.643898,1.6106541),vec4(2.4941394,-3.5012043,1.7184316,6.357333),vec4(3.310376,8.209261,1.1355612,-1.165539))*buf[6]+mat4(vec4(5.24046,-13.034365,0.009859298,15.870829),vec4(2.987511,3.129433,-0.89023495,-1.6822904),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-5.9457836,-6.573602,-0.8812491,1.5436668);\n    buf[0]=sigmoid(buf[0]);buf[1]=sigmoid(buf[1]);\n    buf[2]=mat4(vec4(-15.219568,8.095543,-2.429353,-1.9381982),vec4(-5.951362,4.3115187,2.6393783,1.274315),vec4(-7.3145227,6.7297835,5.2473326,5.9411426),vec4(5.0796127,8.979051,-1.7278991,-1.158976))*buf[6]+mat4(vec4(-11.967154,-11.608155,6.1486754,11.237008),vec4(2.124141,-6.263192,-1.7050359,-0.7021966),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-4.17164,-3.2281182,-4.576417,-3.6401186);\n    buf[3]=mat4(vec4(3.1832156,-13.738922,1.879223,3.233465),vec4(0.64300746,12.768129,1.9141049,0.50990224),vec4(-0.049295485,4.4807224,1.4733979,1.801449),vec4(5.0039253,13.000481,3.3991797,-4.5561905))*buf[6]+mat4(vec4(-0.1285731,7.720628,-3.1425676,4.742367),vec4(0.6393625,3.714393,-0.8108378,-0.39174938),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-1.1811101,-21.621881,0.7851888,1.2329718);\n    buf[2]=sigmoid(buf[2]);buf[3]=sigmoid(buf[3]);\n    buf[4]=mat4(vec4(5.214916,-7.183024,2.7228765,2.6592617),vec4(-5.601878,-25.3591,4.067988,0.4602802),vec4(-10.57759,24.286327,21.102104,37.546658),vec4(4.3024497,-1.9625226,2.3458803,-1.372816))*buf[0]+mat4(vec4(-17.6526,-10.507558,2.2587414,12.462782),vec4(6.265566,-502.75443,-12.642513,0.9112289),vec4(-10.983244,20.741234,-9.701768,-0.7635988),vec4(5.383626,1.4819539,-4.1911616,-4.8444734))*buf[1]+mat4(vec4(12.785233,-16.345072,-0.39901125,1.7955981),vec4(-30.48365,-1.8345358,1.4542528,-1.1118771),vec4(19.872723,-7.337935,-42.941723,-98.52709),vec4(8.337645,-2.7312303,-2.2927687,-36.142323))*buf[2]+mat4(vec4(-16.298317,3.5471997,-0.44300047,-9.444417),vec4(57.5077,-35.609753,16.163465,-4.1534753),vec4(-0.07470326,-3.8656476,-7.0901804,3.1523974),vec4(-12.559385,-7.077619,1.490437,-0.8211543))*buf[3]+vec4(-7.67914,15.927437,1.3207729,-1.6686112);\n    buf[5]=mat4(vec4(-1.4109162,-0.372762,-3.770383,-21.367174),vec4(-6.2103205,-9.35908,0.92529047,8.82561),vec4(11.460242,-22.348068,13.625772,-18.693201),vec4(-0.3429052,-3.9905605,-2.4626114,-0.45033523))*buf[0]+mat4(vec4(7.3481627,-4.3661838,-6.3037653,-3.868115),vec4(1.5462853,6.5488915,1.9701879,-0.58291394),vec4(6.5858274,-2.2180402,3.7127688,-1.3730392),vec4(-5.7973905,10.134961,-2.3395722,-5.965605))*buf[1]+mat4(vec4(-2.5132585,-6.6685553,-1.4029363,-0.16285264),vec4(-0.37908727,0.53738135,4.389061,-1.3024765),vec4(-0.70647055,2.0111287,-5.1659346,-3.728635),vec4(-13.562562,10.487719,-0.9173751,-2.6487076))*buf[2]+mat4(vec4(-8.645013,6.5546675,-6.3944063,-5.5933375),vec4(-0.57783127,-1.077275,36.91025,5.736769),vec4(14.283112,3.7146652,7.1452246,-4.5958776),vec4(2.7192075,3.6021907,-4.366337,-2.3653464))*buf[3]+vec4(-5.9000807,-4.329569,1.2427121,8.59503);\n    buf[4]=sigmoid(buf[4]);buf[5]=sigmoid(buf[5]);\n    buf[6]=mat4(vec4(-1.61102,0.7970257,1.4675229,0.20917463),vec4(-28.793737,-7.1390953,1.5025433,4.656581),vec4(-10.94861,39.66238,0.74318546,-10.095605),vec4(-0.7229728,-1.5483948,0.7301322,2.1687684))*buf[0]+mat4(vec4(3.2547753,21.489103,-1.0194173,-3.3100595),vec4(-3.7316632,-3.3792162,-7.223193,-0.23685838),vec4(13.1804495,0.7916005,5.338587,5.687114),vec4(-4.167605,-17.798311,-6.815736,-1.6451967))*buf[1]+mat4(vec4(0.604885,-7.800309,-7.213122,-2.741014),vec4(-3.522382,-0.12359311,-0.5258442,0.43852118),vec4(9.6752825,-22.853785,2.062431,0.099892326),vec4(-4.3196306,-17.730087,2.5184598,5.30267))*buf[2]+mat4(vec4(-6.545563,-15.790176,-6.0438633,-5.415399),vec4(-43.591583,28.551912,-16.00161,18.84728),vec4(4.212382,8.394307,3.0958717,8.657522),vec4(-5.0237565,-4.450633,-4.4768,-5.5010443))*buf[3]+mat4(vec4(1.6985557,-67.05806,6.897715,1.9004834),vec4(1.8680354,2.3915145,2.5231109,4.081538),vec4(11.158006,1.7294737,2.0738268,7.386411),vec4(-4.256034,-306.24686,8.258898,-17.132736))*buf[4]+mat4(vec4(1.6889864,-4.5852966,3.8534803,-6.3482175),vec4(1.3543309,-1.2640043,9.932754,2.9079645),vec4(-5.2770967,0.07150358,-0.13962056,3.3269649),vec4(28.34703,-4.918278,6.1044083,4.085355))*buf[5]+vec4(6.6818056,12.522166,-3.7075126,-4.104386);\n    buf[7]=mat4(vec4(-8.265602,-4.7027016,5.098234,0.7509808),vec4(8.6507845,-17.15949,16.51939,-8.884479),vec4(-4.036479,-2.3946867,-2.6055532,-1.9866527),vec4(-2.2167742,-1.8135649,-5.9759874,4.8846445))*buf[0]+mat4(vec4(6.7790847,3.5076547,-2.8191125,-2.7028968),vec4(-5.743024,-0.27844876,1.4958696,-5.0517144),vec4(13.122226,15.735168,-2.9397483,-4.101023),vec4(-14.375265,-5.030483,-6.2599335,2.9848232))*buf[1]+mat4(vec4(4.0950394,-0.94011575,-5.674733,4.755022),vec4(4.3809423,4.8310084,1.7425908,-3.437416),vec4(2.117492,0.16342592,-104.56341,16.949184),vec4(-5.22543,-2.994248,3.8350096,-1.9364246))*buf[2]+mat4(vec4(-5.900337,1.7946124,-13.604192,-3.8060522),vec4(6.6583457,31.911177,25.164474,91.81147),vec4(11.840538,4.1503043,-0.7314397,6.768467),vec4(-6.3967767,4.034772,6.1714606,-0.32874924))*buf[3]+mat4(vec4(3.4992442,-196.91893,-8.923708,2.8142626),vec4(3.4806502,-3.1846354,5.1725626,5.1804223),vec4(-2.4009497,15.585794,1.2863957,2.0252278),vec4(-71.25271,-62.441242,-8.138444,0.50670296))*buf[4]+mat4(vec4(-12.291733,-11.176166,-7.3474145,4.390294),vec4(10.805477,5.6337385,-0.9385842,-4.7348723),vec4(-12.869276,-7.039391,5.3029537,7.5436664),vec4(1.4593618,8.91898,3.5101583,5.840625))*buf[5]+vec4(2.2415268,-6.705987,-0.98861027,-2.117676);\n    buf[6]=sigmoid(buf[6]);buf[7]=sigmoid(buf[7]);\n    buf[0]=mat4(vec4(1.6794263,1.3817469,2.9625452,0.),vec4(-1.8834411,-1.4806935,-3.5924516,0.),vec4(-1.3279216,-1.0918057,-2.3124623,0.),vec4(0.2662234,0.23235129,0.44178495,0.))*buf[0]+mat4(vec4(-0.6299101,-0.5945583,-0.9125601,0.),vec4(0.17828953,0.18300213,0.18182953,0.),vec4(-2.96544,-2.5819945,-4.9001055,0.),vec4(1.4195864,1.1868085,2.5176322,0.))*buf[1]+mat4(vec4(-1.2584374,-1.0552157,-2.1688404,0.),vec4(-0.7200217,-0.52666044,-1.438251,0.),vec4(0.15345335,0.15196142,0.272854,0.),vec4(0.945728,0.8861938,1.2766753,0.))*buf[2]+mat4(vec4(-2.4218085,-1.968602,-4.35166,0.),vec4(-22.683098,-18.0544,-41.954372,0.),vec4(0.63792,0.5470648,1.1078634,0.),vec4(-1.5489894,-1.3075932,-2.6444845,0.))*buf[3]+mat4(vec4(-0.49252132,-0.39877754,-0.91366625,0.),vec4(0.95609266,0.7923952,1.640221,0.),vec4(0.30616966,0.15693925,0.8639857,0.),vec4(1.1825981,0.94504964,2.176963,0.))*buf[4]+mat4(vec4(0.35446745,0.3293795,0.59547555,0.),vec4(-0.58784515,-0.48177817,-1.0614829,0.),vec4(2.5271258,1.9991658,4.6846647,0.),vec4(0.13042648,0.08864098,0.30187556,0.))*buf[5]+mat4(vec4(-1.7718065,-1.4033192,-3.3355875,0.),vec4(3.1664357,2.638297,5.378702,0.),vec4(-3.1724713,-2.6107926,-5.549295,0.),vec4(-2.851368,-2.249092,-5.3013067,0.))*buf[6]+mat4(vec4(1.5203838,1.2212278,2.8404984,0.),vec4(1.5210563,1.2651345,2.683903,0.),vec4(2.9789467,2.4364579,5.2347264,0.),vec4(2.2270417,1.8825914,3.8028636,0.))*buf[7]+vec4(-1.5468478,-3.6171484,0.24762098,0.);\n    buf[0]=sigmoid(buf[0]);\n    return vec4(buf[0].x,buf[0].y,buf[0].z,1.);\n}\n\nvoid mainImage(out vec4 fragColor,in vec2 fragCoord){\n    vec2 uv=fragCoord/uResolution.xy*2.-1.;\n    uv.y*=-1.;\n    uv+=uWarp*vec2(sin(uv.y*6.283+uTime*0.5),cos(uv.x*6.283+uTime*0.5))*0.05;\n    fragColor=cppn_fn(uv,0.1*sin(0.3*uTime),0.1*sin(0.69*uTime),0.1*sin(0.44*uTime));\n}\n\nvoid main(){\n    vec4 col;mainImage(col,gl_FragCoord.xy);\n    col.rgb=hueShiftRGB(col.rgb,uHueShift);\n    float scanline_val=sin(gl_FragCoord.y*uScanFreq)*0.5+0.5;\n    col.rgb*=1.-(scanline_val*scanline_val)*uScan;\n    col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;\n    gl_FragColor=vec4(clamp(col.rgb,0.0,1.0),1.0);\n}\n';
+  function init(){ var els=document.querySelectorAll('.dark-veil'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uHueShift":{"t":"1f","v":0},"uNoise":{"t":"1f","v":0.12},"uScan":{"t":"1f","v":0.2},"uScanFreq":{"t":"1f","v":2},"uWarp":{"t":"1f","v":0.3}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/dark-veil/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>dark-veil · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.dark-veil{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="dark-veil"></div><div class="cap">motion-anything · ambient · dark-veil</div><script src="../_fx/shaderbg.js"></script><script src="dark-veil.js"></script></body></html>

package/assets/upstream/recipes/web/dark-veil/recipe.motion.yaml ADDED Viewed

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

@@ -0,0 +1,12 @@
+---
+name: decrypted-text
+description: |
+  Scrambled characters resolve into the real text on hover or view — a techy decode for a short label.
+  The resolved text is the real, accessible content; under prefers-reduced-motion it shows instantly.
+triggers: ["decrypted text","decode on hover","解密文字","悬停解码"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/text-animations/decrypted-text", preview: { type: html }, design_system: { requires: false } }
+---
+# decrypted-text
+Text that decodes from scrambled glyphs. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `decrypted-text.js`; `<span class="decrypt" data-text="ACCESS GRANTED">ACCESS GRANTED</span>`. Re-runs on hover.

package/assets/upstream/recipes/web/decrypted-text/decrypted-text.js ADDED Viewed

@@ -0,0 +1,11 @@
+/* decrypted-text.js — text-kinetic · resolve scrambled glyphs into the real text on hover/view. Reduced-motion → final text. */
+(function(g){ 'use strict';
+  var CH='!<>-_\\/[]{}=+*^?#'; function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function run(el){ var target=el.getAttribute('data-text')||el.textContent; if(red()){ el.textContent=target; return; }
+    var frame=0, id; clearInterval(el.__d); el.__d=setInterval(function(){ var out='';
+      for(var i=0;i<target.length;i++){ if(i < frame/2){ out+=target[i]; } else if(target[i]===' '){ out+=' '; } else { out+=CH[Math.floor(Math.random()*CH.length)]; } }
+      el.textContent=out; frame++; if(frame/2>=target.length){ clearInterval(el.__d); el.textContent=target; } }, 30); }
+  function attach(el){ if(el.__dec) return; el.__dec=1; el.setAttribute('data-text', el.getAttribute('data-text')||el.textContent); el.addEventListener('mouseenter', function(){ run(el); }); run(el); }
+  function init(){ var els=document.querySelectorAll('.decrypt'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  g.decryptEl=run; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/decrypted-text/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>decrypted-text · 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}h1{margin:0}</style></head>
+<body><div class="badge">motion-anything · text-kinetic</div><h1 style="font-family:ui-monospace,Menlo,monospace;font-size:34px;color:#39d98a"><span class="decrypt" data-text="ACCESS GRANTED">ACCESS GRANTED</span></h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="decrypted-text.js"></script></body></html>

package/assets/upstream/recipes/web/decrypted-text/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: decrypted-text
+name: Decrypted Text
+description: Scrambled characters resolve into the real text on hover or view — a techy decode.
+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: [decrypt, scramble, decode, techy, hover]
+intent_keywords: [decrypted text, decode on hover, 解密文字, 悬停解码]
+best_for: ["A short techy label that resolves on hover/view"]
+avoid_when: ["Body copy; calm/luxury tones"]
+restraint: { max_per_view: 2, notes: "Short lines. The resolved text is the real content; instant under reduced-motion." }
+motion: { duration_ms: 700, easing: linear, reduced_motion: instant, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css+js, files: [decrypted-text.js], usage: "Add class 'decrypt' + data-text; resolves on hover (or call decryptEl). Reduced-motion shows final text." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/text-animations/decrypted-text", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/dither/SKILL.md ADDED Viewed

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

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

@@ -0,0 +1,94 @@
+/* dither.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js).
+ * Hand-merged from the react-bits two-pass original (wave shader → retro Bayer-dither postprocess):
+ * the wave is procedural, so sampling pass-1 at the pixelated uv == computing the wave AT that uv —
+ * one #version 300 es frag replicates both passes with zero framebuffers. Real defaults from source. */
+(function(g){ 'use strict';
+  var FRAG = '#version 300 es\n'
+  + 'precision highp float;\n'
+  + 'out vec4 fragColor;\n'
+  + 'uniform vec2 uResolution;\n'
+  + 'uniform float uTime;\n'
+  + 'uniform vec2 uMouse;\n'
+  + 'uniform float waveSpeed;\n'
+  + 'uniform float waveFrequency;\n'
+  + 'uniform float waveAmplitude;\n'
+  + 'uniform vec3 waveColor;\n'
+  + 'uniform int enableMouseInteraction;\n'
+  + 'uniform float mouseRadius;\n'
+  + 'uniform float colorNum;\n'
+  + 'uniform float pixelSize;\n'
+  + 'vec4 mod289(vec4 x){ return x - floor(x * (1.0/289.0)) * 289.0; }\n'
+  + 'vec4 permute(vec4 x){ return mod289(((x * 34.0) + 1.0) * x); }\n'
+  + 'vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; }\n'
+  + 'vec2 fade(vec2 t){ return t*t*t*(t*(t*6.0-15.0)+10.0); }\n'
+  + 'float cnoise(vec2 P){\n'
+  + '  vec4 Pi = floor(P.xyxy) + vec4(0.0,0.0,1.0,1.0);\n'
+  + '  vec4 Pf = fract(P.xyxy) - vec4(0.0,0.0,1.0,1.0);\n'
+  + '  Pi = mod289(Pi);\n'
+  + '  vec4 ix = Pi.xzxz; vec4 iy = Pi.yyww; vec4 fx = Pf.xzxz; vec4 fy = Pf.yyww;\n'
+  + '  vec4 i = permute(permute(ix) + iy);\n'
+  + '  vec4 gx = fract(i * (1.0/41.0)) * 2.0 - 1.0;\n'
+  + '  vec4 gy = abs(gx) - 0.5; vec4 tx = floor(gx + 0.5); gx = gx - tx;\n'
+  + '  vec2 g00 = vec2(gx.x, gy.x); vec2 g10 = vec2(gx.y, gy.y);\n'
+  + '  vec2 g01 = vec2(gx.z, gy.z); vec2 g11 = vec2(gx.w, gy.w);\n'
+  + '  vec4 norm = taylorInvSqrt(vec4(dot(g00,g00), dot(g01,g01), dot(g10,g10), dot(g11,g11)));\n'
+  + '  g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w;\n'
+  + '  float n00 = dot(g00, vec2(fx.x, fy.x)); float n10 = dot(g10, vec2(fx.y, fy.y));\n'
+  + '  float n01 = dot(g01, vec2(fx.z, fy.z)); float n11 = dot(g11, vec2(fx.w, fy.w));\n'
+  + '  vec2 fade_xy = fade(Pf.xy);\n'
+  + '  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);\n'
+  + '  return 2.3 * mix(n_x.x, n_x.y, fade_xy.y);\n'
+  + '}\n'
+  + 'const int OCTAVES = 4;\n'
+  + 'float fbm(vec2 p){\n'
+  + '  float value = 0.0; float amp = 1.0; float freq = waveFrequency;\n'
+  + '  for (int i = 0; i < OCTAVES; i++){ value += amp * abs(cnoise(p)); p *= freq; amp *= waveAmplitude; }\n'
+  + '  return value;\n'
+  + '}\n'
+  + 'float pattern(vec2 p){ vec2 p2 = p - uTime * waveSpeed; return fbm(p + fbm(p2)); }\n'
+  + 'const float bayerMatrix8x8[64] = float[64](\n'
+  + '  0.0/64.0, 48.0/64.0, 12.0/64.0, 60.0/64.0,  3.0/64.0, 51.0/64.0, 15.0/64.0, 63.0/64.0,\n'
+  + '  32.0/64.0,16.0/64.0, 44.0/64.0, 28.0/64.0, 35.0/64.0,19.0/64.0, 47.0/64.0, 31.0/64.0,\n'
+  + '  8.0/64.0, 56.0/64.0,  4.0/64.0, 52.0/64.0, 11.0/64.0,59.0/64.0,  7.0/64.0, 55.0/64.0,\n'
+  + '  40.0/64.0,24.0/64.0, 36.0/64.0, 20.0/64.0, 43.0/64.0,27.0/64.0, 39.0/64.0, 23.0/64.0,\n'
+  + '  2.0/64.0, 50.0/64.0, 14.0/64.0, 62.0/64.0,  1.0/64.0,49.0/64.0, 13.0/64.0, 61.0/64.0,\n'
+  + '  34.0/64.0,18.0/64.0, 46.0/64.0, 30.0/64.0, 33.0/64.0,17.0/64.0, 45.0/64.0, 29.0/64.0,\n'
+  + '  10.0/64.0,58.0/64.0,  6.0/64.0, 54.0/64.0,  9.0/64.0,57.0/64.0,  5.0/64.0, 53.0/64.0,\n'
+  + '  42.0/64.0,26.0/64.0, 38.0/64.0, 22.0/64.0, 41.0/64.0,25.0/64.0, 37.0/64.0, 21.0/64.0\n'
+  + ');\n'
+  + 'vec3 dither(vec2 uv, vec3 color){\n'
+  + '  vec2 scaledCoord = floor(uv * uResolution / pixelSize);\n'
+  + '  int x = int(mod(scaledCoord.x, 8.0)); int y = int(mod(scaledCoord.y, 8.0));\n'
+  + '  float threshold = bayerMatrix8x8[y * 8 + x] - 0.25;\n'
+  + '  float step = 1.0 / (colorNum - 1.0);\n'
+  + '  color += threshold * step;\n'
+  + '  float bias = 0.2;\n'
+  + '  color = clamp(color - bias, 0.0, 1.0);\n'
+  + '  return floor(color * (colorNum - 1.0) + 0.5) / (colorNum - 1.0);\n'
+  + '}\n'
+  + 'void main(){\n'
+  + '  vec2 uvScreen = gl_FragCoord.xy / uResolution;\n'
+  + '  vec2 normalizedPixelSize = pixelSize / uResolution;\n'
+  + '  vec2 uvPixel = normalizedPixelSize * floor(uvScreen / normalizedPixelSize);\n'
+  + '  vec2 fragPix = uvPixel * uResolution;\n'
+  + '  vec2 uv = fragPix / uResolution - 0.5;\n'
+  + '  uv.x *= uResolution.x / uResolution.y;\n'
+  + '  float f = pattern(uv);\n'
+  + '  if (enableMouseInteraction == 1) {\n'
+  + '    vec2 mouseNDC = uMouse - 0.5;\n'      /* shaderbg uMouse is 0..1, bottom-origin — already "up" */
+  + '    mouseNDC.x *= uResolution.x / uResolution.y;\n'
+  + '    float dist = length(uv - mouseNDC);\n'
+  + '    float effect = 1.0 - smoothstep(0.0, mouseRadius, dist);\n'
+  + '    f -= 0.5 * effect;\n'
+  + '  }\n'
+  + '  vec3 col = mix(vec3(0.0), waveColor, f);\n'
+  + '  col = dither(uvScreen, col);\n'
+  + '  fragColor = vec4(col, 1.0);\n'
+  + '}\n';
+  function init(){ var els=document.querySelectorAll('.dither'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{
+      waveSpeed:{t:'1f',v:0.05}, waveFrequency:{t:'1f',v:3}, waveAmplitude:{t:'1f',v:0.3},
+      waveColor:{t:'3f',v:[0.5,0.5,0.5]}, enableMouseInteraction:{t:'1i',v:1}, mouseRadius:{t:'1f',v:1},
+      colorNum:{t:'1f',v:4}, pixelSize:{t:'1f',v:2} } }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/dither/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>dither · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.dither{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="dither"></div><div class="cap">motion-anything · ambient · dither</div><script src="../_fx/shaderbg.js"></script><script src="dither.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: dither
+name: Dither
+description: A retro Bayer-dithered noise wave — pixelated, quantized, faithful GPU shader.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [background, hero, ambient, dither]
+intent_keywords: [dither, animated background, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple animated backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One animated background per view; scrim behind text. Static frame under reduced-motion." }
+motion: { duration_ms: 0, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [../_fx/shaderbg.js, dither.js], usage: "Copy the file(s); add a full-bleed <div class=\"dither\"></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/dock/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: dock
+description: |
+  A macOS-style dock whose icons magnify toward the cursor — a delightful app-launcher row. One dock per view. Icons stay flat under prefers-reduced-motion.
+triggers: ["dock","magnify dock","macos dock","程序坞","放大停靠栏"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# dock
+Magnify Dock Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="dock"><div class="dk">★</div>…</div>`. Pairs with reicon SVGs.

package/assets/upstream/recipes/web/dock/dock.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* dock.css — hover-press · dock icons scale toward the pointer. transform only. */
+.dock{ display:inline-flex; align-items:flex-end; gap:10px; padding:10px 14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); }
+.dock .dk{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,#2a2551,#14151c); color:#e7e8ee; transition: transform .16s cubic-bezier(.16,1,.3,1); transform-origin:bottom; cursor:pointer; }
+@media (prefers-reduced-motion: reduce){ .dock .dk{ transition:none; transform:none !important } }

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

@@ -0,0 +1,9 @@
+/* dock.js — hover-press · scale each icon by proximity to the pointer. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function attach(el){ if(el.__dk) return; el.__dk=1; var items=[].slice.call(el.querySelectorAll('.dk')); if(red()) return;
+    el.addEventListener('pointermove', function(e){ items.forEach(function(d){ var r=d.getBoundingClientRect(); var dist=Math.abs(e.clientX-(r.left+r.width/2)); var s=Math.max(1, 1.6 - dist/140); d.style.transform='scale('+s+')'; }); });
+    el.addEventListener('pointerleave', function(){ items.forEach(function(d){ d.style.transform='scale(1)'; }); }); }
+  function init(){ var els=document.querySelectorAll('.dock'); 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/dock/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>dock · recipe</title><link rel="stylesheet" href="dock.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}</style></head>
+<body><div class="badge">motion-anything · hover-press</div><div class="dock"><div class="dk">★</div><div class="dk">♥</div><div class="dk">✦</div><div class="dk">➜</div><div class="dk">◎</div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="dock.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: dock
+name: Magnify Dock
+description: A macOS-style dock whose icons magnify toward the cursor — a delightful app-launcher row.
+surfaces: [web, interaction]
+canvas: [web]
+target: [list,button]
+intent: hover-press
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css,js]
+dependencies: []
+tags: [dock,magnify,macos dock,程序坞,放大停靠栏]
+intent_keywords: [dock,magnify,macos dock,程序坞,放大停靠栏]
+best_for: ["Magnify Dock — one tasteful use"]
+avoid_when: ["Overuse; touch-only where relevant; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [dock.css,dock.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/dock, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/dot-field/SKILL.md ADDED Viewed

@@ -0,0 +1,12 @@
+---
+name: dot-field
+description: |
+  A gradient dot lattice that bulges away from the pointer with a soft cursor glow. A marketing-grade hero backdrop. One per view; scrim behind text.
+  Renders a static frame under prefers-reduced-motion.
+triggers: ["dot-field","animated background","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# dot-field
+A gradient dot lattice that bulges away from the pointer with a soft cursor glow.
+## How to apply
+Copy `dot-field.js`; add `<div class="dot-field" style="position:absolute;inset:0"></div>` behind content.

package/assets/upstream/recipes/web/dot-field/dot-field.js ADDED Viewed

@@ -0,0 +1,108 @@
+/* dot-field.js — motion-anything recipe · interaction · faithful canvas 2D port (dependency-free).
+ * A gradient dot lattice that bulges away from the pointer (speed-gated engagement) with a soft
+ * glow following the cursor. The original renders the glow in an SVG overlay; this port draws it
+ * on the same canvas (same look, one element). Real defaults from source. */
+(function(g){ 'use strict';
+  var DEF = { dotRadius:1.5, dotSpacing:14, cursorRadius:500, cursorForce:0.1, bulgeOnly:true,
+    bulgeStrength:67, glowRadius:160, sparkle:false, waveAmplitude:0,
+    gradientFrom:'rgba(168, 85, 247, 0.35)', gradientTo:'rgba(180, 151, 207, 0.25)', glowColor:'#120F17' };
+  var TWO_PI = Math.PI*2;
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function start(el){
+    if(el.__ma) return; el.__ma = 1;
+    var canvas = document.createElement('canvas');
+    canvas.style.cssText = 'width:100%;height:100%;display:block';
+    el.appendChild(canvas);
+    var ctx = canvas.getContext('2d', { alpha:true });
+    var dpr = Math.min(g.devicePixelRatio||1, 2);
+    var dots = [], W=0, H=0;
+    function buildDots(){
+      var step = DEF.dotRadius + DEF.dotSpacing;
+      var cols = Math.floor(W/step), rows = Math.floor(H/step);
+      var padX = (W % step)/2, padY = (H % step)/2;
+      dots = [];
+      for(var row=0;row<rows;row++) for(var col=0;col<cols;col++){
+        var ax = padX + col*step + step/2, ay = padY + row*step + step/2;
+        dots.push({ ax:ax, ay:ay, sx:ax, sy:ay, vx:0, vy:0, x:ax, y:ay });
+      }
+    }
+    function doResize(){
+      var r = el.getBoundingClientRect(); W = r.width; H = r.height;
+      canvas.width = W*dpr; canvas.height = H*dpr; ctx.setTransform(dpr,0,0,dpr,0,0);
+      buildDots();
+    }
+    doResize();
+    var resizeTimer; g.addEventListener('resize', function(){ clearTimeout(resizeTimer); resizeTimer = setTimeout(doResize, 100); });
+    var mouse = { x:-9999, y:-9999, prevX:-9999, prevY:-9999, speed:0 };
+    el.addEventListener('pointermove', function(e){ var r = el.getBoundingClientRect();
+      mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; }, { passive:true });
+    setInterval(function(){
+      var dx = mouse.prevX - mouse.x, dy = mouse.prevY - mouse.y;
+      var dist = Math.sqrt(dx*dx + dy*dy);
+      mouse.speed += (dist - mouse.speed)*0.5; if(mouse.speed < 0.001) mouse.speed = 0;
+      mouse.prevX = mouse.x; mouse.prevY = mouse.y;
+    }, 20);
+    var engagement = 0, glowOpacity = 0, frameCount = 0, red = reduced();
+    function tick(){
+      frameCount++;
+      var t = frameCount*0.02;
+      var targetEngagement = Math.min(mouse.speed/5, 1);
+      engagement += (targetEngagement - engagement)*0.06; if(engagement < 0.001) engagement = 0;
+      glowOpacity += (engagement - glowOpacity)*0.08;
+      ctx.clearRect(0, 0, W, H);
+      var grad = ctx.createLinearGradient(0, 0, W, H);
+      grad.addColorStop(0, DEF.gradientFrom); grad.addColorStop(1, DEF.gradientTo);
+      ctx.fillStyle = grad;
+      var cr = DEF.cursorRadius, crSq = cr*cr, rad = DEF.dotRadius/2;
+      ctx.beginPath();
+      for(var i=0;i<dots.length;i++){ var d = dots[i];
+        var dx = mouse.x - d.ax, dy = mouse.y - d.ay, distSq = dx*dx + dy*dy;
+        if(distSq < crSq && engagement > 0.01){
+          var dist = Math.sqrt(distSq);
+          if(DEF.bulgeOnly){
+            var k = 1 - dist/cr;
+            var push = k*k*DEF.bulgeStrength*engagement;
+            var angle = Math.atan2(dy, dx);
+            d.sx += (d.ax - Math.cos(angle)*push - d.sx)*0.15;
+            d.sy += (d.ay - Math.sin(angle)*push - d.sy)*0.15;
+          } else {
+            var ang = Math.atan2(dy, dx);
+            var mv = (500/dist)*(mouse.speed*DEF.cursorForce);
+            d.vx += Math.cos(ang)*-mv; d.vy += Math.sin(ang)*-mv;
+          }
+        } else if(DEF.bulgeOnly){
+          d.sx += (d.ax - d.sx)*0.1; d.sy += (d.ay - d.sy)*0.1;
+        }
+        if(!DEF.bulgeOnly){
+          d.vx *= 0.9; d.vy *= 0.9;
+          d.x = d.ax + d.vx; d.y = d.ay + d.vy;
+          d.sx += (d.x - d.sx)*0.1; d.sy += (d.y - d.sy)*0.1;
+        }
+        var drawX = d.sx, drawY = d.sy;
+        if(DEF.waveAmplitude > 0){
+          drawY += Math.sin(d.ax*0.03 + t)*DEF.waveAmplitude;
+          drawX += Math.cos(d.ay*0.03 + t*0.7)*DEF.waveAmplitude*0.5;
+        }
+        if(DEF.sparkle){
+          var hash = ((i*2654435761) ^ (frameCount>>3)) >>> 0;
+          var rr = (hash % 100) < 3 ? rad*1.8 : rad;
+          ctx.moveTo(drawX + rr, drawY); ctx.arc(drawX, drawY, rr, 0, TWO_PI);
+        } else {
+          ctx.moveTo(drawX + rad, drawY); ctx.arc(drawX, drawY, rad, 0, TWO_PI);
+        }
+      }
+      ctx.fill();
+      if(glowOpacity > 0.01){ // cursor glow — SVG overlay in the original, same canvas here
+        var gl = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, DEF.glowRadius);
+        gl.addColorStop(0, DEF.glowColor); gl.addColorStop(1, 'rgba(0,0,0,0)');
+        ctx.globalAlpha = glowOpacity; ctx.fillStyle = gl;
+        ctx.fillRect(mouse.x - DEF.glowRadius, mouse.y - DEF.glowRadius, DEF.glowRadius*2, DEF.glowRadius*2);
+        ctx.globalAlpha = 1;
+      }
+      if(!red) requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  }
+  function init(){ var els=document.querySelectorAll('.dot-field'); for(var i=0;i<els.length;i++) start(els[i]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/dot-field/preview.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>dot-field · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.dot-field{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="dot-field"></div><div class="cap">motion-anything · ambient · dot-field</div><script src="dot-field.js"></script></body></html>

package/assets/upstream/recipes/web/dot-field/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: dot-field
+name: Dot Field
+description: A gradient dot lattice that bulges away from the pointer with a soft cursor glow.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [background, hero, ambient, dot-field]
+intent_keywords: [dot-field, animated background, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple animated backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One animated background per view; scrim behind text. Static frame under reduced-motion." }
+motion: { duration_ms: 0, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [dot-field.js], usage: "Copy the file(s); add a full-bleed <div class=\"dot-field\"></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/dot-grid/SKILL.md ADDED Viewed

@@ -0,0 +1,12 @@
+---
+name: dot-grid
+description: |
+  An interactive dot grid — pointer proximity glow, shove on fast moves, click shockwave, elastic return. A marketing-grade hero backdrop. One per view; scrim behind text.
+  Renders a static frame under prefers-reduced-motion.
+triggers: ["dot-grid","animated background","动态背景"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# dot-grid
+An interactive dot grid — pointer proximity glow, shove on fast moves, click shockwave, elastic return.
+## How to apply
+Copy `dot-grid.js`; add `<div class="dot-grid" style="position:absolute;inset:0"></div>` behind content.