monomind 1.16.6 → 1.16.8

package/packages/@monomind/cli/.claude/skills/monomotion/rules/sequencing.md

@@ -0,0 +1,105 @@
+# Sequencing & Staggering
+
+## Stagger — Animate a List
+
+```js
+// Stagger children in sequence
+gsap.from(".card", {
+  y: 30,
+  autoAlpha: 0,
+  duration: 0.5,
+  stagger: 0.1,        // 100ms between each element
+  ease: "power2.out",
+});
+
+// Stagger from center outward
+gsap.from(".dot", {
+  scale: 0,
+  stagger: { each: 0.05, from: "center" },
+  ease: "back.out(2)",
+});
+
+// Stagger in a grid
+gsap.from(".cell", {
+  autoAlpha: 0,
+  stagger: { amount: 1, grid: [4, 5], from: "start" },
+});
+```
+
+## Timeline Sequences
+
+```js
+const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
+
+// Sequential — each starts after previous ends
+tl.from(".header", { y: -40, autoAlpha: 0 })
+  .from(".body",   { y: 20, autoAlpha: 0 })
+  .from(".footer", { y: 20, autoAlpha: 0 });
+
+// Overlap — start 0.2s before previous ends
+tl.from(".a", { x: -100 })
+  .from(".b", { x: -100 }, "-=0.2")
+  .from(".c", { x: -100 }, "-=0.2");
+
+// Parallel — all start at same time
+tl.from(".icon",  { scale: 0 })
+  .from(".label", { x: -20, autoAlpha: 0 }, "<");
+```
+
+## Nested Timelines
+
+```js
+function introScene() {
+  const tl = gsap.timeline();
+  tl.from(".logo", { scale: 0, duration: 0.6, ease: "back.out(2)" })
+    .from(".tagline", { y: 20, autoAlpha: 0, duration: 0.4 });
+  return tl;
+}
+
+function contentScene() {
+  const tl = gsap.timeline();
+  tl.from(".cards", { y: 40, autoAlpha: 0, stagger: 0.1 });
+  return tl;
+}
+
+// Master timeline — compose scenes
+const master = gsap.timeline();
+master.add(introScene())
+      .add(contentScene(), "+=0.3");  // 0.3s gap between scenes
+```
+
+## Callbacks
+
+```js
+const tl = gsap.timeline({
+  onStart:    () => console.log("started"),
+  onComplete: () => console.log("done"),
+  onUpdate:   () => progressBar.style.width = `${tl.progress() * 100}%`,
+});
+
+// Per-tween callbacks
+tl.to(".el", { x: 100, onComplete: () => el.classList.add("done") });
+```
+
+## Repeat & Yoyo
+
+```js
+// Loop forever
+gsap.to(".spinner", { rotation: 360, duration: 1, repeat: -1, ease: "none" });
+
+// Bounce back and forth 3 times
+gsap.to(".ball", { y: 100, duration: 0.5, repeat: 3, yoyo: true, ease: "power1.inOut" });
+```
+
+## Delay & Queue
+
+```js
+// Simple delay
+gsap.to(".el", { x: 100, delay: 0.5 });
+
+// Queue independent sequences
+gsap.timeline()
+  .to(".a", { x: 100, duration: 0.5 })
+  .to(".b", { x: 100, duration: 0.5 })
+  .to(".c", { x: 100, duration: 0.5 });
+```

package/packages/@monomind/cli/.claude/skills/monomotion/rules/svg.md

@@ -0,0 +1,101 @@
+# SVG Animations
+
+## Path Drawing (Stroke Animation)
+
+Use CSS `stroke-dasharray` / `stroke-dashoffset` — GSAP animates these natively.
+
+```js
+// Auto-measure and draw the path
+function drawPath(pathEl, duration = 1.5) {
+  const len = pathEl.getTotalLength();
+  gsap.set(pathEl, { strokeDasharray: len, strokeDashoffset: len });
+  return gsap.to(pathEl, { strokeDashoffset: 0, duration, ease: "power2.inOut" });
+}
+
+drawPath(document.querySelector("path.line"));
+```
+
+## Morphing (MorphSVG — GSAP Club)
+
+```js
+gsap.registerPlugin(MorphSVGPlugin);
+
+gsap.to("#circle", { morphSVG: "#star", duration: 1, ease: "elastic.out(1, 0.5)" });
+```
+
+For free alternative, manually tween `d` attribute between matching-point paths:
+
+```js
+// Only works with same number of path points
+gsap.to(pathEl, { attr: { d: targetPathD }, duration: 0.8 });
+```
+
+## Animate SVG Attributes
+
+```js
+// Move a circle
+gsap.to("circle", { attr: { cx: 200, cy: 100, r: 40 }, duration: 0.8 });
+
+// Color fill
+gsap.to("rect", { fill: "#6366f1", duration: 0.5 });
+
+// Stroke width pulse
+gsap.to("path", { attr: { "stroke-width": 4 }, duration: 0.3, yoyo: true, repeat: 1 });
+```
+
+## SVG Transform (use GSAP, not CSS transform)
+
+```js
+// GSAP handles SVG transforms cross-browser
+gsap.to(".icon", { rotation: 180, scale: 1.2, transformOrigin: "50% 50%", duration: 0.5 });
+```
+
+> Never use CSS `transform` on SVG elements — use GSAP's `rotation`, `x`, `y`, `scale` props.
+
+## Animated Icon (Hamburger → X)
+
+```js
+const isOpen = { val: false };
+
+function toggleMenu() {
+  const tl = gsap.timeline();
+  if (!isOpen.val) {
+    tl.to(".bar-top",    { y: 6, rotation: 45, transformOrigin: "center", duration: 0.3 })
+      .to(".bar-mid",    { autoAlpha: 0, duration: 0.2 }, "<")
+      .to(".bar-bottom", { y: -6, rotation: -45, transformOrigin: "center", duration: 0.3 }, "<");
+  } else {
+    tl.to(".bar-top",    { y: 0, rotation: 0, duration: 0.3 })
+      .to(".bar-mid",    { autoAlpha: 1, duration: 0.2 }, "<")
+      .to(".bar-bottom", { y: 0, rotation: 0, duration: 0.3 }, "<");
+  }
+  isOpen.val = !isOpen.val;
+  return tl;
+}
+```
+
+## Particle System (SVG circles)
+
+```js
+function createParticles(container, count = 30) {
+  const svgNS = "http://www.w3.org/2000/svg";
+  const circles = Array.from({ length: count }, () => {
+    const c = document.createElementNS(svgNS, "circle");
+    c.setAttribute("r", Math.random() * 4 + 2);
+    container.appendChild(c);
+    return c;
+  });
+
+  circles.forEach((c) => {
+    gsap.set(c, { x: Math.random() * 800, y: Math.random() * 600 });
+    gsap.to(c, {
+      x: `+=${(Math.random() - 0.5) * 200}`,
+      y: `+=${(Math.random() - 0.5) * 200}`,
+      autoAlpha: Math.random() * 0.5 + 0.2,
+      duration: Math.random() * 3 + 2,
+      repeat: -1,
+      yoyo: true,
+      ease: "sine.inOut",
+    });
+  });
+}
+```

package/packages/@monomind/cli/.claude/skills/monomotion/rules/text.md

@@ -0,0 +1,119 @@
+# Text Animations
+
+## Word-by-Word Reveal
+
+```js
+// Split text into word spans, then animate
+function splitWords(el) {
+  const words = el.textContent.trim().split(/\s+/);
+  el.innerHTML = words.map(w => `<span class="word">${w}</span>`).join(" ");
+  return el.querySelectorAll(".word");
+}
+
+const words = splitWords(document.querySelector("h1"));
+gsap.from(words, {
+  y: 20,
+  autoAlpha: 0,
+  duration: 0.4,
+  stagger: 0.08,
+  ease: "power2.out",
+});
+```
+
+## Character-by-Character
+
+```js
+function splitChars(el) {
+  const chars = [...el.textContent].map(c =>
+    c === " " ? `<span style="display:inline-block;width:0.3em"> </span>`
+              : `<span class="char" style="display:inline-block">${c}</span>`
+  );
+  el.innerHTML = chars.join("");
+  return el.querySelectorAll(".char");
+}
+
+const chars = splitChars(document.querySelector(".title"));
+gsap.from(chars, {
+  y: "100%",
+  autoAlpha: 0,
+  duration: 0.3,
+  stagger: 0.03,
+  ease: "power3.out",
+});
+```
+
+## Typewriter
+
+```js
+function typewriter(el, text, { speed = 50 } = {}) {
+  el.textContent = "";
+  let i = 0;
+  const tl = gsap.timeline();
+  tl.to({}, {
+    duration: text.length * (speed / 1000),
+    onUpdate() {
+      const chars = Math.floor(this.progress() * text.length);
+      el.textContent = text.slice(0, chars);
+    },
+  });
+  return tl;
+}
+
+typewriter(document.querySelector(".output"), "Hello, Monomotion!", { speed: 60 });
+```
+
+## Counter / Number Roll
+
+```js
+const counter = { val: 0 };
+gsap.to(counter, {
+  val: 1000,
+  duration: 2,
+  ease: "power1.out",
+  onUpdate() {
+    document.querySelector(".counter").textContent = Math.round(counter.val).toLocaleString();
+  },
+});
+```
+
+## Gradient Text Sweep
+
+```js
+// Animate a gradient across text using background-position
+gsap.fromTo(".gradient-text",
+  { backgroundPosition: "0% 50%" },
+  { backgroundPosition: "100% 50%", duration: 2, repeat: -1, yoyo: true, ease: "none" }
+);
+```
+
+```css
+.gradient-text {
+  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
+  background-size: 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+```
+
+## Text Scramble
+
+```js
+function scramble(el, finalText, duration = 1.2) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const tl = gsap.timeline();
+  tl.to({}, {
+    duration,
+    onUpdate() {
+      const p = this.progress();
+      el.textContent = finalText
+        .split("")
+        .map((c, i) => (i / finalText.length < p || c === " ")
+          ? c
+          : chars[Math.floor(Math.random() * chars.length)])
+        .join("");
+    },
+    onComplete() { el.textContent = finalText; },
+  });
+  return tl;
+}
+```