@readdy/anim 0.0.21

package/dist/card/card-fan-spread.js

@@ -0,0 +1,147 @@
+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('card-fan-spread');
+
+const CSS_CLASS = buildAnimClass('card-fan-spread');
+const STACK_CLASS = buildAnimClass('card-fan-stack');
+const ITEM_CLASS = buildAnimClass('card-fan-item');
+const SURFACE_CLASS = buildAnimClass('card-fan-surface');
+const VISUAL_CLASS = buildAnimClass('card-fan-visual');
+const VISUAL_TEXT_CLASS = buildAnimClass('card-fan-visual-text');
+const stateMap = new WeakMap();
+
+function buildCardVisual(el) {
+  const visual = el.cloneNode(true);
+  visual.classList.add(VISUAL_CLASS);
+  visual.removeAttribute('id');
+  visual.removeAttribute('tabindex');
+  visual.removeAttribute('aria-labelledby');
+  visual.removeAttribute('aria-describedby');
+  visual.removeAttribute('aria-controls');
+  visual.querySelectorAll('[id]').forEach((node) => node.removeAttribute('id'));
+  visual.querySelectorAll('button, a, input, textarea, select, [tabindex]').forEach((node) => {
+    node.setAttribute('aria-hidden', 'true');
+    node.setAttribute('tabindex', '-1');
+    node.style.pointerEvents = 'none';
+  });
+  visual.querySelectorAll('video, audio').forEach((node) => {
+    node.pause?.();
+    node.removeAttribute('autoplay');
+    node.removeAttribute('controls');
+  });
+  visual.querySelectorAll('*').forEach((node) => {
+    if (node.closest(`.${buildAnimClass('card-media')}`)) return
+    if (node.children.length === 0 && (node.textContent ?? '').trim()) {
+      node.classList.add(VISUAL_TEXT_CLASS);
+    }
+  });
+  return visual
+}
+
+function buildLayer(visualTemplate, index, radius) {
+  const item = document.createElement('div');
+  item.className = ITEM_CLASS;
+  item.setAttribute('aria-hidden', 'true');
+  item.style.setProperty('--readdy-anim-card-fan-index', `${index}`);
+
+  const surface = document.createElement('div');
+  surface.className = SURFACE_CLASS;
+  surface.style.borderRadius = radius;
+  surface.appendChild(visualTemplate.cloneNode(true));
+  item.appendChild(surface);
+  return item
+}
+
+function ensureStack(el, visual) {
+  const stack = document.createElement('div');
+  stack.className = STACK_CLASS;
+  stack.setAttribute('aria-hidden', 'true');
+
+  for (let index = 0; index < 2; index += 1) {
+    stack.appendChild(buildLayer(visual.visualTemplate, index, visual.radius));
+  }
+
+  el.insertBefore(stack, el.firstChild);
+  return stack
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+  const spreadDistance = options.spreadDistance ?? 72;
+  const spreadRotate = options.spreadRotate ?? 24;
+  const depthRotate = options.depthRotate ?? 18;
+  const lift = options.lift ?? 14;
+  const duration = options.duration ?? 550;
+
+  el.style.setProperty('--readdy-anim-card-fan-distance', `${spreadDistance}px`);
+  el.style.setProperty('--readdy-anim-card-fan-rotate', `${spreadRotate}deg`);
+  el.style.setProperty('--readdy-anim-card-fan-depth-rotate', `${depthRotate}deg`);
+  el.style.setProperty('--readdy-anim-card-fan-lift', `${lift}px`);
+  el.style.setProperty('--readdy-anim-card-fan-duration', `${duration}ms`);
+
+  const visual = {
+    visualTemplate: buildCardVisual(el),
+    radius: window.getComputedStyle(el).borderRadius || 'inherit',
+  };
+  const stack = ensureStack(el, visual);
+  const state = {
+    savedTabIndex: el.getAttribute('tabindex'),
+    toggle: null,
+    onKeyDown: null,
+    stack,
+  };
+
+  el.tabIndex = el.tabIndex >= 0 ? el.tabIndex : 0;
+
+  if (prefersReducedMotion()) {
+    stateMap.set(el, state);
+    return
+  }
+
+  state.toggle = () => {
+    el.classList.toggle('is-spread');
+  };
+
+  state.onKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      state.toggle();
+    }
+  };
+
+  el.addEventListener('click', state.toggle);
+  el.addEventListener('keydown', state.onKeyDown);
+  stateMap.set(el, state);
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    if (state.toggle) {
+      el.removeEventListener('click', state.toggle);
+    }
+    if (state.onKeyDown) {
+      el.removeEventListener('keydown', state.onKeyDown);
+    }
+    if (state.savedTabIndex === null) {
+      el.removeAttribute('tabindex');
+    } else {
+      el.setAttribute('tabindex', state.savedTabIndex);
+    }
+    state.stack?.remove();
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS, 'is-spread');
+  el.style.removeProperty('--readdy-anim-card-fan-distance');
+  el.style.removeProperty('--readdy-anim-card-fan-rotate');
+  el.style.removeProperty('--readdy-anim-card-fan-depth-rotate');
+  el.style.removeProperty('--readdy-anim-card-fan-lift');
+  el.style.removeProperty('--readdy-anim-card-fan-duration');
+  el.querySelector(`.${STACK_CLASS}`)?.remove();
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/card/float-idle/react.js

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../float-idle.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+/**
+ * Float Idle — 卡片悬浮idle
+ *
+ * 用法：
+ *   <AnimFloatIdle><div className="card">内容</div></AnimFloatIdle>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-float-idle class
+ * 必须恰好包裹一个子元素
+ */
+function AnimFloatIdle({ 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 { AnimFloatIdle };

package/dist/card/float-idle.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('float-idle');
+
+const CSS_CLASS = buildAnimClass('float-idle');
+
+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/image-magnifier/react.js

@@ -0,0 +1,22 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../image-magnifier.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+import '../../chunks/pointer-follow-BETANySn.js';
+import '../../chunks/resolve-card-media-Cj3V_oms.js';
+
+function AnimImageMagnifier({ children, lensSize, zoom, fadeDuration, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { lensSize, zoom, fadeDuration });
+        return () => {
+            destroy(el);
+        };
+    }, [lensSize, zoom, fadeDuration]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimImageMagnifier };

package/dist/card/image-magnifier.js

@@ -0,0 +1,334 @@
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+import { a as attachPointerFollow } from '../chunks/pointer-follow-BETANySn.js';
+import { r as resolveCardMediaElement } from '../chunks/resolve-card-media-Cj3V_oms.js';
+
+const ANIMATION_ID = buildAnimId('image-magnifier');
+
+const CSS_CLASS = buildAnimClass('image-magnifier');
+const MEDIA_CLASS = buildAnimClass('card-media');
+const ENHANCED_MEDIA_CLASS = buildAnimClass('image-magnifier-media');
+const LENS_CLASS = buildAnimClass('image-magnifier-lens');
+const stateMap = new WeakMap();
+
+function resolveImageUrl(image) {
+  try {
+    return new URL(image.currentSrc || image.src, document.baseURI).href
+  } catch {
+    return image.currentSrc || image.src
+  }
+}
+
+function parsePositionToken(token, axis) {
+  const value = token.trim().toLowerCase();
+  if (!value) {
+    return null
+  }
+
+  if (value === 'center') {
+    return { type: 'factor', value: 0.5 }
+  }
+
+  if (axis === 'x') {
+    if (value === 'left') return { type: 'factor', value: 0 }
+    if (value === 'right') return { type: 'factor', value: 1 }
+  }
+
+  if (axis === 'y') {
+    if (value === 'top') return { type: 'factor', value: 0 }
+    if (value === 'bottom') return { type: 'factor', value: 1 }
+  }
+
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value);
+    if (Number.isFinite(percentage)) {
+      return { type: 'factor', value: percentage / 100 }
+    }
+  }
+
+  if (value.endsWith('px')) {
+    const pixels = Number.parseFloat(value);
+    if (Number.isFinite(pixels)) {
+      return { type: 'px', value: pixels }
+    }
+  }
+
+  return null
+}
+
+function resolveObjectPosition(image) {
+  const raw = window.getComputedStyle(image).objectPosition || '50% 50%';
+  const tokens = raw.split(/\s+/).filter(Boolean);
+
+  if (tokens.length === 0) {
+    return {
+      x: { type: 'factor', value: 0.5 },
+      y: { type: 'factor', value: 0.5 },
+    }
+  }
+
+  if (tokens.length === 1) {
+    const token = tokens[0];
+    const x = parsePositionToken(token, 'x');
+    const y = parsePositionToken(token, 'y');
+
+    if (y && !x) {
+      return { x: { type: 'factor', value: 0.5 }, y }
+    }
+
+    return {
+      x: x ?? { type: 'factor', value: 0.5 },
+      y: { type: 'factor', value: 0.5 },
+    }
+  }
+
+  let xToken = tokens[0];
+  let yToken = tokens[1];
+  const firstIsVertical = ['top', 'bottom'].includes(tokens[0].toLowerCase());
+  const secondIsHorizontal = ['left', 'right'].includes(tokens[1].toLowerCase());
+
+  if (firstIsVertical && secondIsHorizontal) {
+    xToken = tokens[1];
+    yToken = tokens[0];
+  }
+
+  return {
+    x: parsePositionToken(xToken, 'x') ?? { type: 'factor', value: 0.5 },
+    y: parsePositionToken(yToken, 'y') ?? { type: 'factor', value: 0.5 },
+  }
+}
+
+function resolveObjectOffset(availableSpace, position) {
+  if (position.type === 'px') {
+    return position.value
+  }
+  return availableSpace * position.value
+}
+
+function ensureLens(el) {
+  const media = resolveCardMediaElement(el, MEDIA_CLASS);
+  media.classList.add(ENHANCED_MEDIA_CLASS);
+
+  let lens = media.querySelector(`.${LENS_CLASS}`);
+  if (!lens) {
+    lens = document.createElement('span');
+    lens.className = LENS_CLASS;
+    media.appendChild(lens);
+  }
+
+  return { media, lens }
+}
+
+function syncLensSurface(media, lens, zoomFactor) {
+  const image = media.querySelector('img');
+  const computed = window.getComputedStyle(media);
+
+  if (image?.currentSrc || image?.src) {
+    lens.style.backgroundImage = `url("${resolveImageUrl(image)}")`;
+    lens.style.backgroundColor = 'transparent';
+    lens.style.backgroundRepeat = 'no-repeat';
+    lens.style.removeProperty('background-size');
+    return
+  }
+
+  lens.style.backgroundImage = computed.backgroundImage;
+  lens.style.backgroundColor = computed.backgroundColor;
+  lens.style.backgroundRepeat = computed.backgroundRepeat;
+  lens.style.removeProperty('background-size');
+}
+
+function primeLensSurface(el, state, zoomFactor) {
+  const { media, lens, image } = state;
+  const markReady = () => {
+    if (stateMap.get(el) !== state) {
+      return
+    }
+    state.surfaceReady = true;
+    syncLensSurface(media, lens);
+    if (state.lastPointer) {
+      syncLensPosition({
+        mediaRect: media.getBoundingClientRect(),
+        lens,
+        image,
+        pointerX: state.lastPointer.x,
+        pointerY: state.lastPointer.y,
+        lensSize: state.lensSize,
+        zoomFactor,
+      });
+    }
+  };
+
+  if (!(image?.currentSrc || image?.src)) {
+    markReady();
+    return
+  }
+
+  syncLensSurface(media, lens);
+
+  // If the image is already visible enough to be used as a magnifier source,
+  // don't block pointer interaction on decode/load timing.
+  state.surfaceReady = true;
+
+  if (image.complete && image.naturalWidth) {
+    if (typeof image.decode === 'function') {
+      image.decode().then(markReady).catch(markReady);
+      return
+    }
+
+    markReady();
+    return
+  }
+
+  state.onLoad = () => {
+    markReady();
+  };
+  image.addEventListener('load', state.onLoad, { once: true });
+}
+
+function syncLensPosition({
+  mediaRect,
+  lens,
+  image,
+  pointerX,
+  pointerY,
+  lensSize,
+  zoomFactor,
+}) {
+  const lensX = pointerX - mediaRect.left;
+  const lensY = pointerY - mediaRect.top;
+
+  lens.style.setProperty('--readdy-anim-image-magnifier-lens-x', `${lensX}px`);
+  lens.style.setProperty('--readdy-anim-image-magnifier-lens-y', `${lensY}px`);
+  lens.style.opacity = '1';
+
+  if (image?.currentSrc || image?.src) {
+    const imageRect = image.getBoundingClientRect();
+    const naturalWidth = image.naturalWidth;
+    const naturalHeight = image.naturalHeight;
+
+    if (naturalWidth && naturalHeight && imageRect.width && imageRect.height) {
+      const localX = Math.min(Math.max(pointerX - imageRect.left, 0), imageRect.width);
+      const localY = Math.min(Math.max(pointerY - imageRect.top, 0), imageRect.height);
+      const scale = Math.max(imageRect.width / naturalWidth, imageRect.height / naturalHeight);
+      const renderedWidth = naturalWidth * scale;
+      const renderedHeight = naturalHeight * scale;
+      const objectPosition = resolveObjectPosition(image);
+      const offsetX = resolveObjectOffset(imageRect.width - renderedWidth, objectPosition.x);
+      const offsetY = resolveObjectOffset(imageRect.height - renderedHeight, objectPosition.y);
+
+      lens.style.backgroundSize = `${renderedWidth * zoomFactor}px ${renderedHeight * zoomFactor}px`;
+      lens.style.backgroundPosition = `${
+        -(localX - offsetX) * zoomFactor + lensSize / 2
+      }px ${-(localY - offsetY) * zoomFactor + lensSize / 2}px`;
+      return
+    }
+  }
+
+  const localX = (lensX / mediaRect.width) * 100;
+  const localY = (lensY / mediaRect.height) * 100;
+  lens.style.setProperty('--readdy-anim-magnifier-x', `${localX}%`);
+  lens.style.setProperty('--readdy-anim-magnifier-y', `${localY}%`);
+  lens.style.backgroundPosition = `${localX}% ${localY}%`;
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const lensSize = options.lensSize ?? 104;
+  const zoom = options.zoom ?? 320;
+  const zoomFactor = zoom / 100;
+  const fadeDuration = options.fadeDuration ?? 160;
+
+  el.style.setProperty('--readdy-anim-image-magnifier-lens-size', `${lensSize}px`);
+  el.style.setProperty('--readdy-anim-image-magnifier-zoom', `${zoom}%`);
+  el.style.setProperty('--readdy-anim-image-magnifier-fade-duration', `${fadeDuration}ms`);
+
+  const { media, lens } = ensureLens(el);
+  const image = media.querySelector('img');
+  const state = {
+    media,
+    lens,
+    cleanupPointerFollow: () => {},
+    image,
+    onLoad: null,
+    surfaceReady: false,
+    lastPointer: null,
+    lensSize,
+  };
+
+  const onMove = (event, context) => {
+    state.lastPointer = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+    if (!state.surfaceReady) {
+      return
+    }
+
+    syncLensPosition({
+      mediaRect: context.rect,
+      lens,
+      image,
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      lensSize,
+      zoomFactor,
+    });
+  };
+
+  const onLeave = () => {
+    lens.style.opacity = '0';
+    state.lastPointer = null;
+  };
+
+  const onEnter = (event, context) => {
+    state.lastPointer = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+    if (!state.surfaceReady) {
+      return
+    }
+
+    syncLensPosition({
+      mediaRect: context.rect,
+      lens,
+      image,
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      lensSize,
+      zoomFactor,
+    });
+  };
+
+  const cleanupPointerFollow = attachPointerFollow(media, { onEnter, onMove, onLeave });
+  state.cleanupPointerFollow = cleanupPointerFollow;
+  stateMap.set(el, state);
+  primeLensSurface(el, state, zoomFactor);
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    state.cleanupPointerFollow();
+    if (state.image && state.onLoad) {
+      state.image.removeEventListener('load', state.onLoad);
+    }
+    state.media.classList.remove(ENHANCED_MEDIA_CLASS);
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-image-magnifier-lens-size');
+  el.style.removeProperty('--readdy-anim-image-magnifier-zoom');
+  el.style.removeProperty('--readdy-anim-image-magnifier-fade-duration');
+  el.querySelector(`.${LENS_CLASS}`)?.remove();
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/card/image-zoom-rotate/react.js

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

package/dist/card/image-zoom-rotate.js

@@ -0,0 +1,49 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+import { r as resolveCardMediaElement } from '../chunks/resolve-card-media-Cj3V_oms.js';
+
+const ANIMATION_ID = buildAnimId('image-zoom-rotate');
+
+const CSS_CLASS = buildAnimClass('image-zoom-rotate');
+const MEDIA_CLASS = buildAnimClass('card-media');
+
+const autoMediaState = new WeakMap();
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-image-zoom-scale', `${options.scale ?? 1.08}`);
+  el.style.setProperty('--readdy-anim-image-zoom-rotate', `${options.rotate ?? 2}deg`);
+  el.style.setProperty('--readdy-anim-image-zoom-duration', `${options.duration ?? 500}ms`);
+
+  const media = resolveCardMediaElement(el, MEDIA_CLASS);
+  if (!media) return
+
+  const state = {
+    media,
+    addedMediaClass: false,
+  };
+
+  if (!media.classList.contains(MEDIA_CLASS)) {
+    media.classList.add(MEDIA_CLASS);
+    state.addedMediaClass = true;
+  }
+
+  autoMediaState.set(el, state);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-image-zoom-scale');
+  el.style.removeProperty('--readdy-anim-image-zoom-rotate');
+  el.style.removeProperty('--readdy-anim-image-zoom-duration');
+
+  const state = autoMediaState.get(el);
+  if (state?.addedMediaClass) {
+    state.media?.classList.remove(MEDIA_CLASS);
+  }
+  autoMediaState.delete(el);
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/card/pop-in-stack/react.js

@@ -0,0 +1,20 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../pop-in-stack.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimPopInStack({ children, delay, duration, offset, scaleStart, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { delay, duration, offset, scaleStart });
+        return () => {
+            destroy(el);
+        };
+    }, [delay, duration, offset, scaleStart]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimPopInStack };

package/dist/card/pop-in-stack.js

@@ -0,0 +1,26 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('pop-in-stack');
+
+const CSS_CLASS = buildAnimClass('pop-in-stack');
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-pop-delay', `${options.delay ?? 0}ms`);
+  el.style.setProperty('--readdy-anim-pop-duration', `${options.duration ?? 600}ms`);
+  el.style.setProperty('--readdy-anim-pop-offset', `${options.offset ?? 18}px`);
+  el.style.setProperty('--readdy-anim-pop-scale-start', `${options.scaleStart ?? 0.88}`);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-pop-delay');
+  el.style.removeProperty('--readdy-anim-pop-duration');
+  el.style.removeProperty('--readdy-anim-pop-offset');
+  el.style.removeProperty('--readdy-anim-pop-scale-start');
+}
+
+export { ANIMATION_ID, destroy, init };

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

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../reveal-from-top.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+/**
+ * Reveal From Top — 卡片从顶部揭示
+ *
+ * 用法：
+ *   <AnimRevealFromTop><div className="card">内容</div></AnimRevealFromTop>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-reveal-from-top class
+ * 必须恰好包裹一个子元素
+ */
+function AnimRevealFromTop({ 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 { AnimRevealFromTop };