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/shimmer-button/SKILL.md ADDED Viewed

@@ -0,0 +1,54 @@
+---
+name: shimmer-button
+description: |
+  Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on
+  hover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid
+  button) under prefers-reduced-motion. Do not use on secondary/destructive buttons or many at once.
+triggers:
+  - "shimmer button"
+  - "sheen sweep cta"
+  - "premium button"
+  - "shiny cta"
+  - "扫光按钮"
+  - "高光 cta"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://magicui.design/docs/components/shimmer-button"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use shimmer-button on the hero "Get started" CTA: a slow sheen that quickens on hover. Just the
+    one primary button; solid under reduced-motion.
+---
+# shimmer-button
+A highlight that sweeps across a CTA. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by Magic UI, reimplemented dependency-free (pure CSS).
+## When to use it
+- One primary call-to-action you want to feel premium ("Get started" / "Upgrade").
+## When NOT to use it (restraint)
+- Secondary / destructive buttons; many buttons at once (the sweep becomes noise). **One per view.**
+## How to apply
+1. Copy `shimmer-button.css` into the project and link it.
+2. Mark the button:
+   ```html
+   <button class="shimmer">Get started</button>
+   ```
+3. Tune the sweep duration (default 2.6s at rest, 1.1s on hover) and the button colors as needed.
+## Accessibility & performance
+- Under `prefers-reduced-motion` the sweep stops; a plain solid button remains.
+- Animates the `transform` of a masked pseudo-element only — GPU-safe.
+## Framework notes
+- Pure CSS; works in any framework.

package/assets/upstream/recipes/web/shimmer-button/preview.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>shimmer-button · motion-anything recipe</title>
+  <link rel="stylesheet" href="shimmer-button.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; }
+    .hint { font-size: 13px; color: #9aa0aa; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · feedback-delight</div>
+  <button class="shimmer">✦ Get started</button>
+  <p class="hint">One primary CTA · a slow sheen sweep, quicker on hover · solid under reduced-motion.</p>
+</body>
+</html>

package/assets/upstream/recipes/web/shimmer-button/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,57 @@
+spec_version: 1
+id: shimmer-button
+name: Shimmer Button
+description: A soft band of light sweeps across a CTA on hover (or slowly at rest) — premium, restrained.
+surfaces: [web, interaction]
+canvas: [web]
+target: [button]
+intent: feedback-delight
+runtime: [css]
+export: [skill, motion-json, html]
+category: feedback-delight
+tech: [css]
+dependencies: []
+tags: [button, shimmer, sheen, cta, hover, premium]
+intent_keywords:
+  - shimmer button
+  - sheen sweep cta
+  - premium button hover
+  - shiny button
+  - 扫光按钮
+  - 高光 cta
+best_for:
+  - One primary call-to-action you want to feel premium
+  - A "Get started" / "Upgrade" button in a hero or pricing card
+avoid_when:
+  - Secondary or destructive buttons
+  - Many buttons at once (the sweep becomes noise)
+  - Anything that must read as calm/neutral
+restraint:
+  max_per_view: 1
+  notes: >
+    Reserve for the single primary CTA. Keep the sheen subtle and slow. Under reduced-motion the
+    sweep stops (a plain solid button remains).
+motion:
+  duration_ms: 2600
+  easing: ease-in-out
+  reduced_motion: static      # no sweep; solid button
+  gpu_safe: true              # animates transform of a masked highlight
+entry: preview.html
+implementations:
+  - tech: css
+    files: [shimmer-button.css]
+    usage: |
+      Add class "shimmer" to a button. A masked highlight sweeps across it (slowly at rest, faster
+      on hover). Pure CSS; no JS.
+license:
+  spdx: Apache-2.0
+  upstream: "https://magicui.design/docs/components/shimmer-button"
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/shimmer-button/shimmer-button.css ADDED Viewed

@@ -0,0 +1,38 @@
+/* shimmer-button.css — motion-anything recipe · category: feedback-delight
+ * A masked highlight sweeps across a CTA. Transform of a pseudo-element only — GPU-safe.
+ * Reserve for one primary button; static under reduced-motion. */
+.shimmer {
+  position: relative;
+  overflow: hidden;
+  border: 0;
+  background: #8b7cf6;
+  color: #fff;
+  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
+  padding: 14px 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.shimmer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateX(-130%) skewX(-18deg);
+  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
+  animation: shimmer-sweep 2.6s ease-in-out infinite;
+  pointer-events: none;
+}
+.shimmer:hover::after { animation-duration: 1.1s; }   /* quicken on hover */
+@keyframes shimmer-sweep {
+  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
+  100%    { transform: translateX(130%) skewX(-18deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .shimmer::after { animation: none; display: none; }
+}

package/assets/upstream/recipes/web/shine-border/SKILL.md ADDED Viewed

@@ -0,0 +1,55 @@
+---
+name: shine-border
+description: |
+  Give one hero card or CTA quiet premium life: a soft band of light travels around its border.
+  One shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under
+  prefers-reduced-motion. Do not put several on screen at once.
+triggers:
+  - "shine border"
+  - "animated border"
+  - "glowing outline"
+  - "premium featured card"
+  - "流光边框"
+  - "扫光描边"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://magicui.design/docs/components/shine-border"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use shine-border on the "recommended" pricing tier: one slow light travels the border. Just
+    that one card; static under reduced-motion.
+---
+# shine-border
+A light that travels around an element's border. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by Magic UI, reimplemented dependency-free (pure CSS).
+## When to use it
+- A single hero card / CTA / "recommended" tier you want to feel alive as it sits on screen.
+## When NOT to use it (restraint)
+- Multiple elements at once — competing lights become noise. **One per view.**
+- Calm / serious content, or anything already animating strongly nearby.
+## How to apply
+1. Copy `shine-border.css` into the project and link it.
+2. Mark the element:
+   ```html
+   <div class="shine"> … </div>
+   ```
+3. Tune with CSS vars: `--shine-color`, `--shine-width`, and the animation duration (default 4s).
+## Accessibility & performance
+- Under `prefers-reduced-motion` the light stops and a plain static border remains.
+- Animates a masked conic-gradient (via `@property --shine-angle`) — compositor-friendly.
+## Framework notes
+- Works as-is in any framework; it is pure CSS. Scope `--shine-*` per component as needed.

package/assets/upstream/recipes/web/shine-border/preview.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>shine-border · motion-anything recipe</title>
+  <link rel="stylesheet" href="shine-border.css" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 22px;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, 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; }
+    .shine { padding: 28px 32px; max-width: 300px; text-align: center; }
+    .shine h3 { margin: 0 0 8px; font-size: 18px; }
+    .shine p { margin: 0; font-size: 13px; color: #a2a4b0; line-height: 1.5; }
+    .hint { font-size: 13px; color: #7c7f8c; }
+  </style>
+</head>
+<body>
+  <div class="badge">motion-anything · ambient</div>
+  <div class="shine">
+    <h3>✦ Featured plan</h3>
+    <p>A single light travels the border — a quiet hint of life on your hero card.</p>
+  </div>
+  <p class="hint">One shining element per view · slow &amp; low-contrast · static under reduced-motion.</p>
+</body>
+</html>

package/assets/upstream/recipes/web/shine-border/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,58 @@
+spec_version: 1
+id: shine-border
+name: Shine Border
+description: A soft band of light travels continuously around an element's border — quiet, premium ambient motion.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, button, section]
+intent: ambient
+runtime: [css]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css]
+dependencies: []
+tags: [border, shine, gradient, ambient, premium, glow]
+intent_keywords:
+  - shine border
+  - animated border
+  - glowing outline
+  - premium border
+  - 扫光描边
+  - 流光边框
+  - 高级感边框
+best_for:
+  - A single hero card / CTA you want to feel alive while it sits on screen
+  - Highlighting a "featured" or "recommended" tier without shouting
+avoid_when:
+  - Many elements at once (competing lights = noise)
+  - Content that must feel calm / serious
+  - Anything already animating strongly nearby
+restraint:
+  max_per_view: 1
+  notes: >
+    One shining element per view. Keep it slow and low-contrast — a hint of life, not a marquee.
+    Fully static under reduced-motion.
+motion:
+  duration_ms: 4000
+  easing: linear
+  reduced_motion: static      # border stops; a plain static border remains
+  gpu_safe: true              # animates a masked conic-gradient rotation; compositor-friendly
+entry: preview.html
+implementations:
+  - tech: css
+    files: [shine-border.css]
+    usage: |
+      Wrap content in an element with class "shine". A masked rotating conic-gradient paints a
+      moving light around a 1–2px border. Pure CSS; no JS.
+license:
+  spdx: Apache-2.0
+  upstream: "https://magicui.design/docs/components/shine-border"   # technique popularized by Magic UI
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/shine-border/shine-border.css ADDED Viewed

@@ -0,0 +1,48 @@
+/* shine-border.css — motion-anything recipe · category: ambient
+ * A light travels around the border via a rotating conic-gradient masked to a thin ring.
+ * Compositor-friendly; fully static under reduced-motion. */
+@property --shine-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+.shine {
+  --shine-angle: 0deg;
+  --shine-width: 1.5px;
+  --shine-color: #8b7cf6;
+  position: relative;
+  border-radius: 16px;
+  background: #14151c;
+  color: #e7e8ee;
+  isolation: isolate;
+}
+.shine::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  padding: var(--shine-width);
+  background: conic-gradient(
+    from var(--shine-angle),
+    transparent 0%,
+    var(--shine-color) 12%,
+    transparent 28%,
+    transparent 100%
+  );
+  /* mask to just the border ring */
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  animation: shine-spin 4s linear infinite;
+}
+@keyframes shine-spin {
+  to { --shine-angle: 360deg; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .shine::before { animation: none; background: none; border: var(--shine-width) solid rgba(139, 124, 246, 0.4); }
+}

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

@@ -0,0 +1,12 @@
+---
+name: shiny-text
+description: |
+  A soft highlight sweeps across muted text — a quiet premium shimmer for one short label ("new",
+  "pro", a CTA word). Keep the base text readable; one or two per view. Pure CSS; solid under reduced-motion.
+triggers: ["shiny text","shimmer text","premium label","流光文字","高光文字"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# shiny-text
+A highlight that sweeps across muted text. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `shiny-text.css`; wrap the label: `<span class="shiny">Pro</span>`. Tune `--shiny-base` / `--shiny-hi`.

package/assets/upstream/recipes/web/shiny-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>shiny-text · recipe</title><link rel="stylesheet" href="shiny-text.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:18px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12)}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}h1{font-size:48px;margin:0;font-weight:800}.hint{font-size:13px;color:#7c7f8c}</style></head>
+<body><div class="badge">motion-anything · text-kinetic</div><h1><span class="shiny">✦ Pro members only</span></h1><p class="hint">One short label · subtle sheen · solid under reduced-motion.</p></body></html>

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

@@ -0,0 +1,44 @@
+spec_version: 1
+id: shiny-text
+name: Shiny Text
+description: A soft highlight sweeps across muted text — a quiet premium shimmer for one short label.
+surfaces: [web, interaction]
+canvas: [web]
+target: [text]
+intent: text-kinetic
+runtime: [css]
+export: [skill, motion-json, html]
+category: text-kinetic
+tech: [css]
+dependencies: []
+tags: [text, shine, shimmer, premium, label]
+intent_keywords:
+  - shiny text
+  - shimmer text
+  - premium label
+  - 流光文字
+  - 高光文字
+best_for:
+  - A muted "new" / "pro" label or a short CTA word you want to feel premium
+  - One short phrase, not body copy
+avoid_when:
+  - Body text or anything that must stay high-contrast/readable
+  - More than one shiny label on screen
+restraint:
+  max_per_view: 2
+  notes: One or two short labels. Keep it subtle; the base text stays readable. Static under reduced-motion.
+motion:
+  duration_ms: 3000
+  easing: linear
+  reduced_motion: static
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [shiny-text.css]
+    usage: |
+      Add class "shiny" to an inline element. A moving highlight sweeps across the (muted) text via a
+      text-clipped gradient. Set --shiny-base / --shiny-hi. Pure CSS.
+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/shiny-text/shiny-text.css ADDED Viewed

@@ -0,0 +1,17 @@
+/* shiny-text.css — motion-anything recipe · category: text-kinetic
+ * A highlight band sweeps across muted text (text-clipped gradient). GPU-safe; static under reduced-motion. */
+.shiny {
+  --shiny-base: #8a8a94;
+  --shiny-hi: #ffffff;
+  background: linear-gradient(100deg, var(--shiny-base) 40%, var(--shiny-hi) 50%, var(--shiny-base) 60%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: shiny-sweep 3s linear infinite;
+}
+@keyframes shiny-sweep { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .shiny { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--shiny-base); }
+}

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

@@ -0,0 +1,12 @@
+---
+name: shuffle-text
+description: |
+  Letters shuffle through random neighbors then settle into the word — a quick playful reveal for a
+  short label. Final text is the real content; instant under prefers-reduced-motion.
+triggers: ["shuffle text","letters shuffle","洗牌文字","乱序归位"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/text-animations/shuffle", preview: { type: html }, design_system: { requires: false } }
+---
+# shuffle-text
+A label whose letters shuffle into place. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `shuffle-text.js`; `<span class="shuffle" data-text="LAUNCH">LAUNCH</span>`. Re-runs on hover.

package/assets/upstream/recipes/web/shuffle-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>shuffle-text · recipe</title>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:20px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c;max-width:360px}h1{margin:0}</style></head>
+<body><div class="badge">motion-anything · text-kinetic</div><h1 style="font-size:40px;font-weight:800;letter-spacing:.05em"><span class="shuffle" data-text="LAUNCH DAY">LAUNCH DAY</span></h1><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="shuffle-text.js"></script></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: shuffle-text
+name: Shuffle Text
+description: Letters shuffle through random neighbors then settle into the word — a quick playful 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: [text, shuffle, scramble, reveal, playful]
+intent_keywords: [shuffle text, letters shuffle, 洗牌文字, 乱序归位]
+best_for: ["A short label with a playful reveal"]
+avoid_when: ["Body copy; calm tones"]
+restraint: { max_per_view: 2, notes: "Short lines, fast. Final text is the real content; instant under reduced-motion." }
+motion: { duration_ms: 700, easing: linear, reduced_motion: instant, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css+js, files: [shuffle-text.js], usage: "Add class 'shuffle' + data-text; letters cycle then settle. Reduced-motion shows final text." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/text-animations/shuffle", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

@@ -0,0 +1,11 @@
+/* shuffle-text.js — text-kinetic · letters cycle through A-Z then settle into the word. Reduced-motion → final. */
+(function(g){ 'use strict';
+  var AZ='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; function red(){ return g.matchMedia && g.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function run(el){ var target=el.getAttribute('data-text')||el.textContent; if(red()){ el.textContent=target; return; }
+    var f=0; clearInterval(el.__s); el.__s=setInterval(function(){ var out='';
+      for(var i=0;i<target.length;i++){ if(f > i*3+6){ out+=target[i]; } else if(target[i]===' '){ out+=' '; } else { out+=AZ[Math.floor(Math.random()*26)]; } }
+      el.textContent=out; f++; if(f > target.length*3+6){ clearInterval(el.__s); el.textContent=target; } }, 28); }
+  function attach(el){ if(el.__sh) return; el.__sh=1; el.setAttribute('data-text', el.getAttribute('data-text')||el.textContent); run(el); el.addEventListener('mouseenter', function(){ run(el); }); }
+  function init(){ var els=document.querySelectorAll('.shuffle'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  g.shuffleEl=run; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/side-rays/SKILL.md ADDED Viewed

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

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

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

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

@@ -0,0 +1,7 @@
+/* side-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;\nuniform float iSpeed;\nuniform vec3 iRayColor1;\nuniform vec3 iRayColor2;\nuniform float iIntensity;\nuniform float iSpread;\nuniform float iFlipX;\nuniform float iFlipY;\nuniform float iTilt;\nuniform float iSaturation;\nuniform float iBlend;\nuniform float iFalloff;\nuniform float iOpacity;\n\nfloat rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord, float seedA, float seedB, float speed) {\n  vec2 sourceToCoord = coord - raySource;\n  float cosAngle = dot(normalize(sourceToCoord), rayRefDirection);\n  return clamp(\n    (0.45 + 0.15 * sin(cosAngle * seedA + iTime * speed)) +\n    (0.3 + 0.2 * cos(-cosAngle * seedB + iTime * speed)),\n    0.0, 1.0) *\n    clamp((iResolution.x - length(sourceToCoord)) / iResolution.x, 0.5, 1.0);\n}\n\nvoid main() {\n  vec2 fragCoord = gl_FragCoord.xy;\n  if (iFlipX > 0.5) fragCoord.x = iResolution.x - fragCoord.x;\n  if (iFlipY > 0.5) fragCoord.y = iResolution.y - fragCoord.y;\n\n  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);\n  vec2 rayPos = vec2(iResolution.x * 1.1, -0.5 * iResolution.y);\n\n  float tiltRad = iTilt * 3.14159265 / 180.0;\n  float cs = cos(tiltRad);\n  float sn = sin(tiltRad);\n  vec2 rel = coord - rayPos;\n  vec2 tiltedCoord = vec2(rel.x * cs - rel.y * sn, rel.x * sn + rel.y * cs) + rayPos;\n\n  float halfSpread = iSpread * 0.275;\n  vec2 rayRefDir1 = normalize(vec2(cos(0.785398 + halfSpread), sin(0.785398 + halfSpread)));\n  vec2 rayRefDir2 = normalize(vec2(cos(0.785398 - halfSpread), sin(0.785398 - halfSpread)));\n\n  vec4 rays1 = vec4(iRayColor1, 1.0) * rayStrength(rayPos, rayRefDir1, tiltedCoord, 36.2214, 21.11349, iSpeed);\n  vec4 rays2 = vec4(iRayColor2, 1.0) * rayStrength(rayPos, rayRefDir2, tiltedCoord, 22.3991, 18.0234, iSpeed * 0.2);\n\n  vec4 color = rays1 * (1.0 - iBlend) * 0.9 + rays2 * iBlend * 0.9;\n\n  float distanceToLight = length(fragCoord.xy - vec2(rayPos.x, iResolution.y - rayPos.y)) / iResolution.y;\n  float brightness = iIntensity * 0.4 / pow(max(distanceToLight, 0.001), iFalloff);\n  color.rgb *= brightness;\n\n  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n  color.rgb = mix(vec3(gray), color.rgb, iSaturation);\n\n  color.a = max(color.r, max(color.g, color.b)) * iOpacity;\n  gl_FragColor = color;\n}';
+  function init(){ var els=document.querySelectorAll('.side-rays'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"iSpeed":{"t":"1f","v":2.5},"iRayColor1":{"t":"3f","v":[0.9176470588235294,0.7019607843137254,0.03137254901960784]},"iRayColor2":{"t":"3f","v":[0.5882352941176471,0.7843137254901961,1]},"iIntensity":{"t":"1f","v":2},"iSpread":{"t":"1f","v":2},"iFlipX":{"t":"1f","v":0},"iFlipY":{"t":"1f","v":0},"iTilt":{"t":"1f","v":0},"iSaturation":{"t":"1f","v":1.5},"iBlend":{"t":"1f","v":0.75},"iFalloff":{"t":"1f","v":1.6},"iOpacity":{"t":"1f","v":1}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

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

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

@@ -0,0 +1,7 @@
+/* silk.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\nvarying vec2 vUv;\n\nuniform float uTime;\nuniform vec3  uColor;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uRotation;\nuniform float uNoiseIntensity;\n\nconst float e = 2.71828182845904523536;\n\nfloat noise(vec2 texCoord) {\n  float G = e;\n  vec2  r = (G * sin(G * texCoord));\n  return fract(r.x * r.y * (1.0 + texCoord.x));\n}\n\nvec2 rotateUvs(vec2 uv, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  mat2  rot = mat2(c, -s, s, c);\n  return rot * uv;\n}\n\nvoid main() {\n  float rnd        = noise(gl_FragCoord.xy);\n  vec2  uv         = rotateUvs(vUv * uScale, uRotation);\n  vec2  tex        = uv * uScale;\n  float tOffset    = uSpeed * uTime;\n\n  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);\n\n  float pattern = 0.6 +\n                  0.4 * sin(5.0 * (tex.x + tex.y +\n                                   cos(3.0 * tex.x + 5.0 * tex.y) +\n                                   0.02 * tOffset) +\n                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));\n\n  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;\n  col.a = 1.0;\n  gl_FragColor = col;\n}\n';
+  function init(){ var els=document.querySelectorAll('.silk'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    var h=g.ShaderBG(els[i], FRAG, {"uniforms":{"uColor":{"t":"3f","v":[0.4823529411764706,0.4549019607843137,0.5058823529411764]},"uSpeed":{"t":"1f","v":0.5},"uScale":{"t":"1f","v":1},"uRotation":{"t":"1f","v":0},"uNoiseIntensity":{"t":"1f","v":1.5}}}); } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/soft-aurora/SKILL.md ADDED Viewed

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

package/assets/upstream/recipes/web/soft-aurora/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>soft-aurora · recipe</title>
+<style>:root{color-scheme:dark}html,body{margin:0;height:100vh;overflow:hidden;background:#05060a}.soft-aurora{position:absolute;inset:0}.cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:12px ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);z-index:2}</style></head>
+<body><div class="soft-aurora"></div><div class="cap">motion-anything · ambient · soft-aurora</div><script src="../_fx/shaderbg.js"></script><script src="soft-aurora.js"></script></body></html>