@readdy/anim 0.0.21

package/dist/header/anime-splittext/react.js

@@ -0,0 +1,22 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../anime-splittext.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimAnimeSplittext({ children, stagger, duration, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { stagger, duration });
+        return () => {
+            destroy(el);
+        };
+    }, [duration, stagger]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimAnimeSplittext };

package/dist/header/anime-splittext.js

@@ -0,0 +1,109 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('anime-splittext');
+
+const CSS_CLASS = buildAnimClass('anime-splittext');
+const WORD_CLASS = buildAnimClass('anime-word');
+const WORD_INNER_CLASS = buildAnimClass('anime-word-inner');
+const CHAR_CLASS = buildAnimClass('anime-char');
+
+function splitAnimatedUnits(text) {
+  if (/\s/.test(text)) {
+    return text.split(/(\s+)/).filter(Boolean)
+  }
+
+  return Array.from(text)
+}
+
+function buildWordFragment(word, wordIndex, stagger, duration) {
+  const outer = document.createElement('span');
+  outer.className = WORD_CLASS;
+  outer.style.setProperty('--readdy-anim-word-offset', wordIndex % 2 === 0 ? '110%' : '-110%');
+
+  const inner = document.createElement('span');
+  inner.className = WORD_INNER_CLASS;
+  inner.style.setProperty('--readdy-anim-word-delay', `${wordIndex * stagger}ms`);
+  inner.style.setProperty('--readdy-anim-word-loop-delay', `${duration + 20 + wordIndex * stagger}ms`)
+
+  ;[...word].forEach((char, charIndex) => {
+    const charSpan = document.createElement('span');
+    charSpan.className = CHAR_CLASS;
+    charSpan.textContent = char;
+    charSpan.style.setProperty(
+      '--readdy-anim-char-delay',
+      `${Math.round(duration * 0.6) + wordIndex * stagger + charIndex * 36}ms`
+    );
+    inner.appendChild(charSpan);
+  });
+
+  outer.appendChild(inner);
+  return outer
+}
+
+function wrapWordsInTextNode(textNode, getWordIndex, stagger, duration) {
+  const text = textNode.textContent ?? '';
+  if (!text.trim()) {
+    return
+  }
+
+  const parts = splitAnimatedUnits(text);
+  const fragment = document.createDocumentFragment();
+
+  for (const part of parts) {
+    if (!part) continue
+
+    if (/^\s+$/.test(part)) {
+      fragment.appendChild(document.createTextNode(part));
+      continue
+    }
+
+    fragment.appendChild(buildWordFragment(part, getWordIndex(), stagger, duration));
+  }
+
+  textNode.parentNode?.replaceChild(fragment, textNode);
+}
+
+function splitWords(el, options = {}) {
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML;
+  }
+
+  const stagger = options.stagger ?? 120;
+  const duration = options.duration ?? 700;
+
+  let wordIndex = 0;
+  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) {
+    wrapWordsInTextNode(textNode, () => wordIndex++, stagger, duration);
+  }
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-anime-word-duration', `${options.duration ?? 700}ms`);
+  splitWords(el, options);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-anime-word-duration');
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/bounce-in-down/react.js

@@ -0,0 +1,32 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../bounce-in-down.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+import '../../chunks/text-split-frOR4UpH.js';
+
+/**
+ * Bounce In Down — 从上方弹入
+ *
+ * 用法：
+ *   <AnimBounceInDown><p>标题文字</p></AnimBounceInDown>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-bounce-in-down class
+ * 必须恰好包裹一个子元素
+ */
+function AnimBounceInDown({ children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el);
+        return () => {
+            destroy(el);
+        };
+    }, []);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimBounceInDown };

package/dist/header/bounce-in-down.js

@@ -0,0 +1,36 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+import { s as splitTextIntoChars } from '../chunks/text-split-frOR4UpH.js';
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+
+const ANIMATION_ID = buildAnimId('bounce-in-down');
+
+const CSS_CLASS = buildAnimClass('bounce-in-down');
+const CHAR_CLASS = buildAnimClass('bounce-in-down-char');
+
+function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 40,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  });
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/fly-in-chars/react.js

@@ -0,0 +1,23 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../fly-in-chars.js';
+import '../../chunks/text-split-frOR4UpH.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimFlyInChars({ children, stagger, maxChars, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { stagger, maxChars });
+        return () => {
+            destroy(el);
+        };
+    }, [maxChars, stagger]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimFlyInChars };

package/dist/header/fly-in-chars.js

@@ -0,0 +1,47 @@
+import { s as splitTextIntoChars } from '../chunks/text-split-frOR4UpH.js';
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('fly-in-chars');
+
+const CSS_CLASS = buildAnimClass('fly-in-chars');
+const CHAR_CLASS = buildAnimClass('fly-in-char');
+
+function randomBetween(min, max) {
+  return Math.round(min + Math.random() * (max - min))
+}
+
+function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 36,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  });
+
+  const chars = el.querySelectorAll(`.${CHAR_CLASS}`);
+  for (const char of chars) {
+    char.style.setProperty('--readdy-anim-fly-in-x', `${randomBetween(-120, 120)}px`);
+    char.style.setProperty('--readdy-anim-fly-in-y', `${randomBetween(-80, 80)}px`);
+    char.style.setProperty('--readdy-anim-fly-in-rotate', `${randomBetween(-25, 25)}deg`);
+  }
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/gradient-text/react.js

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../gradient-text.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+/**
+ * Gradient Text — 渐变文字
+ *
+ * 用法：
+ *   <AnimGradientText><p>标题文字</p></AnimGradientText>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-gradient-text class
+ * 必须恰好包裹一个子元素
+ */
+function AnimGradientText({ children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        init(el);
+        return () => {
+            destroy(el);
+        };
+    }, []);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimGradientText };

package/dist/header/gradient-text.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('gradient-text');
+
+const CSS_CLASS = buildAnimClass('gradient-text');
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/letter-bounce/react.js

@@ -0,0 +1,23 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../letter-bounce.js';
+import '../../chunks/text-split-frOR4UpH.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimLetterBounce({ children, stagger, maxChars, duration, amplitude, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { stagger, maxChars, duration, amplitude });
+        return () => {
+            destroy(el);
+        };
+    }, [amplitude, duration, maxChars, stagger]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimLetterBounce };

package/dist/header/letter-bounce.js

@@ -0,0 +1,34 @@
+import { s as splitTextIntoChars } from '../chunks/text-split-frOR4UpH.js';
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('letter-bounce');
+
+const CSS_CLASS = buildAnimClass('letter-bounce');
+const CHAR_CLASS = buildAnimClass('letter-bounce-char');
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-letter-bounce-duration', `${options.duration ?? 850}ms`);
+  el.style.setProperty('--readdy-anim-letter-bounce-amplitude', `${options.amplitude ?? 6}px`);
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 60,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  });
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-letter-bounce-duration');
+  el.style.removeProperty('--readdy-anim-letter-bounce-amplitude');
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/roll-in/react.js

@@ -0,0 +1,32 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../roll-in.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+import '../../chunks/text-split-frOR4UpH.js';
+
+/**
+ * Roll In — 文字滚入
+ *
+ * 用法：
+ *   <AnimRollIn><p>标题文字</p></AnimRollIn>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-roll-in class
+ * 必须恰好包裹一个子元素
+ */
+function AnimRollIn({ children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el);
+        return () => {
+            destroy(el);
+        };
+    }, []);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimRollIn };

package/dist/header/roll-in.js

@@ -0,0 +1,36 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+import { s as splitTextIntoChars } from '../chunks/text-split-frOR4UpH.js';
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+
+const ANIMATION_ID = buildAnimId('roll-in');
+
+const CSS_CLASS = buildAnimClass('roll-in');
+const CHAR_CLASS = buildAnimClass('roll-in-char');
+
+function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 45,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  });
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/shimmer-text/react.js

@@ -0,0 +1,27 @@
+import React, { useRef, useEffect } from 'react';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import { init, destroy } from '../shimmer-text.js';
+import { a as buildAnimClass } from '../../chunks/constants-EnH6-Pz4.js';
+
+const CSS_CLASS = buildAnimClass('shimmer-text');
+function AnimShimmerText({ children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion()) {
+            el.classList.add(CSS_CLASS);
+            return () => {
+                el.classList.remove(CSS_CLASS);
+            };
+        }
+        init(el);
+        return () => {
+            destroy(el);
+        };
+    }, []);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimShimmerText };

package/dist/header/shimmer-text.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('shimmer-text');
+
+const CSS_CLASS = buildAnimClass('shimmer-text');
+
+function init(el) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/shuffle/react.js

@@ -0,0 +1,30 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../shuffle.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/text-split-frOR4UpH.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimShuffle({ children, stagger, shuffleFrames, frameDelay, maxChars, idleOpacity, idleOffset, idleScale, settleDuration, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, {
+            stagger,
+            shuffleFrames,
+            frameDelay,
+            maxChars,
+            idleOpacity,
+            idleOffset,
+            idleScale,
+            settleDuration,
+        });
+        return () => {
+            destroy(el);
+        };
+    }, [frameDelay, idleOffset, idleOpacity, idleScale, maxChars, settleDuration, shuffleFrames, stagger]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimShuffle };

package/dist/header/shuffle.js

@@ -0,0 +1,119 @@
+import { s as splitTextIntoChars } from '../chunks/text-split-frOR4UpH.js';
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('shuffle');
+
+const CSS_CLASS = buildAnimClass('shuffle');
+const CHAR_CLASS = buildAnimClass('shuffle-char');
+const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*+-?';
+const stateMap = new WeakMap();
+
+function randomGlyph() {
+  return GLYPHS[Math.floor(Math.random() * GLYPHS.length)]
+}
+
+function clearState(state) {
+  for (const intervalId of state.intervals) {
+    window.clearInterval(intervalId);
+  }
+  for (const timeoutId of state.timeouts) {
+    window.clearTimeout(timeoutId);
+  }
+  state.intervals = [];
+  state.timeouts = [];
+}
+
+function runShuffle(el, options = {}) {
+  const state = stateMap.get(el);
+  if (!state) return
+
+  clearState(state);
+
+  const chars = [...el.querySelectorAll(`.${CHAR_CLASS}`)];
+  chars.forEach((char, index) => {
+    const finalChar = char.dataset.finalChar ?? char.textContent ?? '';
+    const startDelay = index * (options.stagger ?? 35);
+    const frames = options.shuffleFrames ?? 7;
+    const frameDelay = options.frameDelay ?? 40;
+
+    char.textContent = randomGlyph();
+    char.classList.remove('is-settled');
+
+    const timeoutId = window.setTimeout(() => {
+      let frame = 0;
+      const intervalId = window.setInterval(() => {
+        frame += 1;
+        char.textContent = frame >= frames ? finalChar : randomGlyph();
+        char.classList.toggle('is-settled', frame >= frames);
+
+        if (frame >= frames) {
+          window.clearInterval(intervalId);
+        }
+      }, frameDelay);
+
+      state.intervals.push(intervalId);
+    }, startDelay);
+
+    state.timeouts.push(timeoutId);
+  });
+}
+
+function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS);
+
+  el.style.setProperty('--readdy-anim-shuffle-opacity', `${options.idleOpacity ?? 0.45}`);
+  el.style.setProperty('--readdy-anim-shuffle-translate-y', options.idleOffset ?? '0.08em');
+  el.style.setProperty('--readdy-anim-shuffle-scale', `${options.idleScale ?? 0.98}`);
+  el.style.setProperty('--readdy-anim-shuffle-settle-duration', `${options.settleDuration ?? 180}ms`);
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 35,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 120,
+  });
+
+  const chars = el.querySelectorAll(`.${CHAR_CLASS}`);
+  chars.forEach((char) => {
+    char.dataset.finalChar = char.textContent ?? '';
+  });
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const state = {
+    intervals: [],
+    timeouts: [],
+    onMouseEnter: () => runShuffle(el, options),
+  };
+
+  stateMap.set(el, state);
+  el.addEventListener('mouseenter', state.onMouseEnter);
+  runShuffle(el, options);
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    clearState(state);
+    el.removeEventListener('mouseenter', state.onMouseEnter);
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-shuffle-opacity');
+  el.style.removeProperty('--readdy-anim-shuffle-translate-y');
+  el.style.removeProperty('--readdy-anim-shuffle-scale');
+  el.style.removeProperty('--readdy-anim-shuffle-settle-duration');
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/split-text/react.js

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../split-text.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/text-split-frOR4UpH.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimSplitText({ children, stagger, maxChars, threshold, rootMargin, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, {
+            stagger,
+            maxChars,
+            threshold,
+            rootMargin,
+        });
+        return () => {
+            destroy(el);
+        };
+    }, [maxChars, rootMargin, stagger, threshold]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimSplitText };