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/dist/assets/upstream/recipes/css/anim-rotateindownleft/recipe.motion.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-rotateindownleft
+name: Animate · Rotate In Down Left
+description: Rotate In Down Left — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: entrance
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  entrance
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, entrance, rotateindownleft]
+intent_keywords:
+  - rotateindownleft
+  - 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: [rotateInDownLeft.css]
+    usage: |
+      Add class "rotateInDownLeft" 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/dist/assets/upstream/recipes/css/anim-rotateindownleft/rotateInDownLeft.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* rotateInDownLeft.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes rotateInDownLeft {
+  from {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInDownLeft {
+  animation-name: rotateInDownLeft;
+  transform-origin: left bottom;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

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

@@ -0,0 +1,40 @@
+---
+name: anim-rotateindownright
+description: |
+  Rotate In Down Right — 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:
+  - "rotateindownright"
+  - "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 rotateInDownRight (Animate.css) to the element as a entrance animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Rotate In Down Right
+Rotate In Down Right — 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 entrance animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `rotateInDownRight.css`. 2. Add class `rotateInDownRight` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/dist/assets/upstream/recipes/css/anim-rotateindownright/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-rotateindownright · motion-anything recipe</title>
+  <link rel="stylesheet" href="rotateInDownRight.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 rotateInDownRight demo-anim" id="el">Rotate In Down Right</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("rotateInDownRight"); void el.offsetWidth; el.classList.add("rotateInDownRight"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-rotateindownright
+name: Animate · Rotate In Down Right
+description: Rotate In Down Right — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: entrance
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  entrance
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, entrance, rotateindownright]
+intent_keywords:
+  - rotateindownright
+  - 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: [rotateInDownRight.css]
+    usage: |
+      Add class "rotateInDownRight" 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/dist/assets/upstream/recipes/css/anim-rotateindownright/rotateInDownRight.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* rotateInDownRight.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes rotateInDownRight {
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInDownRight {
+  animation-name: rotateInDownRight;
+  transform-origin: right bottom;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

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

@@ -0,0 +1,40 @@
+---
+name: anim-rotateinupleft
+description: |
+  Rotate In Up Left — 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:
+  - "rotateinupleft"
+  - "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 rotateInUpLeft (Animate.css) to the element as a entrance animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Rotate In Up Left
+Rotate In Up Left — 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 entrance animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `rotateInUpLeft.css`. 2. Add class `rotateInUpLeft` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/dist/assets/upstream/recipes/css/anim-rotateinupleft/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-rotateinupleft · motion-anything recipe</title>
+  <link rel="stylesheet" href="rotateInUpLeft.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 rotateInUpLeft demo-anim" id="el">Rotate In Up Left</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("rotateInUpLeft"); void el.offsetWidth; el.classList.add("rotateInUpLeft"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-rotateinupleft
+name: Animate · Rotate In Up Left
+description: Rotate In Up Left — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: entrance
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  entrance
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, entrance, rotateinupleft]
+intent_keywords:
+  - rotateinupleft
+  - 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: [rotateInUpLeft.css]
+    usage: |
+      Add class "rotateInUpLeft" 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/dist/assets/upstream/recipes/css/anim-rotateinupleft/rotateInUpLeft.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* rotateInUpLeft.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes rotateInUpLeft {
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInUpLeft {
+  animation-name: rotateInUpLeft;
+  transform-origin: left bottom;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

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

@@ -0,0 +1,40 @@
+---
+name: anim-rotateinupright
+description: |
+  Rotate In Up Right — 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:
+  - "rotateinupright"
+  - "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 rotateInUpRight (Animate.css) to the element as a entrance animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Rotate In Up Right
+Rotate In Up Right — 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 entrance animation (no JS).
+## When NOT to use it (restraint)
+- Many at once / must-read content. Keep it restrained.
+## How to apply
+1. Copy `rotateInUpRight.css`. 2. Add class `rotateInUpRight` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/dist/assets/upstream/recipes/css/anim-rotateinupright/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-rotateinupright · motion-anything recipe</title>
+  <link rel="stylesheet" href="rotateInUpRight.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 rotateInUpRight demo-anim" id="el">Rotate In Up Right</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("rotateInUpRight"); void el.offsetWidth; el.classList.add("rotateInUpRight"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-rotateinupright
+name: Animate · Rotate In Up Right
+description: Rotate In Up Right — a ready-made CSS keyframe animation from Animate.css.
+surfaces: [web, app, interaction]
+category: entrance
+tech: [css]
+canvas:  [web, app]
+target:  [section, text]
+intent:  entrance
+runtime: [css]
+export:  [skill, html]
+dependencies: []
+tags: [animate-css, css, keyframes, entrance, rotateinupright]
+intent_keywords:
+  - rotateinupright
+  - 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: [rotateInUpRight.css]
+    usage: |
+      Add class "rotateInUpRight" 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/dist/assets/upstream/recipes/css/anim-rotateinupright/rotateInUpRight.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* rotateInUpRight.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes rotateInUpRight {
+  from {
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInUpRight {
+  animation-name: rotateInUpRight;
+  transform-origin: right bottom;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

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

@@ -0,0 +1,40 @@
+---
+name: anim-rotateout
+description: |
+  Rotate Out — 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:
+  - "rotateout"
+  - "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 rotateOut (Animate.css) to the element as a exit animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Rotate Out
+Rotate Out — 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 `rotateOut.css`. 2. Add class `rotateOut` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).

package/dist/assets/upstream/recipes/css/anim-rotateout/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-rotateout · motion-anything recipe</title>
+  <link rel="stylesheet" href="rotateOut.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 rotateOut demo-anim" id="el">Rotate Out</div>
+  <script>
+    var el=document.getElementById("el");
+    var reduce=window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function play(){ el.classList.remove("rotateOut"); void el.offsetWidth; el.classList.add("rotateOut"); }
+    if(!reduce) setInterval(play, 2400);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,52 @@
+spec_version: 1
+id: anim-rotateout
+name: Animate · Rotate Out
+description: Rotate Out — 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, rotateout]
+intent_keywords:
+  - rotateout
+  - 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: [rotateOut.css]
+    usage: |
+      Add class "rotateOut" 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/dist/assets/upstream/recipes/css/anim-rotateout/rotateOut.css ADDED Viewed

@@ -0,0 +1,19 @@
+/* rotateOut.css — from Animate.css (Hippocratic-2.1, © Daniel Eden) */
+@keyframes rotateOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+.rotateOut {
+  animation-name: rotateOut;
+  transform-origin: center;
+}
+.demo-anim{ animation-duration:.9s; animation-fill-mode:both; }
+@media (prefers-reduced-motion:reduce){ .demo-anim{ animation:none !important; } }

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

@@ -0,0 +1,40 @@
+---
+name: anim-rotateoutdownleft
+description: |
+  Rotate Out Down Left — 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:
+  - "rotateoutdownleft"
+  - "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 rotateOutDownLeft (Animate.css) to the element as a exit animation, restrained, with a
+    prefers-reduced-motion fallback. Attribute Animate.css.
+---
+# Animate · Rotate Out Down Left
+Rotate Out Down Left — 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 `rotateOutDownLeft.css`. 2. Add class `rotateOutDownLeft` to the element + set `animation-duration`.
+## Accessibility & license
+- `prefers-reduced-motion`: disabled. Attribute Animate.css (Hippocratic-2.1).