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/gradual-blur/SKILL.md ADDED Viewed

@@ -0,0 +1,13 @@
+---
+name: gradual-blur
+description: |
+  A soft progressive blur fades content out toward an edge — a premium "more below" affordance for a
+  scrolling list/section. Keep the readable content above the blur. Degrades gracefully where
+  backdrop-filter is unsupported.
+triggers: ["gradual blur","edge blur","scroll hint","渐进模糊","边缘虚化"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/animations/gradual-blur", preview: { type: html }, design_system: { requires: false } }
+---
+# gradual-blur
+A progressive blur at a container edge. Dependency-free.
+## How to apply
+Copy `gradual-blur.css`; add class `grad-blur` to a scroll container.

package/assets/upstream/recipes/web/gradual-blur/gradual-blur.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* gradual-blur.css — ambient · progressive blur toward the bottom edge (backdrop-filter + mask). */
+.grad-blur { position: relative; }
+.grad-blur::after { content:""; position:absolute; left:0; right:0; bottom:0; height:90px; pointer-events:none;
+  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  -webkit-mask: linear-gradient(to top, #000 30%, transparent); mask: linear-gradient(to top, #000 30%, transparent); }
+@media (prefers-reduced-motion: reduce){ .grad-blur::after{ } }

package/assets/upstream/recipes/web/gradual-blur/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>gradual-blur · recipe</title><link rel="stylesheet" href="gradual-blur.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="grad-blur" style="width:280px;height:180px;overflow:auto;background:#14151c;border-radius:12px;padding:18px;text-align:left"><p style="color:#b7b9c6;line-height:1.8">Line one<br>Line two<br>Line three<br>Line four<br>Line five<br>Line six<br>Line seven<br>Line eight</p></div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p></body></html>

package/assets/upstream/recipes/web/gradual-blur/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: gradual-blur
+name: Gradual Blur
+description: A soft progressive blur fades content out toward an edge — a premium way to hint "more below".
+surfaces: [web, interaction]
+canvas: [web]
+target: [section, list]
+intent: ambient
+runtime: [css]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css]
+dependencies: []
+tags: [blur, gradient, mask, edge, scroll, premium]
+intent_keywords: [gradual blur, edge blur fade, scroll hint, 渐进模糊, 边缘虚化]
+best_for: ["The bottom/top edge of a scrolling list or long section"]
+avoid_when: ["When users need to read the edge content clearly"]
+restraint: { max_per_view: 2, notes: "A subtle affordance, not decoration. Backdrop-filter degrades gracefully where unsupported." }
+motion: { duration_ms: 0, easing: linear, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css, files: [gradual-blur.css], usage: "Add class 'grad-blur' to a container; a ::after masks a progressive blur at the bottom edge." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/animations/gradual-blur", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

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

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

@@ -0,0 +1,7 @@
+/* grainient.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);} \nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);} \nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);} \n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n';
+  function init(){ var els=document.querySelectorAll('.grainient'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uTimeSpeed":{"t":"1f","v":1},"uColorBalance":{"t":"1f","v":1},"uWarpStrength":{"t":"1f","v":0.3},"uWarpFrequency":{"t":"1f","v":2},"uWarpSpeed":{"t":"1f","v":1},"uWarpAmplitude":{"t":"1f","v":0.3},"uBlendAngle":{"t":"1f","v":0.5},"uBlendSoftness":{"t":"1f","v":0.5},"uRotationAmount":{"t":"1f","v":1},"uNoiseScale":{"t":"1f","v":1},"uGrainAmount":{"t":"1f","v":1},"uGrainScale":{"t":"1f","v":1},"uGrainAnimated":{"t":"1f","v":1},"uContrast":{"t":"1f","v":1},"uGamma":{"t":"1f","v":1},"uSaturation":{"t":"1f","v":1},"uCenterOffset":{"t":"2f","v":[0.5,0.5]},"uZoom":{"t":"1f","v":1},"uColor1":{"t":"3f","v":[0.55,0.5,1]},"uColor2":{"t":"3f","v":[0.55,0.5,1]},"uColor3":{"t":"3f","v":[0.55,0.5,1]}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

@@ -0,0 +1,11 @@
+---
+name: image-trail
+description: |
+  Thumbnails trail behind the cursor and fade — a gallery/portfolio hero flourish. One trail area per page; heavy on content pages. Off on touch and under prefers-reduced-motion.
+triggers: ["image trail","cursor images","拖尾图片","光标残影"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# image-trail
+Image Trail Dependency-free, reduced-motion safe.
+## How to apply
+Copy `image-trail.js`; `<div class="trail" data-images="a.jpg,b.jpg">…</div>` (omit data-images for colored tiles).

package/assets/upstream/recipes/web/image-trail/image-trail.js ADDED Viewed

@@ -0,0 +1,13 @@
+/* image-trail.js — ambient · spawn fading thumbnails along the pointer path over a .trail area. transform/opacity only. */
+(function(g){ 'use strict';
+  function off(){ return g.matchMedia && (g.matchMedia('(prefers-reduced-motion: reduce)').matches || g.matchMedia('(hover: none)').matches); }
+  function attach(el){ if(el.__it) return; el.__it=1; var imgs=(el.getAttribute('data-images')||'').split(',').filter(Boolean); var k=0, last=0;
+    el.style.position=el.style.position||'relative'; el.style.overflow='hidden';
+    if(off()) return;
+    el.addEventListener('pointermove', function(e){ var now=Date.now(); if(now-last<80) return; last=now; var r=el.getBoundingClientRect();
+      var n=document.createElement(imgs.length?'img':'div'); if(imgs.length){ n.src=imgs[k%imgs.length]; } else { n.style.background='linear-gradient(135deg,#8b7cf6,#39d98a)'; }
+      n.style.cssText+=';position:absolute;left:'+(e.clientX-r.left)+'px;top:'+(e.clientY-r.top)+'px;width:80px;height:56px;border-radius:8px;object-fit:cover;pointer-events:none;transform:translate(-50%,-50%)';
+      el.appendChild(n); k++; n.animate([{opacity:.9,transform:'translate(-50%,-50%) scale(1)'},{opacity:0,transform:'translate(-50%,-50%) scale(.8)'}],{duration:700,easing:'ease-out'}); setTimeout(function(){ n.remove(); },700); }); }
+  function init(){ var els=document.querySelectorAll('.trail'); 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/image-trail/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>image-trail · 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><div class="trail" style="width:340px;height:220px;border:1px solid #2a2b36;border-radius:14px;display:grid;place-items:center;color:#7c7f8c">move inside this area</div><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="image-trail.js"></script></body></html>

package/assets/upstream/recipes/web/image-trail/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,25 @@
+spec_version: 1
+id: image-trail
+name: Image Trail
+description: Thumbnails trail behind the cursor and fade — a gallery/portfolio hero flourish.
+surfaces: [web, interaction]
+canvas: [web]
+target: [image,section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [image trail,cursor images,拖尾图片,光标残影]
+intent_keywords: [image trail,cursor images,拖尾图片,光标残影]
+best_for: ["Image Trail — 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: js, files: [image-trail.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/animations/image-trail, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

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

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

@@ -0,0 +1,22 @@
+/* iridescence.js — motion-anything recipe · ambient · a flowing iridescent field (faithful shader, dependency-free WebGL). */
+(function (g) {
+  'use strict';
+  var FRAG = 'precision highp float;\n\
+uniform float uTime; uniform vec3 uColor; uniform vec3 uResolution; uniform vec2 uMouse; uniform float uAmplitude; uniform float uSpeed;\n\
+varying vec2 vUv;\n\
+void main(){\n\
+  float mr = min(uResolution.x, uResolution.y);\n\
+  vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;\n\
+  uv += (uMouse - vec2(0.5)) * uAmplitude;\n\
+  float d = -uTime * 0.5 * uSpeed; float a = 0.0;\n\
+  for (float i = 0.0; i < 8.0; ++i){ a += cos(i - d - a * uv.x); d += sin(uv.y * i + a); }\n\
+  d += uTime * 0.5 * uSpeed;\n\
+  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);\n\
+  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;\n\
+  gl_FragColor = vec4(col, 1.0);\n\
+}\n';
+  function init(){ var els=document.querySelectorAll('.iridescence'); for(var i=0;i<els.length;i++){ var el=els[i];
+    var color=(el.getAttribute('data-color')||'1,1,1').split(',').map(Number);
+    g.ShaderBG(el, FRAG, { uniforms:{ uColor:{t:'3f',v:color}, uSpeed:{t:'1f',v:parseFloat(el.getAttribute('data-speed'))||1.0}, uAmplitude:{t:'1f',v:parseFloat(el.getAttribute('data-amp'))||0.1} } }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: iridescence
+name: Iridescence
+description: A living GPU shader background — faithful fragment shader run in dependency-free WebGL.
+surfaces: [web, interaction]
+canvas: [web]
+target: [background, section]
+intent: ambient
+runtime: [js]
+export: [skill, motion-json, html]
+category: ambient
+tech: [js]
+dependencies: []
+tags: [shader, webgl, background, gradient, hero, ambient]
+intent_keywords: [iridescence, shader background, webgl gradient, 着色器背景, 动态背景]
+best_for: ["A full-bleed hero/section background"]
+avoid_when: ["Behind dense text without a scrim", "Multiple GPU backgrounds at once"]
+restraint: { max_per_view: 1, notes: "One GPU background per view; put a scrim behind text. Renders a static frame under reduced-motion." }
+motion: { duration_ms: 0, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: js, files: [../_fx/shaderbg.js, iridescence.js], usage: "Copy _fx/shaderbg.js + iridescence.js; add a full-bleed <div class=\"iridescence\"></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/kinetic-headline/SKILL.md ADDED Viewed

@@ -0,0 +1,44 @@
+---
+name: kinetic-headline
+description: |
+  Stagger a headline's words (or letters) in on load, one after another. Use for a single hero
+  headline or a title card in a launch video. Honors prefers-reduced-motion. One per screen;
+  never use on body copy or must-read content.
+triggers:
+  - "kinetic text"
+  - "animated headline"
+  - "words stagger in"
+  - "文字逐字入场"
+  - "标题动效"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use kinetic-headline on the hero h1: stagger the words in on load (letters mode for the short
+    eyebrow), short and restrained, with a prefers-reduced-motion fallback.
+---
+# kinetic-headline
+Words or letters stagger in, one after another. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- One hero headline or a single key line. Title cards in launch / release videos.
+## When NOT to use it (restraint)
+- Body copy or must-read content. Never more than one kinetic line per screen.
+## How to apply
+1. Copy `kinetic-headline.css` and `kinetic-headline.js` and link them.
+2. Mark a heading: `<h1 data-kinetic>…</h1>` (or `data-kinetic="letters"` for short lines).
+## Accessibility & performance
+- `prefers-reduced-motion`: shown immediately. Transform/opacity only.

package/assets/upstream/recipes/web/kinetic-headline/kinetic-headline.css ADDED Viewed

@@ -0,0 +1,47 @@
+/* kinetic-headline.css — motion-anything recipe · category: text-kinetic
+ * Words/letters stagger in. The STYLE is chosen by data-kinetic-anim (→ .k-anim-* class in JS),
+ * mirroring the video engine's kinetic presets. Transform/opacity/filter only. Reduced-motion safe. */
+[data-kinetic] { display: inline-block; }
+/* base: hidden units that transition to their resting state on .is-in */
+[data-kinetic] .k-unit {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
+              transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
+              filter 520ms ease-out;
+  transition-delay: var(--k-delay, 0ms);
+  will-change: opacity, transform, filter;
+}
+[data-kinetic].is-in .k-unit { opacity: 1; transform: none; filter: none; }
+/* preserve spaces between word units */
+[data-kinetic] .k-space { display: inline-block; width: 0.28em; }
+/* ── presets: the initial (pre-reveal) state per style ───────────────────────── */
+.k-anim-rise  .k-unit { transform: translateY(0.5em); }
+.k-anim-drop  .k-unit { transform: translateY(-0.5em); }
+.k-anim-fade  .k-unit { transform: none; }
+.k-anim-slide .k-unit { transform: translateX(0.6em); }
+.k-anim-pop   .k-unit { transform: scale(0.4);
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }   /* overshoot */
+.k-anim-blur  .k-unit { transform: none; filter: blur(10px); }
+.k-anim-flip  .k-unit { transform: rotateX(-90deg); transform-origin: bottom; }
+.k-anim-spin  .k-unit { transform: rotate(-18deg) scale(0.6); }
+.k-anim-typewriter .k-unit { transform: none; transition-duration: 1ms; }  /* hard, staggered = typing */
+/* continuous, ambient — no reveal; each unit rides a slow wave */
+.k-anim-wave .k-unit {
+  opacity: 1;
+  animation: kh-wave 1.8s ease-in-out infinite;
+  animation-delay: var(--k-delay, 0ms);
+}
+@keyframes kh-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.22em); } }
+@media (prefers-reduced-motion: reduce) {
+  [data-kinetic] .k-unit {
+    opacity: 1 !important; transform: none !important; filter: none !important;
+    transition: none; animation: none !important;
+  }
+}

package/assets/upstream/recipes/web/kinetic-headline/kinetic-headline.js ADDED Viewed

@@ -0,0 +1,62 @@
+/* kinetic-headline.js — motion-anything recipe · category: text-kinetic
+ *
+ * Splits [data-kinetic] text into words (default) or letters (data-kinetic="letters") and staggers
+ * them in on load. The animation STYLE is chosen with data-kinetic-anim (mirrors the video engine's
+ * kinetic presets): rise (default) · fade · drop · pop · blur · flip · spin · slide · typewriter ·
+ * wave (continuous, ambient). Honors prefers-reduced-motion (shows everything at once).
+ *
+ * Usage:
+ *   <h1 data-kinetic>Words that move</h1>
+ *   <h1 data-kinetic="letters" data-kinetic-anim="pop">Short line</h1>
+ *   <h1 data-kinetic="letters" data-kinetic-anim="wave">ambient wave</h1>
+ */
+(function () {
+  'use strict';
+  function split(el) {
+    var mode = el.getAttribute('data-kinetic') || 'words';
+    var text = el.textContent;
+    el.textContent = '';
+    var step = (mode === 'letters') ? 40 : 70;
+    var units = (mode === 'letters') ? text.split('') : text.split(/(\s+)/);
+    var i = 0;
+    units.forEach(function (u) {
+      if (u === '') return;
+      if (/^\s+$/.test(u)) {
+        var sp = document.createElement('span');
+        sp.className = 'k-space';
+        el.appendChild(sp);
+        return;
+      }
+      var s = document.createElement('span');
+      s.className = 'k-unit';
+      s.textContent = u;
+      s.style.setProperty('--k-delay', (i * step) + 'ms');
+      i++;
+      el.appendChild(s);
+    });
+  }
+  function init() {
+    var els = document.querySelectorAll('[data-kinetic]');
+    if (!els.length) return;
+    var reduce = window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    els.forEach(function (el) {
+      el.classList.add('k-anim-' + (el.getAttribute('data-kinetic-anim') || 'rise'));
+      split(el);
+    });
+    if (reduce) {
+      els.forEach(function (el) { el.classList.add('is-in'); });
+      return;
+    }
+    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/kinetic-headline/preview.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>kinetic-headline · motion-anything recipe</title>
+  <link rel="stylesheet" href="kinetic-headline.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; margin-bottom:14px; }
+    h1 { font-size:40px; margin:0 0 6px; letter-spacing:-.02em; font-weight:700; }
+    .row { display:grid; gap:16px; }
+    .lbl { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#b3b8c2; margin-top:10px; }
+    p { color:#6b7280; margin:0 auto; max-width:420px; font-size:15px; }
+    .replay { margin-top:30px; font-size:13px; color:#9aa0aa; background:none; border:0; cursor:pointer; text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <div class="row">
+    <div class="badge">motion-anything · text · kinetic presets</div>
+    <div><div class="lbl">rise (words)</div><h1 data-kinetic data-kinetic-anim="rise">Words that move</h1></div>
+    <div><div class="lbl">pop (letters)</div><h1 data-kinetic="letters" data-kinetic-anim="pop">motion, anything</h1></div>
+    <div><div class="lbl">blur (letters)</div><h1 data-kinetic="letters" data-kinetic-anim="blur">into focus</h1></div>
+    <div><div class="lbl">flip (letters)</div><h1 data-kinetic="letters" data-kinetic-anim="flip">flip in</h1></div>
+    <div><div class="lbl">typewriter (letters)</div><h1 data-kinetic="letters" data-kinetic-anim="typewriter">typing…</h1></div>
+    <div><div class="lbl">wave (letters · ambient)</div><h1 data-kinetic="letters" data-kinetic-anim="wave">riding a wave</h1></div>
+    <div><button class="replay" onclick="location.reload()">↻ replay</button></div>
+  </div>
+  <script src="kinetic-headline.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/kinetic-headline/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,54 @@
+spec_version: 1
+id: kinetic-headline
+name: Kinetic Headline
+description: Words (or letters) stagger in one after another — for a hero headline or a title card.
+surfaces: [web, video]
+category: text-kinetic
+tech: [css, js]
+dependencies: []
+tags: [text, headline, kinetic, stagger, typography, entrance, per-char, per-word]
+intent_keywords:
+  - kinetic text
+  - words stagger in
+  - animated headline
+  - per-character animation
+  - typewriter / wave / pop text
+  - 文字逐字入场
+  - 逐字/逐词动效
+  - 标题动效
+best_for:
+  - A single hero headline or one key line that earns a beat of attention
+  - Title cards in launch / release videos
+avoid_when:
+  - Body copy or anything the user must read immediately
+  - More than one kinetic headline per screen (they compete for attention)
+restraint:
+  max_per_view: 1
+  notes: One kinetic line per screen. Words mode for longer text; letters only for short lines.
+motion:
+  duration_ms: 520
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [kinetic-headline.css, kinetic-headline.js]
+    usage: |
+      Add data-kinetic to a heading (words by default; data-kinetic="letters" for short lines).
+      Pick a style with data-kinetic-anim — mirrors the video engine's kinetic presets:
+      rise (default) · fade · drop · pop · blur · flip · spin · slide · typewriter · wave (ambient).
+      e.g. <h1 data-kinetic="letters" data-kinetic-anim="pop">Launch</h1>. Staggered on load;
+      wave loops continuously. All styles fall back to plain text under prefers-reduced-motion.
+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/light-rays/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/light-rays/light-rays.js ADDED Viewed

@@ -0,0 +1,7 @@
+/* light-rays.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='precision highp float;\n\nuniform float iTime;\nuniform vec2  iResolution;\n\nuniform vec3  raysColor;\nuniform float raysSpeed;\nuniform float lightSpread;\nuniform float rayLength;\nuniform float pulsating;\nuniform float fadeDistance;\nuniform float saturation;\nuniform vec2  mousePos;\nuniform float mouseInfluence;\nuniform float noiseAmount;\nuniform float distortion;\n\nvarying vec2 vUv;\n\nfloat noise(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n}\n\nfloat rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,\n                  float seedA, float seedB, float speed) {\n  vec2 sourceToCoord = coord - raySource;\n  vec2 dirNorm = normalize(sourceToCoord);\n  float cosAngle = dot(dirNorm, rayRefDirection);\n\n  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;\n  \n  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));\n\n  float distance = length(sourceToCoord);\n  float maxDistance = iResolution.x * rayLength;\n  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);\n  \n  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);\n  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;\n\n  float baseStrength = clamp(\n    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +\n    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),\n    0.0, 1.0\n  );\n\n  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);\n  vec2 rayPos = vec2(iResolution.x * 0.5, -0.2 * iResolution.y);\n  vec2 rayDir = vec2(0.0, 1.0);\n  \n  vec2 finalRayDir = rayDir;\n  if (mouseInfluence > 0.0) {\n    vec2 mouseScreenPos = mousePos * iResolution.xy;\n    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);\n    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));\n  }\n\n  vec4 rays1 = vec4(1.0) *\n               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,\n                           1.5 * raysSpeed);\n  vec4 rays2 = vec4(1.0) *\n               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,\n                           1.1 * raysSpeed);\n\n  fragColor = rays1 * 0.5 + rays2 * 0.4;\n\n  if (noiseAmount > 0.0) {\n    float n = noise(coord * 0.01 + iTime * 0.1);\n    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);\n  }\n\n  float brightness = 1.0 - (coord.y / iResolution.y);\n  fragColor.x *= 0.1 + brightness * 0.8;\n  fragColor.y *= 0.3 + brightness * 0.6;\n  fragColor.z *= 0.5 + brightness * 0.5;\n\n  if (saturation != 1.0) {\n    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));\n    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);\n  }\n\n  fragColor.rgb *= raysColor;\n}\n\nvoid main() {\n  vec4 color;\n  mainImage(color, gl_FragCoord.xy);\n  gl_FragColor  = color;\n}';
+  function init(){ var els=document.querySelectorAll('.light-rays'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"raysColor":{"t":"3f","v":[1,1,1]},"raysSpeed":{"t":"1f","v":1},"lightSpread":{"t":"1f","v":1},"rayLength":{"t":"1f","v":2},"pulsating":{"t":"1f","v":0},"fadeDistance":{"t":"1f","v":1},"saturation":{"t":"1f","v":1},"mousePos":{"t":"2f","v":[0.5,0.5]},"mouseInfluence":{"t":"1f","v":0},"noiseAmount":{"t":"1f","v":0},"distortion":{"t":"1f","v":0}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

package/assets/upstream/recipes/web/light-rays/recipe.motion.yaml ADDED Viewed

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

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

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

@@ -0,0 +1,7 @@
+/* lightfall.js — motion-anything recipe · ambient · faithful GPU shader (dependency-free WebGL via _fx/shaderbg.js). */
+(function(g){ 'use strict';
+  var FRAG='\nprecision highp float;\n\nuniform vec3  iResolution;\nuniform vec2  iMouse;\nuniform float iTime;\n\nuniform vec3  uColor0;\nuniform vec3  uColor1;\nuniform vec3  uColor2;\nuniform vec3  uColor3;\nuniform vec3  uColor4;\nuniform vec3  uColor5;\nuniform vec3  uColor6;\nuniform vec3  uColor7;\nuniform int   uColorCount;\n\nuniform vec3  uBgColor;\nuniform vec3  uMouseColor;\nuniform float uSpeed;\nuniform int   uStreakCount;\nuniform float uStreakWidth;\nuniform float uStreakLength;\nuniform float uGlow;\nuniform float uDensity;\nuniform float uTwinkle;\nuniform float uZoom;\nuniform float uBgGlow;\nuniform float uOpacity;\nuniform float uMouseEnabled;\nuniform float uMouseStrength;\nuniform float uMouseRadius;\n\nvarying vec2 vUv;\n\nvec3 palette(float h) {\n  int count = uColorCount;\n  if (count < 1) count = 1;\n  int idx = int(floor(clamp(h, 0.0, 0.999999) * float(count)));\n  if (idx <= 0) return uColor0;\n  if (idx == 1) return uColor1;\n  if (idx == 2) return uColor2;\n  if (idx == 3) return uColor3;\n  if (idx == 4) return uColor4;\n  if (idx == 5) return uColor5;\n  if (idx == 6) return uColor6;\n  return uColor7;\n}\n\nvec3 tanhv(vec3 x) {\n  vec3 e = exp(-2.0 * x);\n  return (1.0 - e) / (1.0 + e);\n}\n\nvec2 sceneC(vec2 frag, vec2 r) {\n  vec2 P = (frag + frag - r) / r.x;\n  float z = 0.0;\n  float d = 1e3;\n  vec4 O = vec4(0.0);\n  for (int k = 0; k < 39; k++) {\n    if (d <= 1e-4) break;\n    O = z * normalize(vec4(P, uZoom, 0.0)) - vec4(0.0, 4.0, 1.0, 0.0) / 4.5;\n    d = 1.0 - sqrt(length(O * O));\n    z += d;\n  }\n  return vec2(O.x, atan(O.z, O.y));\n}\n\nvoid mainImage(out vec4 o, vec2 C) {\n  vec2 r = iResolution.xy;\n  vec2 uv0 = (C + C - r) / r.x;\n  float T = 0.1 * iTime * uSpeed + 9.0;\n  float angRings = max(1.0, floor(6.28318530718 * max(uDensity, 0.05) + 0.5));\n  vec2 Y = vec2(5e-3, 6.28318530718 / angRings);\n\n  vec2 c0 = sceneC(C, r);\n  vec2 cdx = sceneC(C + vec2(1.0, 0.0), r);\n  vec2 cdy = sceneC(C + vec2(0.0, 1.0), r);\n  vec2 dCx = cdx - c0;\n  vec2 dCy = cdy - c0;\n  dCx.y -= 6.28318530718 * floor(dCx.y / 6.28318530718 + 0.5);\n  dCy.y -= 6.28318530718 * floor(dCy.y / 6.28318530718 + 0.5);\n  vec2 fw = abs(dCx) + abs(dCy);\n  C = c0;\n\n  vec2 P = vec2(2.0, 1.0) * uv0 - (r / r.x) * vec2(0.0, 1.0);\n  vec4 O = vec4(uBgColor * 90.0 * uBgGlow / (1e3 * dot(P, P) + 6.0), 0.0);\n\n  float mGlow = 0.0;\n  if (uMouseEnabled > 0.5) {\n    vec2 mN = (iMouse + iMouse - r) / r.x;\n    float md = length(uv0 - mN);\n    mGlow = exp(-md * md / max(uMouseRadius * uMouseRadius, 1e-4)) * uMouseStrength;\n    O.rgb += uMouseColor * mGlow * 0.25;\n  }\n\n  float zr = 5e-4 * uStreakWidth;\n  vec2 rr = vec2(max(length(fw), 1e-5));\n  float tail = 19.0 / max(uStreakLength, 0.05);\n\n  for (int m = 0; m < 16; m++) {\n    if (m >= uStreakCount) break;\n    float jf = float(m) + 1.0;\n    float ic = fract(sin(dot(vec2(jf, floor(C.x / Y.x + 0.5)), vec2(7.0, 11.0)) * 73.0));\n    vec2 Pp = C - (T + T * ic) * vec2(0.0, 1.0);\n    Pp -= floor(Pp / Y + 0.5) * Y;\n    float h = fract(8663.0 * ic);\n    vec3 col = palette(h);\n    float weight = mix(1.5, 1.0 + sin(T + 7.0 * h + 4.0), uTwinkle);\n    weight *= (1.0 + mGlow * 2.0);\n    vec2 inner = vec2(length(max(Pp, vec2(-1.0, 0.0))), length(Pp) - zr) - zr;\n    vec2 sm = vec2(1.0) - smoothstep(-rr, rr, inner);\n    O.rgb += dot(sm, vec2(exp(tail * Pp.y), 3.0)) * col * weight;\n    C.x += Y.x / 8.0;\n  }\n\n  vec3 colr = sqrt(tanhv(max(O.rgb * uGlow - vec3(0.04, 0.08, 0.02), 0.0)));\n  o = vec4(colr, uOpacity);\n}\n\nvoid main() {\n  vec4 color;\n  mainImage(color, vUv * iResolution.xy);\n  gl_FragColor = color;\n}\n';
+  function init(){ var els=document.querySelectorAll('.lightfall'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"iMouse":{"t":"2f","v":[0.5,0.5]},"uColor0":{"t":"3f","v":[0.55,0.5,1]},"uColor1":{"t":"3f","v":[0.55,0.5,1]},"uColor2":{"t":"3f","v":[0.55,0.5,1]},"uColor3":{"t":"3f","v":[0.55,0.5,1]},"uColor4":{"t":"3f","v":[0.55,0.5,1]},"uColor5":{"t":"3f","v":[0.55,0.5,1]},"uColor6":{"t":"3f","v":[0.55,0.5,1]},"uColor7":{"t":"3f","v":[0.55,0.5,1]},"uColorCount":{"t":"1i","v":1},"uBgColor":{"t":"3f","v":[0.55,0.5,1]},"uMouseColor":{"t":"3f","v":[0.55,0.5,1]},"uSpeed":{"t":"1f","v":1},"uStreakCount":{"t":"1i","v":1},"uStreakWidth":{"t":"1f","v":1},"uStreakLength":{"t":"1f","v":1},"uGlow":{"t":"1f","v":1},"uDensity":{"t":"1f","v":1},"uTwinkle":{"t":"1f","v":1},"uZoom":{"t":"1f","v":1},"uBgGlow":{"t":"1f","v":1},"uOpacity":{"t":"1f","v":1},"uMouseEnabled":{"t":"1f","v":1},"uMouseStrength":{"t":"1f","v":1},"uMouseRadius":{"t":"1f","v":1}} }); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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