@readdy/anim 0.0.21

package/dist/button/3d-flip.js

@@ -0,0 +1,61 @@
+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('3d-flip');
+
+const CSS_CLASS = buildAnimClass('3d-flip');
+const stateMap = new WeakMap();
+
+function reset(el) {
+  el.style.setProperty('--readdy-anim-3d-rotate-x', '0deg');
+  el.style.setProperty('--readdy-anim-3d-rotate-y', '0deg');
+  el.style.setProperty('--readdy-anim-3d-translate-x', '0px');
+  el.style.setProperty('--readdy-anim-3d-translate-y', '0px');
+}
+
+function init(el, options = {}) {
+  destroy(el);
+
+  el.classList.add(CSS_CLASS);
+  reset(el);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const tilt = options.maxTilt ?? 12;
+  const travel = options.translate ?? 8;
+
+  const onMove = (event, context) => {
+    const { relativeX, relativeY } = getPointerMetrics(context.rect, event);
+
+    el.style.setProperty('--readdy-anim-3d-rotate-x', `${relativeY * -tilt * 2}deg`);
+    el.style.setProperty('--readdy-anim-3d-rotate-y', `${relativeX * tilt * 2}deg`);
+    el.style.setProperty('--readdy-anim-3d-translate-x', `${relativeX * travel * 2}px`);
+    el.style.setProperty('--readdy-anim-3d-translate-y', `${relativeY * travel * 2}px`);
+  };
+
+  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-3d-rotate-x');
+  el.style.removeProperty('--readdy-anim-3d-rotate-y');
+  el.style.removeProperty('--readdy-anim-3d-translate-x');
+  el.style.removeProperty('--readdy-anim-3d-translate-y');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/blur-fade-in/react.js

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

package/dist/button/blur-fade-in.js

@@ -0,0 +1,17 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('blur-fade-in');
+
+const CSS_CLASS = buildAnimClass('blur-fade-in');
+
+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/border-beam/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 '../border-beam.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimBorderBeam({ children, duration, delay, borderWidth, glowOpacity, size, initialOffset, colorFrom, colorTo, reverse, respectReducedMotion = true, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (respectReducedMotion && prefersReducedMotion())
+            return;
+        init(el, { duration, delay, borderWidth, glowOpacity, size, initialOffset, colorFrom, colorTo, reverse });
+        return () => {
+            destroy(el);
+        };
+    }, [borderWidth, colorFrom, colorTo, delay, duration, glowOpacity, initialOffset, respectReducedMotion, reverse, size]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { AnimBorderBeam };

package/dist/button/border-beam.js

@@ -0,0 +1,168 @@
+import { b as buildAnimId, a as buildAnimClass } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('border-beam');
+
+const CSS_CLASS = buildAnimClass('border-beam');
+const LAYER_CLASS = `${CSS_CLASS}__layer`;
+const BEAM_CLASS = `${CSS_CLASS}__beam`;
+const BEAM_WARM_CLASS = `${BEAM_CLASS}--warm`;
+const BEAM_COOL_CLASS = `${BEAM_CLASS}--cool`;
+const ANIMATION_KEY = '__readdyBorderBeamAnimation';
+const STATE_KEY = '__readdyBorderBeamState';
+const DEFAULT_SIZE = 72;
+
+function ensureLayer(el) {
+  const existing = Array.from(el.children).find((child) => child.classList?.contains(LAYER_CLASS));
+  if (existing) {
+    const warmBeam = existing.querySelector(`.${BEAM_WARM_CLASS}`);
+    const coolBeam = existing.querySelector(`.${BEAM_COOL_CLASS}`);
+    if (warmBeam && coolBeam) {
+      return { layer: existing, beams: [warmBeam, coolBeam] }
+    }
+    existing.remove();
+  }
+
+  const layer = document.createElement('span');
+  layer.className = LAYER_CLASS;
+  layer.setAttribute('aria-hidden', 'true');
+
+  const warmBeam = document.createElement('span');
+  warmBeam.className = `${BEAM_CLASS} ${BEAM_WARM_CLASS}`;
+  layer.appendChild(warmBeam);
+
+  const coolBeam = document.createElement('span');
+  coolBeam.className = `${BEAM_CLASS} ${BEAM_COOL_CLASS}`;
+  layer.appendChild(coolBeam);
+
+  el.appendChild(layer);
+
+  return { layer, beams: [warmBeam, coolBeam] }
+}
+
+function cancelAnimation(el) {
+  el[ANIMATION_KEY]?.cancel?.();
+  delete el[ANIMATION_KEY];
+}
+
+function getBeamSize(el, options) {
+  if (typeof options.size === 'number') {
+    return options.size
+  }
+
+  const { width, height } = el.getBoundingClientRect();
+  return Math.max(DEFAULT_SIZE, Math.min(Math.round((width + height) * 0.22), 160))
+}
+
+function syncLayer(el) {
+  const state = el[STATE_KEY];
+  if (!state) return
+
+  const { beams, options } = state;
+  const radius = getComputedStyle(el).borderRadius || '0px';
+  const size = getBeamSize(el, options);
+
+  el.style.setProperty('--readdy-anim-border-beam-radius', radius);
+  el.style.setProperty('--readdy-anim-border-beam-duration', `${options.duration ?? 3000}ms`);
+  el.style.setProperty('--readdy-anim-border-beam-width', `${options.borderWidth ?? 1.35}px`);
+  el.style.setProperty('--readdy-anim-border-beam-glow-opacity', `${options.glowOpacity ?? 0.28}`);
+  el.style.setProperty('--readdy-anim-border-beam-size', `${size}px`);
+
+  beams.forEach((beam, index) => {
+    beam.style.width = `${size}px`;
+    beam.style.offsetPath = `rect(0 auto auto 0 round ${radius})`;
+    if (index === 0) {
+      beam.style.setProperty('--readdy-anim-border-beam-color-from', options.colorFrom ?? '#ff6b6b');
+      beam.style.setProperty('--readdy-anim-border-beam-color-to', options.colorTo ?? '#ffb86b');
+    } else {
+      beam.style.setProperty('--readdy-anim-border-beam-color-from', options.secondaryColorFrom ?? '#5ea0ff');
+      beam.style.setProperty('--readdy-anim-border-beam-color-to', options.secondaryColorTo ?? '#9ec5ff');
+    }
+  });
+}
+
+function runAnimation(el) {
+  const state = el[STATE_KEY];
+  if (!state) return
+
+  const { beams, options } = state;
+  const initialOffset = options.initialOffset ?? 0;
+  const duration = options.duration ?? 3000;
+  const delay = options.delay ?? 0;
+  const reverse = options.reverse ?? false;
+
+  cancelAnimation(el);
+  const animations = beams
+    .map((beam, index) => {
+      if (typeof beam.animate !== 'function') return null
+
+      const beamOffset = initialOffset + index * 50;
+      const from = reverse ? `${100 - beamOffset}%` : `${beamOffset}%`;
+      const to = reverse ? `${-beamOffset}%` : `${100 + beamOffset}%`;
+      beam.style.offsetDistance = from;
+
+      return beam.animate(
+        [
+          { offsetDistance: from },
+          { offsetDistance: to },
+        ],
+        {
+          duration,
+          delay: -delay,
+          easing: 'linear',
+          iterations: Infinity,
+          fill: 'both',
+        }
+      )
+    })
+    .filter(Boolean);
+
+  if (animations.length > 0) {
+    el[ANIMATION_KEY] = {
+      cancel() {
+        animations.forEach((animation) => animation.cancel());
+      },
+    };
+  }
+}
+
+function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS);
+  }
+
+  const { layer, beams } = ensureLayer(el);
+  const state = el[STATE_KEY] ?? { layer, beams, options };
+
+  state.layer = layer;
+  state.beams = beams;
+  state.options = options;
+
+  if (!state.resizeObserver && typeof ResizeObserver !== 'undefined') {
+    state.resizeObserver = new ResizeObserver(() => {
+      syncLayer(el);
+    });
+    state.resizeObserver.observe(el);
+  }
+
+  el[STATE_KEY] = state;
+  syncLayer(el);
+  runAnimation(el);
+}
+
+function destroy(el) {
+  cancelAnimation(el);
+
+  const state = el[STATE_KEY];
+  state?.resizeObserver?.disconnect();
+  state?.layer?.remove();
+  delete el[STATE_KEY];
+
+  el.classList.remove(CSS_CLASS);
+  el.style.removeProperty('--readdy-anim-border-beam-radius');
+  el.style.removeProperty('--readdy-anim-border-beam-duration');
+  el.style.removeProperty('--readdy-anim-border-beam-width');
+  el.style.removeProperty('--readdy-anim-border-beam-glow-opacity');
+  el.style.removeProperty('--readdy-anim-border-beam-size');
+}
+
+export { ANIMATION_ID, destroy, init };

package/dist/button/bounce-elastic/react.js

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

package/dist/button/bounce-elastic.js

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

@@ -0,0 +1,20 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../bubble-button.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function AnimBubbleButton({ 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 { AnimBubbleButton };

package/dist/button/bubble-button.js

@@ -0,0 +1,318 @@
+import { p as prefersReducedMotion } from '../chunks/reduced-motion-HX79Ac8G.js';
+import { b as buildAnimId, a as buildAnimClass, c as buildAnimDomId } from '../chunks/constants-EnH6-Pz4.js';
+
+const ANIMATION_ID = buildAnimId('bubble-button');
+
+const CSS_CLASS = buildAnimClass('bubble-button');
+const ACTIVE_CLASS = buildAnimClass('bubble-button-active');
+const HOVER_CLASS = buildAnimClass('bubble-button-hover');
+const FALLBACK_CLASS = buildAnimClass('bubble-button-fallback');
+const CONTAINER_CLASS = buildAnimClass('bubble-button-container');
+const EFFECT_CONTAINER_CLASS = buildAnimClass('bubble-button-effect-container');
+const EFFECT_BUTTON_CLASS = buildAnimClass('bubble-button-effect-button');
+const CIRCLE_CLASS = buildAnimClass('bubble-button-circle');
+const FILTER_ID = buildAnimDomId('bubble-goo');
+const FILTER_ROOT_ID = buildAnimDomId('bubble-goo-root');
+
+const stateMap = new WeakMap();
+let gooFilterRefCount = 0;
+
+function ensureGooFilter() {
+  gooFilterRefCount += 1;
+  if (document.getElementById(FILTER_ID)) {
+    return
+  }
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.id = FILTER_ROOT_ID;
+  svg.setAttribute('aria-hidden', 'true');
+  svg.style.position = 'absolute';
+  svg.style.width = '0';
+  svg.style.height = '0';
+  svg.style.pointerEvents = 'none';
+
+  svg.innerHTML = `
+    <defs>
+      <filter id="${FILTER_ID}">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+        <feColorMatrix
+          in="blur"
+          mode="matrix"
+          values="
+            1 0 0 0 0
+            0 1 0 0 0
+            0 0 1 0 0
+            0 0 0 19 -9
+          "
+          result="goo"
+        />
+        <feComposite in="SourceGraphic" in2="goo" />
+      </filter>
+    </defs>
+  `;
+
+  document.body.appendChild(svg);
+}
+
+function releaseGooFilter() {
+  gooFilterRefCount = Math.max(gooFilterRefCount - 1, 0);
+  if (gooFilterRefCount === 0) {
+    document.getElementById(FILTER_ROOT_ID)?.remove();
+  }
+}
+
+function createCircle(position, slot) {
+  const circle = document.createElement('span');
+  circle.className = `${CIRCLE_CLASS} ${CIRCLE_CLASS}-${position} ${CIRCLE_CLASS}-${position}-${slot}`;
+  return circle
+}
+
+function ensureStructure(el) {
+  let container = el.parentElement;
+
+  if (!container?.classList.contains(CONTAINER_CLASS)) {
+    container = document.createElement('span');
+    container.className = CONTAINER_CLASS;
+    el.parentNode?.insertBefore(container, el);
+    container.appendChild(el);
+  }
+
+  let effectContainer = container.querySelector(`.${EFFECT_CONTAINER_CLASS}`);
+  if (!effectContainer) {
+    effectContainer = document.createElement('span');
+    effectContainer.className = EFFECT_CONTAINER_CLASS;
+    effectContainer.style.filter = `url(#${FILTER_ID})`;
+    effectContainer.style.webkitFilter = `url(#${FILTER_ID})`;
+
+    effectContainer.appendChild(createCircle('top-left', 1));
+    effectContainer.appendChild(createCircle('top-left', 2));
+    effectContainer.appendChild(createCircle('top-left', 3));
+
+    const effectButton = document.createElement('span');
+    effectButton.className = EFFECT_BUTTON_CLASS;
+    effectContainer.appendChild(effectButton);
+
+    effectContainer.appendChild(createCircle('bottom-right', 1));
+    effectContainer.appendChild(createCircle('bottom-right', 2));
+    effectContainer.appendChild(createCircle('bottom-right', 3));
+
+    container.appendChild(effectContainer);
+  }
+
+  return {
+    container,
+    effectContainer,
+    effectButton: effectContainer.querySelector(`.${EFFECT_BUTTON_CLASS}`),
+    circlesTopLeft: Array.from(effectContainer.querySelectorAll(`.${CIRCLE_CLASS}-top-left`)),
+    circlesBottomRight: Array.from(effectContainer.querySelectorAll(`.${CIRCLE_CLASS}-bottom-right`)),
+  }
+}
+
+function setAccent(container, el) {
+  const computed = window.getComputedStyle(el);
+  const backgroundColor = computed.backgroundColor;
+  const accent = backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)' ? backgroundColor : '#4f6bff';
+  container.style.setProperty('--readdy-anim-bubble-accent', accent);
+}
+
+function clearAnimations(state) {
+  state.animations.forEach((animation) => {
+    animation.cancel();
+  });
+  state.animations = [];
+}
+
+function trackAnimation(state, animation) {
+  if (!animation) {
+    return
+  }
+
+  state.animations.push(animation);
+  const forget = () => {
+    state.animations = state.animations.filter((item) => item !== animation);
+  };
+  animation.addEventListener('finish', forget, { once: true });
+  animation.addEventListener('cancel', forget, { once: true });
+}
+
+function clearInlineState(state) {
+  const nodes = [
+    state.effectButton,
+    ...state.circlesTopLeft,
+    ...state.circlesBottomRight,
+  ].filter(Boolean);
+
+  nodes.forEach((node) => {
+    node.style.opacity = '';
+    node.style.transform = '';
+  });
+}
+
+function resetState(state) {
+  clearAnimations(state);
+  state.container.classList.remove(ACTIVE_CLASS);
+  state.container.classList.remove(HOVER_CLASS);
+  clearInlineState(state);
+}
+
+function hasWAAPI() {
+  return typeof Element.prototype.animate === 'function'
+}
+
+function playBurst(state) {
+  const { container, effectButton, circlesTopLeft, circlesBottomRight } = state;
+
+  container.classList.remove(ACTIVE_CLASS);
+  void container.offsetWidth;
+  container.classList.add(HOVER_CLASS);
+  container.classList.add(ACTIVE_CLASS);
+
+  if (!state.supportsWAAPI) {
+    return
+  }
+
+  clearAnimations(state);
+
+  trackAnimation(
+    state,
+    effectButton?.animate(
+      [
+        { transform: 'translateY(-50%) scaleY(1)', opacity: 1 },
+        { transform: 'translateY(-50%) scaleY(1.1)', opacity: 1, offset: 0.34 },
+        { transform: 'translateY(-50%) scale(1)', opacity: 1 },
+      ],
+      {
+        duration: 1000,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      }
+    )
+  );
+
+  const topFrames = [
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-19px, -27px) rotate(-45deg) scale(0.2)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-24px, -42px) rotate(-45deg) scale(0)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-35px, -32px) rotate(-45deg) scale(1, 0.8)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-45px, -42px) rotate(-45deg) scale(0.4)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-40px, -19px) rotate(-45deg) scale(0.2)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-55px, -14px) rotate(-45deg) scale(0)', opacity: 0 },
+    ],
+  ];
+
+  const bottomFrames = [
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(24px, 33px) rotate(45deg) scale(0.2)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(29px, 48px) rotate(45deg) scale(0)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(37px, 33px) rotate(45deg) scale(0.8)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(44px, 40px) rotate(45deg) scale(0.4)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(45px, 24px) rotate(45deg) scale(0.2)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(60px, 19px) rotate(45deg) scale(0)', opacity: 0 },
+    ],
+  ];
+
+  circlesTopLeft.forEach((circle, index) => {
+    trackAnimation(
+      state,
+      circle.animate(topFrames[index], {
+        duration: 1200,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      })
+    );
+  });
+
+  circlesBottomRight.forEach((circle, index) => {
+    trackAnimation(
+      state,
+      circle.animate(bottomFrames[index], {
+        duration: 1100,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      })
+    );
+  });
+}
+
+function init(el) {
+  destroy(el);
+  el.classList.add(CSS_CLASS);
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  ensureGooFilter();
+  const structure = ensureStructure(el);
+  setAccent(structure.container, el);
+
+  const state = {
+    ...structure,
+    animations: [],
+    supportsWAAPI: hasWAAPI(),
+    onEnter: () => {},
+    onLeave: () => {},
+  };
+
+  state.onEnter = () => {
+    playBurst(state);
+  };
+
+  state.onLeave = () => {
+    resetState(state);
+  };
+
+  state.container.addEventListener('mouseenter', state.onEnter);
+  state.container.addEventListener('mouseleave', state.onLeave);
+  state.container.classList.toggle(FALLBACK_CLASS, !state.supportsWAAPI);
+  stateMap.set(el, state);
+}
+
+function destroy(el) {
+  const state = stateMap.get(el);
+  if (state) {
+    state.container.removeEventListener('mouseenter', state.onEnter);
+    state.container.removeEventListener('mouseleave', state.onLeave);
+    resetState(state);
+    releaseGooFilter();
+    stateMap.delete(el);
+  }
+
+  el.classList.remove(CSS_CLASS);
+
+  const container = el.parentElement?.classList.contains(CONTAINER_CLASS) ? el.parentElement : null;
+  if (container) {
+    container.classList.remove(ACTIVE_CLASS);
+    container.classList.remove(HOVER_CLASS);
+    container.classList.remove(FALLBACK_CLASS);
+    container.style.removeProperty('--readdy-anim-bubble-accent');
+    if (container.parentNode) {
+      container.parentNode.insertBefore(el, container);
+    } else {
+      container.removeChild(el);
+    }
+    container.remove();
+  }
+}
+
+export { ANIMATION_ID, destroy, init };