ape-claw 0.1.0

package/ui/shared/motion.css

@@ -0,0 +1,286 @@
+/* ══════════════════════════════════════════════════
+   ApeClaw motion primitives
+   ══════════════════════════════════════════════════ */
+
+/* Section reveal — slides up and fades in */
+@keyframes acRevealUp {
+  from { opacity: 0; transform: translateY(40px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Counter number "pop" on arrival */
+@keyframes acCounterPop {
+  0%   { transform: scale(0.8); opacity: 0; }
+  60%  { transform: scale(1.05); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* Horizontal divider sweep */
+@keyframes acLineSweep {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+/* Progress bar shimmer sweep */
+@keyframes acShimmer {
+  0%   { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+/* Scale in from center */
+@keyframes acScaleIn {
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}
+
+/* Gentle bounce for scroll hints */
+@keyframes acBounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(6px); }
+}
+
+/* CTA glow pulse */
+@keyframes acGlowPulse {
+  0%, 100% { box-shadow: 0 0 12px rgba(207,255,4,0.10); }
+  50%      { box-shadow: 0 0 24px rgba(207,255,4,0.20), 0 0 48px rgba(207,255,4,0.06); }
+}
+
+/* Magnetic tilt for cards */
+@keyframes acTiltReset {
+  to { transform: perspective(600px) rotateX(0) rotateY(0) scale(1); }
+}
+
+/* Particle float */
+@keyframes acFloat {
+  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
+  25%      { transform: translateY(-8px) translateX(3px); opacity: 1; }
+  75%      { transform: translateY(4px) translateX(-2px); opacity: 0.5; }
+}
+
+/* Gradient border spin */
+@keyframes acBorderSpin {
+  to { --ac-border-angle: 360deg; }
+}
+
+/* Typing cursor blink */
+@keyframes acCursorBlink {
+  0%, 49% { border-color: currentColor; }
+  50%, 100% { border-color: transparent; }
+}
+
+/* Ripple expand */
+@keyframes acRipple {
+  from { transform: scale(0); opacity: 0.4; }
+  to   { transform: scale(4); opacity: 0; }
+}
+
+/* ── States ─────────────────────────────── */
+
+.ac-observe {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ac-observe.ac-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide in from left variant */
+.ac-observe.ac-from-left {
+  transform: translateX(-40px);
+}
+.ac-observe.ac-from-left.ac-visible {
+  transform: translateX(0);
+}
+
+/* Slide in from right variant */
+.ac-observe.ac-from-right {
+  transform: translateX(40px);
+}
+.ac-observe.ac-from-right.ac-visible {
+  transform: translateX(0);
+}
+
+/* Scale-up variant */
+.ac-observe.ac-scale {
+  transform: scale(0.9);
+}
+.ac-observe.ac-scale.ac-visible {
+  transform: scale(1);
+}
+
+/* Stagger children inside a revealed container */
+.ac-stagger > .ac-observe {
+  transition-delay: calc(var(--ac-i, 0) * 80ms);
+}
+
+/* Faster stagger for grids */
+.ac-stagger-fast > .ac-observe {
+  transition-delay: calc(var(--ac-i, 0) * 45ms);
+}
+
+/* Counter pop class */
+.ac-counter-pop {
+  animation: acCounterPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* Section divider line that sweeps in */
+.ac-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(207,255,4,0.25), transparent);
+  transform: scaleX(0);
+  opacity: 1 !important;
+  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ac-visible > .ac-divider,
+.ac-divider.ac-visible {
+  transform: scaleX(1);
+}
+
+/* Progress bar shimmer overlay */
+.ac-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.ac-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255,255,255,0.12) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: acShimmer 2s ease-in-out infinite;
+}
+
+/* Stat shimmer bar */
+.ac-stat-shimmer {
+  height: 3px;
+  margin-top: 6px;
+  border-radius: 2px;
+  background: linear-gradient(
+    90deg,
+    rgba(207,255,4,0.0) 0%,
+    rgba(207,255,4,0.25) 50%,
+    rgba(207,255,4,0.0) 100%
+  );
+  background-size: 200% 100%;
+  animation: acShimmer 1.8s ease-in-out infinite;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.ac-stat-shimmer.ac-active {
+  opacity: 1;
+}
+
+/* Scroll hint bounce */
+.ac-bounce {
+  animation: acBounce 2s ease-in-out infinite;
+}
+
+/* CTA glow pulse */
+.ac-glow-pulse {
+  animation: acGlowPulse 3s ease-in-out infinite;
+}
+
+/* ── Magnetic tilt on hover ────────────── */
+.ac-tilt {
+  transition: transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.2);
+  will-change: transform;
+}
+.ac-tilt:hover {
+  transform: perspective(600px) rotateX(var(--ac-ry, 0deg)) rotateY(var(--ac-rx, 0deg));
+}
+
+/* ── Interactive ripple on click ─────── */
+.ac-ripple {
+  position: relative;
+  overflow: hidden;
+}
+.ac-ripple .ac-ripple-circle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(207,255,4,0.15);
+  pointer-events: none;
+  animation: acRipple 0.6s ease-out forwards;
+}
+
+/* ── Skeleton loading placeholder ──── */
+.ac-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: rgba(255,255,255,0.03);
+  border-radius: 4px;
+}
+.ac-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    rgba(255,255,255,0.04) 40%,
+    rgba(255,255,255,0.06) 50%,
+    rgba(255,255,255,0.04) 60%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: acShimmer 1.5s ease-in-out infinite;
+}
+
+/* ── Focus ring ────────────────────────── */
+.ac-focus-ring:focus-visible {
+  outline: 2px solid rgba(207,255,4,0.6);
+  outline-offset: 3px;
+  box-shadow: 0 0 0 4px rgba(207,255,4,0.08);
+}
+
+/* ── Tooltip ───────────────────────────── */
+[data-ac-tip] {
+  position: relative;
+}
+[data-ac-tip]::after {
+  content: attr(data-ac-tip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  padding: 5px 10px;
+  background: rgba(9,13,18,0.95);
+  border: 1px solid rgba(207,255,4,0.2);
+  border-radius: 4px;
+  color: #e6e6e6;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s, transform 0.2s;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+[data-ac-tip]:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ── Reduced motion ────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .ac-observe { transition-duration: 0.01ms !important; }
+  .ac-counter-pop { animation-duration: 0.01ms !important; }
+  .ac-shimmer::after { animation: none !important; }
+  .ac-stat-shimmer { animation: none !important; }
+  .ac-bounce { animation: none !important; }
+  .ac-glow-pulse { animation: none !important; }
+  .ac-divider { transition-duration: 0.01ms !important; }
+  .ac-skeleton::after { animation: none !important; }
+  .ac-tilt { transition: none !important; }
+  .ac-tilt:hover { transform: none !important; }
+}

package/ui/shared/motion.js

@@ -0,0 +1,170 @@
+(function () {
+  "use strict";
+  if (typeof IntersectionObserver === "undefined") return;
+
+  /* ── Scroll reveal ────────────────────────────
+     Any element with class "ac-observe" is hidden by CSS (opacity 0,
+     translateY 40px). When it enters the viewport, we add "ac-visible"
+     which triggers the CSS transition. Each element fires once.          */
+  var THRESHOLD = 0.12;
+  var revealObs = new IntersectionObserver(function (entries) {
+    for (var i = 0; i < entries.length; i++) {
+      if (!entries[i].isIntersecting) continue;
+      entries[i].target.classList.add("ac-visible");
+      revealObs.unobserve(entries[i].target);
+    }
+  }, { threshold: THRESHOLD });
+
+  function observeAll() {
+    var els = document.querySelectorAll(".ac-observe:not(.ac-visible)");
+    for (var i = 0; i < els.length; i++) revealObs.observe(els[i]);
+    var dividers = document.querySelectorAll(".ac-divider:not(.ac-visible)");
+    for (var d = 0; d < dividers.length; d++) revealObs.observe(dividers[d]);
+  }
+  observeAll();
+  if (typeof MutationObserver !== "undefined") {
+    new MutationObserver(observeAll).observe(document.body, { childList: true, subtree: true });
+  }
+
+  /* ── Stagger index ────────────────────────────
+     Inside a .ac-stagger container, each child .ac-observe gets a
+     CSS custom property --ac-i so the delay cascades.                    */
+  function assignStaggerIndex() {
+    var containers = document.querySelectorAll(".ac-stagger");
+    for (var c = 0; c < containers.length; c++) {
+      var kids = containers[c].querySelectorAll(":scope > .ac-observe, :scope > * > .ac-observe");
+      for (var k = 0; k < kids.length; k++) {
+        kids[k].style.setProperty("--ac-i", String(k));
+      }
+    }
+  }
+  assignStaggerIndex();
+
+  /* ── Animated count-up ────────────────────────
+     Elements with [data-countup] will count from 0 to the target number
+     using an ease-out cubic curve when they enter the viewport.
+     Usage: <span data-countup="1234" data-countup-suffix="+" data-countup-duration="1400">0</span>
+     The element's textContent is replaced as the count progresses.       */
+  var COUNTUP_DEFAULT_DURATION = 1400;
+
+  function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
+
+  function formatNumber(n) {
+    if (typeof Intl !== "undefined" && Intl.NumberFormat) {
+      return new Intl.NumberFormat().format(n);
+    }
+    return String(n);
+  }
+
+  function startCountUp(el) {
+    if (el.getAttribute("data-countup-started")) return;
+    el.setAttribute("data-countup-started", "1");
+
+    var target = parseFloat(String(el.getAttribute("data-countup") || "0").replace(/,/g, ""));
+    if (!isFinite(target) || target <= 0) return;
+    var duration = parseInt(el.getAttribute("data-countup-duration") || String(COUNTUP_DEFAULT_DURATION), 10);
+    var suffix = el.getAttribute("data-countup-suffix") || "";
+    var prefix = el.getAttribute("data-countup-prefix") || "";
+    var isFloat = String(el.getAttribute("data-countup") || "").indexOf(".") !== -1;
+    var decimals = isFloat ? (String(el.getAttribute("data-countup")).split(".")[1] || "").length : 0;
+
+    el.classList.add("ac-counter-pop");
+
+    var shimmer = el.parentElement ? el.parentElement.querySelector(".ac-stat-shimmer") : null;
+    if (shimmer) shimmer.classList.add("ac-active");
+
+    var t0 = performance.now();
+    function tick(now) {
+      var p = Math.min((now - t0) / duration, 1);
+      var eased = easeOutCubic(p);
+      var current = isFloat
+        ? (target * eased).toFixed(decimals)
+        : formatNumber(Math.round(target * eased));
+      el.textContent = prefix + current + suffix;
+      if (p < 1) {
+        requestAnimationFrame(tick);
+      } else {
+        if (shimmer) shimmer.classList.remove("ac-active");
+      }
+    }
+    requestAnimationFrame(tick);
+  }
+
+  var countObs = new IntersectionObserver(function (entries) {
+    for (var i = 0; i < entries.length; i++) {
+      if (!entries[i].isIntersecting) continue;
+      startCountUp(entries[i].target);
+      countObs.unobserve(entries[i].target);
+    }
+  }, { threshold: 0.3 });
+
+  var countEls = document.querySelectorAll("[data-countup]");
+  for (var i = 0; i < countEls.length; i++) countObs.observe(countEls[i]);
+
+  /* Re-scan for countup elements added dynamically (e.g. after API data loads) */
+  if (typeof MutationObserver !== "undefined") {
+    new MutationObserver(function () {
+      var els = document.querySelectorAll("[data-countup]:not([data-countup-started])");
+      for (var j = 0; j < els.length; j++) countObs.observe(els[j]);
+    }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-countup"] });
+  }
+
+  /* Expose a manual trigger for pages that populate stats asynchronously */
+  window.acTriggerCountUp = function (el) {
+    if (!el || el.getAttribute("data-countup-started")) return;
+    countObs.observe(el);
+  };
+  window.acRescanCountUp = function () {
+    var els = document.querySelectorAll("[data-countup]:not([data-countup-started])");
+    for (var j = 0; j < els.length; j++) countObs.observe(els[j]);
+  };
+
+  /* ── Ripple click effect ──────────────────────
+     Any element with class "ac-ripple" gets a ripple on click. */
+  document.addEventListener("click", function (e) {
+    var target = e.target.closest(".ac-ripple");
+    if (!target) return;
+    var rect = target.getBoundingClientRect();
+    var circle = document.createElement("span");
+    circle.className = "ac-ripple-circle";
+    circle.style.left = (e.clientX - rect.left - 10) + "px";
+    circle.style.top = (e.clientY - rect.top - 10) + "px";
+    target.appendChild(circle);
+    setTimeout(function () { circle.remove(); }, 700);
+  });
+
+  /* ── Magnetic tilt on hover ────────────────────
+     Elements with .ac-tilt get subtle 3D rotation tracking the cursor. */
+  document.addEventListener("mousemove", function (e) {
+    var tilts = document.querySelectorAll(".ac-tilt:hover");
+    for (var t = 0; t < tilts.length; t++) {
+      var el = tilts[t];
+      var rect = el.getBoundingClientRect();
+      var cx = rect.left + rect.width / 2;
+      var cy = rect.top + rect.height / 2;
+      var dx = (e.clientX - cx) / (rect.width / 2);
+      var dy = (e.clientY - cy) / (rect.height / 2);
+      el.style.setProperty("--ac-rx", (dx * 3).toFixed(1) + "deg");
+      el.style.setProperty("--ac-ry", (dy * -3).toFixed(1) + "deg");
+    }
+  });
+  document.addEventListener("mouseleave", function () {
+    var tilts = document.querySelectorAll(".ac-tilt");
+    for (var t = 0; t < tilts.length; t++) {
+      tilts[t].style.removeProperty("--ac-rx");
+      tilts[t].style.removeProperty("--ac-ry");
+    }
+  }, true);
+
+  /* ── Stagger fast variant ──────────────────── */
+  function assignFastStagger() {
+    var containers = document.querySelectorAll(".ac-stagger-fast");
+    for (var c = 0; c < containers.length; c++) {
+      var kids = containers[c].querySelectorAll(":scope > .ac-observe, :scope > * > .ac-observe");
+      for (var k = 0; k < kids.length; k++) {
+        kids[k].style.setProperty("--ac-i", String(k));
+      }
+    }
+  }
+  assignFastStagger();
+})();