@readdy/anim 0.0.21

package/dist/button/confetti-button/react.js

@@ -0,0 +1,21 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../confetti-button.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimConfettiButton({ children, pieces, colors, }) {
+    const ref = useRef(null);
+    const colorsKey = colors?.join('\u0001') ?? '';
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { pieces, colors });
+        return () => {
+            destroy(el);
+        };
+    }, [colorsKey, pieces]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimConfettiButton };

package/dist/button/confetti-button.js

@@ -0,0 +1,67 @@
+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('confetti-button');
+
+const CSS_CLASS = buildAnimClass('confetti-button');
+const LAYER_CLASS = buildAnimClass('confetti-layer');
+const PIECE_CLASS = buildAnimClass('confetti-piece');
+const stateMap = new WeakMap();
+
+function createBurst(el, options) {
+  const layer = document.createElement('span');
+  layer.className = LAYER_CLASS;
+  el.appendChild(layer);
+
+  const colors = options.colors ?? ['#22d3ee', '#a78bfa', '#f472b6', '#facc15', '#34d399'];
+  const pieces = options.pieces ?? 18;
+
+  for (let index = 0; index < pieces; index += 1) {
+    const piece = document.createElement('span');
+    piece.className = PIECE_CLASS;
+    piece.style.setProperty('--readdy-anim-confetti-x', `${(Math.random() - 0.5) * 180}px`);
+    piece.style.setProperty('--readdy-anim-confetti-y', `${ -40 - Math.random() * 90}px`);
+    piece.style.setProperty('--readdy-anim-confetti-rotate', `${Math.random() * 360}deg`);
+    piece.style.setProperty('--readdy-anim-confetti-delay', `${index * 14}ms`);
+    piece.style.background = colors[index % colors.length];
+    layer.appendChild(piece);
+  }
+
+  return window.setTimeout(() => {
+    layer.remove();
+  }, 1100)
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+
+  const onClick = () => {
+    if (prefersReducedMotion()) {
+      return
+    }
+    const timeoutId = createBurst(el, options);
+    const state = stateMap.get(el);
+    if (state) {
+      state.timeoutIds.push(timeoutId);
+    }
+  };
+
+  el.addEventListener('click', onClick);
+  stateMap.set(el, { onClick, timeoutIds: [] });
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    el.removeEventListener('click', state.onClick);
+    state.timeoutIds.forEach((timeoutId) => window.clearTimeout(timeoutId));
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+  el.querySelectorAll(`.${LAYER_CLASS}`).forEach((node) => node.remove());
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/glow-cta/react.js

@@ -0,0 +1,23 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../glow-cta.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+import '../../chunks/pointer-follow-BETANySn.js';
+
+function AnimGlowCta({ children, scale, arrowPadding, idleOpacity, activeOpacity, inset, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { scale, arrowPadding, idleOpacity, activeOpacity, inset });
+        return () => {
+            destroy(el);
+        };
+    }, [scale, arrowPadding, idleOpacity, activeOpacity, inset]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimGlowCta };

package/dist/button/glow-cta.js

@@ -0,0 +1,65 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { a as attachPointerFollow } from '../chunks/pointer-follow-BETANySn.js';
+
+const ANIMATION_ID = buildAnimId('glow-cta');
+
+const CSS_CLASS = buildAnimClass('glow-cta');
+const ACTIVE_CLASS = buildAnimClass('glow-cta-active');
+const cleanups = new WeakMap();
+const GLOW_X_VAR = '--readdy-anim-glow-cta-x';
+const GLOW_Y_VAR = '--readdy-anim-glow-cta-y';
+
+function init(el, options = {}) {
+  if (cleanups.has(el)) return
+
+  el.classList.add(CSS_CLASS);
+  el.style.setProperty(GLOW_X_VAR, '50%');
+  el.style.setProperty(GLOW_Y_VAR, '50%');
+  el.style.setProperty('--readdy-anim-glow-cta-scale', `${options.scale ?? 1.05}`);
+  el.style.setProperty('--readdy-anim-glow-cta-padding', options.arrowPadding ?? 'calc(2rem + 1.2em)');
+  el.style.setProperty('--readdy-anim-glow-cta-idle-opacity', `${options.idleOpacity ?? 0.2}`);
+  el.style.setProperty('--readdy-anim-glow-cta-active-opacity', `${options.activeOpacity ?? 0.6}`);
+  el.style.setProperty('--readdy-anim-glow-cta-inset', `${options.inset ?? -8}px`);
+
+  if (prefersReducedMotion()) {
+    cleanups.set(el, () => {});
+    return
+  }
+
+  const cleanup = attachPointerFollow(el, {
+    onMove(event, context) {
+      const { rect } = context.getMetrics(event);
+      const x = rect.width ? ((event.clientX - rect.left) / rect.width) * 100 : 50;
+      const y = rect.height ? ((event.clientY - rect.top) / rect.height) * 100 : 50;
+
+      el.style.setProperty(GLOW_X_VAR, `${Math.max(0, Math.min(100, x))}%`);
+      el.style.setProperty(GLOW_Y_VAR, `${Math.max(0, Math.min(100, y))}%`);
+      el.classList.add(ACTIVE_CLASS);
+    },
+    onLeave() {
+      el.classList.remove(ACTIVE_CLASS);
+      el.style.setProperty(GLOW_X_VAR, '50%');
+      el.style.setProperty(GLOW_Y_VAR, '50%');
+    },
+  });
+
+  cleanups.set(el, cleanup);
+}
+
+function destroy(el) {
+  cleanups.get(el)?.();
+  cleanups.delete(el);
+
+  el.classList.remove(CSS_CLASS);
+  el.classList.remove(ACTIVE_CLASS);
+  el.style.removeProperty(GLOW_X_VAR);
+  el.style.removeProperty(GLOW_Y_VAR);
+  el.style.removeProperty('--readdy-anim-glow-cta-scale');
+  el.style.removeProperty('--readdy-anim-glow-cta-padding');
+  el.style.removeProperty('--readdy-anim-glow-cta-idle-opacity');
+  el.style.removeProperty('--readdy-anim-glow-cta-active-opacity');
+  el.style.removeProperty('--readdy-anim-glow-cta-inset');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/magnetic-hover/react.js

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

package/dist/button/magnetic-hover.js

@@ -0,0 +1,62 @@
+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('magnetic-hover');
+
+const CSS_CLASS = buildAnimClass('magnetic-hover');
+const stateMap = new WeakMap();
+
+function resetTransform(el) {
+  el.style.setProperty('--readdy-anim-magnetic-x', '0px');
+  el.style.setProperty('--readdy-anim-magnetic-y', '0px');
+  el.style.setProperty('--readdy-anim-magnetic-scale', '1');
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+  resetTransform(el);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const padding = options.padding ?? 150;
+  const strength = options.strength ?? 3;
+
+  const onMove = (event, context) => {
+    const { rect, deltaX, deltaY } = getPointerMetrics(context.rect, event);
+
+    if (Math.abs(deltaX) > rect.width / 2 + padding || Math.abs(deltaY) > rect.height / 2 + padding) {
+      return
+    }
+
+    el.style.setProperty('--readdy-anim-magnetic-x', `${deltaX / strength}px`);
+    el.style.setProperty('--readdy-anim-magnetic-y', `${deltaY / strength}px`);
+    el.style.setProperty('--readdy-anim-magnetic-scale', '1.05');
+  };
+
+  const onLeave = () => {
+    resetTransform(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-magnetic-x');
+  el.style.removeProperty('--readdy-anim-magnetic-y');
+  el.style.removeProperty('--readdy-anim-magnetic-scale');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/pulse/react.js

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../pulse.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+/**
+ * Pulse — 按钮持续脉冲
+ *
+ * 用法：
+ *   <AnimPulse><button>点击</button></AnimPulse>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-pulse class
+ * 必须恰好包裹一个子元素
+ */
+function AnimPulse({ 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 { AnimPulse };

package/dist/button/pulse.js

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

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../rainbow-button.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+/**
+ * Rainbow Button — 彩虹按钮
+ *
+ * 用法：
+ *   <AnimRainbowButton><button>点击</button></AnimRainbowButton>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-rainbow-button class
+ * 必须恰好包裹一个子元素
+ */
+function AnimRainbowButton({ 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 { AnimRainbowButton };

package/dist/button/rainbow-button.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('rainbow-button');
+
+const CSS_CLASS = buildAnimClass('rainbow-button');
+
+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/button/shimmer-border/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 '../shimmer-border.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimShimmerBorder({ children, duration, borderWidth, opacity, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (prefersReducedMotion())
+            return;
+        init(el, { duration, borderWidth, opacity });
+        return () => {
+            destroy(el);
+        };
+    }, [borderWidth, duration, opacity]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimShimmerBorder };

package/dist/button/shimmer-border.js

@@ -0,0 +1,24 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('shimmer-border');
+
+const CSS_CLASS = buildAnimClass('shimmer-border');
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  el.style.setProperty('--readdy-anim-shimmer-border-duration', `${options.duration ?? 800}ms`);
+  el.style.setProperty('--readdy-anim-shimmer-border-width', `${options.borderWidth ?? 1.5}px`);
+  el.style.setProperty('--readdy-anim-shimmer-border-opacity', `${options.opacity ?? 0.88}`);
+}
+
+function destroy(el) {
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-shimmer-border-duration');
+  el.style.removeProperty('--readdy-anim-shimmer-border-width');
+  el.style.removeProperty('--readdy-anim-shimmer-border-opacity');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/sketch-button/react.js

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

package/dist/button/sketch-button.js

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

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

package/dist/card/blur-rise.js

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

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

package/dist/card/bounce-in-bottom.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('bounce-in-bottom');
+
+const CSS_CLASS = buildAnimClass('bounce-in-bottom');
+
+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/card-fan-spread/react.js

@@ -0,0 +1,20 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../card-fan-spread.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimCardFanSpread({ children, spreadDistance, spreadRotate, depthRotate, lift, duration, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { spreadDistance, spreadRotate, depthRotate, lift, duration });
+        return () => {
+            destroy(el);
+        };
+    }, [spreadDistance, spreadRotate, depthRotate, lift, duration]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimCardFanSpread };