next-wow 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 next-wow contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# next-wow
+
+Scroll-triggered [Animate.css](https://animate.style/) animations for React and Next.js. Inspired by WOW.js, built on `IntersectionObserver`.
+
+## Install
+
+```bash
+npm i next-wow
+```
+
+`animate.css` is included as a dependency and pulled in via the stylesheet.
+
+## Usage
+
+```tsx
+"use client" // required in Next.js App Router
+
+import { useWOW } from "next-wow"
+import "next-wow/styles.css"
+
+export function AnimationProvider() {
+  useWOW({
+    once: false,           // replay when scrolling back
+    refreshTrigger: null,  // e.g. usePathname() in Next.js
+  })
+  return null
+}
+```
+
+Markup:
+
+```tsx
+<div className="wow fadeInUp" data-wow-delay="0.3s" data-wow-duration="1s">
+  Hello
+</div>
+
+{/* Prefixed Animate.css v4 names also work */}
+<div className="wow animate__bounceIn">World</div>
+```
+
+## API — `useWOW(options)`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `boxClass` | `string` | `"wow"` | Class that marks animatable elements |
+| `animateClass` | `string` | `"animate__animated"` | Base class added when playing |
+| `offset` | `number` | `0` | Extra `rootMargin` (px) on top/bottom |
+| `mobile` | `boolean` | `true` | If `false`, skip when UA matches `/Mobi/` |
+| `live` | `boolean` | `true` | Observe elements added after mount |
+| `callback` | `(el: HTMLElement) => void` | `null` | Called when an animation starts |
+| `scrollContainer` | `HTMLElement \| null` | `null` | Custom scroll root; `null` = viewport |
+| `once` | `boolean` | `true` | Animate once, or reset/replay when fully out of view |
+| `refreshTrigger` | `string \| number \| null` | `null` | Rebuild observers when this value changes (e.g. `pathname`) |
+
+Also exported: `ANIMATIONS`, `AnimationName`, `WowOptions`.
+
+## Data attributes
+
+| Attribute | Example | Effect |
+|-----------|---------|--------|
+| `data-wow-delay` | `"0.5s"` / `"200ms"` | Sets `animation-delay` |
+| `data-wow-duration` | `"1.5s"` / `"800ms"` | Sets `animation-duration` |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,237 @@
+'use strict';
+
+var react = require('react');
+
+// src/useWOW.ts
+var ANIMATIONS = [
+  "bounce",
+  "flash",
+  "pulse",
+  "rubberBand",
+  "shakeX",
+  "shakeY",
+  "headShake",
+  "swing",
+  "tada",
+  "wobble",
+  "jello",
+  "heartBeat",
+  "backInDown",
+  "backInLeft",
+  "backInRight",
+  "backInUp",
+  "backOutDown",
+  "backOutLeft",
+  "backOutRight",
+  "backOutUp",
+  "bounceIn",
+  "bounceInDown",
+  "bounceInLeft",
+  "bounceInRight",
+  "bounceInUp",
+  "bounceOut",
+  "bounceOutDown",
+  "bounceOutLeft",
+  "bounceOutRight",
+  "bounceOutUp",
+  "fadeIn",
+  "fadeInDown",
+  "fadeInDownBig",
+  "fadeInLeft",
+  "fadeInLeftBig",
+  "fadeInRight",
+  "fadeInRightBig",
+  "fadeInUp",
+  "fadeInUpBig",
+  "fadeInTopLeft",
+  "fadeInTopRight",
+  "fadeInBottomLeft",
+  "fadeInBottomRight",
+  "fadeOut",
+  "fadeOutDown",
+  "fadeOutDownBig",
+  "fadeOutLeft",
+  "fadeOutLeftBig",
+  "fadeOutRight",
+  "fadeOutRightBig",
+  "fadeOutUp",
+  "fadeOutUpBig",
+  "fadeOutTopLeft",
+  "fadeOutTopRight",
+  "fadeOutBottomRight",
+  "fadeOutBottomLeft",
+  "flip",
+  "flipInX",
+  "flipInY",
+  "flipOutX",
+  "flipOutY",
+  "lightSpeedInRight",
+  "lightSpeedInLeft",
+  "lightSpeedOutRight",
+  "lightSpeedOutLeft",
+  "rotateIn",
+  "rotateInDownLeft",
+  "rotateInDownRight",
+  "rotateInUpLeft",
+  "rotateInUpRight",
+  "rotateOut",
+  "rotateOutDownLeft",
+  "rotateOutDownRight",
+  "rotateOutUpLeft",
+  "rotateOutUpRight",
+  "hinge",
+  "jackInTheBox",
+  "rollIn",
+  "rollOut",
+  "zoomIn",
+  "zoomInDown",
+  "zoomInLeft",
+  "zoomInRight",
+  "zoomInUp",
+  "zoomOut",
+  "zoomOutDown",
+  "zoomOutLeft",
+  "zoomOutRight",
+  "zoomOutUp",
+  "slideInDown",
+  "slideInLeft",
+  "slideInRight",
+  "slideInUp",
+  "slideOutDown",
+  "slideOutLeft",
+  "slideOutRight",
+  "slideOutUp"
+];
+var ANIMATION_SET = new Set(ANIMATIONS);
+function findAnimation(el) {
+  return Array.from(el.classList).map((c) => c.replace(/^animate__/, "")).find((c) => ANIMATION_SET.has(c)) || "";
+}
+function useWOW({
+  boxClass = "wow",
+  animateClass = "animate__animated",
+  offset = 0,
+  mobile = true,
+  live = true,
+  callback = null,
+  scrollContainer = null,
+  once = true,
+  refreshTrigger = null
+} = {}) {
+  const callbackRef = react.useRef(callback);
+  react.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  react.useEffect(() => {
+    if (!mobile && /Mobi/.test(navigator.userAgent)) return;
+    const root = scrollContainer || null;
+    const getElements = () => Array.from(
+      (root || document).getElementsByClassName(boxClass)
+    );
+    const observed = /* @__PURE__ */ new WeakSet();
+    const inView = /* @__PURE__ */ new WeakSet();
+    const animating = /* @__PURE__ */ new WeakSet();
+    const cooldownTimers = /* @__PURE__ */ new Map();
+    const PLAY_RATIO = 0.1;
+    const parseMs = (v) => {
+      if (!v) return 0;
+      const n = parseFloat(v);
+      if (Number.isNaN(n)) return 0;
+      return v.trim().endsWith("ms") ? n : n * 1e3;
+    };
+    const animateIn = (el) => {
+      const animName = findAnimation(el);
+      const normalized = animName ? `animate__${animName}` : "";
+      if (normalized) el.classList.remove(normalized);
+      void el.offsetWidth;
+      el.classList.add(animateClass);
+      if (normalized) {
+        el.classList.add(normalized);
+        el.dataset._wowAnim = normalized;
+      }
+      const delay = el.dataset.wowDelay;
+      const duration = el.dataset.wowDuration;
+      if (delay) el.style.animationDelay = delay;
+      if (duration) el.style.animationDuration = duration;
+      const cooldown = (parseMs(duration) || 1e3) + parseMs(delay) + 150;
+      animating.add(el);
+      const existing = cooldownTimers.get(el);
+      if (existing) clearTimeout(existing);
+      cooldownTimers.set(
+        el,
+        setTimeout(() => animating.delete(el), cooldown)
+      );
+      if (callbackRef.current) {
+        requestAnimationFrame(() => callbackRef.current?.(el));
+      }
+    };
+    const animateReset = (el) => {
+      const prev = el.dataset._wowAnim;
+      el.classList.remove(animateClass);
+      if (prev) el.classList.remove(prev);
+      el.style.animationDelay = "";
+      el.style.animationDuration = "";
+    };
+    const observer = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach((entry) => {
+          const el = entry.target;
+          if (entry.intersectionRatio >= PLAY_RATIO) {
+            if (inView.has(el)) return;
+            inView.add(el);
+            animateIn(el);
+            if (once) obs.unobserve(el);
+          } else if (entry.intersectionRatio === 0) {
+            if (!once && inView.has(el) && !animating.has(el)) {
+              inView.delete(el);
+              animateReset(el);
+            }
+          }
+        });
+      },
+      {
+        root,
+        threshold: [0, PLAY_RATIO],
+        rootMargin: `${offset}px 0px`
+      }
+    );
+    const observeEl = (el) => {
+      if (observed.has(el)) return;
+      observed.add(el);
+      observer.observe(el);
+    };
+    getElements().forEach(observeEl);
+    let mutationObs = null;
+    if (live) {
+      mutationObs = new MutationObserver((mutations) => {
+        const hasAddedNodes = mutations.some((m) => m.addedNodes.length > 0);
+        if (!hasAddedNodes) return;
+        getElements().forEach(observeEl);
+      });
+      mutationObs.observe(root || document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      observer.disconnect();
+      mutationObs?.disconnect();
+      for (const timer of cooldownTimers.values()) {
+        clearTimeout(timer);
+      }
+    };
+  }, [
+    refreshTrigger,
+    boxClass,
+    animateClass,
+    offset,
+    mobile,
+    live,
+    scrollContainer,
+    once
+  ]);
+}
+
+exports.ANIMATIONS = ANIMATIONS;
+exports.useWOW = useWOW;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWOW.ts"],"names":["useRef","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/** Animate.css v4 animation names (from @keyframes in animate.css) */\nexport const ANIMATIONS = [\n  \"bounce\",\n  \"flash\",\n  \"pulse\",\n  \"rubberBand\",\n  \"shakeX\",\n  \"shakeY\",\n  \"headShake\",\n  \"swing\",\n  \"tada\",\n  \"wobble\",\n  \"jello\",\n  \"heartBeat\",\n  \"backInDown\",\n  \"backInLeft\",\n  \"backInRight\",\n  \"backInUp\",\n  \"backOutDown\",\n  \"backOutLeft\",\n  \"backOutRight\",\n  \"backOutUp\",\n  \"bounceIn\",\n  \"bounceInDown\",\n  \"bounceInLeft\",\n  \"bounceInRight\",\n  \"bounceInUp\",\n  \"bounceOut\",\n  \"bounceOutDown\",\n  \"bounceOutLeft\",\n  \"bounceOutRight\",\n  \"bounceOutUp\",\n  \"fadeIn\",\n  \"fadeInDown\",\n  \"fadeInDownBig\",\n  \"fadeInLeft\",\n  \"fadeInLeftBig\",\n  \"fadeInRight\",\n  \"fadeInRightBig\",\n  \"fadeInUp\",\n  \"fadeInUpBig\",\n  \"fadeInTopLeft\",\n  \"fadeInTopRight\",\n  \"fadeInBottomLeft\",\n  \"fadeInBottomRight\",\n  \"fadeOut\",\n  \"fadeOutDown\",\n  \"fadeOutDownBig\",\n  \"fadeOutLeft\",\n  \"fadeOutLeftBig\",\n  \"fadeOutRight\",\n  \"fadeOutRightBig\",\n  \"fadeOutUp\",\n  \"fadeOutUpBig\",\n  \"fadeOutTopLeft\",\n  \"fadeOutTopRight\",\n  \"fadeOutBottomRight\",\n  \"fadeOutBottomLeft\",\n  \"flip\",\n  \"flipInX\",\n  \"flipInY\",\n  \"flipOutX\",\n  \"flipOutY\",\n  \"lightSpeedInRight\",\n  \"lightSpeedInLeft\",\n  \"lightSpeedOutRight\",\n  \"lightSpeedOutLeft\",\n  \"rotateIn\",\n  \"rotateInDownLeft\",\n  \"rotateInDownRight\",\n  \"rotateInUpLeft\",\n  \"rotateInUpRight\",\n  \"rotateOut\",\n  \"rotateOutDownLeft\",\n  \"rotateOutDownRight\",\n  \"rotateOutUpLeft\",\n  \"rotateOutUpRight\",\n  \"hinge\",\n  \"jackInTheBox\",\n  \"rollIn\",\n  \"rollOut\",\n  \"zoomIn\",\n  \"zoomInDown\",\n  \"zoomInLeft\",\n  \"zoomInRight\",\n  \"zoomInUp\",\n  \"zoomOut\",\n  \"zoomOutDown\",\n  \"zoomOutLeft\",\n  \"zoomOutRight\",\n  \"zoomOutUp\",\n  \"slideInDown\",\n  \"slideInLeft\",\n  \"slideInRight\",\n  \"slideInUp\",\n  \"slideOutDown\",\n  \"slideOutLeft\",\n  \"slideOutRight\",\n  \"slideOutUp\",\n] as const;\n\nexport type AnimationName = (typeof ANIMATIONS)[number];\n\nconst ANIMATION_SET = new Set<string>(ANIMATIONS);\n\nfunction findAnimation(el: HTMLElement): string {\n  return (\n    Array.from(el.classList)\n      .map((c) => c.replace(/^animate__/, \"\"))\n      .find((c) => ANIMATION_SET.has(c)) || \"\"\n  );\n}\n\nexport interface WowOptions {\n  boxClass?: string;\n  animateClass?: string;\n  offset?: number;\n  mobile?: boolean;\n  live?: boolean;\n  callback?: ((el: HTMLElement) => void) | null;\n  scrollContainer?: HTMLElement | null;\n  once?: boolean;\n  refreshTrigger?: string | number | null;\n}\n\nexport function useWOW({\n  boxClass = \"wow\",\n  animateClass = \"animate__animated\",\n  offset = 0,\n  mobile = true,\n  live = true,\n  callback = null,\n  scrollContainer = null,\n  once = true,\n  refreshTrigger = null,\n}: WowOptions = {}) {\n  const callbackRef = useRef(callback);\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    if (!mobile && /Mobi/.test(navigator.userAgent)) return;\n\n    const root = scrollContainer || null;\n\n    const getElements = () =>\n      Array.from(\n        (root || document).getElementsByClassName(boxClass)\n      ) as HTMLElement[];\n\n    // Dedup state is kept local to this effect run (NOT on the element's\n    // dataset). Dataset flags would leak across effect re-runs (React\n    // StrictMode double-mount, HMR, refreshTrigger/pathname changes), which\n    // left elements unobserved by the surviving observer and stuck hidden.\n    const observed = new WeakSet<HTMLElement>();\n    const inView = new WeakSet<HTMLElement>();\n    // Elements currently mid entrance-animation. Entrance animations translate\n    // the element from far off-screen (e.g. fadeInRightBig starts at\n    // translate3d(2000px,0,0)), which drives intersectionRatio to 0 while the\n    // animation plays. Without this guard, the ratio===0 reset branch fires\n    // during the animation and cancels it, creating an infinite thrash loop\n    // that leaves the element hidden.\n    const animating = new WeakSet<HTMLElement>();\n    const cooldownTimers = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n    // Ratio at which an element is considered \"in view\" and plays.\n    const PLAY_RATIO = 0.1;\n\n    const parseMs = (v?: string) => {\n      if (!v) return 0;\n      const n = parseFloat(v);\n      if (Number.isNaN(n)) return 0;\n      return v.trim().endsWith(\"ms\") ? n : n * 1000;\n    };\n\n    const animateIn = (el: HTMLElement) => {\n      const animName = findAnimation(el);\n      const normalized = animName ? `animate__${animName}` : \"\";\n\n      // Restart the keyframes if replaying (once === false).\n      if (normalized) el.classList.remove(normalized);\n      void el.offsetWidth; // reflow\n\n      el.classList.add(animateClass);\n      if (normalized) {\n        el.classList.add(normalized);\n        el.dataset._wowAnim = normalized;\n      }\n\n      const delay = el.dataset.wowDelay;\n      const duration = el.dataset.wowDuration;\n      if (delay) el.style.animationDelay = delay;\n      if (duration) el.style.animationDuration = duration;\n\n      // Guard against transform-driven intersection changes until the entrance\n      // animation has finished. Default animate.css duration is 1s.\n      const cooldown = (parseMs(duration) || 1000) + parseMs(delay) + 150;\n      animating.add(el);\n      const existing = cooldownTimers.get(el);\n      if (existing) clearTimeout(existing);\n      cooldownTimers.set(\n        el,\n        setTimeout(() => animating.delete(el), cooldown)\n      );\n\n      if (callbackRef.current) {\n        requestAnimationFrame(() => callbackRef.current?.(el));\n      }\n    };\n\n    const animateReset = (el: HTMLElement) => {\n      const prev = el.dataset._wowAnim;\n      el.classList.remove(animateClass);\n      if (prev) el.classList.remove(prev);\n      el.style.animationDelay = \"\";\n      el.style.animationDuration = \"\";\n    };\n\n    const observer = new IntersectionObserver(\n      (entries, obs) => {\n        entries.forEach((entry) => {\n          const el = entry.target as HTMLElement;\n\n          if (entry.intersectionRatio >= PLAY_RATIO) {\n            // Enter: play once per entry (avoid re-triggering on each crossing).\n            if (inView.has(el)) return;\n            inView.add(el);\n            animateIn(el);\n            if (once) obs.unobserve(el);\n          } else if (entry.intersectionRatio === 0) {\n            // Only reset when the element is fully out of view (genuine\n            // scroll-away), never while it is still animating in — its own\n            // transform can push it off-screen and would otherwise cancel the\n            // animation in a loop.\n            if (!once && inView.has(el) && !animating.has(el)) {\n              inView.delete(el);\n              animateReset(el);\n            }\n          }\n          // 0 < ratio < PLAY_RATIO: keep current state (do nothing).\n        });\n      },\n      {\n        root,\n        threshold: [0, PLAY_RATIO],\n        rootMargin: `${offset}px 0px`,\n      }\n    );\n\n    const observeEl = (el: HTMLElement) => {\n      if (observed.has(el)) return;\n      observed.add(el);\n      observer.observe(el);\n    };\n\n    getElements().forEach(observeEl);\n\n    let mutationObs: MutationObserver | null = null;\n    if (live) {\n      mutationObs = new MutationObserver((mutations) => {\n        const hasAddedNodes = mutations.some((m) => m.addedNodes.length > 0);\n        if (!hasAddedNodes) return;\n\n        getElements().forEach(observeEl);\n      });\n\n      mutationObs.observe(root || document.body, {\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      mutationObs?.disconnect();\n      for (const timer of cooldownTimers.values()) {\n        clearTimeout(timer);\n      }\n    };\n  }, [\n    refreshTrigger,\n    boxClass,\n    animateClass,\n    offset,\n    mobile,\n    live,\n    scrollContainer,\n    once,\n  ]);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+/** Animate.css v4 animation names (from @keyframes in animate.css) */
+declare const ANIMATIONS: readonly ["bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat", "backInDown", "backInLeft", "backInRight", "backInUp", "backOutDown", "backOutLeft", "backOutRight", "backOutUp", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "jackInTheBox", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp", "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"];
+type AnimationName = (typeof ANIMATIONS)[number];
+interface WowOptions {
+    boxClass?: string;
+    animateClass?: string;
+    offset?: number;
+    mobile?: boolean;
+    live?: boolean;
+    callback?: ((el: HTMLElement) => void) | null;
+    scrollContainer?: HTMLElement | null;
+    once?: boolean;
+    refreshTrigger?: string | number | null;
+}
+declare function useWOW({ boxClass, animateClass, offset, mobile, live, callback, scrollContainer, once, refreshTrigger, }?: WowOptions): void;
+
+export { ANIMATIONS, type AnimationName, type WowOptions, useWOW };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/** Animate.css v4 animation names (from @keyframes in animate.css) */
+declare const ANIMATIONS: readonly ["bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat", "backInDown", "backInLeft", "backInRight", "backInUp", "backOutDown", "backOutLeft", "backOutRight", "backOutUp", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "jackInTheBox", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp", "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"];
+type AnimationName = (typeof ANIMATIONS)[number];
+interface WowOptions {
+    boxClass?: string;
+    animateClass?: string;
+    offset?: number;
+    mobile?: boolean;
+    live?: boolean;
+    callback?: ((el: HTMLElement) => void) | null;
+    scrollContainer?: HTMLElement | null;
+    once?: boolean;
+    refreshTrigger?: string | number | null;
+}
+declare function useWOW({ boxClass, animateClass, offset, mobile, live, callback, scrollContainer, once, refreshTrigger, }?: WowOptions): void;
+
+export { ANIMATIONS, type AnimationName, type WowOptions, useWOW };

package/dist/index.js

@@ -0,0 +1,234 @@
+import { useRef, useEffect } from 'react';
+
+// src/useWOW.ts
+var ANIMATIONS = [
+  "bounce",
+  "flash",
+  "pulse",
+  "rubberBand",
+  "shakeX",
+  "shakeY",
+  "headShake",
+  "swing",
+  "tada",
+  "wobble",
+  "jello",
+  "heartBeat",
+  "backInDown",
+  "backInLeft",
+  "backInRight",
+  "backInUp",
+  "backOutDown",
+  "backOutLeft",
+  "backOutRight",
+  "backOutUp",
+  "bounceIn",
+  "bounceInDown",
+  "bounceInLeft",
+  "bounceInRight",
+  "bounceInUp",
+  "bounceOut",
+  "bounceOutDown",
+  "bounceOutLeft",
+  "bounceOutRight",
+  "bounceOutUp",
+  "fadeIn",
+  "fadeInDown",
+  "fadeInDownBig",
+  "fadeInLeft",
+  "fadeInLeftBig",
+  "fadeInRight",
+  "fadeInRightBig",
+  "fadeInUp",
+  "fadeInUpBig",
+  "fadeInTopLeft",
+  "fadeInTopRight",
+  "fadeInBottomLeft",
+  "fadeInBottomRight",
+  "fadeOut",
+  "fadeOutDown",
+  "fadeOutDownBig",
+  "fadeOutLeft",
+  "fadeOutLeftBig",
+  "fadeOutRight",
+  "fadeOutRightBig",
+  "fadeOutUp",
+  "fadeOutUpBig",
+  "fadeOutTopLeft",
+  "fadeOutTopRight",
+  "fadeOutBottomRight",
+  "fadeOutBottomLeft",
+  "flip",
+  "flipInX",
+  "flipInY",
+  "flipOutX",
+  "flipOutY",
+  "lightSpeedInRight",
+  "lightSpeedInLeft",
+  "lightSpeedOutRight",
+  "lightSpeedOutLeft",
+  "rotateIn",
+  "rotateInDownLeft",
+  "rotateInDownRight",
+  "rotateInUpLeft",
+  "rotateInUpRight",
+  "rotateOut",
+  "rotateOutDownLeft",
+  "rotateOutDownRight",
+  "rotateOutUpLeft",
+  "rotateOutUpRight",
+  "hinge",
+  "jackInTheBox",
+  "rollIn",
+  "rollOut",
+  "zoomIn",
+  "zoomInDown",
+  "zoomInLeft",
+  "zoomInRight",
+  "zoomInUp",
+  "zoomOut",
+  "zoomOutDown",
+  "zoomOutLeft",
+  "zoomOutRight",
+  "zoomOutUp",
+  "slideInDown",
+  "slideInLeft",
+  "slideInRight",
+  "slideInUp",
+  "slideOutDown",
+  "slideOutLeft",
+  "slideOutRight",
+  "slideOutUp"
+];
+var ANIMATION_SET = new Set(ANIMATIONS);
+function findAnimation(el) {
+  return Array.from(el.classList).map((c) => c.replace(/^animate__/, "")).find((c) => ANIMATION_SET.has(c)) || "";
+}
+function useWOW({
+  boxClass = "wow",
+  animateClass = "animate__animated",
+  offset = 0,
+  mobile = true,
+  live = true,
+  callback = null,
+  scrollContainer = null,
+  once = true,
+  refreshTrigger = null
+} = {}) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    if (!mobile && /Mobi/.test(navigator.userAgent)) return;
+    const root = scrollContainer || null;
+    const getElements = () => Array.from(
+      (root || document).getElementsByClassName(boxClass)
+    );
+    const observed = /* @__PURE__ */ new WeakSet();
+    const inView = /* @__PURE__ */ new WeakSet();
+    const animating = /* @__PURE__ */ new WeakSet();
+    const cooldownTimers = /* @__PURE__ */ new Map();
+    const PLAY_RATIO = 0.1;
+    const parseMs = (v) => {
+      if (!v) return 0;
+      const n = parseFloat(v);
+      if (Number.isNaN(n)) return 0;
+      return v.trim().endsWith("ms") ? n : n * 1e3;
+    };
+    const animateIn = (el) => {
+      const animName = findAnimation(el);
+      const normalized = animName ? `animate__${animName}` : "";
+      if (normalized) el.classList.remove(normalized);
+      void el.offsetWidth;
+      el.classList.add(animateClass);
+      if (normalized) {
+        el.classList.add(normalized);
+        el.dataset._wowAnim = normalized;
+      }
+      const delay = el.dataset.wowDelay;
+      const duration = el.dataset.wowDuration;
+      if (delay) el.style.animationDelay = delay;
+      if (duration) el.style.animationDuration = duration;
+      const cooldown = (parseMs(duration) || 1e3) + parseMs(delay) + 150;
+      animating.add(el);
+      const existing = cooldownTimers.get(el);
+      if (existing) clearTimeout(existing);
+      cooldownTimers.set(
+        el,
+        setTimeout(() => animating.delete(el), cooldown)
+      );
+      if (callbackRef.current) {
+        requestAnimationFrame(() => callbackRef.current?.(el));
+      }
+    };
+    const animateReset = (el) => {
+      const prev = el.dataset._wowAnim;
+      el.classList.remove(animateClass);
+      if (prev) el.classList.remove(prev);
+      el.style.animationDelay = "";
+      el.style.animationDuration = "";
+    };
+    const observer = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach((entry) => {
+          const el = entry.target;
+          if (entry.intersectionRatio >= PLAY_RATIO) {
+            if (inView.has(el)) return;
+            inView.add(el);
+            animateIn(el);
+            if (once) obs.unobserve(el);
+          } else if (entry.intersectionRatio === 0) {
+            if (!once && inView.has(el) && !animating.has(el)) {
+              inView.delete(el);
+              animateReset(el);
+            }
+          }
+        });
+      },
+      {
+        root,
+        threshold: [0, PLAY_RATIO],
+        rootMargin: `${offset}px 0px`
+      }
+    );
+    const observeEl = (el) => {
+      if (observed.has(el)) return;
+      observed.add(el);
+      observer.observe(el);
+    };
+    getElements().forEach(observeEl);
+    let mutationObs = null;
+    if (live) {
+      mutationObs = new MutationObserver((mutations) => {
+        const hasAddedNodes = mutations.some((m) => m.addedNodes.length > 0);
+        if (!hasAddedNodes) return;
+        getElements().forEach(observeEl);
+      });
+      mutationObs.observe(root || document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      observer.disconnect();
+      mutationObs?.disconnect();
+      for (const timer of cooldownTimers.values()) {
+        clearTimeout(timer);
+      }
+    };
+  }, [
+    refreshTrigger,
+    boxClass,
+    animateClass,
+    offset,
+    mobile,
+    live,
+    scrollContainer,
+    once
+  ]);
+}
+
+export { ANIMATIONS, useWOW };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWOW.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/** Animate.css v4 animation names (from @keyframes in animate.css) */\nexport const ANIMATIONS = [\n  \"bounce\",\n  \"flash\",\n  \"pulse\",\n  \"rubberBand\",\n  \"shakeX\",\n  \"shakeY\",\n  \"headShake\",\n  \"swing\",\n  \"tada\",\n  \"wobble\",\n  \"jello\",\n  \"heartBeat\",\n  \"backInDown\",\n  \"backInLeft\",\n  \"backInRight\",\n  \"backInUp\",\n  \"backOutDown\",\n  \"backOutLeft\",\n  \"backOutRight\",\n  \"backOutUp\",\n  \"bounceIn\",\n  \"bounceInDown\",\n  \"bounceInLeft\",\n  \"bounceInRight\",\n  \"bounceInUp\",\n  \"bounceOut\",\n  \"bounceOutDown\",\n  \"bounceOutLeft\",\n  \"bounceOutRight\",\n  \"bounceOutUp\",\n  \"fadeIn\",\n  \"fadeInDown\",\n  \"fadeInDownBig\",\n  \"fadeInLeft\",\n  \"fadeInLeftBig\",\n  \"fadeInRight\",\n  \"fadeInRightBig\",\n  \"fadeInUp\",\n  \"fadeInUpBig\",\n  \"fadeInTopLeft\",\n  \"fadeInTopRight\",\n  \"fadeInBottomLeft\",\n  \"fadeInBottomRight\",\n  \"fadeOut\",\n  \"fadeOutDown\",\n  \"fadeOutDownBig\",\n  \"fadeOutLeft\",\n  \"fadeOutLeftBig\",\n  \"fadeOutRight\",\n  \"fadeOutRightBig\",\n  \"fadeOutUp\",\n  \"fadeOutUpBig\",\n  \"fadeOutTopLeft\",\n  \"fadeOutTopRight\",\n  \"fadeOutBottomRight\",\n  \"fadeOutBottomLeft\",\n  \"flip\",\n  \"flipInX\",\n  \"flipInY\",\n  \"flipOutX\",\n  \"flipOutY\",\n  \"lightSpeedInRight\",\n  \"lightSpeedInLeft\",\n  \"lightSpeedOutRight\",\n  \"lightSpeedOutLeft\",\n  \"rotateIn\",\n  \"rotateInDownLeft\",\n  \"rotateInDownRight\",\n  \"rotateInUpLeft\",\n  \"rotateInUpRight\",\n  \"rotateOut\",\n  \"rotateOutDownLeft\",\n  \"rotateOutDownRight\",\n  \"rotateOutUpLeft\",\n  \"rotateOutUpRight\",\n  \"hinge\",\n  \"jackInTheBox\",\n  \"rollIn\",\n  \"rollOut\",\n  \"zoomIn\",\n  \"zoomInDown\",\n  \"zoomInLeft\",\n  \"zoomInRight\",\n  \"zoomInUp\",\n  \"zoomOut\",\n  \"zoomOutDown\",\n  \"zoomOutLeft\",\n  \"zoomOutRight\",\n  \"zoomOutUp\",\n  \"slideInDown\",\n  \"slideInLeft\",\n  \"slideInRight\",\n  \"slideInUp\",\n  \"slideOutDown\",\n  \"slideOutLeft\",\n  \"slideOutRight\",\n  \"slideOutUp\",\n] as const;\n\nexport type AnimationName = (typeof ANIMATIONS)[number];\n\nconst ANIMATION_SET = new Set<string>(ANIMATIONS);\n\nfunction findAnimation(el: HTMLElement): string {\n  return (\n    Array.from(el.classList)\n      .map((c) => c.replace(/^animate__/, \"\"))\n      .find((c) => ANIMATION_SET.has(c)) || \"\"\n  );\n}\n\nexport interface WowOptions {\n  boxClass?: string;\n  animateClass?: string;\n  offset?: number;\n  mobile?: boolean;\n  live?: boolean;\n  callback?: ((el: HTMLElement) => void) | null;\n  scrollContainer?: HTMLElement | null;\n  once?: boolean;\n  refreshTrigger?: string | number | null;\n}\n\nexport function useWOW({\n  boxClass = \"wow\",\n  animateClass = \"animate__animated\",\n  offset = 0,\n  mobile = true,\n  live = true,\n  callback = null,\n  scrollContainer = null,\n  once = true,\n  refreshTrigger = null,\n}: WowOptions = {}) {\n  const callbackRef = useRef(callback);\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    if (!mobile && /Mobi/.test(navigator.userAgent)) return;\n\n    const root = scrollContainer || null;\n\n    const getElements = () =>\n      Array.from(\n        (root || document).getElementsByClassName(boxClass)\n      ) as HTMLElement[];\n\n    // Dedup state is kept local to this effect run (NOT on the element's\n    // dataset). Dataset flags would leak across effect re-runs (React\n    // StrictMode double-mount, HMR, refreshTrigger/pathname changes), which\n    // left elements unobserved by the surviving observer and stuck hidden.\n    const observed = new WeakSet<HTMLElement>();\n    const inView = new WeakSet<HTMLElement>();\n    // Elements currently mid entrance-animation. Entrance animations translate\n    // the element from far off-screen (e.g. fadeInRightBig starts at\n    // translate3d(2000px,0,0)), which drives intersectionRatio to 0 while the\n    // animation plays. Without this guard, the ratio===0 reset branch fires\n    // during the animation and cancels it, creating an infinite thrash loop\n    // that leaves the element hidden.\n    const animating = new WeakSet<HTMLElement>();\n    const cooldownTimers = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n    // Ratio at which an element is considered \"in view\" and plays.\n    const PLAY_RATIO = 0.1;\n\n    const parseMs = (v?: string) => {\n      if (!v) return 0;\n      const n = parseFloat(v);\n      if (Number.isNaN(n)) return 0;\n      return v.trim().endsWith(\"ms\") ? n : n * 1000;\n    };\n\n    const animateIn = (el: HTMLElement) => {\n      const animName = findAnimation(el);\n      const normalized = animName ? `animate__${animName}` : \"\";\n\n      // Restart the keyframes if replaying (once === false).\n      if (normalized) el.classList.remove(normalized);\n      void el.offsetWidth; // reflow\n\n      el.classList.add(animateClass);\n      if (normalized) {\n        el.classList.add(normalized);\n        el.dataset._wowAnim = normalized;\n      }\n\n      const delay = el.dataset.wowDelay;\n      const duration = el.dataset.wowDuration;\n      if (delay) el.style.animationDelay = delay;\n      if (duration) el.style.animationDuration = duration;\n\n      // Guard against transform-driven intersection changes until the entrance\n      // animation has finished. Default animate.css duration is 1s.\n      const cooldown = (parseMs(duration) || 1000) + parseMs(delay) + 150;\n      animating.add(el);\n      const existing = cooldownTimers.get(el);\n      if (existing) clearTimeout(existing);\n      cooldownTimers.set(\n        el,\n        setTimeout(() => animating.delete(el), cooldown)\n      );\n\n      if (callbackRef.current) {\n        requestAnimationFrame(() => callbackRef.current?.(el));\n      }\n    };\n\n    const animateReset = (el: HTMLElement) => {\n      const prev = el.dataset._wowAnim;\n      el.classList.remove(animateClass);\n      if (prev) el.classList.remove(prev);\n      el.style.animationDelay = \"\";\n      el.style.animationDuration = \"\";\n    };\n\n    const observer = new IntersectionObserver(\n      (entries, obs) => {\n        entries.forEach((entry) => {\n          const el = entry.target as HTMLElement;\n\n          if (entry.intersectionRatio >= PLAY_RATIO) {\n            // Enter: play once per entry (avoid re-triggering on each crossing).\n            if (inView.has(el)) return;\n            inView.add(el);\n            animateIn(el);\n            if (once) obs.unobserve(el);\n          } else if (entry.intersectionRatio === 0) {\n            // Only reset when the element is fully out of view (genuine\n            // scroll-away), never while it is still animating in — its own\n            // transform can push it off-screen and would otherwise cancel the\n            // animation in a loop.\n            if (!once && inView.has(el) && !animating.has(el)) {\n              inView.delete(el);\n              animateReset(el);\n            }\n          }\n          // 0 < ratio < PLAY_RATIO: keep current state (do nothing).\n        });\n      },\n      {\n        root,\n        threshold: [0, PLAY_RATIO],\n        rootMargin: `${offset}px 0px`,\n      }\n    );\n\n    const observeEl = (el: HTMLElement) => {\n      if (observed.has(el)) return;\n      observed.add(el);\n      observer.observe(el);\n    };\n\n    getElements().forEach(observeEl);\n\n    let mutationObs: MutationObserver | null = null;\n    if (live) {\n      mutationObs = new MutationObserver((mutations) => {\n        const hasAddedNodes = mutations.some((m) => m.addedNodes.length > 0);\n        if (!hasAddedNodes) return;\n\n        getElements().forEach(observeEl);\n      });\n\n      mutationObs.observe(root || document.body, {\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      mutationObs?.disconnect();\n      for (const timer of cooldownTimers.values()) {\n        clearTimeout(timer);\n      }\n    };\n  }, [\n    refreshTrigger,\n    boxClass,\n    animateClass,\n    offset,\n    mobile,\n    live,\n    scrollContainer,\n    once,\n  ]);\n}\n"]}

package/dist/styles/next-wow.css

@@ -0,0 +1,21 @@
+@import "animate.css";
+
+/* Hide elements by default — no JS needed */
+.wow {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* When animated, make visible */
+.wow.animate__animated {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wow {
+    opacity: 1 !important;
+    visibility: visible !important;
+    animation: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "next-wow",
+  "version": "0.2.0",
+  "description": "Scroll-triggered Animate.css animations for React and Next.js (WOW.js reborn)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles/next-wow.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "animate.css": "^4.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.0"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "animation",
+    "scroll",
+    "wow.js",
+    "animate.css",
+    "intersection-observer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/theodor961/next-wow.git",
+    "directory": "packages/next-wow"
+  },
+  "homepage": "https://theodor961.github.io/next-wow/",
+  "bugs": {
+    "url": "https://github.com/theodor961/next-wow/issues"
+  },
+  "scripts": {
+    "build": "tsup && node ./scripts/copy-styles.mjs",
+    "dev": "tsup --watch"
+  }
+}