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/spotlight-card/SKILL.md ADDED Viewed

@@ -0,0 +1,55 @@
+---
+name: spotlight-card
+description: |
+  Give feature/pricing cards a premium feel: a soft radial spotlight follows the cursor across the
+  card and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static
+  border under prefers-reduced-motion and on touch. Do not use on text-dense reading surfaces.
+triggers:
+  - "spotlight card"
+  - "cursor glow card"
+  - "premium hover card"
+  - "card that lights up on hover"
+  - "光斑跟随卡片"
+  - "卡片高光"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://ui.aceternity.com/components/card-spotlight"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use spotlight-card on the feature grid: a soft spotlight follows the cursor and the border
+    lifts. Keep it subtle; static under reduced-motion and on touch.
+---
+# spotlight-card
+A radial spotlight that follows the cursor across a card. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
+popularized by Aceternity UI, reimplemented dependency-free.
+## When to use it
+- Feature cards, pricing tiles, or a card grid where one should light up under the pointer.
+## When NOT to use it (restraint)
+- Text-dense reading surfaces — the glow distracts. Keep it low-contrast and subtle.
+- Touch-only contexts — there is no cursor; it falls back to a static border automatically.
+## How to apply
+1. Copy `spotlight-card.css` and `spotlight-card.js` into the project, and link them.
+2. Mark the card:
+   ```html
+   <div class="spotlight"> … </div>
+   ```
+3. Auto-attaches to `.spotlight`. JS writes `--mx/--my`; the CSS paints the glow there.
+## Accessibility & performance
+- Disabled under `prefers-reduced-motion` and on `(hover: none)` touch devices (static border stays).
+- Paints a radial-gradient only — no layout thrash.
+## Framework notes
+- React: call `attachSpotlight(ref.current)` in `useEffect`, guarded by the same checks.

package/assets/upstream/recipes/web/spotlight-card/preview.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>spotlight-card · motion-anything recipe</title>
+  <link rel="stylesheet" href="spotlight-card.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; }
+    .grid { display: grid; grid-template-columns: repeat(2, 220px); gap: 18px; }
+    .spotlight { padding: 24px; min-height: 130px; }
+    .spotlight h3 { margin: 0 0 8px; font-size: 16px; }
+    .spotlight 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 · hover-press</div>
+  <div class="grid">
+    <div class="spotlight"><h3>Realtime sync</h3><p>Every edit lands everywhere, instantly.</p></div>
+    <div class="spotlight"><h3>On-brand motion</h3><p>Recipes tuned to your design system.</p></div>
+    <div class="spotlight"><h3>Local &amp; open</h3><p>Runs on your machine. No lock-in.</p></div>
+    <div class="spotlight"><h3>Export anywhere</h3><p>Skill · JSON · HTML · MP4.</p></div>
+  </div>
+  <p class="hint">Move your cursor over the cards · glow follows the pointer · static on touch &amp; reduced-motion.</p>
+  <script src="spotlight-card.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/spotlight-card/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,58 @@
+spec_version: 1
+id: spotlight-card
+name: Spotlight Card
+description: A soft radial spotlight follows the cursor across a card, revealing a subtle glow and border.
+surfaces: [web, interaction]
+canvas: [web]
+target: [card, section]
+intent: hover-press
+runtime: [css, js]
+export: [skill, motion-json, html]
+category: hover-press
+tech: [css, js]
+dependencies: []
+tags: [spotlight, glow, hover, cursor, card, premium, micro-interaction]
+intent_keywords:
+  - spotlight card
+  - cursor glow
+  - hover glow
+  - premium card hover
+  - 光斑跟随
+  - 卡片高光
+  - 高级感 hover
+best_for:
+  - Feature cards / pricing tiles you want to feel premium on hover
+  - A grid of cards where one lights up under the pointer
+avoid_when:
+  - Text-dense reading surfaces (the glow distracts)
+  - Touch-only contexts (no cursor to follow) — it falls back to a static border
+  - More than a handful on screen animating at once
+restraint:
+  max_per_view: 6
+  notes: >
+    Keep the glow subtle and low-contrast. It should hint at interactivity, not strobe. Disable the
+    moving light under reduced-motion (a plain static border remains).
+motion:
+  duration_ms: 240
+  easing: ease-out
+  reduced_motion: opacity-only   # static border, no moving light
+  gpu_safe: true                 # paints a radial-gradient; no layout thrash
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [spotlight-card.css, spotlight-card.js]
+    usage: |
+      Add class "spotlight" to a card element. Link the css + js; JS writes --mx/--my (pointer
+      position) as CSS variables and the CSS paints a radial spotlight + border there.
+license:
+  spdx: Apache-2.0
+  upstream: "https://ui.aceternity.com/components/card-spotlight"   # technique popularized by Aceternity UI
+  attribution_required: false
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/web/spotlight-card/spotlight-card.css ADDED Viewed

@@ -0,0 +1,39 @@
+/* spotlight-card.css — motion-anything recipe · category: hover-press
+ * A radial spotlight painted at the cursor (--mx/--my set by JS). Paint only — GPU-safe. */
+.spotlight {
+  position: relative;
+  --mx: 50%;
+  --my: 50%;
+  border-radius: 16px;
+  background: #14151c;
+  color: #e7e8ee;
+  overflow: hidden;
+  isolation: isolate;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: border-color 240ms ease-out;
+}
+/* the moving glow */
+.spotlight::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 240ms ease-out;
+  background: radial-gradient(
+    260px circle at var(--mx) var(--my),
+    rgba(139, 124, 246, 0.18),
+    transparent 60%
+  );
+}
+.spotlight:hover { border-color: rgba(139, 124, 246, 0.45); }
+.spotlight:hover::before { opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .spotlight::before { display: none; }          /* no moving light */
+  .spotlight { transition: none; }
+}
+@media (hover: none) {
+  .spotlight::before { display: none; }           /* no cursor to follow */
+}

package/assets/upstream/recipes/web/spotlight-card/spotlight-card.js ADDED Viewed

@@ -0,0 +1,34 @@
+/* spotlight-card.js — motion-anything recipe · category: hover-press
+ *
+ * Tracks the pointer over a .spotlight card and writes its position into CSS vars
+ * (--mx/--my), which the CSS uses to paint a radial spotlight. Paint only; no layout.
+ * - Static (plain border) under prefers-reduced-motion and on touch.
+ *
+ * Usage:  <div class="spotlight"> … </div>
+ */
+(function (global) {
+  'use strict';
+  function reduced() { return global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+  function isTouch() { return global.matchMedia && global.matchMedia('(hover: none)').matches; }
+  function attach(card) {
+    if (card.__spotBound) return;
+    card.__spotBound = true;
+    card.addEventListener('pointermove', function (e) {
+      var r = card.getBoundingClientRect();
+      card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
+      card.style.setProperty('--my', (e.clientY - r.top) + 'px');
+    });
+  }
+  function init() {
+    if (reduced() || isTouch()) return;      // leave cards static
+    var els = document.querySelectorAll('.spotlight');
+    for (var i = 0; i < els.length; i++) attach(els[i]);
+  }
+  global.attachSpotlight = attach;
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/stagger-list/SKILL.md ADDED Viewed

@@ -0,0 +1,44 @@
+---
+name: stagger-list
+description: |
+  Rise + fade list items in one after another on load, staggered by order. Use for short,
+  above-the-fold lists, menus, or nav. Honors prefers-reduced-motion. For long or off-screen lists
+  use scroll-reveal instead; never gate must-scan content on the animation.
+triggers:
+  - "stagger list"
+  - "items appear one by one"
+  - "sequence in"
+  - "列表逐项入场"
+  - "依次出现"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: null
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Use stagger-list on the feature list: rise + fade each item in on load, ~70ms apart, finishing
+    quickly, with a prefers-reduced-motion fallback. Short list only.
+---
+# stagger-list
+List items rise + fade in, one after another. Part of
+[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.
+## When to use it
+- Short above-the-fold lists, menus, nav items, or a dropdown opening.
+## When NOT to use it (restraint)
+- Long / off-screen lists — use `scroll-reveal`. Keep the whole sequence under ~600ms.
+## How to apply
+1. Copy `stagger-list.css` and `stagger-list.js` and link them.
+2. Wrap items: `<ul data-stagger>…</ul>` (optional `data-stagger-step="70"`).
+## Accessibility & performance
+- `prefers-reduced-motion`: shown immediately. Transform/opacity only.

package/assets/upstream/recipes/web/stagger-list/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>stagger-list · motion-anything recipe</title>
+  <link rel="stylesheet" href="stagger-list.css" />
+  <style>
+    :root { color-scheme: light; }
+    body { margin:0; min-height:100vh; display:grid; place-items: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; text-align:center; margin-bottom:16px; }
+    ul { list-style:none; margin:0; padding:0; width:300px; }
+    li { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #ececf1; border-radius:12px;
+      padding:13px 15px; margin-bottom:10px; box-shadow:0 6px 18px rgba(0,0,0,.04); }
+    .ic { width:30px; height:30px; border-radius:8px; background:#efeaff; display:grid; place-items:center; }
+    .replay { display:block; margin:14px auto 0; font-size:13px; color:#9aa0aa; background:none; border:0; cursor:pointer; text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <div>
+    <div class="badge">motion-anything · entrance · list</div>
+    <ul data-stagger>
+      <li><span class="ic">✦</span> One sentence → matched motion</li>
+      <li><span class="ic">◫</span> Component-level editing</li>
+      <li><span class="ic">{ }</span> Portable motion-JSON</li>
+      <li><span class="ic">⤓</span> Export as a reusable skill</li>
+    </ul>
+    <button class="replay" onclick="location.reload()">↻ replay</button>
+  </div>
+  <script src="stagger-list.js"></script>
+</body>
+</html>

package/assets/upstream/recipes/web/stagger-list/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,58 @@
+spec_version: 1
+id: stagger-list
+name: Stagger List
+description: List items rise + fade in one after another on load — for short, above-the-fold lists.
+# legacy aliases (kept for CLI / back-compat)
+surfaces: [web]
+category: entrance
+tech: [css, js]
+# 五维分类（建库标准）
+canvas:  [web, app]
+target:  [list]
+intent:  entrance
+runtime: [css, js]
+export:  [skill, motion-json, html]
+dependencies: []
+tags: [entrance, list, stagger, sequence, menu, feed]
+intent_keywords:
+  - stagger list
+  - items appear one by one
+  - sequence in
+  - 列表逐项入场
+  - 依次出现
+best_for:
+  - Short above-the-fold lists, menus, or feature rows on first paint
+  - Nav items or a dropdown opening
+avoid_when:
+  - Long or off-screen lists — use scroll-reveal so items animate as you reach them
+  - Anything the user must scan instantly (don't gate reading on animation)
+restraint:
+  max_per_view: 2
+  notes: Keep the whole sequence under ~600ms total; step 60–90ms. Short lists only.
+motion:
+  duration_ms: 440
+  easing: ease-out
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css+js
+    files: [stagger-list.css, stagger-list.js]
+    usage: |
+      Wrap items in a container with data-stagger (optional data-stagger-step="70"). Its direct
+      children rise + fade in, staggered by document order, on load.
+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/stagger-list/stagger-list.css ADDED Viewed

@@ -0,0 +1,17 @@
+/* stagger-list.css — motion-anything recipe · category: entrance · target: list
+ * Direct children rise + fade in, staggered. Transform + opacity only.
+ * Ships a prefers-reduced-motion fallback. */
+[data-stagger] > * {
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 440ms cubic-bezier(0.16, 1, 0.3, 1),
+              transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--st-delay, 0ms);
+  will-change: opacity, transform;
+}
+[data-stagger].is-in > * { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  [data-stagger] > * { opacity: 1; transform: none; transition: none; }
+}

package/assets/upstream/recipes/web/stagger-list/stagger-list.js ADDED Viewed

@@ -0,0 +1,35 @@
+/* stagger-list.js — motion-anything recipe · category: entrance · target: list
+ *
+ * Staggers the direct children of every [data-stagger] container in on load.
+ * Optional step in ms via data-stagger-step="70". Honors prefers-reduced-motion.
+ *
+ * Usage:  <ul data-stagger> <li>…</li> <li>…</li> </ul>
+ */
+(function () {
+  'use strict';
+  function init() {
+    var lists = document.querySelectorAll('[data-stagger]');
+    if (!lists.length) return;
+    var reduce = window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    lists.forEach(function (list) {
+      var step = parseInt(list.getAttribute('data-stagger-step') || '70', 10);
+      [].slice.call(list.children).forEach(function (child, i) {
+        child.style.setProperty('--st-delay', (i * step) + 'ms');
+      });
+    });
+    if (reduce) {
+      lists.forEach(function (l) { l.classList.add('is-in'); });
+      return;
+    }
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        lists.forEach(function (l) { l.classList.add('is-in'); });
+      });
+    });
+  }
+  if (document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();

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

@@ -0,0 +1,12 @@
+---
+name: star-border
+description: |
+  A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One
+  per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.
+triggers: ["star border","animated outline button","gradient border","星光边框","渐变描边按钮"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, upstream: "https://reactbits.dev/animations/star-border", preview: { type: html }, design_system: { requires: false } }
+---
+# star-border
+A light that circles a button's border. Dependency-free, reduced-motion safe.
+## How to apply
+Copy `star-border.css`; `<button class="star">Get started</button>`. Tune `--star-color`, `--star-w`, duration.

package/assets/upstream/recipes/web/star-border/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>star-border · recipe</title><link rel="stylesheet" href="star-border.css"/>
+<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:22px;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}</style></head>
+<body><div class="badge">motion-anything · ambient</div><button class="star">✦ Get started</button><p class="hint">One CTA · a slow light circles the border · static under reduced-motion.</p></body></html>

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: star-border
+name: Star Border
+description: A soft light rotates around a pill/button border — a gentle animated outline for one CTA.
+surfaces: [web, interaction]
+canvas: [web]
+target: [button, card]
+intent: ambient
+runtime: [css]
+export: [skill, motion-json, html]
+category: ambient
+tech: [css]
+dependencies: []
+tags: [border, star, gradient, ambient, cta, glow]
+intent_keywords: [star border, animated outline, gradient border button, 星光边框, 渐变描边]
+best_for: ["One primary CTA or a 'featured' pill you want to feel alive"]
+avoid_when: ["Many buttons at once", "Calm/serious surfaces", "When a quieter shine-border fits"]
+restraint: { max_per_view: 1, notes: "One per view. Slow and low-contrast. Static border under reduced-motion." }
+motion: { duration_ms: 4000, easing: linear, reduced_motion: static, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css, files: [star-border.css], usage: "Add class 'star' to a button/pill. Tune --star-color / duration. Pure CSS." }
+license: { spdx: Apache-2.0, upstream: "https://reactbits.dev/animations/star-border", attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

@@ -0,0 +1,16 @@
+/* star-border.css — category: ambient · a light rotates around the border. Compositor-friendly; static under reduced-motion. */
+@property --star-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
+.star {
+  --star-color: #8b7cf6; --star-w: 1.6px; --star-a: 0deg;
+  position: relative; border-radius: 999px; border: 0; cursor: pointer;
+  background: #14151c; color: #e7e8ee; font: 600 15px/1 ui-sans-serif, system-ui, sans-serif; padding: 13px 24px; isolation: isolate;
+}
+.star::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: var(--star-w);
+  background: conic-gradient(from var(--star-a), transparent 0 60%, var(--star-color) 78%, #fff 82%, var(--star-color) 86%, transparent 100%);
+  -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: star-spin 4s linear infinite;
+}
+@keyframes star-spin { to { --star-a: 360deg; } }
+@media (prefers-reduced-motion: reduce) { .star::before { animation: none; background: none; border: var(--star-w) solid rgba(139,124,246,.45); } }

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

@@ -0,0 +1,11 @@
+---
+name: stepper
+description: |
+  An animated step indicator fills as you advance — clear progress for a multi-step flow (checkout, onboarding). One per flow. Under prefers-reduced-motion fills without easing.
+triggers: ["stepper","progress steps","步骤条","分步指示"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# stepper
+Stepper Dependency-free, reduced-motion safe.
+## How to apply
+Copy css+js; `<div class="stepper" data-step="2"><div class="st">1</div><div class="bar"></div><div class="st">2</div>…</div>`. Click to advance (demo).

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

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

@@ -0,0 +1,25 @@
+spec_version: 1
+id: stepper
+name: Stepper
+description: An animated step indicator fills as you advance — clear progress for a multi-step flow.
+surfaces: [web, interaction]
+canvas: [web]
+target: [list,section]
+intent: feedback-delight
+runtime: [css,js]
+export: [skill, motion-json, html]
+category: feedback-delight
+tech: [css,js]
+dependencies: []
+tags: [stepper,progress steps,步骤条,分步指示]
+intent_keywords: [stepper,progress steps,步骤条,分步指示]
+best_for: ["Stepper — one tasteful use"]
+avoid_when: ["Overuse; touch-only where relevant; reduced-motion where it distracts"]
+restraint: { max_per_view: 2, notes: "Use sparingly. Plain under reduced-motion." }
+motion: { duration_ms: 300, easing: ease-out, reduced_motion: none, gpu_safe: true }
+entry: preview.html
+implementations:
+  - { tech: css,js, files: [stepper.css,stepper.js], usage: "See preview.html; add the class." }
+license: { spdx: Apache-2.0, upstream: https://reactbits.dev/components/stepper, attribution_required: false }
+author: { name: nexu.io, url: "https://github.com/nexu-io" }
+version: 0.1.0

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

@@ -0,0 +1,8 @@
+/* stepper.css — feedback-delight · connectors fill + dots pop as steps complete. transform/color only. */
+.stepper{ display:inline-flex; align-items:center; }
+.stepper .st{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:600 13px ui-sans-serif; background:#2a2b36; color:#8b909a; transition: background .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1); }
+.stepper .st.done{ background:#8b7cf6; color:#fff; transform:scale(1.08); }
+.stepper .bar{ width:56px; height:3px; background:#2a2b36; margin:0 4px; border-radius:2px; position:relative; overflow:hidden; }
+.stepper .bar::after{ content:""; position:absolute; inset:0; width:0; background:#8b7cf6; transition: width .4s ease; }
+.stepper .bar.fill::after{ width:100%; }
+@media (prefers-reduced-motion: reduce){ .stepper .st,.stepper .bar::after{ transition:none } }

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

@@ -0,0 +1,9 @@
+/* stepper.js — feedback-delight · setStep(el, n) fills up to step n. */
+(function(g){ 'use strict';
+  function set(el, n){ var sts=el.querySelectorAll('.st'), bars=el.querySelectorAll('.bar');
+    sts.forEach(function(s,i){ s.classList.toggle('done', i<n); }); bars.forEach(function(b,i){ b.classList.toggle('fill', i<n-1); }); el.__n=n; }
+  function attach(el){ if(el.__st) return; el.__st=1; set(el, +el.getAttribute('data-step')||1);
+    el.addEventListener('click', function(){ var total=el.querySelectorAll('.st').length; set(el, (el.__n%total)+1); }); }
+  function init(){ var els=document.querySelectorAll('.stepper'); for(var i=0;i<els.length;i++) attach(els[i]); }
+  g.setStep=set; if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

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

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

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

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

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

@@ -0,0 +1,7 @@
+/* strands.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;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec3 uColors[8];\nuniform int uColorCount;\nuniform int uStrandCount;\nuniform float uSpeed;\nuniform float uAmplitude;\nuniform float uWaviness;\nuniform float uThickness;\nuniform float uGlow;\nuniform float uTaper;\nuniform float uSpread;\nuniform float uHueShift;\nuniform float uIntensity;\nuniform float uOpacity;\nuniform float uScale;\nuniform float uSaturation;\n\nout vec4 fragColor;\n\nconst float PI = 3.14159265;\n\nvec3 spectrum(float t) {\n  return 0.5 + 0.5 * cos(2.0 * PI * (t + vec3(0.00, 0.33, 0.67)));\n}\n\nvec3 samplePalette(float t) {\n  t = fract(t);\n  float scaled = t * float(uColorCount);\n  int idx = int(floor(scaled));\n  float blend = fract(scaled);\n  int nextIdx = idx + 1;\n  if (nextIdx >= uColorCount) nextIdx = 0;\n  return mix(uColors[idx], uColors[nextIdx], blend);\n}\n\nvec3 strandColor(float t) {\n  if (uColorCount > 0) return samplePalette(t);\n  return spectrum(t);\n}\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y;\n  uv /= max(uScale, 0.0001);\n\n  float e = 0.06 + uIntensity * 0.94;\n  float env = pow(max(cos(uv.x * PI * 1.3), 0.0), uTaper);\n\n  vec3 col = vec3(0.0);\n\n  for (int i = 0; i < 12; i++) {\n    if (i >= uStrandCount) break;\n\n    float fi = float(i);\n    float ph = fi * 1.7 * uSpread;\n    float freq = (2.0 + fi * 0.35) * uWaviness;\n    float spd = 1.4 + fi * 1.2;\n\n    float tt = uTime * uSpeed;\n    float w = sin(uv.x * freq + tt * spd + ph) * 0.60\n            + sin(uv.x * freq * 1.1 - tt * spd * 0.7 + ph * 1.7) * 0.40;\n\n    float amp = (0.1 + 0.02 * e) * env * uAmplitude;\n    float y = w * amp;\n\n    float d = abs(uv.y - y);\n    float thick = (0.001 + 0.05 * e) * (0.35 + env) * uThickness;\n    float g = thick / (d + thick * 0.45);\n    g = g * g;\n\n    float h = fi / float(uStrandCount) + uv.x * 0.30 + uTime * 0.04 + uHueShift;\n    col += strandColor(h) * g * env;\n  }\n\n  col *= 0.45 + 0.7 * e;\n  col = 1.0 - exp(-col * uGlow);\n\n  float gray = dot(col, vec3(0.2126, 0.7152, 0.0722));\n  col = max(mix(vec3(gray), col, uSaturation), 0.0);\n\n  float lum = max(max(col.r, col.g), col.b);\n  float alpha = clamp(lum, 0.0, 1.0) * uOpacity;\n\n  fragColor = vec4(col * uOpacity, alpha);\n}\n';
+  function init(){ var els=document.querySelectorAll('.strands'); for(var i=0;i<els.length;i++){ if(els[i].__sbg) continue;
+    g.ShaderBG(els[i], FRAG, { uniforms:{"uColors":{"t":"3fv","v":[1,0.25882352941176473,0.25882352941176473,0.48627450980392156,0.22745098039215686,0.9294117647058824,0.023529411764705882,0.7137254901960784,0.8313725490196079,0.9176470588235294,0.7019607843137254,0.03137254901960784,0.9176470588235294,0.7019607843137254,0.03137254901960784,0.9176470588235294,0.7019607843137254,0.03137254901960784,0.9176470588235294,0.7019607843137254,0.03137254901960784,0.9176470588235294,0.7019607843137254,0.03137254901960784]},"uColorCount":{"t":"1i","v":4},"uStrandCount":{"t":"1i","v":3},"uSpeed":{"t":"1f","v":0.5},"uAmplitude":{"t":"1f","v":1},"uWaviness":{"t":"1f","v":1},"uThickness":{"t":"1f","v":0.7},"uGlow":{"t":"1f","v":2.6},"uTaper":{"t":"1f","v":3},"uSpread":{"t":"1f","v":1},"uHueShift":{"t":"1f","v":0},"uIntensity":{"t":"1f","v":0.6},"uOpacity":{"t":"1f","v":1},"uScale":{"t":"1f","v":1.5},"uSaturation":{"t":"1f","v":1.5}} });  } }
+  if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded', init);
+})(window);

package/assets/upstream/recipes/web/target-cursor/SKILL.md ADDED Viewed

@@ -0,0 +1,11 @@
+---
+name: target-cursor
+description: |
+  An animated target ring replaces the cursor and grows when it hovers buttons/links — a focused, techy pointer. One per page. Off on touch and under prefers-reduced-motion.
+triggers: ["target cursor","ring cursor","靶心光标","吸附指针"]
+od: { mode: prototype, surface: web, platform: desktop, category: animation-motion, preview: { type: html }, design_system: { requires: false } }
+---
+# target-cursor
+Target Cursor Dependency-free, reduced-motion safe.
+## How to apply
+Copy `target-cursor.js` and include it. Add class `tc-target` to any element to enlarge the ring over it.

package/assets/upstream/recipes/web/target-cursor/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>target-cursor · 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><button class="tc-target" style="border:0;background:#8b7cf6;color:#fff;font:600 15px ui-sans-serif;padding:14px 24px;border-radius:12px;cursor:pointer">Hover me</button><p class="hint">Dependency-free · respects prefers-reduced-motion.</p><script src="target-cursor.js"></script></body></html>