@readdy/anim 0.0.21

package/dist/header/split-text.js

@@ -0,0 +1,73 @@
+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('split-text');
+
+const CSS_CLASS = buildAnimClass('split-text');
+const VISIBLE_CLASS = 'is-visible';
+const CHAR_CLASS = buildAnimClass('split-text-char');
+const observerMap = new WeakMap();
+
+function reveal(el) {
+  if (!el.classList.contains(VISIBLE_CLASS)) {
+    el.classList.add(VISIBLE_CLASS);
+  }
+}
+
+function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS);
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 50,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 180,
+  });
+
+  if (prefersReducedMotion()) {
+    reveal(el);
+    return
+  }
+
+  if (typeof IntersectionObserver === 'undefined') {
+    reveal(el);
+    return
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        reveal(el);
+        observer.disconnect();
+        observerMap.delete(el);
+      }
+    },
+    {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? '-100px 0px',
+    }
+  );
+
+  observer.observe(el);
+  observerMap.set(el, observer);
+}
+
+function destroy(el) {
+  const observer = observerMap.get(el);
+  if (observer) {
+    observer.disconnect();
+    observerMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS, VISIBLE_CLASS);
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

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

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../text-type.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimTextType({ children, texts, typingSpeed, deletingSpeed, pauseDuration, caretBlinkDuration, gap, caretWidth, }) {
+    const ref = useRef(null);
+    const textsKey = texts?.join('\u0001') ?? '';
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion()) {
+            init(el, {
+                texts,
+                typingSpeed,
+                deletingSpeed,
+                pauseDuration,
+                caretBlinkDuration,
+                gap,
+                caretWidth,
+            });
+            return () => {
+                destroy(el);
+            };
+        }
+        init(el, {
+            texts,
+            typingSpeed,
+            deletingSpeed,
+            pauseDuration,
+            caretBlinkDuration,
+            gap,
+            caretWidth,
+        });
+        return () => {
+            destroy(el);
+        };
+    }, [caretBlinkDuration, caretWidth, deletingSpeed, gap, pauseDuration, textsKey, typingSpeed]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimTextType };

package/dist/header/text-type.js

@@ -0,0 +1,268 @@
+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('text-type');
+
+const CSS_CLASS = buildAnimClass('text-type');
+const CONTENT_CLASS = buildAnimClass('text-type-content');
+const CURSOR_CLASS = buildAnimClass('text-type-cursor');
+const RICH_CLASS = buildAnimClass('text-type-rich');
+const stateMap = new WeakMap();
+
+function parsePhrases(el, options) {
+  if (Array.isArray(options.texts) && options.texts.length > 0) {
+    return {
+      phrases: options.texts.map(String),
+      source: 'options',
+    }
+  }
+
+  const raw = el.dataset.textTypeValues?.trim();
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed) && parsed.length > 0) {
+        return {
+          phrases: parsed.map(String),
+          source: 'data',
+        }
+      }
+    } catch {}
+
+    return {
+      phrases: raw
+        .split('|')
+        .map((item) => item.trim())
+        .filter(Boolean),
+      source: 'data',
+    }
+  }
+
+  return {
+    phrases: [el.textContent ?? ''],
+    source: 'dom',
+  }
+}
+
+function clearState(state) {
+  for (const timeoutId of state.timeouts) {
+    window.clearTimeout(timeoutId);
+  }
+  state.timeouts.clear();
+}
+
+function schedule(state, fn, delay) {
+  const timeoutId = window.setTimeout(() => {
+    state.timeouts.delete(timeoutId);
+    fn();
+  }, delay);
+  state.timeouts.add(timeoutId);
+  return timeoutId
+}
+
+function hasRichTextStructure(el) {
+  return Array.from(el.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE)
+}
+
+function normalizeComparableText(text) {
+  return String(text).replace(/\s+/g, '')
+}
+
+function shouldUseRichMode(el, phrases) {
+  if (!hasRichTextStructure(el)) {
+    return false
+  }
+
+  if (phrases.length !== 1) {
+    return false
+  }
+
+  return normalizeComparableText(phrases[0]) === normalizeComparableText(el.textContent ?? '')
+}
+
+function collectRichSegments(el) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  const segments = [];
+  let node = walker.nextNode();
+
+  while (node) {
+    segments.push({
+      node,
+      text: node.textContent ?? '',
+    });
+    node = walker.nextNode();
+  }
+
+  return segments
+}
+
+function setupRichContent(el) {
+  const segments = collectRichSegments(el);
+  const cursor = document.createElement('span');
+  cursor.className = CURSOR_CLASS;
+  cursor.setAttribute('aria-hidden', 'true');
+  el.appendChild(cursor);
+
+  return {
+    cursor,
+    segments,
+  }
+}
+
+function renderRich(state, visibleCount) {
+  let remaining = visibleCount;
+
+  for (const segment of state.segments) {
+    const nextLength = Math.max(0, Math.min(segment.text.length, remaining));
+    segment.node.textContent = segment.text.slice(0, nextLength);
+    remaining -= segment.text.length;
+  }
+}
+
+function render(state, text) {
+  if (state.mode === 'rich') {
+    renderRich(state, text.length);
+    return
+  }
+
+  state.content.textContent = text;
+}
+
+function typePhrase(state, phraseIndex) {
+  const phrase = state.phrases[phraseIndex];
+  const typingSpeed = state.typingSpeed;
+  const deletingSpeed = state.deletingSpeed;
+  const nextIndex = (phraseIndex + 1) % state.phrases.length;
+
+  let cursor = 0;
+
+  const typeNext = () => {
+    cursor += 1;
+    render(state, phrase.slice(0, cursor));
+
+    if (cursor < phrase.length) {
+      schedule(state, typeNext, typingSpeed);
+      return
+    }
+
+    if (state.phrases.length === 1) {
+      return
+    }
+
+    schedule(state, () => deletePhrase(phrase, nextIndex), state.pauseDuration);
+  };
+
+  const deletePhrase = (currentPhrase, targetIndex) => {
+    let remaining = currentPhrase.length;
+
+    const deleteNext = () => {
+      remaining -= 1;
+      render(state, currentPhrase.slice(0, remaining));
+
+      if (remaining > 0) {
+        schedule(state, deleteNext, deletingSpeed);
+        return
+      }
+
+      schedule(state, () => typePhrase(state, targetIndex), typingSpeed);
+    };
+
+    schedule(state, deleteNext, deletingSpeed);
+  };
+
+  schedule(state, typeNext, typingSpeed);
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML;
+  }
+
+  const { phrases, source } = parsePhrases(el, options);
+  const richMode = shouldUseRichMode(el, phrases);
+  const finalPhrase = phrases[phrases.length - 1] ?? '';
+
+  el.classList.add(CSS_CLASS);
+  el.classList.toggle(RICH_CLASS, richMode);
+  el.style.setProperty('--readdy-anim-text-type-gap', options.gap ?? '0.08em');
+  el.style.setProperty('--readdy-anim-text-type-caret-width', options.caretWidth ?? '0.08em');
+  el.style.setProperty('--readdy-anim-text-type-caret-blink-duration', `${options.caretBlinkDuration ?? 900}ms`);
+  if (richMode) {
+    const richContent = setupRichContent(el);
+    const state = {
+      mode: 'rich',
+      ...richContent,
+      phrases,
+      typingSpeed: options.typingSpeed ?? 75,
+      deletingSpeed: options.deletingSpeed ?? 45,
+      pauseDuration: options.pauseDuration ?? 1500,
+      timeouts: new Set(),
+    };
+
+    stateMap.set(el, state);
+
+    if (prefersReducedMotion()) {
+      render(state, finalPhrase);
+      return
+    }
+
+    render(state, '');
+    typePhrase(state, 0);
+    return
+  }
+
+  el.innerHTML = `<span class="${CONTENT_CLASS}"></span><span class="${CURSOR_CLASS}" aria-hidden="true"></span>`;
+
+  const state = {
+    mode: 'plain',
+    content: el.querySelector(`.${CONTENT_CLASS}`),
+    cursor: el.querySelector(`.${CURSOR_CLASS}`),
+    phrases,
+    typingSpeed: options.typingSpeed ?? 75,
+    deletingSpeed: options.deletingSpeed ?? 45,
+    pauseDuration: options.pauseDuration ?? 1500,
+    timeouts: new Set(),
+  };
+
+  stateMap.set(el, state);
+
+  if (prefersReducedMotion()) {
+    render(state, finalPhrase);
+    return
+  }
+
+  render(state, '');
+  typePhrase(state, 0);
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    clearState(state);
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+  el.classList.remove(RICH_CLASS);
+  el.style.removeProperty('--readdy-anim-text-type-gap');
+  el.style.removeProperty('--readdy-anim-text-type-caret-width');
+  el.style.removeProperty('--readdy-anim-text-type-caret-blink-duration');
+
+  if (state?.mode === 'rich') {
+    for (const segment of state.segments) {
+      segment.node.textContent = segment.text;
+    }
+    state.cursor?.remove();
+    delete el.dataset.originalText;
+    return
+  }
+
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/header/word-curtain-reveal/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 '../word-curtain-reveal.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimWordCurtainReveal({ 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 { AnimWordCurtainReveal };

package/dist/header/word-curtain-reveal.js

@@ -0,0 +1,98 @@
+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('word-curtain-reveal');
+
+const CSS_CLASS = buildAnimClass('word-curtain-reveal');
+const WORD_CLASS = buildAnimClass('word-curtain-word');
+const INNER_CLASS = buildAnimClass('word-curtain-inner');
+
+function splitAnimatedUnits(text) {
+  if (/\s/.test(text)) {
+    return text.split(/(\s+)/).filter(Boolean)
+  }
+
+  return Array.from(text)
+}
+
+function wrapWordsInTextNode(textNode, stagger, getWordIndex) {
+  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
+    }
+
+    const outer = document.createElement('span');
+    outer.className = WORD_CLASS;
+
+    const inner = document.createElement('span');
+    inner.className = INNER_CLASS;
+    inner.textContent = part;
+    inner.style.animationDelay = `${getWordIndex() * stagger}ms`;
+
+    outer.appendChild(inner);
+    fragment.appendChild(outer);
+  }
+
+  textNode.parentNode?.replaceChild(fragment, textNode);
+}
+
+function splitWords(el, stagger) {
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML;
+  }
+
+  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, stagger, () => wordIndex++);
+  }
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty(
+    '--readdy-anim-word-curtain-duration',
+    `${options.duration ?? 550}ms`
+  );
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitWords(el, options.stagger ?? 35);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-word-curtain-duration');
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText;
+    delete el.dataset.originalText;
+  }
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/meta.json

@@ -0,0 +1,6 @@
+{
+  "version": "0.0.21",
+  "buildTime": "2026-06-26T01:44:59.450Z",
+  "js": "./full.js",
+  "css": "./full.css"
+}