@readdy/anim 0.0.21 → 0.0.26

package/dist/full.js

@@ -257,12 +257,12 @@
     }
   }
 
-  const ANIMATION_ID$x = buildAnimId('letter-bounce');
+  const ANIMATION_ID$z = buildAnimId('letter-bounce');
 
   const CSS_CLASS$x = buildAnimClass('letter-bounce');
   const CHAR_CLASS$6 = buildAnimClass('letter-bounce-char');
 
-  function init$x(el, options = {}) {
+  function init$z(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$x)) {
       el.classList.add(CSS_CLASS$x);
     }
@@ -277,7 +277,7 @@
     });
   }
 
-  function destroy$x(el) {
+  function destroy$z(el) {
     el.classList.remove(CSS_CLASS$x);
     el.style.removeProperty('--readdy-anim-letter-bounce-duration');
     el.style.removeProperty('--readdy-anim-letter-bounce-amplitude');
@@ -289,30 +289,66 @@
 
   var letterBounce = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$x,
-    destroy: destroy$x,
-    init: init$x
+    ANIMATION_ID: ANIMATION_ID$z,
+    destroy: destroy$z,
+    init: init$z
   });
 
-  const ANIMATION_ID$w = buildAnimId('shimmer-text');
+  const ANIMATION_ID$y = buildAnimId('shimmer-text');
 
   const CSS_CLASS$w = buildAnimClass('shimmer-text');
+  const UNIT_CLASS$1 = buildAnimClass('shimmer-text-unit');
+
+  function wrapTextNodes$1(el) {
+    if (!el.dataset.originalText) {
+      el.dataset.originalText = el.innerHTML;
+    }
+
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    let node = walker.nextNode();
+
+    while (node) {
+      textNodes.push(node);
+      node = walker.nextNode();
+    }
+
+    for (const textNode of textNodes) {
+      const text = textNode.textContent ?? '';
+      if (!text.trim()) {
+        continue
+      }
+
+      const span = document.createElement('span');
+      span.className = UNIT_CLASS$1;
+      span.textContent = text;
+      textNode.parentNode?.replaceChild(span, textNode);
+    }
+  }
+
+  function init$y(el) {
+    destroy$y(el);
 
-  function init$w(el) {
     if (!el.classList.contains(CSS_CLASS$w)) {
       el.classList.add(CSS_CLASS$w);
     }
+
+    wrapTextNodes$1(el);
   }
 
-  function destroy$w(el) {
+  function destroy$y(el) {
     el.classList.remove(CSS_CLASS$w);
+    if (el.dataset.originalText) {
+      el.innerHTML = el.dataset.originalText;
+      delete el.dataset.originalText;
+    }
   }
 
   var shimmerText = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$w,
-    destroy: destroy$w,
-    init: init$w
+    ANIMATION_ID: ANIMATION_ID$y,
+    destroy: destroy$y,
+    init: init$y
   });
 
   /**
@@ -331,7 +367,7 @@
       window.matchMedia('(prefers-reduced-motion: reduce)').matches
   }
 
-  const ANIMATION_ID$v = buildAnimId('text-type');
+  const ANIMATION_ID$x = buildAnimId('text-type');
 
   const CSS_CLASS$v = buildAnimClass('text-type');
   const CONTENT_CLASS = buildAnimClass('text-type-content');
@@ -503,8 +539,8 @@
     schedule(state, typeNext, typingSpeed);
   }
 
-  function init$v(el, options = {}) {
-    destroy$v(el);
+  function init$x(el, options = {}) {
+    destroy$x(el);
 
     if (!el.dataset.originalText) {
       el.dataset.originalText = el.innerHTML;
@@ -567,7 +603,7 @@
     typePhrase(state, 0);
   }
 
-  function destroy$v(el) {
+  function destroy$x(el) {
     const state = stateMap$9.get(el);
     if (state) {
       clearState$1(state);
@@ -597,33 +633,69 @@
 
   var textType = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$v,
-    destroy: destroy$v,
-    init: init$v
+    ANIMATION_ID: ANIMATION_ID$x,
+    destroy: destroy$x,
+    init: init$x
   });
 
-  const ANIMATION_ID$u = buildAnimId('gradient-text');
+  const ANIMATION_ID$w = buildAnimId('gradient-text');
 
   const CSS_CLASS$u = buildAnimClass('gradient-text');
+  const UNIT_CLASS = buildAnimClass('gradient-text-unit');
+
+  function wrapTextNodes(el) {
+    if (!el.dataset.originalText) {
+      el.dataset.originalText = el.innerHTML;
+    }
+
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    let node = walker.nextNode();
+
+    while (node) {
+      textNodes.push(node);
+      node = walker.nextNode();
+    }
+
+    for (const textNode of textNodes) {
+      const text = textNode.textContent ?? '';
+      if (!text.trim()) {
+        continue
+      }
+
+      const span = document.createElement('span');
+      span.className = UNIT_CLASS;
+      span.textContent = text;
+      textNode.parentNode?.replaceChild(span, textNode);
+    }
+  }
+
+  function init$w(el, options = {}) {
+    destroy$w(el);
 
-  function init$u(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$u)) {
       el.classList.add(CSS_CLASS$u);
     }
+
+    wrapTextNodes(el);
   }
 
-  function destroy$u(el) {
+  function destroy$w(el) {
     el.classList.remove(CSS_CLASS$u);
+    if (el.dataset.originalText) {
+      el.innerHTML = el.dataset.originalText;
+      delete el.dataset.originalText;
+    }
   }
 
   var gradientText = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$u,
-    destroy: destroy$u,
-    init: init$u
+    ANIMATION_ID: ANIMATION_ID$w,
+    destroy: destroy$w,
+    init: init$w
   });
 
-  const ANIMATION_ID$t = buildAnimId('fly-in-chars');
+  const ANIMATION_ID$v = buildAnimId('fly-in-chars');
 
   const CSS_CLASS$t = buildAnimClass('fly-in-chars');
   const CHAR_CLASS$5 = buildAnimClass('fly-in-char');
@@ -632,7 +704,7 @@
     return Math.round(min + Math.random() * (max - min))
   }
 
-  function init$t(el, options = {}) {
+  function init$v(el, options = {}) {
     if (el.classList.contains(CSS_CLASS$t)) {
       return
     }
@@ -657,7 +729,7 @@
     }
   }
 
-  function destroy$t(el) {
+  function destroy$v(el) {
     el.classList.remove(CSS_CLASS$t);
     if (el.dataset.originalText) {
       el.innerHTML = el.dataset.originalText;
@@ -667,33 +739,50 @@
 
   var flyInChars = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$t,
-    destroy: destroy$t,
-    init: init$t
+    ANIMATION_ID: ANIMATION_ID$v,
+    destroy: destroy$v,
+    init: init$v
   });
 
-  const ANIMATION_ID$s = buildAnimId('blur-rise');
+  const ANIMATION_ID$u = buildAnimId('blur-rise');
 
   const CSS_CLASS$s = buildAnimClass('blur-rise');
 
-  function init$s(el, options = {}) {
+  function init$u(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$s)) {
       el.classList.add(CSS_CLASS$s);
     }
   }
 
-  function destroy$s(el) {
+  function destroy$u(el) {
     el.classList.remove(CSS_CLASS$s);
   }
 
   var blurRise = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$s,
-    destroy: destroy$s,
-    init: init$s
+    ANIMATION_ID: ANIMATION_ID$u,
+    destroy: destroy$u,
+    init: init$u
   });
 
-  const ANIMATION_ID$r = buildAnimId('split-text');
+  const ANIMATION_ID$t = buildAnimId('blur-to-sharp-rise');
+
+  function init$t(el, options = {}) {
+    init$u(el, options);
+  }
+
+  function destroy$t(el) {
+    destroy$u(el);
+  }
+
+  var blurToSharpRise = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ANIMATION_ID: ANIMATION_ID$t,
+    destroy: destroy$t,
+    init: init$t
+  });
+
+  const ANIMATION_ID$s = buildAnimId('split-text');
 
   const CSS_CLASS$r = buildAnimClass('split-text');
   const VISIBLE_CLASS = 'is-visible';
@@ -706,7 +795,7 @@
     }
   }
 
-  function init$r(el, options = {}) {
+  function init$s(el, options = {}) {
     if (el.classList.contains(CSS_CLASS$r)) {
       return
     }
@@ -747,7 +836,7 @@
     observerMap.set(el, observer);
   }
 
-  function destroy$r(el) {
+  function destroy$s(el) {
     const observer = observerMap.get(el);
     if (observer) {
       observer.disconnect();
@@ -763,12 +852,12 @@
 
   var splitText = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$r,
-    destroy: destroy$r,
-    init: init$r
+    ANIMATION_ID: ANIMATION_ID$s,
+    destroy: destroy$s,
+    init: init$s
   });
 
-  const ANIMATION_ID$q = buildAnimId('shuffle');
+  const ANIMATION_ID$r = buildAnimId('shuffle');
 
   const CSS_CLASS$q = buildAnimClass('shuffle');
   const CHAR_CLASS$3 = buildAnimClass('shuffle-char');
@@ -825,7 +914,7 @@
     });
   }
 
-  function init$q(el, options = {}) {
+  function init$r(el, options = {}) {
     if (el.classList.contains(CSS_CLASS$q)) {
       return
     }
@@ -863,7 +952,7 @@
     runShuffle(el, options);
   }
 
-  function destroy$q(el) {
+  function destroy$r(el) {
     const state = stateMap$8.get(el);
     if (state) {
       clearState(state);
@@ -884,17 +973,17 @@
 
   var shuffle = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$q,
-    destroy: destroy$q,
-    init: init$q
+    ANIMATION_ID: ANIMATION_ID$r,
+    destroy: destroy$r,
+    init: init$r
   });
 
-  const ANIMATION_ID$p = buildAnimId('roll-in');
+  const ANIMATION_ID$q = buildAnimId('roll-in');
 
   const CSS_CLASS$p = buildAnimClass('roll-in');
   const CHAR_CLASS$2 = buildAnimClass('roll-in-char');
 
-  function init$p(el, options = {}) {
+  function init$q(el, options = {}) {
     if (el.classList.contains(CSS_CLASS$p)) {
       return
     }
@@ -912,7 +1001,7 @@
     });
   }
 
-  function destroy$p(el) {
+  function destroy$q(el) {
     el.classList.remove(CSS_CLASS$p);
     if (el.dataset.originalText) {
       el.innerHTML = el.dataset.originalText;
@@ -922,12 +1011,12 @@
 
   var rollIn = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$p,
-    destroy: destroy$p,
-    init: init$p
+    ANIMATION_ID: ANIMATION_ID$q,
+    destroy: destroy$q,
+    init: init$q
   });
 
-  const ANIMATION_ID$o = buildAnimId('anime-splittext');
+  const ANIMATION_ID$p = buildAnimId('anime-splittext');
 
   const CSS_CLASS$o = buildAnimClass('anime-splittext');
   const WORD_CLASS$1 = buildAnimClass('anime-word');
@@ -1013,8 +1102,8 @@
     }
   }
 
-  function init$o(el, options = {}) {
-    destroy$o(el);
+  function init$p(el, options = {}) {
+    destroy$p(el);
 
     if (!el.classList.contains(CSS_CLASS$o)) {
       el.classList.add(CSS_CLASS$o);
@@ -1024,7 +1113,7 @@
     splitWords$1(el, options);
   }
 
-  function destroy$o(el) {
+  function destroy$p(el) {
     el.classList.remove(CSS_CLASS$o);
     el.style.removeProperty('--readdy-anim-anime-word-duration');
     if (el.dataset.originalText) {
@@ -1035,12 +1124,12 @@
 
   var animeSplittext = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$o,
-    destroy: destroy$o,
-    init: init$o
+    ANIMATION_ID: ANIMATION_ID$p,
+    destroy: destroy$p,
+    init: init$p
   });
 
-  const ANIMATION_ID$n = buildAnimId('word-curtain-reveal');
+  const ANIMATION_ID$o = buildAnimId('word-curtain-reveal');
 
   const CSS_CLASS$n = buildAnimClass('word-curtain-reveal');
   const WORD_CLASS = buildAnimClass('word-curtain-word');
@@ -1106,8 +1195,8 @@
     }
   }
 
-  function init$n(el, options = {}) {
-    destroy$n(el);
+  function init$o(el, options = {}) {
+    destroy$o(el);
 
     if (!el.classList.contains(CSS_CLASS$n)) {
       el.classList.add(CSS_CLASS$n);
@@ -1125,7 +1214,7 @@
     splitWords(el, options.stagger ?? 35);
   }
 
-  function destroy$n(el) {
+  function destroy$o(el) {
     el.classList.remove(CSS_CLASS$n);
     el.style.removeProperty('--readdy-anim-word-curtain-duration');
     if (el.dataset.originalText) {
@@ -1136,17 +1225,17 @@
 
   var wordCurtainReveal = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$n,
-    destroy: destroy$n,
-    init: init$n
+    ANIMATION_ID: ANIMATION_ID$o,
+    destroy: destroy$o,
+    init: init$o
   });
 
-  const ANIMATION_ID$m = buildAnimId('bounce-in-down');
+  const ANIMATION_ID$n = buildAnimId('bounce-in-down');
 
   const CSS_CLASS$m = buildAnimClass('bounce-in-down');
   const CHAR_CLASS = buildAnimClass('bounce-in-down-char');
 
-  function init$m(el, options = {}) {
+  function init$n(el, options = {}) {
     if (el.classList.contains(CSS_CLASS$m)) {
       return
     }
@@ -1164,7 +1253,7 @@
     });
   }
 
-  function destroy$m(el) {
+  function destroy$n(el) {
     el.classList.remove(CSS_CLASS$m);
     if (el.dataset.originalText) {
       el.innerHTML = el.dataset.originalText;
@@ -1174,9 +1263,9 @@
 
   var bounceInDown = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$m,
-    destroy: destroy$m,
-    init: init$m
+    ANIMATION_ID: ANIMATION_ID$n,
+    destroy: destroy$n,
+    init: init$n
   });
 
   function getPointerMetrics(target, event) {
@@ -1271,7 +1360,7 @@
     }
   }
 
-  const ANIMATION_ID$l = buildAnimId('magnetic-hover');
+  const ANIMATION_ID$m = buildAnimId('magnetic-hover');
 
   const CSS_CLASS$l = buildAnimClass('magnetic-hover');
   const stateMap$7 = new WeakMap();
@@ -1282,8 +1371,8 @@
     el.style.setProperty('--readdy-anim-magnetic-scale', '1');
   }
 
-  function init$l(el, options = {}) {
-    destroy$l(el);
+  function init$m(el, options = {}) {
+    destroy$m(el);
 
     el.classList.add(CSS_CLASS$l);
     resetTransform(el);
@@ -1315,7 +1404,7 @@
     stateMap$7.set(el, { cleanup });
   }
 
-  function destroy$l(el) {
+  function destroy$m(el) {
     const state = stateMap$7.get(el);
     if (state) {
       state.cleanup();
@@ -1330,12 +1419,12 @@
 
   var magneticHover = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$l,
-    destroy: destroy$l,
-    init: init$l
+    ANIMATION_ID: ANIMATION_ID$m,
+    destroy: destroy$m,
+    init: init$m
   });
 
-  const ANIMATION_ID$k = buildAnimId('border-beam');
+  const ANIMATION_ID$l = buildAnimId('border-beam');
 
   const CSS_CLASS$k = buildAnimClass('border-beam');
   const LAYER_CLASS$1 = `${CSS_CLASS$k}__layer`;
@@ -1460,7 +1549,7 @@
     }
   }
 
-  function init$k(el, options = {}) {
+  function init$l(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$k)) {
       el.classList.add(CSS_CLASS$k);
     }
@@ -1484,7 +1573,7 @@
     runAnimation(el);
   }
 
-  function destroy$k(el) {
+  function destroy$l(el) {
     cancelAnimation(el);
 
     const state = el[STATE_KEY];
@@ -1502,16 +1591,16 @@
 
   var borderBeam = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$k,
-    destroy: destroy$k,
-    init: init$k
+    ANIMATION_ID: ANIMATION_ID$l,
+    destroy: destroy$l,
+    init: init$l
   });
 
-  const ANIMATION_ID$j = buildAnimId('shimmer-border');
+  const ANIMATION_ID$k = buildAnimId('shimmer-border');
 
   const CSS_CLASS$j = buildAnimClass('shimmer-border');
 
-  function init$j(el, options = {}) {
+  function init$k(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$j)) {
       el.classList.add(CSS_CLASS$j);
     }
@@ -1521,7 +1610,7 @@
     el.style.setProperty('--readdy-anim-shimmer-border-opacity', `${options.opacity ?? 0.88}`);
   }
 
-  function destroy$j(el) {
+  function destroy$k(el) {
     el.classList.remove(CSS_CLASS$j);
     el.style.removeProperty('--readdy-anim-shimmer-border-duration');
     el.style.removeProperty('--readdy-anim-shimmer-border-width');
@@ -1530,54 +1619,54 @@
 
   var shimmerBorder = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$j,
-    destroy: destroy$j,
-    init: init$j
+    ANIMATION_ID: ANIMATION_ID$k,
+    destroy: destroy$k,
+    init: init$k
   });
 
-  const ANIMATION_ID$i = buildAnimId('rainbow-button');
+  const ANIMATION_ID$j = buildAnimId('rainbow-button');
 
   const CSS_CLASS$i = buildAnimClass('rainbow-button');
 
-  function init$i(el, options = {}) {
+  function init$j(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$i)) {
       el.classList.add(CSS_CLASS$i);
     }
   }
 
-  function destroy$i(el) {
+  function destroy$j(el) {
     el.classList.remove(CSS_CLASS$i);
   }
 
   var rainbowButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$i,
-    destroy: destroy$i,
-    init: init$i
+    ANIMATION_ID: ANIMATION_ID$j,
+    destroy: destroy$j,
+    init: init$j
   });
 
-  const ANIMATION_ID$h = buildAnimId('sketch-button');
+  const ANIMATION_ID$i = buildAnimId('sketch-button');
 
   const CSS_CLASS$h = buildAnimClass('sketch-button');
 
-  function init$h(el) {
+  function init$i(el) {
     if (!el.classList.contains(CSS_CLASS$h)) {
       el.classList.add(CSS_CLASS$h);
     }
   }
 
-  function destroy$h(el) {
+  function destroy$i(el) {
     el.classList.remove(CSS_CLASS$h);
   }
 
   var sketchButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$h,
-    destroy: destroy$h,
-    init: init$h
+    ANIMATION_ID: ANIMATION_ID$i,
+    destroy: destroy$i,
+    init: init$i
   });
 
-  const ANIMATION_ID$g = buildAnimId('confetti-button');
+  const ANIMATION_ID$h = buildAnimId('confetti-button');
 
   const CSS_CLASS$g = buildAnimClass('confetti-button');
   const LAYER_CLASS = buildAnimClass('confetti-layer');
@@ -1608,13 +1697,13 @@
     }, 1100)
   }
 
-  function init$g(el, options = {}) {
-    destroy$g(el);
+  function init$h(el, options = {}) {
+    destroy$h(el);
 
     el.classList.add(CSS_CLASS$g);
 
     const onClick = () => {
-      if (prefersReducedMotion()) {
+      if (options.respectReducedMotion !== false && prefersReducedMotion()) {
         return
       }
       const timeoutId = createBurst(el, options);
@@ -1628,7 +1717,7 @@
     stateMap$6.set(el, { onClick, timeoutIds: [] });
   }
 
-  function destroy$g(el) {
+  function destroy$h(el) {
     const state = stateMap$6.get(el);
     if (state) {
       el.removeEventListener('click', state.onClick);
@@ -1642,12 +1731,12 @@
 
   var confettiButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$g,
-    destroy: destroy$g,
-    init: init$g
+    ANIMATION_ID: ANIMATION_ID$h,
+    destroy: destroy$h,
+    init: init$h
   });
 
-  const ANIMATION_ID$f = buildAnimId('glow-cta');
+  const ANIMATION_ID$g = buildAnimId('glow-cta');
 
   const CSS_CLASS$f = buildAnimClass('glow-cta');
   const ACTIVE_CLASS$1 = buildAnimClass('glow-cta-active');
@@ -1655,7 +1744,7 @@
   const GLOW_X_VAR = '--readdy-anim-glow-cta-x';
   const GLOW_Y_VAR = '--readdy-anim-glow-cta-y';
 
-  function init$f(el, options = {}) {
+  function init$g(el, options = {}) {
     if (cleanups.has(el)) return
 
     el.classList.add(CSS_CLASS$f);
@@ -1692,7 +1781,7 @@
     cleanups.set(el, cleanup);
   }
 
-  function destroy$f(el) {
+  function destroy$g(el) {
     cleanups.get(el)?.();
     cleanups.delete(el);
 
@@ -1709,12 +1798,12 @@
 
   var glowCta = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$f,
-    destroy: destroy$f,
-    init: init$f
+    ANIMATION_ID: ANIMATION_ID$g,
+    destroy: destroy$g,
+    init: init$g
   });
 
-  const ANIMATION_ID$e = buildAnimId('bubble-button');
+  const ANIMATION_ID$f = buildAnimId('bubble-button');
 
   const CSS_CLASS$e = buildAnimClass('bubble-button');
   const ACTIVE_CLASS = buildAnimClass('bubble-button-active');
@@ -1967,8 +2056,8 @@
     });
   }
 
-  function init$e(el) {
-    destroy$e(el);
+  function init$f(el) {
+    destroy$f(el);
     el.classList.add(CSS_CLASS$e);
 
     if (prefersReducedMotion()) {
@@ -2001,7 +2090,7 @@
     stateMap$5.set(el, state);
   }
 
-  function destroy$e(el) {
+  function destroy$f(el) {
     const state = stateMap$5.get(el);
     if (state) {
       state.container.removeEventListener('mouseenter', state.onEnter);
@@ -2030,75 +2119,75 @@
 
   var bubbleButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$e,
-    destroy: destroy$e,
-    init: init$e
+    ANIMATION_ID: ANIMATION_ID$f,
+    destroy: destroy$f,
+    init: init$f
   });
 
-  const ANIMATION_ID$d = buildAnimId('bounce-elastic');
+  const ANIMATION_ID$e = buildAnimId('bounce-elastic');
 
   const CSS_CLASS$d = buildAnimClass('bounce-elastic');
 
-  function init$d(el, options = {}) {
+  function init$e(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$d)) {
       el.classList.add(CSS_CLASS$d);
     }
   }
 
-  function destroy$d(el) {
+  function destroy$e(el) {
     el.classList.remove(CSS_CLASS$d);
   }
 
   var bounceElastic = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$d,
-    destroy: destroy$d,
-    init: init$d
+    ANIMATION_ID: ANIMATION_ID$e,
+    destroy: destroy$e,
+    init: init$e
   });
 
-  const ANIMATION_ID$c = buildAnimId('pulse');
+  const ANIMATION_ID$d = buildAnimId('pulse');
 
   const CSS_CLASS$c = buildAnimClass('pulse');
 
-  function init$c(el, options = {}) {
+  function init$d(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$c)) {
       el.classList.add(CSS_CLASS$c);
     }
   }
 
-  function destroy$c(el) {
+  function destroy$d(el) {
     el.classList.remove(CSS_CLASS$c);
   }
 
   var pulse = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$c,
-    destroy: destroy$c,
-    init: init$c
+    ANIMATION_ID: ANIMATION_ID$d,
+    destroy: destroy$d,
+    init: init$d
   });
 
-  const ANIMATION_ID$b = buildAnimId('blur-fade-in');
+  const ANIMATION_ID$c = buildAnimId('blur-fade-in');
 
   const CSS_CLASS$b = buildAnimClass('blur-fade-in');
 
-  function init$b(el, options = {}) {
+  function init$c(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$b)) {
       el.classList.add(CSS_CLASS$b);
     }
   }
 
-  function destroy$b(el) {
+  function destroy$c(el) {
     el.classList.remove(CSS_CLASS$b);
   }
 
   var blurFadeIn = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$b,
-    destroy: destroy$b,
-    init: init$b
+    ANIMATION_ID: ANIMATION_ID$c,
+    destroy: destroy$c,
+    init: init$c
   });
 
-  const ANIMATION_ID$a = buildAnimId('3d-flip');
+  const ANIMATION_ID$b = buildAnimId('3d-flip');
 
   const CSS_CLASS$a = buildAnimClass('3d-flip');
   const stateMap$4 = new WeakMap();
@@ -2110,8 +2199,8 @@
     el.style.setProperty('--readdy-anim-3d-translate-y', '0px');
   }
 
-  function init$a(el, options = {}) {
-    destroy$a(el);
+  function init$b(el, options = {}) {
+    destroy$b(el);
 
     el.classList.add(CSS_CLASS$a);
     reset$1(el);
@@ -2140,7 +2229,7 @@
     stateMap$4.set(el, { cleanup });
   }
 
-  function destroy$a(el) {
+  function destroy$b(el) {
     const state = stateMap$4.get(el);
     if (state) {
       state.cleanup();
@@ -2156,33 +2245,33 @@
 
   var flip3d = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$a,
-    destroy: destroy$a,
-    init: init$a
+    ANIMATION_ID: ANIMATION_ID$b,
+    destroy: destroy$b,
+    init: init$b
   });
 
-  const ANIMATION_ID$9 = buildAnimId('float-idle');
+  const ANIMATION_ID$a = buildAnimId('float-idle');
 
   const CSS_CLASS$9 = buildAnimClass('float-idle');
 
-  function init$9(el, options = {}) {
+  function init$a(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$9)) {
       el.classList.add(CSS_CLASS$9);
     }
   }
 
-  function destroy$9(el) {
+  function destroy$a(el) {
     el.classList.remove(CSS_CLASS$9);
   }
 
   var floatIdle = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$9,
-    destroy: destroy$9,
-    init: init$9
+    ANIMATION_ID: ANIMATION_ID$a,
+    destroy: destroy$a,
+    init: init$a
   });
 
-  const ANIMATION_ID$8 = buildAnimId('tilted-card');
+  const ANIMATION_ID$9 = buildAnimId('tilted-card');
 
   const CSS_CLASS$8 = buildAnimClass('tilted-card');
   const stateMap$3 = new WeakMap();
@@ -2193,8 +2282,8 @@
     el.style.setProperty('--readdy-anim-card-scale', '1');
   }
 
-  function init$8(el, options = {}) {
-    destroy$8(el);
+  function init$9(el, options = {}) {
+    destroy$9(el);
 
     el.classList.add(CSS_CLASS$8);
     reset(el);
@@ -2227,7 +2316,7 @@
     stateMap$3.set(el, { cleanup });
   }
 
-  function destroy$8(el) {
+  function destroy$9(el) {
     const state = stateMap$3.get(el);
     if (state) {
       state.cleanup();
@@ -2244,12 +2333,12 @@
 
   var tiltedCard = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$8,
-    destroy: destroy$8,
-    init: init$8
+    ANIMATION_ID: ANIMATION_ID$9,
+    destroy: destroy$9,
+    init: init$9
   });
 
-  const ANIMATION_ID$7 = buildAnimId('card-flip');
+  const ANIMATION_ID$8 = buildAnimId('card-flip');
 
   const CSS_CLASS$7 = buildAnimClass('card-flip');
   const SCENE_CLASS = buildAnimClass('card-flip-scene');
@@ -2365,8 +2454,8 @@
     });
   }
 
-  function init$7(el, options = {}) {
-    destroy$7(el);
+  function init$8(el, options = {}) {
+    destroy$8(el);
 
     const originalNodes = collectRenderableNodes(el);
     const rect = el.getBoundingClientRect();
@@ -2420,7 +2509,7 @@
     el.replaceChildren(scene);
   }
 
-  function destroy$7(el) {
+  function destroy$8(el) {
     const state = stateMap$2.get(el);
     el.classList.remove(CSS_CLASS$7);
     el.style.removeProperty('--readdy-anim-card-flip-duration');
@@ -2452,9 +2541,9 @@
 
   var cardFlip = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$7,
-    destroy: destroy$7,
-    init: init$7
+    ANIMATION_ID: ANIMATION_ID$8,
+    destroy: destroy$8,
+    init: init$8
   });
 
   function hasUsableBackgroundImage(node) {
@@ -2499,14 +2588,14 @@
     return el.firstElementChild instanceof HTMLElement ? el.firstElementChild : el
   }
 
-  const ANIMATION_ID$6 = buildAnimId('image-zoom-rotate');
+  const ANIMATION_ID$7 = buildAnimId('image-zoom-rotate');
 
   const CSS_CLASS$6 = buildAnimClass('image-zoom-rotate');
   const MEDIA_CLASS$1 = buildAnimClass('card-media');
 
   const autoMediaState = new WeakMap();
 
-  function init$6(el, options = {}) {
+  function init$7(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$6)) {
       el.classList.add(CSS_CLASS$6);
     }
@@ -2531,7 +2620,7 @@
     autoMediaState.set(el, state);
   }
 
-  function destroy$6(el) {
+  function destroy$7(el) {
     el.classList.remove(CSS_CLASS$6);
     el.style.removeProperty('--readdy-anim-image-zoom-scale');
     el.style.removeProperty('--readdy-anim-image-zoom-rotate');
@@ -2546,16 +2635,16 @@
 
   var imageZoomRotate = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$6,
-    destroy: destroy$6,
-    init: init$6
+    ANIMATION_ID: ANIMATION_ID$7,
+    destroy: destroy$7,
+    init: init$7
   });
 
-  const ANIMATION_ID$5 = buildAnimId('rgb-split-glitch');
+  const ANIMATION_ID$6 = buildAnimId('rgb-split-glitch');
 
   const CSS_CLASS$5 = buildAnimClass('rgb-split-glitch');
 
-  function init$5(el, options = {}) {
+  function init$6(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$5)) {
       el.classList.add(CSS_CLASS$5);
     }
@@ -2565,7 +2654,7 @@
     el.style.setProperty('--readdy-anim-rgb-glitch-shadow', `${options.shadowOffset ?? 2}px`);
   }
 
-  function destroy$5(el) {
+  function destroy$6(el) {
     el.classList.remove(CSS_CLASS$5);
     el.style.removeProperty('--readdy-anim-rgb-glitch-duration');
     el.style.removeProperty('--readdy-anim-rgb-glitch-shift');
@@ -2574,12 +2663,12 @@
 
   var rgbSplitGlitch = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$5,
-    destroy: destroy$5,
-    init: init$5
+    ANIMATION_ID: ANIMATION_ID$6,
+    destroy: destroy$6,
+    init: init$6
   });
 
-  const ANIMATION_ID$4 = buildAnimId('card-fan-spread');
+  const ANIMATION_ID$5 = buildAnimId('card-fan-spread');
 
   const CSS_CLASS$4 = buildAnimClass('card-fan-spread');
   const STACK_CLASS = buildAnimClass('card-fan-stack');
@@ -2644,8 +2733,8 @@
     return stack
   }
 
-  function init$4(el, options = {}) {
-    destroy$4(el);
+  function init$5(el, options = {}) {
+    destroy$5(el);
 
     el.classList.add(CSS_CLASS$4);
     const spreadDistance = options.spreadDistance ?? 72;
@@ -2695,7 +2784,7 @@
     stateMap$1.set(el, state);
   }
 
-  function destroy$4(el) {
+  function destroy$5(el) {
     const state = stateMap$1.get(el);
     if (state) {
       if (state.toggle) {
@@ -2724,12 +2813,12 @@
 
   var cardFanSpread = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$4,
-    destroy: destroy$4,
-    init: init$4
+    ANIMATION_ID: ANIMATION_ID$5,
+    destroy: destroy$5,
+    init: init$5
   });
 
-  const ANIMATION_ID$3 = buildAnimId('image-magnifier');
+  const ANIMATION_ID$4 = buildAnimId('image-magnifier');
 
   const CSS_CLASS$3 = buildAnimClass('image-magnifier');
   const MEDIA_CLASS = buildAnimClass('card-media');
@@ -2957,8 +3046,8 @@
     lens.style.backgroundPosition = `${localX}% ${localY}%`;
   }
 
-  function init$3(el, options = {}) {
-    destroy$3(el);
+  function init$4(el, options = {}) {
+    destroy$4(el);
 
     el.classList.add(CSS_CLASS$3);
 
@@ -3039,7 +3128,7 @@
     primeLensSurface(el, state, zoomFactor);
   }
 
-  function destroy$3(el) {
+  function destroy$4(el) {
     const state = stateMap.get(el);
     if (state) {
       state.cleanupPointerFollow();
@@ -3059,16 +3148,16 @@
 
   var imageMagnifier = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$3,
-    destroy: destroy$3,
-    init: init$3
+    ANIMATION_ID: ANIMATION_ID$4,
+    destroy: destroy$4,
+    init: init$4
   });
 
-  const ANIMATION_ID$2 = buildAnimId('pop-in-stack');
+  const ANIMATION_ID$3 = buildAnimId('pop-in-stack');
 
   const CSS_CLASS$2 = buildAnimClass('pop-in-stack');
 
-  function init$2(el, options = {}) {
+  function init$3(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$2)) {
       el.classList.add(CSS_CLASS$2);
     }
@@ -3079,7 +3168,7 @@
     el.style.setProperty('--readdy-anim-pop-scale-start', `${options.scaleStart ?? 0.88}`);
   }
 
-  function destroy$2(el) {
+  function destroy$3(el) {
     el.classList.remove(CSS_CLASS$2);
     el.style.removeProperty('--readdy-anim-pop-delay');
     el.style.removeProperty('--readdy-anim-pop-duration');
@@ -3089,47 +3178,76 @@
 
   var popInStack = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$2,
-    destroy: destroy$2,
-    init: init$2
+    ANIMATION_ID: ANIMATION_ID$3,
+    destroy: destroy$3,
+    init: init$3
   });
 
-  const ANIMATION_ID$1 = buildAnimId('bounce-in-bottom');
+  const ANIMATION_ID$2 = buildAnimId('bounce-in-bottom');
 
   const CSS_CLASS$1 = buildAnimClass('bounce-in-bottom');
 
-  function init$1(el, options = {}) {
+  function init$2(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS$1)) {
       el.classList.add(CSS_CLASS$1);
     }
   }
 
-  function destroy$1(el) {
+  function destroy$2(el) {
     el.classList.remove(CSS_CLASS$1);
   }
 
   var bounceInBottom = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ANIMATION_ID: ANIMATION_ID$1,
-    destroy: destroy$1,
-    init: init$1
+    ANIMATION_ID: ANIMATION_ID$2,
+    destroy: destroy$2,
+    init: init$2
   });
 
-  const ANIMATION_ID = buildAnimId('reveal-from-top');
+  const ANIMATION_ID$1 = buildAnimId('reveal-from-top');
 
   const CSS_CLASS = buildAnimClass('reveal-from-top');
 
-  function init(el, options = {}) {
+  function init$1(el, options = {}) {
     if (!el.classList.contains(CSS_CLASS)) {
       el.classList.add(CSS_CLASS);
     }
   }
 
-  function destroy(el) {
+  function destroy$1(el) {
     el.classList.remove(CSS_CLASS);
   }
 
   var revealFromTop = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ANIMATION_ID: ANIMATION_ID$1,
+    destroy: destroy$1,
+    init: init$1
+  });
+
+  const ANIMATION_ID = buildAnimId('magic-ui-border-beam');
+
+  function init(el, options = {}) {
+    init$l(el, {
+      duration: options.duration ?? 3000,
+      delay: options.delay ?? 0,
+      borderWidth: options.borderWidth ?? 1.35,
+      glowOpacity: options.glowOpacity ?? 0.28,
+      size: options.size,
+      initialOffset: options.initialOffset ?? 0,
+      colorFrom: options.colorFrom ?? '#ff6b6b',
+      colorTo: options.colorTo ?? '#ffb86b',
+      secondaryColorFrom: options.secondaryColorFrom ?? '#5ea0ff',
+      secondaryColorTo: options.secondaryColorTo ?? '#9ec5ff',
+      reverse: options.reverse ?? false,
+    });
+  }
+
+  function destroy(el) {
+    destroy$l(el);
+  }
+
+  var magicUiBorderBeam = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ANIMATION_ID: ANIMATION_ID,
     destroy: destroy,
@@ -3150,42 +3268,58 @@
     }
   }
 
-  const registry = {
-    [ANIMATION_ID$x]: defineAnimation(letterBounce),
-    [ANIMATION_ID$w]: defineAnimation(shimmerText),
-    [ANIMATION_ID$v]: defineAnimation(textType),
-    [ANIMATION_ID$u]: defineAnimation(gradientText),
-    [ANIMATION_ID$t]: defineAnimation(flyInChars),
-    [ANIMATION_ID$s]: defineAnimation(blurRise),
-    [ANIMATION_ID$r]: defineAnimation(splitText),
-    [ANIMATION_ID$q]: defineAnimation(shuffle),
-    [ANIMATION_ID$p]: defineAnimation(rollIn),
-    [ANIMATION_ID$o]: defineAnimation(animeSplittext),
-    [ANIMATION_ID$n]: defineAnimation(wordCurtainReveal),
-    [ANIMATION_ID$m]: defineAnimation(bounceInDown),
-    [ANIMATION_ID$l]: defineAnimation(magneticHover),
-    [ANIMATION_ID$k]: defineAnimation(borderBeam),
-    [ANIMATION_ID$j]: defineAnimation(shimmerBorder),
-    [ANIMATION_ID$i]: defineAnimation(rainbowButton),
-    [ANIMATION_ID$h]: defineAnimation(sketchButton),
-    [ANIMATION_ID$g]: defineAnimation(confettiButton),
-    [ANIMATION_ID$f]: defineAnimation(glowCta),
-    [ANIMATION_ID$e]: defineAnimation(bubbleButton),
-    [ANIMATION_ID$d]: defineAnimation(bounceElastic),
-    [ANIMATION_ID$c]: defineAnimation(pulse),
-    [ANIMATION_ID$b]: defineAnimation(blurFadeIn),
-    [ANIMATION_ID$a]: defineAnimation(flip3d),
-    [ANIMATION_ID$9]: defineAnimation(floatIdle),
-    [ANIMATION_ID$8]: defineAnimation(tiltedCard),
-    [ANIMATION_ID$7]: defineAnimation(cardFlip),
-    [ANIMATION_ID$6]: defineAnimation(imageZoomRotate),
-    [ANIMATION_ID$5]: defineAnimation(rgbSplitGlitch),
-    [ANIMATION_ID$4]: defineAnimation(cardFanSpread),
-    [ANIMATION_ID$3]: defineAnimation(imageMagnifier),
-    [ANIMATION_ID$2]: defineAnimation(popInStack),
-    [ANIMATION_ID$1]: defineAnimation(bounceInBottom),
-    [ANIMATION_ID]: defineAnimation(revealFromTop),
-  };
+  function buildMetadataId(category, slug) {
+    return `anim-readdy-${category}-${slug}`
+  }
+
+  function register(registry, mod, aliases = []) {
+    const entry = defineAnimation(mod);
+    registry[mod.ANIMATION_ID] = entry;
+    for (const alias of aliases) {
+      registry[alias] = entry;
+    }
+  }
+
+  const registry = {};
+
+  register(registry, letterBounce, [buildMetadataId('header', 'letter-bounce')]);
+  register(registry, shimmerText, [buildMetadataId('header', 'shimmer-text')]);
+  register(registry, textType, [buildMetadataId('header', 'text-type')]);
+  register(registry, gradientText, [buildMetadataId('header', 'gradient-text')]);
+  register(registry, flyInChars, [buildMetadataId('header', 'fly-in-chars')]);
+  register(registry, blurToSharpRise, [buildMetadataId('header', 'blur-to-sharp-rise')]);
+  register(registry, blurRise, [buildMetadataId('card', 'blur-rise')]);
+  register(registry, splitText, [buildMetadataId('header', 'split-text')]);
+  register(registry, shuffle, [buildMetadataId('header', 'shuffle')]);
+  register(registry, rollIn, [buildMetadataId('header', 'roll-in')]);
+  register(registry, animeSplittext, [buildMetadataId('header', 'anime-splittext')]);
+  register(registry, wordCurtainReveal, [buildMetadataId('header', 'word-curtain-reveal')]);
+  register(registry, bounceInDown, [buildMetadataId('header', 'bounce-in-down')]);
+
+  register(registry, magneticHover, [buildMetadataId('button', 'magnetic-hover')]);
+  register(registry, borderBeam, [buildMetadataId('button', 'border-beam')]);
+  register(registry, shimmerBorder, [buildMetadataId('button', 'shimmer-border')]);
+  register(registry, rainbowButton, [buildMetadataId('button', 'rainbow-button')]);
+  register(registry, sketchButton, [buildMetadataId('button', 'sketch-button')]);
+  register(registry, confettiButton, [buildMetadataId('button', 'confetti-button')]);
+  register(registry, glowCta, [buildMetadataId('button', 'glow-cta')]);
+  register(registry, bubbleButton, [buildMetadataId('button', 'bubble-button')]);
+  register(registry, bounceElastic, [buildMetadataId('button', 'bounce-elastic')]);
+  register(registry, pulse, [buildMetadataId('button', 'pulse')]);
+  register(registry, blurFadeIn, [buildMetadataId('button', 'blur-fade-in')]);
+  register(registry, flip3d, [buildMetadataId('button', '3d-flip')]);
+
+  register(registry, floatIdle, [buildMetadataId('card', 'float-idle')]);
+  register(registry, tiltedCard, [buildMetadataId('card', 'tilted-card')]);
+  register(registry, cardFlip, [buildMetadataId('card', 'card-flip')]);
+  register(registry, imageZoomRotate, [buildMetadataId('card', 'image-zoom-rotate')]);
+  register(registry, rgbSplitGlitch, [buildMetadataId('card', 'rgb-split-glitch')]);
+  register(registry, cardFanSpread, [buildMetadataId('card', 'card-fan-spread')]);
+  register(registry, imageMagnifier, [buildMetadataId('card', 'image-magnifier')]);
+  register(registry, popInStack, [buildMetadataId('card', 'pop-in-stack')]);
+  register(registry, bounceInBottom, [buildMetadataId('card', 'bounce-in-bottom')]);
+  register(registry, revealFromTop, [buildMetadataId('card', 'reveal-from-top')]);
+  register(registry, magicUiBorderBeam, [buildMetadataId('card', 'magic-ui-border-beam')]);
 
   return registry;