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/css/anim-slideoutright/preview.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>anim-slideoutright · motion-anything recipe</title>
+  <link rel="stylesheet" href="slideOutRight.css" />
+  <style>
+    :root{ color-scheme:light; }
+    html,body{ margin:0; height:100%; }
+    body{ display:grid; place-items:center; background:#f4f5f7; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
+    .box{ padding:16px 26px; border-radius:14px; background:#fff; border:1px solid #ececf1; box-shadow:0 10px 30px rgba(0,0,0,.06); font-weight:600; font-size:16px; color:#1a1d24; }
+  </style>
+</head>
+<body>
+  <div class="box slideOutRight demo-anim" id="el">Slide Out Right</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("slideOutRight"); void el.offsetWidth; el.classList.add("slideOutRight"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/css/anim-slideoutright/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-slideoutright
+name: Animate · Slide Out Right
+description: Slide Out Right — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: exit
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  exit
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, exit, slideoutright]
+intent_keywords:
+  - slideoutright
+  - css animation
+  - 退出动效
+best_for:
+  - Drop-in CSS entrance / attention animation, no JS required
+avoid_when:
+  - Overusing on many elements at once (keep it restrained)
+  - Must-read content you do not want delayed
+restraint:
+  max_per_view: 3
+  notes: A ready-made CSS keyframe — restrained use; honor prefers-reduced-motion (disabled).
+motion:
+  duration_ms: 900
+  easing: ease
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [slideOutRight.css]
+    usage: |
+      Add class "slideOutRight" to an element (set animation-duration). Keyframes from Animate.css.
+license:
+  spdx: Hippocratic-2.1
+  upstream: "https://github.com/animate-css/animate.css"
+  attribution_required: true
+  notes: "© Daniel Eden. Animate.css under Hippocratic License 2.1 (ethical-source). Redistribution allowed with notice + attribution."
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/css/anim-slideoutright/slideOutRight.css ADDED Viewed

@@ -0,0 +1,18 @@
+/* slideOutRight.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.slideOutRight {
+  animation-name: slideOutRight;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

package/assets/upstream/recipes/css/anim-slideoutup/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: anim-slideoutup
+description: |
+  Slide Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden).
+  No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
+triggers:
+  - "slideoutup"
+  - "css animation"
+  - "退出动效"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/animate-css/animate.css"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Apply slideOutUp (Animate.css) to the element as a exit animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Slide Out Up
+Slide Out Up — CSS keyframe animation from [Animate.css](https://github.com/animate-css/animate.css)
+(Hippocratic License 2.1, © Daniel Eden). Part of [motion-anything](https://github.com/nexu-io/motion-anything).
+## When to use it
+- A quick, drop-in CSS exit animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `slideOutUp.css`. 2. Add class `slideOutUp` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/assets/upstream/recipes/css/anim-slideoutup/preview.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>anim-slideoutup · motion-anything recipe</title>
+  <link rel="stylesheet" href="slideOutUp.css" />
+  <style>
+    :root{ color-scheme:light; }
+    html,body{ margin:0; height:100%; }
+    body{ display:grid; place-items:center; background:#f4f5f7; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
+    .box{ padding:16px 26px; border-radius:14px; background:#fff; border:1px solid #ececf1; box-shadow:0 10px 30px rgba(0,0,0,.06); font-weight:600; font-size:16px; color:#1a1d24; }
+  </style>
+</head>
+<body>
+  <div class="box slideOutUp demo-anim" id="el">Slide Out Up</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("slideOutUp"); void el.offsetWidth; el.classList.add("slideOutUp"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/css/anim-slideoutup/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-slideoutup
+name: Animate · Slide Out Up
+description: Slide Out Up — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: exit
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  exit
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, exit, slideoutup]
+intent_keywords:
+  - slideoutup
+  - css animation
+  - 退出动效
+best_for:
+  - Drop-in CSS entrance / attention animation, no JS required
+avoid_when:
+  - Overusing on many elements at once (keep it restrained)
+  - Must-read content you do not want delayed
+restraint:
+  max_per_view: 3
+  notes: A ready-made CSS keyframe — restrained use; honor prefers-reduced-motion (disabled).
+motion:
+  duration_ms: 900
+  easing: ease
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [slideOutUp.css]
+    usage: |
+      Add class "slideOutUp" to an element (set animation-duration). Keyframes from Animate.css.
+license:
+  spdx: Hippocratic-2.1
+  upstream: "https://github.com/animate-css/animate.css"
+  attribution_required: true
+  notes: "© Daniel Eden. Animate.css under Hippocratic License 2.1 (ethical-source). Redistribution allowed with notice + attribution."
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/css/anim-slideoutup/slideOutUp.css ADDED Viewed

@@ -0,0 +1,18 @@
+/* slideOutUp.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.slideOutUp {
+  animation-name: slideOutUp;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

package/assets/upstream/recipes/css/anim-swing/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: anim-swing
+description: |
+  Swing — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden).
+  No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
+triggers:
+  - "swing"
+  - "css animation"
+  - "强调动效"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/animate-css/animate.css"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Apply swing (Animate.css) to the element as a emphasis animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Swing
+Swing — CSS keyframe animation from [Animate.css](https://github.com/animate-css/animate.css)
+(Hippocratic License 2.1, © Daniel Eden). Part of [motion-anything](https://github.com/nexu-io/motion-anything).
+## When to use it
+- A quick, drop-in CSS emphasis animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `swing.css`. 2. Add class `swing` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/assets/upstream/recipes/css/anim-swing/preview.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>anim-swing · motion-anything recipe</title>
+  <link rel="stylesheet" href="swing.css" />
+  <style>
+    :root{ color-scheme:light; }
+    html,body{ margin:0; height:100%; }
+    body{ display:grid; place-items:center; background:#f4f5f7; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
+    .box{ padding:16px 26px; border-radius:14px; background:#fff; border:1px solid #ececf1; box-shadow:0 10px 30px rgba(0,0,0,.06); font-weight:600; font-size:16px; color:#1a1d24; }
+  </style>
+</head>
+<body>
+  <div class="box swing demo-anim" id="el">Swing</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("swing"); void el.offsetWidth; el.classList.add("swing"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/css/anim-swing/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-swing
+name: Animate · Swing
+description: Swing — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: emphasis
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  emphasis
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, emphasis, swing]
+intent_keywords:
+  - swing
+  - css animation
+  - 强调动效
+best_for:
+  - Drop-in CSS entrance / attention animation, no JS required
+avoid_when:
+  - Overusing on many elements at once (keep it restrained)
+  - Must-read content you do not want delayed
+restraint:
+  max_per_view: 3
+  notes: A ready-made CSS keyframe — restrained use; honor prefers-reduced-motion (disabled).
+motion:
+  duration_ms: 900
+  easing: ease
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [swing.css]
+    usage: |
+      Add class "swing" to an element (set animation-duration). Keyframes from Animate.css.
+license:
+  spdx: Hippocratic-2.1
+  upstream: "https://github.com/animate-css/animate.css"
+  attribution_required: true
+  notes: "© Daniel Eden. Animate.css under Hippocratic License 2.1 (ethical-source). Redistribution allowed with notice + attribution."
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/css/anim-swing/swing.css ADDED Viewed

@@ -0,0 +1,30 @@
+/* swing.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes swing {
+  20% {
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+  40% {
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+  60% {
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+  80% {
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+.swing {
+  transform-origin: top center;
+  animation-name: swing;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

package/assets/upstream/recipes/css/anim-tada/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: anim-tada
+description: |
+  Tada — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden).
+  No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
+triggers:
+  - "tada"
+  - "css animation"
+  - "强调动效"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/animate-css/animate.css"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Apply tada (Animate.css) to the element as a emphasis animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Tada
+Tada — CSS keyframe animation from [Animate.css](https://github.com/animate-css/animate.css)
+(Hippocratic License 2.1, © Daniel Eden). Part of [motion-anything](https://github.com/nexu-io/motion-anything).
+## When to use it
+- A quick, drop-in CSS emphasis animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `tada.css`. 2. Add class `tada` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/assets/upstream/recipes/css/anim-tada/preview.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>anim-tada · motion-anything recipe</title>
+  <link rel="stylesheet" href="tada.css" />
+  <style>
+    :root{ color-scheme:light; }
+    html,body{ margin:0; height:100%; }
+    body{ display:grid; place-items:center; background:#f4f5f7; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
+    .box{ padding:16px 26px; border-radius:14px; background:#fff; border:1px solid #ececf1; box-shadow:0 10px 30px rgba(0,0,0,.06); font-weight:600; font-size:16px; color:#1a1d24; }
+  </style>
+</head>
+<body>
+  <div class="box tada demo-anim" id="el">Tada</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("tada"); void el.offsetWidth; el.classList.add("tada"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/css/anim-tada/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-tada
+name: Animate · Tada
+description: Tada — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: emphasis
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  emphasis
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, emphasis, tada]
+intent_keywords:
+  - tada
+  - css animation
+  - 强调动效
+best_for:
+  - Drop-in CSS entrance / attention animation, no JS required
+avoid_when:
+  - Overusing on many elements at once (keep it restrained)
+  - Must-read content you do not want delayed
+restraint:
+  max_per_view: 3
+  notes: A ready-made CSS keyframe — restrained use; honor prefers-reduced-motion (disabled).
+motion:
+  duration_ms: 900
+  easing: ease
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [tada.css]
+    usage: |
+      Add class "tada" to an element (set animation-duration). Keyframes from Animate.css.
+license:
+  spdx: Hippocratic-2.1
+  upstream: "https://github.com/animate-css/animate.css"
+  attribution_required: true
+  notes: "© Daniel Eden. Animate.css under Hippocratic License 2.1 (ethical-source). Redistribution allowed with notice + attribution."
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0

package/assets/upstream/recipes/css/anim-tada/tada.css ADDED Viewed

@@ -0,0 +1,35 @@
+/* tada.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes tada {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+  40%,
+  60%,
+  80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+.tada {
+  animation-name: tada;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

package/assets/upstream/recipes/css/anim-wobble/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: anim-wobble
+description: |
+  Wobble — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden).
+  No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
+triggers:
+  - "wobble"
+  - "css animation"
+  - "强调动效"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: animation-motion
+  upstream: "https://github.com/animate-css/animate.css"
+  preview:
+    type: html
+  design_system:
+    requires: false
+  example_prompt: |
+    Apply wobble (Animate.css) to the element as a emphasis animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Wobble
+Wobble — CSS keyframe animation from [Animate.css](https://github.com/animate-css/animate.css)
+(Hippocratic License 2.1, © Daniel Eden). Part of [motion-anything](https://github.com/nexu-io/motion-anything).
+## When to use it
+- A quick, drop-in CSS emphasis animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `wobble.css`. 2. Add class `wobble` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/assets/upstream/recipes/css/anim-wobble/preview.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>anim-wobble · motion-anything recipe</title>
+  <link rel="stylesheet" href="wobble.css" />
+  <style>
+    :root{ color-scheme:light; }
+    html,body{ margin:0; height:100%; }
+    body{ display:grid; place-items:center; background:#f4f5f7; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
+    .box{ padding:16px 26px; border-radius:14px; background:#fff; border:1px solid #ececf1; box-shadow:0 10px 30px rgba(0,0,0,.06); font-weight:600; font-size:16px; color:#1a1d24; }
+  </style>
+</head>
+<body>
+  <div class="box wobble demo-anim" id="el">Wobble</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("wobble"); void el.offsetWidth; el.classList.add("wobble"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

package/assets/upstream/recipes/css/anim-wobble/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-wobble
+name: Animate · Wobble
+description: Wobble — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: emphasis
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  emphasis
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, emphasis, wobble]
+intent_keywords:
+  - wobble
+  - css animation
+  - 强调动效
+best_for:
+  - Drop-in CSS entrance / attention animation, no JS required
+avoid_when:
+  - Overusing on many elements at once (keep it restrained)
+  - Must-read content you do not want delayed
+restraint:
+  max_per_view: 3
+  notes: A ready-made CSS keyframe — restrained use; honor prefers-reduced-motion (disabled).
+motion:
+  duration_ms: 900
+  easing: ease
+  reduced_motion: none
+  gpu_safe: true
+entry: preview.html
+implementations:
+  - tech: css
+    files: [wobble.css]
+    usage: |
+      Add class "wobble" to an element (set animation-duration). Keyframes from Animate.css.
+license:
+  spdx: Hippocratic-2.1
+  upstream: "https://github.com/animate-css/animate.css"
+  attribution_required: true
+  notes: "© Daniel Eden. Animate.css under Hippocratic License 2.1 (ethical-source). Redistribution allowed with notice + attribution."
+author:
+  name: nexu.io
+  url: "https://github.com/nexu-io"
+version: 0.1.0