@anubis609/astroanimate-core 0.1.2

package/dist/components/FadeInText/FadeInText.astro

@@ -0,0 +1,314 @@
+---
+/**
+ * FadeInText — Fades in with blur + vertical translate.
+ *
+ * enhance=false (default): Pure CSS @keyframes plays on every page load / refresh.
+ *   No JavaScript involved. Works with JS disabled.
+ *
+ * enhance=true: IntersectionObserver delays the animation until the element
+ *   scrolls into view. Animation fires once (or repeatedly if once=false).
+ */
+
+interface Props {
+  /**
+   * Opt-in to JS-powered scroll-triggered animation (IntersectionObserver).
+   * When false (default), CSS @keyframes plays on every page load automatically.
+   * @default false
+   */
+  enhance?: boolean;
+
+  /**
+   * Animation duration in seconds.
+   * @default 0.6
+   */
+  duration?: number;
+
+  /**
+   * Delay before animation starts in seconds.
+   * CSS animation: applied as animation-delay.
+   * JS-enhanced: applied as transition-delay once element is in view.
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * CSS easing / timing function.
+   * @default "cubic-bezier(0.4, 0, 0.2, 1)"
+   */
+  easing?: string;
+
+  /**
+   * Initial blur amount. Must include a CSS unit (e.g. "6px", "4px").
+   * @default "6px"
+   */
+  blur?: string;
+
+  /**
+   * Vertical distance (px) the element travels upward during the animation.
+   * @default 20
+   */
+  yOffset?: number;
+
+  /**
+   * [enhance=true only] Play the animation only once (true) or reset and
+   * re-animate every time the element re-enters the viewport (false).
+   * Has no effect when enhance=false.
+   * @default true
+   */
+  once?: boolean;
+
+  /**
+   * [enhance=true only] IntersectionObserver bottom rootMargin.
+   * A negative value (e.g. "-50px") means the element must be this far
+   * inside the viewport before the animation fires.
+   * Has no effect when enhance=false.
+   * @default "-50px"
+   */
+  inViewMargin?: string;
+
+  /**
+   * CSS class name applied to the root element.
+   */
+  class?: string;
+
+  /**
+   * HTML element rendered as the root wrapper.
+   * @default "div"
+   */
+  as?:
+    | "div"
+    | "section"
+    | "article"
+    | "aside"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "span"
+    | "p"
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "li"
+    | "ul"
+    | "ol"
+    | "a"
+    | "button";
+
+  /**
+   * Any additional HTML attributes (id, aria-label, role, tabindex, data-*, …)
+   * are forwarded directly to the root element.
+   */
+  [key: string]: unknown;
+}
+
+const {
+  enhance = false,
+  duration = 0.6,
+  delay = 0,
+  easing = "cubic-bezier(0.4, 0, 0.2, 1)",
+  blur = "6px",
+  yOffset = 20,
+  once = true,
+  inViewMargin = "-50px",
+  class: className = "",
+  as: Tag = "div",
+  ...rest
+} = Astro.props as Props;
+---
+
+<style>
+  /*
+   * Separate CSS paths for enhance=false vs enhance=true.
+   *
+   * CSS animation ONLY fires on data-enhance="false" elements.
+   * enhance=true elements start statically hidden — JS owns their animation.
+   * A 2s CSS fallback animation on enhance=true ensures content is never
+   * permanently invisible if JS fails to load.
+   */
+
+  /* ✅ C1 + C7: CSS-only path for enhance=false.
+     Plays automatically on every page load and page refresh.
+     fill-mode "both": element starts in "from" state during delay,
+     and stays in "to" state permanently after the animation ends. */
+  [data-astro-fade-in-text][data-enhance="false"]:not([data-ready]) {
+    animation: fadeInText var(--fit-duration) var(--fit-easing) var(--fit-delay) both;
+  }
+
+  /* ✅ C1: Static hidden state for enhance=true, before JS runs.
+     CSS animation is intentionally suppressed here — JS will control it.
+     The 2s fallback animation is a safety net: if JS fails or is blocked,
+     content becomes visible after 2s instead of staying hidden forever. */
+  [data-astro-fade-in-text][data-enhance="true"]:not([data-ready]) {
+    opacity: 0;
+    filter: blur(var(--fit-blur));
+    transform: translateY(var(--fit-y-offset));
+    animation: fadeInText var(--fit-duration) var(--fit-easing) 2s both;
+  }
+
+  @keyframes fadeInText {
+    from {
+      opacity: 0;
+      filter: blur(var(--fit-blur));
+      transform: translateY(var(--fit-y-offset));
+    }
+    to {
+      opacity: 1;
+      filter: blur(0px);
+      transform: translateY(0);
+    }
+  }
+
+  /* ── JS-enhanced states ─────────────────────────────────────────────────
+     Activated once JS sets data-ready="true". All visual changes are
+     driven purely by data-state attribute — JS never writes element.style.
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* ✅ C7: Waiting for viewport entry */
+  [data-astro-fade-in-text][data-ready="true"][data-state="hidden"] {
+    opacity: 0;
+    filter: blur(var(--fit-blur));
+    transform: translateY(var(--fit-y-offset));
+  }
+
+  /* ✅ C7: Element is in viewport — CSS transition to fully visible */
+  [data-astro-fade-in-text][data-ready="true"][data-state="animate"] {
+    opacity: 1;
+    filter: blur(0px);
+    transform: translateY(0);
+    transition:
+      opacity   var(--fit-duration) var(--fit-easing) var(--fit-delay),
+      filter    var(--fit-duration) var(--fit-easing) var(--fit-delay),
+      transform var(--fit-duration) var(--fit-easing) var(--fit-delay);
+  }
+
+  /* ✅ C6: ALL CSS motion neutralised for prefers-reduced-motion.
+     Covers both the CSS-only path and the JS-enhanced path.
+     Content is shown immediately regardless of animation state. */
+  @media (prefers-reduced-motion: reduce) {
+    [data-astro-fade-in-text]:not([data-ready]) {
+      animation: none !important;
+      opacity: 1 !important;
+      filter: none !important;
+      transform: none !important;
+    }
+    [data-astro-fade-in-text][data-ready="true"] {
+      opacity: 1 !important;
+      filter: none !important;
+      transform: none !important;
+      transition: none !important;
+    }
+  }
+</style>
+
+<!-- ✅ C1: Slot content always present in HTML — meaningful without JS.
+     ✅ C4: No import.meta.env.DEV — identical in dev, build, and preview.
+     ✅ C5: No astro:* events. Standard data attributes only.
+     {...rest} forwards id, aria-label, role, tabindex, data-*, etc.
+     Style is a single inline string — no stray newlines in HTML output. -->
+<Tag
+  {...rest}
+  class:list={["astro-fade-in-text", className]}
+  data-astro-fade-in-text
+  data-enhance={enhance ? "true" : "false"}
+  data-once={once ? "true" : "false"}
+  data-margin={inViewMargin}
+  style={`--fit-duration:${duration}s;--fit-delay:${delay}s;--fit-easing:${easing};--fit-blur:${blur};--fit-y-offset:${yOffset}px`}
+>
+  <!-- ✅ C8: Slot always rendered. JS only adds timing/trigger control. -->
+  <slot />
+</Tag>
+
+<!-- ✅ C2: Script emitted ONLY when enhance=true. No unconditional scripts.
+     is:inline is required — Astro does NOT bundle <script> tags sourced
+     from node_modules. is:inline embeds the script verbatim in HTML output,
+     guaranteeing it ships regardless of the consumer's build configuration. -->
+{enhance && (
+  <script is:inline>
+    (function () {
+      // ✅ C6: SSR guard — bail immediately if not in a browser context
+      if (typeof window === "undefined") return;
+
+      // ✅ C6: Reduced motion check BEFORE any initialisation
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+      // ✅ C3: WeakMap stores IntersectionObserver per element for cleanup.
+      var initialized = new WeakMap();
+
+      function enhanceFadeInText(root) {
+        /*
+         * Cross-IIFE initialisation guard via DOM attribute.
+         *
+         * With N enhance=true FadeInText components on the page,
+         * N IIFEs execute. Each IIFE creates its own fresh WeakMap. Each IIFE's
+         * querySelectorAll finds ALL N elements. Since each WeakMap is always
+         * empty at that moment, initialized.has(root) is always false, so every
+         * IIFE enhances every element. N elements × N IIFEs = N² observers.
+         * Animations race; cleanup fires multiple times per element.
+         *
+         * AFTER (fix): data-ready is set directly on the DOM element, which is
+         * shared state across all IIFEs. The first IIFE to run sets
+         * data-ready="true"; every subsequent IIFE exits immediately on this
+         * check. Exactly one IntersectionObserver + one MutationObserver per
+         * element, regardless of how many components are on the page.
+         */
+        if (root.dataset.ready === "true") return;
+
+        var isOnce = root.dataset.once === "true";
+        var margin = root.dataset.margin || "-50px";
+
+        // ✅ C7: JS sets data attributes only — never element.style.
+        //
+        // Setting data-ready="true" does three things simultaneously:
+        //   1. Acts as the cross-IFFE initialisation guard (see above).
+        //   2. Switches CSS from the static-hidden path to the data-state path.
+        //   3. Cancels the 2s CSS fallback animation (selector no longer matches).
+        root.dataset.ready = "true";
+        root.dataset.state = "hidden";
+
+        // ✅ C3: IntersectionObserver — tracked in WeakMap for cleanup
+        var observer = new IntersectionObserver(
+          function (entries) {
+            entries.forEach(function (entry) {
+              if (entry.isIntersecting) {
+                root.dataset.state = "animate"; // ✅ C7: attribute-only transition
+                if (isOnce) {
+                  // once=true: stop observing after first intersection —
+                  // no further callbacks, no unnecessary CPU work.
+                  observer.unobserve(root);
+                }
+              } else if (!isOnce) {
+                // once=false: element scrolled back out — reset for re-animation.
+                root.dataset.state = "hidden";
+              }
+            });
+          },
+          { threshold: 0.1, rootMargin: "0px 0px " + margin + " 0px" }
+        );
+
+        observer.observe(root);
+        initialized.set(root, observer); // ✅ C3: store ref for guaranteed cleanup
+
+        // ✅ C3: MutationObserver guarantees both observers are disconnected
+        //        when the root element is removed from the DOM (SPA navigation,
+        //        conditional rendering, island teardown, etc.).
+        var cleanupObserver = new MutationObserver(function () {
+          if (!document.contains(root)) {
+            observer.disconnect();        // ✅ C3: IntersectionObserver disconnected
+            cleanupObserver.disconnect(); // ✅ C3: MutationObserver disconnected
+            initialized.delete(root);
+          }
+        });
+
+        cleanupObserver.observe(document.body, { childList: true, subtree: true });
+      }
+
+      document
+        .querySelectorAll('[data-astro-fade-in-text][data-enhance="true"]')
+        .forEach(function (el) { enhanceFadeInText(el); });
+    })();
+  </script>
+)}

package/dist/components/FadeInText/index.js

@@ -0,0 +1,3 @@
+export { default } from './FadeInText.astro';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/FadeInText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/components/FillHoverButton/FillHoverButton.astro

@@ -0,0 +1,125 @@
+---
+interface Props {
+  as?: "button" | "a";
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  class?: string;
+}
+
+const {
+  as = "button",
+  href,
+  type = "button",
+  class: className = "",
+} = Astro.props;
+---
+
+<style>
+  /* ✅ CRITERION 7: CSS-FIRST */
+
+  [data-fhb] {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 1em 1.5em;
+
+    border: none;
+    background: transparent;
+
+    color: #ffc506;
+
+    font-size: 1.0625rem;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    cursor: pointer;
+
+    overflow: hidden;
+    isolation: isolate;
+
+    transition: color 500ms ease;
+  }
+
+  /* Underline */
+  [data-fhb]::before {
+    content: "";
+
+    position: absolute;
+    left: 0;
+    bottom: 0;
+
+    width: 0;
+    height: 2px;
+
+    background: #ffc506;
+
+    transition: width 500ms ease;
+  }
+
+  /* Fill layer */
+  [data-fhb]::after {
+    content: "";
+
+    position: absolute;
+    inset: auto 0 0 0;
+
+    width: 100%;
+    height: 0;
+
+    background: #ffc506;
+
+    z-index: -1;
+
+    transition: height 400ms ease;
+  }
+
+  [data-fhb]:hover {
+    color: #1e1e2b;
+    transition-delay: 500ms;
+  }
+
+  [data-fhb]:hover::before {
+    width: 100%;
+  }
+
+  [data-fhb]:hover::after {
+    height: 100%;
+    transition-delay: 400ms;
+  }
+
+  /* Accessibility */
+  [data-fhb]:focus-visible {
+    outline: 2px solid #ffc506;
+    outline-offset: 4px;
+  }
+
+  /* ✅ CRITERION 6: REDUCED MOTION */
+  @media (prefers-reduced-motion: reduce) {
+    [data-fhb],
+    [data-fhb]::before,
+    [data-fhb]::after {
+      transition: none !important;
+    }
+  }
+</style>
+
+{as === "a" ? (
+  <a
+    data-fhb
+    href={href}
+    class={className}
+  >
+    <slot />
+  </a>
+) : (
+  <button
+    data-fhb
+    type={type}
+    class={className}
+  >
+    <slot />
+  </button>
+)}

package/dist/components/GitHubShineButton/GitHubShineButton.astro

@@ -0,0 +1,208 @@
+---
+interface Props {
+  as?: "button" | "a";
+  href?: string;
+  stars?: number | string;
+  showStars?: boolean;
+  type?: "button" | "submit" | "reset";
+  class?: string;
+  fontFamily?: string;
+}
+
+const {
+  as = "button",
+  href,
+  stars = 0,
+  showStars = true,
+  type = "button",
+  class: className = "",
+  fontFamily = "Inter, sans-serif",
+} = Astro.props;
+---
+
+<style>
+  /* ✅ CRITERION 7: CSS-FIRST */
+
+  [data-ghsb] {
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+
+    height: 2.6rem;
+    padding-inline: 1rem;
+
+    border-radius: 0.5rem;
+    background: black;
+    color: white;
+
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+
+    transition:
+      background-color 300ms ease,
+      box-shadow 300ms ease,
+      transform 300ms ease;
+  }
+
+  /* Shine */
+  [data-ghsb]::before {
+    content: "";
+    position: absolute;
+    top: -4rem;
+    right: 0;
+
+    width: 2rem;
+    height: 8rem;
+
+    transform: translateX(3rem) rotate(12deg);
+
+    background: rgba(255,255,255,0.1);
+
+    transition: transform 1000ms ease;
+  }
+
+  [data-ghsb]:hover::before {
+    transform: translateX(-10rem) rotate(12deg);
+  }
+
+  [data-ghsb]:hover {
+    background: rgba(0,0,0,0.9);
+    box-shadow: 0 0 0 2px white;
+  }
+
+  .main,
+  .stats {
+    position: relative;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .github-icon,
+  .star-icon {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+    flex-shrink: 0;
+  }
+
+  .star-icon {
+    color: #a3a3a3;
+    transition: color 300ms ease;
+  }
+
+  [data-ghsb]:hover .star-icon {
+    color: #fde047;
+  }
+
+  .count {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+  }
+
+  /* Accessibility */
+  [data-ghsb]:focus-visible {
+    outline: 2px solid white;
+    outline-offset: 4px;
+  }
+
+  /* ✅ CRITERION 6: REDUCED MOTION */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ghsb],
+    [data-ghsb] * {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+</style>
+
+{as === "a" ? (
+  <a
+    data-ghsb
+    href={href}
+    class={className}
+    style={`font-family: ${fontFamily};`}
+  >
+    <span class="main">
+      <svg
+        class="github-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M12 .5C5.648.5.5 5.648.5 12a11.5 11.5 0 0 0 7.863 10.923c.575.106.787-.25.787-.556 0-.275-.012-1.188-.018-2.156-3.2.694-3.877-1.544-3.877-1.544-.525-1.337-1.282-1.694-1.282-1.694-1.05-.719.081-.706.081-.706 1.162.081 1.775 1.194 1.775 1.194 1.031 1.769 2.706 1.258 3.369.962.106-.75.406-1.256.737-1.544-2.556-.288-5.244-1.281-5.244-5.706 0-1.262.45-2.294 1.188-3.106-.119-.288-.519-1.45.112-3.019 0 0 .969-.31 3.175 1.188A11.06 11.06 0 0 1 12 6.094c.975.006 1.956.131 2.875.381 2.206-1.5 3.175-1.188 3.175-1.188.631 1.569.231 2.731.112 3.019.738.812 1.188 1.844 1.188 3.106 0 4.438-2.694 5.413-5.256 5.694.419.362.794 1.075.794 2.169 0 1.569-.013 2.831-.013 3.219 0 .306.206.669.794.556A11.503 11.503 0 0 0 23.5 12C23.5 5.648 18.352.5 12 .5Z"
+        />
+      </svg>
+
+      <span>
+        <slot />
+      </span>
+    </span>
+
+    {showStars && (
+      <span class="stats">
+        <svg
+          class="star-icon"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+          />
+        </svg>
+
+        <span class="count">{stars}</span>
+      </span>
+    )}
+  </a>
+) : (
+  <button
+    data-ghsb
+    type={type}
+    class={className}
+    style={`font-family: ${fontFamily};`}
+  >
+    <span class="main">
+      <svg
+  class="github-icon"
+  aria-hidden="true"
+  viewBox="0 0 24 24"
+>
+  <path
+    fill="currentColor"
+    d="M12 .5C5.648.5.5 5.648.5 12a11.5 11.5 0 0 0 7.863 10.923c.575.106.787-.25.787-.556 0-.275-.012-1.188-.018-2.156-3.2.694-3.877-1.544-3.877-1.544-.525-1.337-1.282-1.694-1.282-1.694-1.05-.719.081-.706.081-.706 1.162.081 1.775 1.194 1.775 1.194 1.031 1.769 2.706 1.258 3.369.962.106-.75.406-1.256.737-1.544-2.556-.288-5.244-1.281-5.244-5.706 0-1.262.45-2.294 1.188-3.106-.119-.288-.519-1.45.112-3.019 0 0 .969-.31 3.175 1.188A11.06 11.06 0 0 1 12 6.094c.975.006 1.956.131 2.875.381 2.206-1.5 3.175-1.188 3.175-1.188.631 1.569.231 2.731.112 3.019.738.812 1.188 1.844 1.188 3.106 0 4.438-2.694 5.413-5.256 5.694.419.362.794 1.075.794 2.169 0 1.569-.013 2.831-.013 3.219 0 .306.206.669.794.556A11.503 11.503 0 0 0 23.5 12C23.5 5.648 18.352.5 12 .5Z"
+  />
+</svg>
+
+      <span>
+        <slot />
+      </span>
+    </span>
+
+    {showStars && (
+      <span class="stats">
+        <svg
+    class="star-icon"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
+
+        <span class="count">{stars}</span>
+      </span>
+    )}
+  </button>
+)}