@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/web/dot-grid/dot-grid.js

@@ -0,0 +1,91 @@
+/* dot-grid.js — motion-anything recipe · interaction · faithful canvas 2D port (dependency-free).
+ * A grid of dots that lights up near the pointer, gets shoved by fast pointer moves, and blasts
+ * outward on click — each dot springs back elastically. The original uses GSAP InertiaPlugin
+ * (paid); this port replaces it with an underdamped spring integrator (impulse + elastic return,
+ * one integrator). Real defaults from source. */
+(function(g){ 'use strict';
+  var DEF = { dotSize:16, gap:32, baseColor:'#5227FF', activeColor:'#5227FF', proximity:150,
+    speedTrigger:100, shockRadius:250, shockStrength:5, maxSpeed:5000 };
+  var SPRING_K = 90, SPRING_C = 11, IMPULSE = 9; // underdamped ≈ elastic.out feel
+  function reduced(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function hexToRgb(hex){ var m = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+    return m ? { r:parseInt(m[1],16), g:parseInt(m[2],16), b:parseInt(m[3],16) } : { r:0,g:0,b:0 }; }
+  function throttle(fn, limit){ var last=0; return function(){ var now=performance.now();
+    if(now-last>=limit){ last=now; fn.apply(this, arguments); } }; }
+  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');
+    var baseRgb = hexToRgb(DEF.baseColor), activeRgb = hexToRgb(DEF.activeColor);
+    var dots = [], W=0, H=0, dpr = Math.min(g.devicePixelRatio||1, 2);
+    function buildGrid(){
+      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);
+      var cell = DEF.dotSize + DEF.gap;
+      var cols = Math.floor((W + DEF.gap) / cell), rows = Math.floor((H + DEF.gap) / cell);
+      var startX = (W - (cell*cols - DEF.gap))/2 + DEF.dotSize/2;
+      var startY = (H - (cell*rows - DEF.gap))/2 + DEF.dotSize/2;
+      dots = [];
+      for(var y=0;y<rows;y++) for(var x=0;x<cols;x++)
+        dots.push({ cx:startX + x*cell, cy:startY + y*cell, ox:0, oy:0, vx:0, vy:0 });
+    }
+    buildGrid();
+    g.addEventListener('resize', buildGrid);
+    var mouse = { x:-9999, y:-9999, lx:0, ly:0, lt:0 };
+    var proxSq = DEF.proximity*DEF.proximity;
+    function impulse(dot, pushX, pushY){ dot.vx += pushX*IMPULSE; dot.vy += pushY*IMPULSE; }
+    el.addEventListener('pointermove', throttle(function(e){
+      var r = el.getBoundingClientRect();
+      var now = performance.now(), dt = mouse.lt ? now - mouse.lt : 16;
+      var mvx = (e.clientX - mouse.lx)/dt*1000, mvy = (e.clientY - mouse.ly)/dt*1000;
+      var speed = Math.hypot(mvx, mvy);
+      if(speed > DEF.maxSpeed){ var s = DEF.maxSpeed/speed; mvx*=s; mvy*=s; speed = DEF.maxSpeed; }
+      mouse.lt = now; mouse.lx = e.clientX; mouse.ly = e.clientY;
+      mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
+      if(speed > DEF.speedTrigger){
+        for(var i=0;i<dots.length;i++){ var d = dots[i];
+          var dist = Math.hypot(d.cx - mouse.x, d.cy - mouse.y);
+          if(dist < DEF.proximity && Math.hypot(d.vx, d.vy) < 40)
+            impulse(d, (d.cx - mouse.x)*0.02 + mvx*0.005, (d.cy - mouse.y)*0.02 + mvy*0.005);
+        }
+      }
+    }, 50), { passive:true });
+    el.addEventListener('click', function(e){
+      var r = el.getBoundingClientRect(), cx = e.clientX - r.left, cy = e.clientY - r.top;
+      for(var i=0;i<dots.length;i++){ var d = dots[i];
+        var dist = Math.hypot(d.cx - cx, d.cy - cy);
+        if(dist < DEF.shockRadius){
+          var falloff = Math.max(0, 1 - dist/DEF.shockRadius);
+          impulse(d, (d.cx - cx)*DEF.shockStrength*falloff*0.06, (d.cy - cy)*DEF.shockStrength*falloff*0.06);
+        }
+      }
+    });
+    var red = reduced(), lastT = 0;
+    function draw(t){
+      var dt = Math.min(0.033, lastT ? (t - lastT)/1000 : 0.016); lastT = t;
+      ctx.clearRect(0, 0, W, H);
+      for(var i=0;i<dots.length;i++){ var d = dots[i];
+        // underdamped spring toward rest — shove + elastic return in one integrator
+        d.vx += (-SPRING_K*d.ox - SPRING_C*d.vx)*dt*10; d.vy += (-SPRING_K*d.oy - SPRING_C*d.vy)*dt*10;
+        d.ox += d.vx*dt; d.oy += d.vy*dt;
+        var dx = d.cx - mouse.x, dy = d.cy - mouse.y, dsq = dx*dx + dy*dy;
+        var fill = DEF.baseColor;
+        if(dsq <= proxSq){
+          var k = 1 - Math.sqrt(dsq)/DEF.proximity;
+          fill = 'rgb(' + Math.round(baseRgb.r + (activeRgb.r-baseRgb.r)*k) + ',' +
+            Math.round(baseRgb.g + (activeRgb.g-baseRgb.g)*k) + ',' +
+            Math.round(baseRgb.b + (activeRgb.b-baseRgb.b)*k) + ')';
+        }
+        ctx.beginPath();
+        ctx.arc(d.cx + d.ox, d.cy + d.oy, DEF.dotSize/2, 0, Math.PI*2);
+        ctx.fillStyle = fill; ctx.fill();
+      }
+      if(!red) requestAnimationFrame(draw);
+    }
+    requestAnimationFrame(draw);
+  }
+  function init(){ var els=document.querySelectorAll('.dot-grid'); 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-grid/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>dot-grid · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.dot-grid{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-grid"></div><div class="cap">motion-anything · ambient · dot-grid</div><script src="dot-grid.js"></script></body></html>

package/assets/upstream/recipes/web/dot-grid/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: dot-grid
+name: Dot Grid
+description: An interactive dot grid — pointer proximity glow, shove on fast moves, click shockwave, elastic return.
+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-grid]
+intent_keywords: [dot-grid, 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-grid.js], usage: "Copy the file(s); add a full-bleed <div class=\"dot-grid\"></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/elastic-slider/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: elastic-slider
+description: |
+  A slider with a springy fill and knob — playful, tactile input. Use for a single prominent control (volume, brightness). Under prefers-reduced-motion it moves without the spring.
+triggers: ["elastic slider","springy slider","弹性滑块","回弹滑动条"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# elastic-slider
+Elastic Slider Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="es"><div class="es-track"><div class="es-fill"></div><div class="es-knob"></div></div></div>`.

package/assets/upstream/recipes/web/elastic-slider/elastic-slider.css

@@ -0,0 +1,6 @@
+/* elastic-slider.css — feedback-delight · a slider with a springy fill. transform/width only. */
+.es{ width:260px; }
+.es .es-track{ position:relative; height:8px; border-radius:6px; background:#2a2b36; cursor:pointer; }
+.es .es-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg,#8b7cf6,#39d98a); width:40%; transition: width .12s cubic-bezier(.34,1.56,.64,1); }
+.es .es-knob{ position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.3); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
+@media (prefers-reduced-motion: reduce){ .es .es-fill,.es .es-knob{ transition:none } }

package/assets/upstream/recipes/web/elastic-slider/elastic-slider.js

@@ -0,0 +1,10 @@
+/* elastic-slider.js — feedback-delight · drag the track; springy fill + knob. */
+(function(g){ 'use strict';
+  function attach(el){ if(el.__es) return; el.__es=1; var track=el.querySelector('.es-track'), fill=el.querySelector('.es-fill'), knob=el.querySelector('.es-knob');
+    function set(clientX){ var r=track.getBoundingClientRect(); var p=Math.max(0,Math.min(1,(clientX-r.left)/r.width)); fill.style.width=(p*100)+'%'; knob.style.left=(p*100)+'%'; }
+    var drag=false; track.addEventListener('pointerdown', function(e){ drag=true; set(e.clientX); track.setPointerCapture(e.pointerId); });
+    track.addEventListener('pointermove', function(e){ if(drag) set(e.clientX); }); track.addEventListener('pointerup', function(){ drag=false; });
+    knob.style.left='40%'; }
+  function init(){ var els=document.querySelectorAll('.es'); 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/elastic-slider/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>elastic-slider · recipe</title><link rel="stylesheet" href="elastic-slider.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 · feedback-delight</div><div class="es"><div class="es-track"><div class="es-fill"></div><div class="es-knob"></div></div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="elastic-slider.js"></script></body></html>

package/assets/upstream/recipes/web/elastic-slider/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: elastic-slider
+name: Elastic Slider
+description: A slider whose track stretches elastically as you drag past the ends — playful, tactile input.
+surfaces: [web, interaction]
+canvas: [web]
+target: [section]
+intent: feedback-delight
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: feedback-delight
+tech: [css,js]
+dependencies: []
+tags: [elastic slider,springy slider,弹性滑块,回弹滑动条]
+intent_keywords: [elastic slider,springy slider,弹性滑块,回弹滑动条]
+best_for: ["Elastic Slider — 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: [elastic-slider.css,elastic-slider.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/elastic-slider, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

@@ -0,0 +1,12 @@
+---
+name: electric-border
+description: |
+  A jittery electric outline traces a card — an energetic accent for one hero element. One per view.
+  Pure CSS; a static solid outline remains under prefers-reduced-motion.
+triggers: ["electric border","energetic outline","电流边框","能量描边"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/animations/electric-border", preview: { type: html }, design_system: { requires: false } }
+---
+# electric-border
+An energetic animated outline. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `electric-border.css`; `<div class="electric"> … </div>`. Tune `--elec-color`.

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

@@ -0,0 +1,8 @@
+/* electric-border.css — ambient · a jittery dashed outline animates around a card. Static under reduced-motion. */
+.electric { --elec-color:#7cf; position:relative; border-radius:14px; background:#14151c; }
+.electric::before { content:""; position:absolute; inset:-2px; border-radius:16px; border:2px solid var(--elec-color);
+  filter: drop-shadow(0 0 4px var(--elec-color)); clip-path: inset(0 round 16px);
+  animation: elec-dash 0.9s linear infinite; opacity:.9; }
+.electric::before { border-style: dashed; stroke-dasharray: 6 6; }
+@keyframes elec-dash { to { transform: translateX(6px); } }
+@media (prefers-reduced-motion: reduce){ .electric::before{ animation:none; border-style:solid } }

package/assets/upstream/recipes/web/electric-border/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>electric-border · recipe</title><link rel="stylesheet" href="electric-border.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 · ambient</div><div class="electric" style="padding:26px 34px;color:#e7e8ee"><h3 style="margin:0">⚡ Live now</h3></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p></body></html>

package/assets/upstream/recipes/web/electric-border/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: electric-border
+name: Electric Border
+description: A jittery electric outline traces a card — an energetic accent for one hero element.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, button]
+intent: ambient
+runtime: [css]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css]
+dependencies: []
+tags: [electric, border, energy, ambient, accent]
+intent_keywords: [electric border, energetic outline, 电流边框, 能量描边]
+best_for: ["One hero card/CTA that should feel energetic"]
+avoid_when: ["Calm surfaces", "Many at once"]
+restraint: { max_per_view: 1, notes: "One per view; energetic by design. Static outline under reduced-motion." }
+motion: { duration_ms: 900, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css, files: [electric-border.css], usage: "Add class 'electric' to a card. Tune --elec-color. Pure CSS." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/animations/electric-border", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/fade-content/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: fade-content
+description: |
+  Content fades and rises gently as it enters the viewport — the calm default reveal. Reveal a few key blocks, not everything; keep travel small. Instant under prefers-reduced-motion.
+triggers: ["fade in on view","reveal on scroll","进入视口淡入","滚动淡入"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# fade-content
+Fade + rise on view. Dependency-free, reduced-motion safe.
+## How to apply
+Copy the css+js; add class `fade-content` (optional `--fc-delay` for stagger). Auto-reveals once on view.

package/assets/upstream/recipes/web/fade-content/fade-content.css

@@ -0,0 +1,4 @@
+/* fade-content.css — scroll-reveal · fade + gentle rise on view (once). opacity/transform only. */
+.fade-content { opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: var(--fc-delay, 0ms); will-change: opacity, transform; }
+.fade-content.in { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce){ .fade-content{ opacity:1; transform:none; transition:none } }

package/assets/upstream/recipes/web/fade-content/fade-content.js

@@ -0,0 +1,8 @@
+/* fade-content.js — scroll-reveal · IntersectionObserver adds .in once. Reduced-motion → visible instantly. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function init(){ var els=document.querySelectorAll('.fade-content'); if(red()||!('IntersectionObserver' in g)){ for(var i=0;i<els.length;i++) els[i].classList.add('in'); return; }
+    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } }); }, {threshold:.15});
+    for(var j=0;j<els.length;j++) io.observe(els[j]); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/fade-content/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>fade-content · recipe</title><link rel="stylesheet" href="fade-content.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 · scroll-reveal</div><div style="display:grid;gap:14px"><div class="fade-content" style="background:#14151c;border:1px solid #2a2b36;border-radius:12px;padding:20px 26px">Scroll me into view ↓</div><div class="fade-content" style="--fc-delay:120ms;background:#14151c;border:1px solid #2a2b36;border-radius:12px;padding:20px 26px">…staggered by delay</div></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="fade-content.js"></script></body></html>

package/assets/upstream/recipes/web/fade-content/recipe.motion.yaml

@@ -0,0 +1,25 @@
+spec_version: 1
+id: fade-content
+name: Fade Content
+description: Content fades and rises gently as it scrolls into view — the calm default reveal.
+surfaces: [web, interaction]
+canvas: [web]
+target: [section,card,text]
+intent: scroll-reveal
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: scroll-reveal
+tech: [css,js]
+dependencies: []
+tags: [fade,reveal,on-view,scroll,entrance]
+intent_keywords: [fade in on view, reveal on scroll, 进入视口淡入, 滚动淡入]
+best_for: ["A few key blocks on a long page"]
+avoid_when: ["Above-the-fold hero; every node"]
+restraint: { max_per_view: 8, notes: "Use sparingly; tasteful. 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: [fade-content.css,fade-content.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: null, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/fade-in-up/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: fade-in-up
+description: |
+  Rise + fade key elements in as the page loads, optionally staggered. Use for hero content and
+  a small group of important elements. Honors prefers-reduced-motion. For long lists or off-screen
+  content use scroll-reveal instead; never delay must-read content by more than a moment.
+triggers:
+  - "fade in"
+  - "entrance animation"
+  - "appear smoothly"
+  - "入场动效"
+  - "优雅出现"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use fade-in-up on the hero: rise + fade the eyebrow, headline, subhead and CTA in a short
+    stagger, with a prefers-reduced-motion fallback.
+---
+
+# fade-in-up
+
+A clean rise + fade entrance, on load. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+
+## When to use it
+- Hero content and a few key elements appearing on first paint.
+
+## When NOT to use it (restraint)
+- Long lists / off-screen content — use `scroll-reveal`.
+- Don't delay must-read content by more than ~300ms; keep to ≤3 staggered elements.
+
+## How to apply
+1. Copy `fade-in-up.css` and `fade-in-up.js` and link them.
+2. Mark elements: `<h1 data-fade>…</h1>` (optional `data-fade-delay="80"`; auto-staggers otherwise).
+
+## Accessibility & performance
+- `prefers-reduced-motion`: shown immediately. Transform/opacity only.

package/assets/upstream/recipes/web/fade-in-up/fade-in-up.css

@@ -0,0 +1,16 @@
+/* fade-in-up.css — motion-anything recipe · category: entrance
+ * Transform + opacity only. Ships a prefers-reduced-motion fallback. */
+
+[data-fade] {
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
+              transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--fade-delay, 0ms);
+  will-change: opacity, transform;
+}
+[data-fade].is-in { opacity: 1; transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-fade] { opacity: 1; transform: none; transition: none; }
+}

package/assets/upstream/recipes/web/fade-in-up/fade-in-up.js

@@ -0,0 +1,33 @@
+/* fade-in-up.js — motion-anything recipe · category: entrance
+ *
+ * Rises + fades [data-fade] elements in on load. Optional per-element stagger via
+ * data-fade-delay="80" (ms), or auto-staggered by document order when omitted.
+ * Honors prefers-reduced-motion (shows everything immediately).
+ *
+ * Usage:  <h1 data-fade>…</h1>  <p data-fade data-fade-delay="80">…</p>
+ */
+(function () {
+  'use strict';
+  function init() {
+    var els = document.querySelectorAll('[data-fade]');
+    if (!els.length) return;
+
+    var reduce = window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) {
+      els.forEach(function (el) { el.classList.add('is-in'); });
+      return;
+    }
+    els.forEach(function (el, i) {
+      var d = el.getAttribute('data-fade-delay');
+      el.style.setProperty('--fade-delay', (d != null ? parseInt(d, 10) : i * 70) + 'ms');
+    });
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        els.forEach(function (el) { el.classList.add('is-in'); });
+      });
+    });
+  }
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();

package/assets/upstream/recipes/web/fade-in-up/preview.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>fade-in-up · motion-anything recipe</title>
+  <link rel="stylesheet" href="fade-in-up.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin:0; min-height:100vh; display:grid; place-items:center; text-align:center;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 120% at 50% 0%, #fff, #f4f5f7); color:#1a1d24; }
+    .badge { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8b909a; }
+    h1 { font-size:34px; margin:12px 0 10px; letter-spacing:-.02em; }
+    p { color:#6b7280; margin:0 auto 22px; max-width:380px; }
+    .btn { border:0; background:#8b7cf6; color:#fff; padding:12px 20px; border-radius:12px; font-size:15px; font-weight:600; }
+    .replay { margin-top:30px; font-size:13px; color:#9aa0aa; background:none; border:0; cursor:pointer; text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge" data-fade>motion-anything · entrance</div>
+    <h1 data-fade data-fade-delay="80">It just feels right</h1>
+    <p data-fade data-fade-delay="160">A clean rise + fade as the page comes in — staggered, restrained, accessible.</p>
+    <button class="btn" data-fade data-fade-delay="240">Get started</button>
+    <div><button class="replay" onclick="location.reload()">↻ replay</button></div>
+  </div>
+  <script src="fade-in-up.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/fade-in-up/recipe.motion.yaml

@@ -0,0 +1,47 @@
+spec_version: 1
+id: fade-in-up
+name: Fade In Up
+description: A clean rise + fade for elements as they appear on the page (on load).
+surfaces: [web]
+category: entrance
+tech: [css, js]
+dependencies: []
+tags: [entrance, fade, rise, appear, stagger]
+
+intent_keywords:
+  - fade in
+  - appear smoothly
+  - entrance
+  - 入场
+  - 优雅出现
+best_for:
+  - Hero content and key elements appearing on first paint
+  - A staggered entrance for a small group of elements
+avoid_when:
+  - Long lists (use scroll-reveal so off-screen items animate as you reach them)
+  - Delaying content the user must read immediately by more than ~300ms
+restraint:
+  max_per_view: 3
+  notes: At most a few elements; stagger 40–80ms and finish within the slow band.
+
+motion:
+  duration_ms: 460
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [fade-in-up.css, fade-in-up.js]
+    usage: |
+      Add data-fade to elements (optional data-fade-delay="80"). On load they rise + fade in.
+
+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/falling-text/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: falling-text
+description: |
+  Letters drop into place one after another — a light, gravity-flavored headline entrance. One short
+  playful line; not body copy. Instant under prefers-reduced-motion.
+triggers: ["falling text","letters drop in","掉落文字","逐字下落"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/text-animations/falling-text", preview: { type: html }, design_system: { requires: false } }
+---
+# falling-text
+A headline whose letters drop in. Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<h1 data-falling>Your line</h1>`.

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

@@ -0,0 +1,4 @@
+/* falling-text.css — text-kinetic · letters drop in, staggered with a soft bounce. transform/opacity only. */
+[data-falling] .fl-c { display:inline-block; opacity:0; transform: translateY(-.7em); transition: opacity .5s ease-out, transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay: var(--fl-d,0ms); }
+[data-falling].in .fl-c { opacity:1; transform:none; }
+@media (prefers-reduced-motion: reduce){ [data-falling] .fl-c{ opacity:1; transform:none; transition:none } }

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

@@ -0,0 +1,10 @@
+/* falling-text.js — text-kinetic · split letters + stagger a drop-in. Reduced-motion → instant. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function split(el){ var t=el.textContent; el.textContent=''; var k=0;
+    t.split('').forEach(function(c){ if(c===' '){ el.appendChild(document.createTextNode(' ')); return; } var s=document.createElement('span'); s.className='fl-c'; s.textContent=c; s.style.setProperty('--fl-d',(k*55)+'ms'); k++; el.appendChild(s); }); }
+  function init(){ var els=document.querySelectorAll('[data-falling]'); 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/falling-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>falling-text · recipe</title><link rel="stylesheet" href="falling-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-falling style="font-size:44px;font-weight:800">motion, anything</h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="falling-text.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: falling-text
+name: Falling Text
+description: Letters drop into place one after another — a light, gravity-flavored 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, fall, drop, gravity, entrance, headline]
+intent_keywords: [falling text, letters drop in, 掉落文字, 逐字下落]
+best_for: ["A short playful headline entrance"]
+avoid_when: ["Body copy; serious tones; more than one per view"]
+restraint: { max_per_view: 1, notes: "One short line. Instant under reduced-motion." }
+motion: { duration_ms: 700, easing: ease-out, reduced_motion: instant, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css+js, files: [falling-text.css, falling-text.js], usage: "Add data-falling to a heading; JS splits letters, CSS drops each in with stagger + slight bounce." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/text-animations/falling-text", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/faulty-terminal/SKILL.md

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

package/assets/upstream/recipes/web/faulty-terminal/faulty-terminal.js

@@ -0,0 +1,7 @@
+/* faulty-terminal.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\nprecision mediump float;\n\nvarying vec2 vUv;\n\nuniform float iTime;\nuniform vec3  iResolution;\nuniform float uScale;\n\nuniform vec2  uGridMul;\nuniform float uDigitSize;\nuniform float uScanlineIntensity;\nuniform float uGlitchAmount;\nuniform float uFlickerAmount;\nuniform float uNoiseAmp;\nuniform float uChromaticAberration;\nuniform float uDither;\nuniform float uCurvature;\nuniform vec3  uTint;\nuniform vec2  uMouse;\nuniform float uMouseStrength;\nuniform float uUseMouse;\nuniform float uPageLoadProgress;\nuniform float uUsePageLoadAnimation;\nuniform float uBrightness;\n\nfloat time;\n\nfloat hash21(vec2 p){\n  p = fract(p * 234.56);\n  p += dot(p, p + 34.56);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p)\n{\n  return sin(p.x * 10.0) * sin(p.y * (3.0 + sin(time * 0.090909))) + 0.2; \n}\n\nmat2 rotate(float angle)\n{\n  float c = cos(angle);\n  float s = sin(angle);\n  return mat2(c, -s, s, c);\n}\n\nfloat fbm(vec2 p)\n{\n  p *= 1.1;\n  float f = 0.0;\n  float amp = 0.5 * uNoiseAmp;\n  \n  mat2 modify0 = rotate(time * 0.02);\n  f += amp * noise(p);\n  p = modify0 * p * 2.0;\n  amp *= 0.454545;\n  \n  mat2 modify1 = rotate(time * 0.02);\n  f += amp * noise(p);\n  p = modify1 * p * 2.0;\n  amp *= 0.454545;\n  \n  mat2 modify2 = rotate(time * 0.08);\n  f += amp * noise(p);\n  \n  return f;\n}\n\nfloat pattern(vec2 p, out vec2 q, out vec2 r) {\n  vec2 offset1 = vec2(1.0);\n  vec2 offset0 = vec2(0.0);\n  mat2 rot01 = rotate(0.1 * time);\n  mat2 rot1 = rotate(0.1);\n  \n  q = vec2(fbm(p + offset1), fbm(rot01 * p + offset1));\n  r = vec2(fbm(rot1 * q + offset0), fbm(q + offset0));\n  return fbm(p + r);\n}\n\nfloat digit(vec2 p){\n    vec2 grid = uGridMul * 15.0;\n    vec2 s = floor(p * grid) / grid;\n    p = p * grid;\n    vec2 q, r;\n    float intensity = pattern(s * 0.1, q, r) * 1.3 - 0.03;\n    \n    if(uUseMouse > 0.5){\n        vec2 mouseWorld = uMouse * uScale;\n        float distToMouse = distance(s, mouseWorld);\n        float mouseInfluence = exp(-distToMouse * 8.0) * uMouseStrength * 10.0;\n        intensity += mouseInfluence;\n        \n        float ripple = sin(distToMouse * 20.0 - iTime * 5.0) * 0.1 * mouseInfluence;\n        intensity += ripple;\n    }\n    \n    if(uUsePageLoadAnimation > 0.5){\n        float cellRandom = fract(sin(dot(s, vec2(12.9898, 78.233))) * 43758.5453);\n        float cellDelay = cellRandom * 0.8;\n        float cellProgress = clamp((uPageLoadProgress - cellDelay) / 0.2, 0.0, 1.0);\n        \n        float fadeAlpha = smoothstep(0.0, 1.0, cellProgress);\n        intensity *= fadeAlpha;\n    }\n    \n    p = fract(p);\n    p *= uDigitSize;\n    \n    float px5 = p.x * 5.0;\n    float py5 = (1.0 - p.y) * 5.0;\n    float x = fract(px5);\n    float y = fract(py5);\n    \n    float i = floor(py5) - 2.0;\n    float j = floor(px5) - 2.0;\n    float n = i * i + j * j;\n    float f = n * 0.0625;\n    \n    float isOn = step(0.1, intensity - f);\n    float brightness = isOn * (0.2 + y * 0.8) * (0.75 + x * 0.25);\n    \n    return step(0.0, p.x) * step(p.x, 1.0) * step(0.0, p.y) * step(p.y, 1.0) * brightness;\n}\n\nfloat onOff(float a, float b, float c)\n{\n  return step(c, sin(iTime + a * cos(iTime * b))) * uFlickerAmount;\n}\n\nfloat displace(vec2 look)\n{\n    float y = look.y - mod(iTime * 0.25, 1.0);\n    float window = 1.0 / (1.0 + 50.0 * y * y);\n    return sin(look.y * 20.0 + iTime) * 0.0125 * onOff(4.0, 2.0, 0.8) * (1.0 + cos(iTime * 60.0)) * window;\n}\n\nvec3 getColor(vec2 p){\n    \n    float bar = step(mod(p.y + time * 20.0, 1.0), 0.2) * 0.4 + 1.0;\n    bar *= uScanlineIntensity;\n    \n    float displacement = displace(p);\n    p.x += displacement;\n\n    if (uGlitchAmount != 1.0) {\n      float extra = displacement * (uGlitchAmount - 1.0);\n      p.x += extra;\n    }\n\n    float middle = digit(p);\n    \n    const float off = 0.002;\n    float sum = digit(p + vec2(-off, -off)) + digit(p + vec2(0.0, -off)) + digit(p + vec2(off, -off)) +\n                digit(p + vec2(-off, 0.0)) + digit(p + vec2(0.0, 0.0)) + digit(p + vec2(off, 0.0)) +\n                digit(p + vec2(-off, off)) + digit(p + vec2(0.0, off)) + digit(p + vec2(off, off));\n    \n    vec3 baseColor = vec3(0.9) * middle + sum * 0.1 * vec3(1.0) * bar;\n    return baseColor;\n}\n\nvec2 barrel(vec2 uv){\n  vec2 c = uv * 2.0 - 1.0;\n  float r2 = dot(c, c);\n  c *= 1.0 + uCurvature * r2;\n  return c * 0.5 + 0.5;\n}\n\nvoid main() {\n    time = iTime * 0.333333;\n    vec2 uv = vUv;\n\n    if(uCurvature != 0.0){\n      uv = barrel(uv);\n    }\n    \n    vec2 p = uv * uScale;\n    vec3 col = getColor(p);\n\n    if(uChromaticAberration != 0.0){\n      vec2 ca = vec2(uChromaticAberration) / iResolution.xy;\n      col.r = getColor(p + ca).r;\n      col.b = getColor(p - ca).b;\n    }\n\n    col *= uTint;\n    col *= uBrightness;\n\n    if(uDither > 0.0){\n      float rnd = hash21(gl_FragCoord.xy);\n      col += (rnd - 0.5) * (uDither * 0.003922);\n    }\n\n    gl_FragColor = vec4(col, 1.0);\n}\n';
+  function init(){ var els=document.querySelectorAll('.faulty-terminal'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uScale":{"t":"1f","v":1},"uGridMul":{"t":"2f","v":[0.5,0.5]},"uDigitSize":{"t":"1f","v":1},"uScanlineIntensity":{"t":"1f","v":0.2},"uGlitchAmount":{"t":"1f","v":1},"uFlickerAmount":{"t":"1f","v":1},"uNoiseAmp":{"t":"1f","v":0.3},"uChromaticAberration":{"t":"1f","v":1},"uDither":{"t":"1f","v":1},"uCurvature":{"t":"1f","v":1},"uTint":{"t":"3f","v":[1,1,1]},"uMouseStrength":{"t":"1f","v":1},"uUseMouse":{"t":"1f","v":1},"uPageLoadProgress":{"t":"1f","v":1},"uUsePageLoadAnimation":{"t":"1f","v":1},"uBrightness":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/faulty-terminal/recipe.motion.yaml

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