monomind 1.18.15 → 2.0.0

package/.claude/skills/monomotion/rules/sequencing.md

@@ -1,105 +0,0 @@
-# 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/.claude/skills/monomotion/rules/svg.md

@@ -1,101 +0,0 @@
-# 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/.claude/skills/monomotion/rules/text.md

@@ -1,119 +0,0 @@
-# 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;
-}
-```