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

package/assets/upstream/recipes/web/ripple-grid/recipe.motion.yaml ADDED Viewed

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

@@ -0,0 +1,7 @@
+/* ripple-grid.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='precision highp float;\nuniform float iTime;\nuniform vec2 iResolution;\nuniform bool enableRainbow;\nuniform vec3 gridColor;\nuniform float rippleIntensity;\nuniform float gridSize;\nuniform float gridThickness;\nuniform float fadeDistance;\nuniform float vignetteStrength;\nuniform float glowIntensity;\nuniform float opacity;\nuniform float gridRotation;\nuniform bool mouseInteraction;\nuniform vec2 mousePosition;\nuniform float mouseInfluence;\nuniform float mouseInteractionRadius;\nvarying vec2 vUv;\n\nfloat pi = 3.141592;\n\nmat2 rotate(float angle) {\n    float s = sin(angle);\n    float c = cos(angle);\n    return mat2(c, -s, s, c);\n}\n\nvoid main() {\n    vec2 uv = vUv * 2.0 - 1.0;\n    uv.x *= iResolution.x / iResolution.y;\n\n    if (gridRotation != 0.0) {\n        uv = rotate(gridRotation * pi / 180.0) * uv;\n    }\n\n    float dist = length(uv);\n    float func = sin(pi * (iTime - dist));\n    vec2 rippleUv = uv + uv * func * rippleIntensity;\n\n    if (mouseInteraction && mouseInfluence > 0.0) {\n        vec2 mouseUv = (mousePosition * 2.0 - 1.0);\n        mouseUv.x *= iResolution.x / iResolution.y;\n        float mouseDist = length(uv - mouseUv);\n        \n        float influence = mouseInfluence * exp(-mouseDist * mouseDist / (mouseInteractionRadius * mouseInteractionRadius));\n        \n        float mouseWave = sin(pi * (iTime * 2.0 - mouseDist * 3.0)) * influence;\n        rippleUv += normalize(uv - mouseUv) * mouseWave * rippleIntensity * 0.3;\n    }\n\n    vec2 a = sin(gridSize * 0.5 * pi * rippleUv - pi / 2.0);\n    vec2 b = abs(a);\n\n    float aaWidth = 0.5;\n    vec2 smoothB = vec2(\n        smoothstep(0.0, aaWidth, b.x),\n        smoothstep(0.0, aaWidth, b.y)\n    );\n\n    vec3 color = vec3(0.0);\n    color += exp(-gridThickness * smoothB.x * (0.8 + 0.5 * sin(pi * iTime)));\n    color += exp(-gridThickness * smoothB.y);\n    color += 0.5 * exp(-(gridThickness / 4.0) * sin(smoothB.x));\n    color += 0.5 * exp(-(gridThickness / 3.0) * smoothB.y);\n\n    if (glowIntensity > 0.0) {\n        color += glowIntensity * exp(-gridThickness * 0.5 * smoothB.x);\n        color += glowIntensity * exp(-gridThickness * 0.5 * smoothB.y);\n    }\n\n    float ddd = exp(-2.0 * clamp(pow(dist, fadeDistance), 0.0, 1.0));\n    \n    vec2 vignetteCoords = vUv - 0.5;\n    float vignetteDistance = length(vignetteCoords);\n    float vignette = 1.0 - pow(vignetteDistance * 2.0, vignetteStrength);\n    vignette = clamp(vignette, 0.0, 1.0);\n    \n    vec3 t;\n    if (enableRainbow) {\n        t = vec3(\n            uv.x * 0.5 + 0.5 * sin(iTime),\n            uv.y * 0.5 + 0.5 * cos(iTime),\n            pow(cos(iTime), 4.0)\n        ) + 0.5;\n    } else {\n        t = gridColor;\n    }\n\n    float finalFade = ddd * vignette;\n    float alpha = length(color) * finalFade * opacity;\n    gl_FragColor = vec4(color * t * finalFade * opacity, alpha);\n}';
+  function init(){ var els=document.querySelectorAll('.ripple-grid'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"gridColor":{"t":"3f","v":[0.55,0.5,1]},"rippleIntensity":{"t":"1f","v":1},"gridSize":{"t":"1f","v":1},"gridThickness":{"t":"1f","v":1},"fadeDistance":{"t":"1f","v":0.5},"vignetteStrength":{"t":"1f","v":1},"glowIntensity":{"t":"1f","v":1},"opacity":{"t":"1f","v":1},"gridRotation":{"t":"1f","v":1},"mousePosition":{"t":"2f","v":[0.5,0.5]},"mouseInfluence":{"t":"1f","v":1},"mouseInteractionRadius":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/ripple-press/SKILL.md ADDED Viewed

@@ -0,0 +1,56 @@
+---
+name: ripple-press
+description: |
+  Acknowledge a tap/click with a ripple that blooms from the exact press point. Fast and low-opacity
+  so it reads as feedback, not decoration. No ripple under prefers-reduced-motion (native :active
+  covers it). Avoid on destructive actions and text links.
+triggers:
+  - "ripple"
+  - "material ripple"
+  - "tap feedback"
+  - "press feedback"
+  - "点按涟漪"
+  - "水波反馈"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://m3.material.io/foundations/interaction/states/state-layers"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use ripple on the primary buttons: a fast, low-opacity ripple from the press point. Skip it on
+    destructive actions; none under reduced-motion.
+---
+# ripple-press
+A ripple that blooms from the press point. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Based on the
+Material state-layer interaction, reimplemented dependency-free.
+## When to use it
+- Buttons / clickable tiles where a tap should feel acknowledged; touch-first, app-like UIs.
+## When NOT to use it (restraint)
+- Destructive actions (don't encourage repeat taps) and text links (feels heavy).
+- Elements that already have a strong press state.
+## How to apply
+1. Copy `ripple.css` and `ripple.js` into the project, and link them.
+2. Mark the button (it should be `position:relative; overflow:hidden` — the CSS sets this):
+   ```html
+   <button class="ripple">Save</button>
+   ```
+3. Auto-attaches to `.ripple`; a wave spawns at the pointer point and cleans itself up.
+## Accessibility & performance
+- No ripple under `prefers-reduced-motion`; the native `:active` state provides feedback.
+- Transform/opacity only; each wave removes itself on `animationend`.
+## Framework notes
+- React: call `attachRipple(ref.current)` in `useEffect`. The tint comes from the element's
+  `currentColor` — set text color to control it.

package/assets/upstream/recipes/web/ripple-press/preview.html ADDED Viewed

@@ -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>ripple · motion-anything recipe</title>
+  <link rel="stylesheet" href="ripple.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 22px; 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; }
+    .row { display: flex; gap: 14px; }
+    button.ripple { border: 0; color: #fff; background: #8b7cf6; font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
+      padding: 14px 22px; border-radius: 12px; cursor: pointer; }
+    button.ripple.alt { background: #1a1d24; }
+    .hint { font-size: 13px; color: #9aa0aa; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · feedback-delight</div>
+  <div class="row">
+    <button class="ripple">✦ Get started</button>
+    <button class="ripple alt">Learn more</button>
+  </div>
+  <p class="hint">Click anywhere on a button · the ripple blooms from that point · none under reduced-motion.</p>
+  <script src="ripple.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/ripple-press/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,57 @@
+spec_version: 1
+id: ripple-press
+name: Ripple Press
+description: A ripple blooms from the exact point you tap or click — clear, honest press feedback.
+surfaces: [web, interaction, app]
+canvas: [web, app]
+target: [button]
+intent: feedback-delight
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: feedback-delight
+tech: [css, js]
+dependencies: []
+tags: [ripple, material, press, tap, feedback, button]
+intent_keywords:
+  - ripple
+  - material ripple
+  - tap feedback
+  - press feedback
+  - 点按涟漪
+  - 水波反馈
+best_for:
+  - Buttons and clickable tiles where a tap should feel acknowledged
+  - Touch-first / app-like UIs
+avoid_when:
+  - Destructive actions where you don't want to encourage repeated taps
+  - Elements that already have strong press states
+  - Text links (feels heavy)
+restraint:
+  max_per_view: 8
+  notes: >
+    Feedback, not decoration — one ripple per press, from the pointer point. Keep it fast (~600ms)
+    and low-opacity so it reads as acknowledgement. Under reduced-motion, no ripple (rely on :active).
+motion:
+  duration_ms: 600
+  easing: ease-out
+  reduced_motion: none        # no ripple; native :active state provides feedback
+  gpu_safe: true              # animates transform/opacity of a spawned span
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [ripple.css, ripple.js]
+    usage: |
+      Add class "ripple" to a button. On pointerdown, JS spawns a span at the press point that the
+      CSS scales + fades. Auto-cleans up. Element should be position:relative; overflow:hidden.
+license:
+  spdx: Apache-2.0
+  upstream: "https://m3.material.io/foundations/interaction/states/state-layers"
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/ripple-press/ripple.css ADDED Viewed

@@ -0,0 +1,24 @@
+/* ripple.css — motion-anything recipe · category: feedback-delight
+ * A ripple span spawned at the press point scales + fades. Transform/opacity only — GPU-safe. */
+.ripple {
+  position: relative;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+.ripple > .ripple-wave {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  opacity: 0.35;
+  background: currentColor;          /* inherits a tint from the button's text color */
+  pointer-events: none;
+  animation: ripple-bloom 600ms ease-out forwards;
+}
+@keyframes ripple-bloom {
+  to { transform: scale(1); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ripple > .ripple-wave { display: none; }   /* rely on native :active feedback */
+}

package/assets/upstream/recipes/web/ripple-press/ripple.js ADDED Viewed

@@ -0,0 +1,41 @@
+/* ripple.js — motion-anything recipe · category: feedback-delight
+ *
+ * Spawns a ripple at the exact press point of any .ripple element, then removes it.
+ * - Transform/opacity only. No ripple under prefers-reduced-motion (native :active remains).
+ *
+ * Usage:  <button class="ripple">Save</button>
+ */
+(function (global) {
+  'use strict';
+  function reduced() { return global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function spawn(el, e) {
+    var r = el.getBoundingClientRect();
+    var size = Math.max(r.width, r.height) * 2;
+    var x = (e.clientX != null ? e.clientX : r.left + r.width / 2) - r.left;
+    var y = (e.clientY != null ? e.clientY : r.top + r.height / 2) - r.top;
+    var wave = document.createElement('span');
+    wave.className = 'ripple-wave';
+    wave.style.width = wave.style.height = size + 'px';
+    wave.style.left = (x - size / 2) + 'px';
+    wave.style.top = (y - size / 2) + 'px';
+    el.appendChild(wave);
+    wave.addEventListener('animationend', function () { wave.remove(); });
+  }
+  function attach(el) {
+    if (el.__rippleBound) return;
+    el.__rippleBound = true;
+    el.addEventListener('pointerdown', function (e) { if (!reduced()) spawn(el, e); });
+  }
+  function init() {
+    var els = document.querySelectorAll('.ripple');
+    for (var i = 0; i < els.length; i++) attach(els[i]);
+  }
+  global.attachRipple = attach;
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/rotating-text/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: rotating-text
+description: |
+  One word swaps for the next in place — a compact way to cycle a few phrases in a headline. One rotator per view; short words. Under prefers-reduced-motion it swaps text with no travel.
+triggers: ["rotating words","cycling text","轮换文字","词语轮播"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# rotating-text
+A word that cycles in place. Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<span class="rot" data-words="a|b|c">a</span>`.

package/assets/upstream/recipes/web/rotating-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>rotating-text · recipe</title><link rel="stylesheet" href="rotating-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 style="font-size:40px;font-weight:800">motion, <span class="rot" data-words="anything|faster|tasteful|on-brand" style="color:#8b7cf6">anything</span></h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="rotating-text.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: rotating-text
+name: Rotating Text
+description: One word swaps for the next in place — a compact way to cycle a few phrases.
+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: [rotating,text,cycle,words,headline]
+intent_keywords: [rotating words, cycling text, 轮换文字, 词语轮播]
+best_for: ["A headline that cycles a few adjectives"]
+avoid_when: ["Long text; more than one rotator per view"]
+restraint: { max_per_view: 1, notes: "Use sparingly; tasteful. Plain/static under reduced-motion." }
+motion: { duration_ms: 500, easing: ease-out, reduced_motion: graceful, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [rotating-text.css,rotating-text.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/rotating-text/rotating-text.css ADDED Viewed

@@ -0,0 +1,5 @@
+/* rotating-text.css — text-kinetic · word swaps in place (up-and-in). transform/opacity only. */
+.rot { display:inline-block; overflow:hidden; vertical-align:bottom; }
+.rot > .rot-w { display:inline-block; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .45s; }
+.rot.swap > .rot-w { transform: translateY(-100%); opacity: 0; }
+@media (prefers-reduced-motion: reduce){ .rot > .rot-w{ transition:none } }

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

@@ -0,0 +1,10 @@
+/* rotating-text.js — text-kinetic · cycles data-words in place. Reduced-motion → swaps text without travel. */
+(function(g){ 'use strict';
+  function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function attach(el){ if(el.__rot) return; el.__rot=1; var words=(el.getAttribute('data-words')||el.textContent).split('|'); var i=0;
+    el.textContent=''; var w=document.createElement('span'); w.className='rot-w'; w.textContent=words[0].trim(); el.appendChild(w);
+    setInterval(function(){ i=(i+1)%words.length; if(red()){ w.textContent=words[i].trim(); return; } el.classList.add('swap');
+      setTimeout(function(){ w.textContent=words[i].trim(); el.classList.remove('swap'); }, 460); }, 2200); }
+  function init(){ var els=document.querySelectorAll('.rot'); 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/scroll-float/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: scroll-float
+description: |
+  Words float up and settle as the line enters view — a lively per-word scroll reveal. One or two lines; keep travel modest. Visible instantly under prefers-reduced-motion.
+triggers: ["scroll float","per-word reveal","滚动上浮","逐词浮现"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# scroll-float
+Scroll Float Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<h2 data-scroll-float>Your line</h2>`.

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

package/assets/upstream/recipes/web/scroll-float/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: scroll-float
+name: Scroll Float
+description: Words float up and settle as the line enters view — a lively per-word scroll reveal.
+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: [scroll float,per-word reveal,滚动上浮,逐词浮现]
+intent_keywords: [scroll float,per-word reveal,滚动上浮,逐词浮现]
+best_for: ["Scroll Float — one tasteful use"]
+avoid_when: ["Overuse; dense grids; reduced-motion contexts where it distracts"]
+restraint: { max_per_view: 3, notes: "Use sparingly. Plain/static under reduced-motion." }
+motion: { duration_ms: 600, easing: ease-out, reduced_motion: graceful, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [scroll-float.css,scroll-float.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/text-animations/scroll-float, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

package/assets/upstream/recipes/web/scroll-float/scroll-float.css ADDED Viewed

@@ -0,0 +1,5 @@
+/* scroll-float.css — text-kinetic · words rise + fade on view, staggered. transform/opacity only. */
+[data-scroll-float] .sf-w{ display:inline-block; opacity:0; transform:translateY(24px); transition:opacity .6s ease-out, transform .6s cubic-bezier(.16,1,.3,1); transition-delay:var(--sf-d,0ms); }
+[data-scroll-float].in .sf-w{ opacity:1; transform:none; }
+[data-scroll-float] .sf-sp{ display:inline-block; width:.28em; }
+@media (prefers-reduced-motion: reduce){ [data-scroll-float] .sf-w{ opacity:1; transform:none; transition:none } }

package/assets/upstream/recipes/web/scroll-float/scroll-float.js ADDED Viewed

@@ -0,0 +1,12 @@
+/* scroll-float.js — text-kinetic · split words, reveal on view once. Reduced-motion → visible. */
+(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 s=document.createElement('span'); s.className='sf-sp'; el.appendChild(s); return; }
+      var w=document.createElement('span'); w.className='sf-w'; w.textContent=p; w.style.setProperty('--sf-d',(i*70)+'ms'); i++; el.appendChild(w); }); }
+  function init(){ var els=document.querySelectorAll('[data-scroll-float]'); if(!els.length) return; els.forEach(split);
+    if(red()||!('IntersectionObserver' in g)){ els.forEach(function(e){e.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:.2});
+    els.forEach(function(e){ io.observe(e); }); }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/scroll-reveal/SKILL.md ADDED Viewed

@@ -0,0 +1,57 @@
+---
+name: scroll-reveal
+description: |
+  Reveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a
+  long page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay
+  above-the-fold content, and keep at most a few elements animating at once.
+triggers:
+  - "reveal on scroll"
+  - "fade in on scroll"
+  - "scroll animation"
+  - "elegant entrance"
+  - "滚动出现"
+  - "高级感"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use scroll-reveal on the content sections of this page: a gentle rise+fade as each enters
+    the viewport, staggered, with a prefers-reduced-motion fallback. Leave the hero visible instantly.
+---
+# scroll-reveal
+A gentle rise + fade as elements scroll into view. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Long landing pages and stacked content sections.
+- Giving a page a calm sense of pace.
+## When NOT to use it (restraint)
+- Above-the-fold hero content the reader must see instantly.
+- Revealing many elements simultaneously — stagger them, max ~3 at once.
+## How to apply
+1. Copy `scroll-reveal.css` and `scroll-reveal.js` into the project, and link them.
+2. Mark elements:
+   ```html
+   <section data-reveal>…</section>
+   <li data-reveal data-reveal-delay="80">…</li>   <!-- optional stagger, ms -->
+   ```
+3. An IntersectionObserver adds `.is-in` once, when the element enters the viewport.
+## Accessibility & performance
+- `prefers-reduced-motion`: everything is shown immediately, no travel.
+- Animates `transform`/`opacity` only; unobserves each element after it reveals.
+## Framework notes
+- React: render `data-reveal` attributes and run the init (or an equivalent `useEffect` +
+  IntersectionObserver) after mount.

package/assets/upstream/recipes/web/scroll-reveal/preview.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>scroll-reveal · motion-anything recipe</title>
+  <link rel="stylesheet" href="scroll-reveal.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: radial-gradient(120% 100% at 50% 0%, #fff, #f4f5f7); color: #1a1d24; }
+    .hero { height: 60vh; display: grid; place-items: center; text-align: center; }
+    .hero .badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8b909a; }
+    .hero h1 { font-size: 28px; margin: 10px 0 0; }
+    .hint { color: #9aa0aa; font-size: 13px; margin-top: 8px; }
+    .row { max-width: 640px; margin: 0 auto; padding: 0 24px; }
+    .block { background: #fff; border: 1px solid #e7e4dd; border-radius: 16px; padding: 28px;
+      margin: 22px 0; box-shadow: 0 8px 24px rgba(40,34,20,.04); }
+    .block h2 { margin: 0 0 8px; font-size: 19px; }
+    .block p { margin: 0; color: #6b7280; line-height: 1.6; }
+    .tail { height: 30vh; }
+  </style>
+</head>
+<body>
+  <div class="hero">
+    <div>
+      <div class="badge">motion-anything · scroll-reveal</div>
+      <h1>Scroll down ↓</h1>
+      <div class="hint">Each block rises in as it enters the viewport.</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="block" data-reveal><h2>Calm pace</h2><p>Motion that gives a page rhythm without shouting. Transforms and opacity only — smooth at 60fps.</p></div>
+    <div class="block" data-reveal data-reveal-delay="60"><h2>Restrained</h2><p>A few elements at a time, staggered. Never delays content the reader needs immediately.</p></div>
+    <div class="block" data-reveal data-reveal-delay="120"><h2>Accessible</h2><p>Honors <code>prefers-reduced-motion</code>: everything simply appears, no travel.</p></div>
+  </div>
+  <div class="tail"></div>
+  <script src="scroll-reveal.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/scroll-reveal/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: scroll-reveal
+name: Scroll Reveal
+description: Content gently rises and fades into view as it scrolls into the viewport.
+surfaces: [web]
+category: scroll-reveal
+tech: [css, js]
+dependencies: []
+tags: [scroll, reveal, entrance, fade, intersection-observer, elegant]
+intent_keywords:
+  - elegant
+  - smooth
+  - premium
+  - reveal on scroll
+  - 高级感
+  - 优雅
+  - 滚动出现
+best_for:
+  - Long landing pages and content sections
+  - Bringing a calm sense of pace to a page
+avoid_when:
+  - Above-the-fold hero content the user must see instantly
+  - Revealing many elements at once without staggering (feels busy)
+restraint:
+  max_per_view: 3
+  notes: >
+    At most a few elements animating at once; stagger the rest (40–80ms steps), and let the whole
+    sequence finish within the `slow` band. Never delay critical above-the-fold content.
+motion:
+  duration_ms: 520
+  easing: ease-out
+  reduced_motion: none      # show end state instantly
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [scroll-reveal.css, scroll-reveal.js]
+    usage: |
+      Add data-reveal to any element (optionally data-reveal-delay="80"). Link the css + js;
+      an IntersectionObserver adds .is-in when the element scrolls into view.
+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/scroll-reveal/scroll-reveal.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* scroll-reveal.css — motion-anything recipe · category: scroll-reveal
+ * Transforms + opacity only (GPU-safe). Ships a prefers-reduced-motion fallback. */
+[data-reveal] {
+  opacity: 0;
+  transform: translateY(16px);
+  /* base band (~520ms), ease-out for content entering toward the user */
+  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
+              transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--reveal-delay, 0ms);
+  will-change: opacity, transform;
+}
+[data-reveal].is-in {
+  opacity: 1;
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-reveal] { opacity: 1; transform: none; transition: none; }
+}

package/assets/upstream/recipes/web/scroll-reveal/scroll-reveal.js ADDED Viewed

@@ -0,0 +1,53 @@
+/* scroll-reveal.js — motion-anything recipe · category: scroll-reveal
+ *
+ * Reveals [data-reveal] elements as they scroll into view, once.
+ * - Respects prefers-reduced-motion (reveals everything immediately).
+ * - Optional per-element stagger via data-reveal-delay="80" (milliseconds).
+ * - Cleans up: unobserves each element after it reveals.
+ *
+ * Usage:
+ *   <section data-reveal>…</section>
+ *   <li data-reveal data-reveal-delay="80">…</li>
+ */
+(function () {
+  'use strict';
+  function revealAll() {
+    document.querySelectorAll('[data-reveal]').forEach(function (el) {
+      el.classList.add('is-in');
+    });
+  }
+  function init() {
+    var els = document.querySelectorAll('[data-reveal]');
+    if (!els.length) return;
+    var reduce =
+      window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce || !('IntersectionObserver' in window)) {
+      revealAll();
+      return;
+    }
+    els.forEach(function (el) {
+      var d = el.getAttribute('data-reveal-delay');
+      if (d) el.style.setProperty('--reveal-delay', parseInt(d, 10) + 'ms');
+    });
+    var io = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('is-in');
+            io.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.15, rootMargin: '0px 0px -10% 0px' }
+    );
+    els.forEach(function (el) { io.observe(el); });
+  }
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();