@readdy/anim 0.0.21

package/dist/card/reveal-from-top.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('reveal-from-top');
+
+const CSS_CLASS = buildAnimClass('reveal-from-top');
+
+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/card/rgb-split-glitch/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 '../rgb-split-glitch.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimRgbSplitGlitch({ children, duration, shift, shadowOffset, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { duration, shift, shadowOffset });
+        return () => {
+            destroy(el);
+        };
+    }, [duration, shift, shadowOffset]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimRgbSplitGlitch };

package/dist/card/rgb-split-glitch.js

@@ -0,0 +1,24 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('rgb-split-glitch');
+
+const CSS_CLASS = buildAnimClass('rgb-split-glitch');
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-rgb-glitch-duration', `${options.duration ?? 1100}ms`);
+  el.style.setProperty('--readdy-anim-rgb-glitch-shift', `${options.shift ?? 3}px`);
+  el.style.setProperty('--readdy-anim-rgb-glitch-shadow', `${options.shadowOffset ?? 2}px`);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-rgb-glitch-duration');
+  el.style.removeProperty('--readdy-anim-rgb-glitch-shift');
+  el.style.removeProperty('--readdy-anim-rgb-glitch-shadow');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/card/tilted-card/react.js

@@ -0,0 +1,21 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../tilted-card.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/pointer-follow-BETANySn.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimTiltedCard({ children, maxTilt, scale, perspective, duration, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { maxTilt, scale, perspective, duration });
+        return () => {
+            destroy(el);
+        };
+    }, [maxTilt, scale, perspective, duration]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimTiltedCard };

package/dist/card/tilted-card.js

@@ -0,0 +1,65 @@
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { a as attachPointerFollow, g as getPointerMetrics } from '../chunks/pointer-follow-BETANySn.js';
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('tilted-card');
+
+const CSS_CLASS = buildAnimClass('tilted-card');
+const stateMap = new WeakMap();
+
+function reset(el) {
+  el.style.setProperty('--readdy-anim-card-tilt-x', '0deg');
+  el.style.setProperty('--readdy-anim-card-tilt-y', '0deg');
+  el.style.setProperty('--readdy-anim-card-scale', '1');
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+  reset(el);
+
+  const perspective = options.perspective ?? 900;
+  const duration = options.duration ?? 550;
+  el.style.setProperty('--readdy-anim-card-tilt-perspective', `${perspective}px`);
+  el.style.setProperty('--readdy-anim-card-tilt-duration', `${duration}ms`);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const maxTilt = options.maxTilt ?? 10;
+  const scale = options.scale ?? 1.02;
+
+  const onMove = (event, context) => {
+    const { relativeX, relativeY } = getPointerMetrics(context.rect, event);
+
+    el.style.setProperty('--readdy-anim-card-tilt-x', `${relativeY * -maxTilt * 2}deg`);
+    el.style.setProperty('--readdy-anim-card-tilt-y', `${relativeX * maxTilt * 2}deg`);
+    el.style.setProperty('--readdy-anim-card-scale', `${scale}`);
+  };
+
+  const onLeave = () => {
+    reset(el);
+  };
+
+  const cleanup = attachPointerFollow(el, { onMove, onLeave });
+  stateMap.set(el, { cleanup });
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    state.cleanup();
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-card-tilt-x');
+  el.style.removeProperty('--readdy-anim-card-tilt-y');
+  el.style.removeProperty('--readdy-anim-card-scale');
+  el.style.removeProperty('--readdy-anim-card-tilt-perspective');
+  el.style.removeProperty('--readdy-anim-card-tilt-duration');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/chunks/constants-EnH6-Pz4.js

@@ -0,0 +1,66 @@
+/**
+ * @readdy/anim/shared/constants.js
+ *
+ * 共享常量 —— 动效 ID 前缀、class 前缀、ID 构建器
+ * 解决 issues #2：动效 ID 前缀不一致
+ */
+
+/** 动效 ID 前缀，统一格式 */
+const ANIM_ID_PREFIX = 'readdy-anim-';
+
+/** CSS class 前缀 */
+const ANIM_CLASS_PREFIX = 'readdy-anim-';
+
+/**
+ * 构建动效 CSS class
+ * @param {string} name - class 后缀，如 'text-type'
+ * @returns {string} 完整 class，如 'readdy-anim-text-type'
+ */
+function buildAnimClass(name) {
+  return ANIM_CLASS_PREFIX + name
+}
+
+/**
+ * 构建动效相关 DOM id
+ * 目前与 class 前缀保持一致，便于 SVG filter / portal 节点等共享同一命名空间。
+ *
+ * @param {string} name - id 后缀，如 'bubble-goo'
+ * @returns {string} 完整 id，如 'readdy-anim-bubble-goo'
+ */
+function buildAnimDomId(name) {
+  return ANIM_CLASS_PREFIX + name
+}
+
+/**
+ * 构建动效规范 ID
+ * 统一接受动效 slug，例如：
+ * - buildAnimId('letter-bounce') => 'readdy-anim-letter-bounce'
+ * - buildAnimId('bubble-button') => 'readdy-anim-bubble-button'
+ *
+ * @param {string} name - 动效 slug
+ * @returns {string} 规范 ID
+ */
+function buildAnimId(name) {
+  const slug = String(name).trim();
+
+  if (!slug) {
+    throw new Error('buildAnimId(name) requires a non-empty animation slug')
+  }
+
+  if (slug.includes('/')) {
+    throw new Error(`buildAnimId(name) only accepts animation slugs, received path-like value: ${slug}`)
+  }
+
+  const normalizedSlug = slug
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+
+  if (!normalizedSlug) {
+    throw new Error(`buildAnimId(name) could not derive a valid animation slug from: ${slug}`)
+  }
+
+  return ANIM_ID_PREFIX + normalizedSlug
+}
+
+export { buildAnimClass as a, buildAnimId as b, buildAnimDomId as c };

package/dist/chunks/constants-ZTHic1pf.js

@@ -0,0 +1,66 @@
+/**
+ * @readdy/anim/shared/constants.js
+ *
+ * 共享常量 —— 动效 ID 前缀、class 前缀、ID 构建器
+ * 解决 issues #2：动效 ID 前缀不一致
+ */
+
+/** 动效 ID 前缀，统一格式 */
+const ANIM_ID_PREFIX = 'readdy-anim-';
+
+/** CSS class 前缀 */
+const ANIM_CLASS_PREFIX = 'readdy-anim-';
+
+/**
+ * 构建动效 CSS class
+ * @param {string} name - class 后缀，如 'text-type'
+ * @returns {string} 完整 class，如 'readdy-anim-text-type'
+ */
+function buildAnimClass(name) {
+  return ANIM_CLASS_PREFIX + name
+}
+
+/**
+ * 构建动效相关 DOM id
+ * 目前与 class 前缀保持一致，便于 SVG filter / portal 节点等共享同一命名空间。
+ *
+ * @param {string} name - id 后缀，如 'bubble-goo'
+ * @returns {string} 完整 id，如 'readdy-anim-bubble-goo'
+ */
+function buildAnimDomId(name) {
+  return ANIM_CLASS_PREFIX + name
+}
+
+/**
+ * 构建动效规范 ID
+ * 统一接受动效 slug，例如：
+ * - buildAnimId('letter-bounce') => 'readdy-anim-letter-bounce'
+ * - buildAnimId('bubble-button') => 'readdy-anim-bubble-button'
+ *
+ * @param {string} name - 动效 slug
+ * @returns {string} 规范 ID
+ */
+function buildAnimId(name) {
+  const slug = String(name).trim();
+
+  if (!slug) {
+    throw new Error('buildAnimId(name) requires a non-empty animation slug')
+  }
+
+  if (slug.includes('/')) {
+    throw new Error(`buildAnimId(name) only accepts animation slugs, received path-like value: ${slug}`)
+  }
+
+  const normalizedSlug = slug
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+
+  if (!normalizedSlug) {
+    throw new Error(`buildAnimId(name) could not derive a valid animation slug from: ${slug}`)
+  }
+
+  return ANIM_ID_PREFIX + normalizedSlug
+}
+
+export { buildAnimClass as a, buildAnimId as b, buildAnimDomId as c };

package/dist/chunks/pointer-follow-B3RFnn_q.js

@@ -0,0 +1,93 @@
+function getPointerMetrics(target, event) {
+  const rect =
+    target && typeof target.getBoundingClientRect === 'function'
+      ? target.getBoundingClientRect()
+      : target;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const deltaX = event.clientX - centerX;
+  const deltaY = event.clientY - centerY;
+
+  return {
+    rect,
+    deltaX,
+    deltaY,
+    relativeX: rect.width ? deltaX / rect.width : 0,
+    relativeY: rect.height ? deltaY / rect.height : 0,
+  }
+}
+
+function attachPointerFollow(el, handlers) {
+  const { onMove, onLeave, onEnter } = handlers;
+  const requestFrame =
+    window.requestAnimationFrame?.bind(window) ?? ((callback) => window.setTimeout(callback, 16));
+  const cancelFrame =
+    window.cancelAnimationFrame?.bind(window) ?? ((frameId) => window.clearTimeout(frameId));
+
+  let frameId = null;
+  let lastEvent = null;
+  let activeRect = null;
+
+  const context = {
+    get rect() {
+      return activeRect
+    },
+    refreshRect() {
+      activeRect = el.getBoundingClientRect();
+      return activeRect
+    },
+    getMetrics(event) {
+      return getPointerMetrics(activeRect ?? context.refreshRect(), event)
+    },
+  };
+
+  const flushMove = () => {
+    frameId = null;
+    if (!lastEvent) {
+      return
+    }
+    if (!activeRect) {
+      context.refreshRect();
+    }
+    onMove(lastEvent, context);
+  };
+
+  const handleEnter = (event) => {
+    context.refreshRect();
+    onEnter?.(event, context);
+  };
+
+  const handleMove = (event) => {
+    lastEvent = event;
+    if (frameId !== null) {
+      return
+    }
+    frameId = requestFrame(flushMove);
+  };
+
+  const handleLeave = (event) => {
+    if (frameId !== null) {
+      cancelFrame(frameId);
+      frameId = null;
+    }
+    lastEvent = null;
+    activeRect = null;
+    onLeave?.(event, context);
+  };
+
+  el.addEventListener('pointerenter', handleEnter);
+  el.addEventListener('pointermove', handleMove);
+  el.addEventListener('pointerleave', handleLeave);
+
+  return () => {
+    if (frameId !== null) {
+      cancelFrame(frameId);
+      frameId = null;
+    }
+    el.removeEventListener('pointerenter', handleEnter);
+    el.removeEventListener('pointermove', handleMove);
+    el.removeEventListener('pointerleave', handleLeave);
+  }
+}
+
+export { attachPointerFollow as a, getPointerMetrics as g };

package/dist/chunks/pointer-follow-BETANySn.js

@@ -0,0 +1,93 @@
+function getPointerMetrics(target, event) {
+  const rect =
+    target && typeof target.getBoundingClientRect === 'function'
+      ? target.getBoundingClientRect()
+      : target;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const deltaX = event.clientX - centerX;
+  const deltaY = event.clientY - centerY;
+
+  return {
+    rect,
+    deltaX,
+    deltaY,
+    relativeX: rect.width ? deltaX / rect.width : 0,
+    relativeY: rect.height ? deltaY / rect.height : 0,
+  }
+}
+
+function attachPointerFollow(el, handlers) {
+  const { onMove, onLeave, onEnter } = handlers;
+  const requestFrame =
+    window.requestAnimationFrame?.bind(window) ?? ((callback) => window.setTimeout(callback, 16));
+  const cancelFrame =
+    window.cancelAnimationFrame?.bind(window) ?? ((frameId) => window.clearTimeout(frameId));
+
+  let frameId = null;
+  let lastEvent = null;
+  let activeRect = null;
+
+  const context = {
+    get rect() {
+      return activeRect
+    },
+    refreshRect() {
+      activeRect = el.getBoundingClientRect();
+      return activeRect
+    },
+    getMetrics(event) {
+      return getPointerMetrics(activeRect ?? context.refreshRect(), event)
+    },
+  };
+
+  const flushMove = () => {
+    frameId = null;
+    if (!lastEvent) {
+      return
+    }
+    if (!activeRect) {
+      context.refreshRect();
+    }
+    onMove(lastEvent, context);
+  };
+
+  const handleEnter = (event) => {
+    context.refreshRect();
+    onEnter?.(event, context);
+  };
+
+  const handleMove = (event) => {
+    lastEvent = event;
+    if (frameId !== null) {
+      return
+    }
+    frameId = requestFrame(flushMove);
+  };
+
+  const handleLeave = (event) => {
+    if (frameId !== null) {
+      cancelFrame(frameId);
+      frameId = null;
+    }
+    lastEvent = null;
+    activeRect = null;
+    onLeave?.(event, context);
+  };
+
+  el.addEventListener('pointerenter', handleEnter);
+  el.addEventListener('pointermove', handleMove);
+  el.addEventListener('pointerleave', handleLeave);
+
+  return () => {
+    if (frameId !== null) {
+      cancelFrame(frameId);
+      frameId = null;
+    }
+    el.removeEventListener('pointerenter', handleEnter);
+    el.removeEventListener('pointermove', handleMove);
+    el.removeEventListener('pointerleave', handleLeave);
+  }
+}
+
+export { attachPointerFollow as a, getPointerMetrics as g };

package/dist/chunks/reduced-motion-BpQYuEzK.js

@@ -0,0 +1,17 @@
+/**
+ * @readdy/anim/shared/reduced-motion.js
+ *
+ * 无障碍工具 —— 检测 prefers-reduced-motion
+ * 所有 React 组件和 init 函数统一使用此函数
+ */
+
+/**
+ * 检测用户是否偏好减少动画
+ * @returns {boolean} true 表示用户偏好减少动画
+ */
+function prefersReducedMotion() {
+  return typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+export { prefersReducedMotion as p };

package/dist/chunks/reduced-motion-HX79Ac8G.js

@@ -0,0 +1,17 @@
+/**
+ * @readdy/anim/shared/reduced-motion.js
+ *
+ * 无障碍工具 —— 检测 prefers-reduced-motion
+ * 所有 React 组件和 init 函数统一使用此函数
+ */
+
+/**
+ * 检测用户是否偏好减少动画
+ * @returns {boolean} true 表示用户偏好减少动画
+ */
+function prefersReducedMotion() {
+  return typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+export { prefersReducedMotion as p };

package/dist/chunks/resolve-card-media-Cj3V_oms.js

@@ -0,0 +1,43 @@
+function hasUsableBackgroundImage(node) {
+  const style = window.getComputedStyle(node);
+  return Boolean(style.backgroundImage && style.backgroundImage !== 'none')
+}
+
+function resolveCardMediaElement(el, mediaClass) {
+  const byClass = el.querySelector(`.${mediaClass}`);
+  if (byClass instanceof HTMLElement) {
+    return byClass
+  }
+
+  const image = el.querySelector('img');
+  if (image instanceof HTMLImageElement) {
+    let candidate = image.parentElement;
+    while (candidate && candidate !== el) {
+      const style = window.getComputedStyle(candidate);
+      if (
+        style.overflow === 'hidden' ||
+        style.position !== 'static' ||
+        candidate.childElementCount === 1 ||
+        hasUsableBackgroundImage(candidate)
+      ) {
+        return candidate
+      }
+      candidate = candidate.parentElement;
+    }
+  }
+
+  const backgroundCandidate = Array.from(el.querySelectorAll('*')).find((node) => {
+    if (!(node instanceof HTMLElement)) {
+      return false
+    }
+    return hasUsableBackgroundImage(node)
+  });
+
+  if (backgroundCandidate instanceof HTMLElement) {
+    return backgroundCandidate
+  }
+
+  return el.firstElementChild instanceof HTMLElement ? el.firstElementChild : el
+}
+
+export { resolveCardMediaElement as r };

package/dist/chunks/resolve-card-media-DBIU-duL.js

@@ -0,0 +1,43 @@
+function hasUsableBackgroundImage(node) {
+  const style = window.getComputedStyle(node);
+  return Boolean(style.backgroundImage && style.backgroundImage !== 'none')
+}
+
+function resolveCardMediaElement(el, mediaClass) {
+  const byClass = el.querySelector(`.${mediaClass}`);
+  if (byClass instanceof HTMLElement) {
+    return byClass
+  }
+
+  const image = el.querySelector('img');
+  if (image instanceof HTMLImageElement) {
+    let candidate = image.parentElement;
+    while (candidate && candidate !== el) {
+      const style = window.getComputedStyle(candidate);
+      if (
+        style.overflow === 'hidden' ||
+        style.position !== 'static' ||
+        candidate.childElementCount === 1 ||
+        hasUsableBackgroundImage(candidate)
+      ) {
+        return candidate
+      }
+      candidate = candidate.parentElement;
+    }
+  }
+
+  const backgroundCandidate = Array.from(el.querySelectorAll('*')).find((node) => {
+    if (!(node instanceof HTMLElement)) {
+      return false
+    }
+    return hasUsableBackgroundImage(node)
+  });
+
+  if (backgroundCandidate instanceof HTMLElement) {
+    return backgroundCandidate
+  }
+
+  return el.firstElementChild instanceof HTMLElement ? el.firstElementChild : el
+}
+
+export { resolveCardMediaElement as r };