fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/image-trail-cursor/trail-variants.js

@@ -37,12 +37,12 @@ class ImageItem {
     el: null,
     inner: null
   };
-  // Port divergence: `private` where the Svelte source says `public`. gsap declares
-  // `TweenVars` inside a GLOBAL `namespace gsap` with no module-level export, so a
-  // public `gsap.TweenVars` member emits a bare `gsap.` reference into the shipped
-  // .d.ts while tsc drops the value-only `import { gsap }` — consumers then hit
-  // TS2503 "Cannot find namespace 'gsap'". A private member emits no type at all.
-  // Read only by initEvents() below, so nothing outside this class loses access.
+  // `private`, not `public`: the animation library declares `TweenVars` inside a
+  // GLOBAL namespace with no module-level export, so a public `gsap.TweenVars`
+  // member emits a bare `gsap.` reference into the shipped .d.ts while tsc drops
+  // the value-only `import { gsap }` — deep-importing consumers then hit TS2503
+  // "Cannot find namespace 'gsap'". A private member emits no type at all, and it
+  // is read only by initEvents() below, so nothing outside this class loses access.
   defaultStyle = { scale: 1, x: 0, y: 0, opacity: 0 };
   rect = null;
   resizeHandler = null;
@@ -164,7 +164,8 @@ class BaseVariant {
     const now = performance.now();
     this.positionHistory.push({ x, y, t: now });
     const cutoff = now - BaseVariant.HISTORY_MAX_AGE;
-    while (this.positionHistory.length > BaseVariant.HISTORY_MAX_LEN || this.positionHistory.length > 1 && this.positionHistory[0].t < cutoff) {
+    while (this.positionHistory.length > BaseVariant.HISTORY_MAX_LEN || // Non-null: `length > 1` on this same clause proves index 0 exists.
+    this.positionHistory.length > 1 && this.positionHistory[0].t < cutoff) {
       this.positionHistory.shift();
     }
   }
@@ -203,6 +204,11 @@ class BaseVariant {
     this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
     this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
   }
+  /** Advance to the next image in the ring. */
+  nextImage() {
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    return this.images[this.imgPosition];
+  }
   onImageActivated() {
     this.activeImagesCount++;
     this.isIdle = false;
@@ -761,6 +767,308 @@ class ImageTrailVariantPixelated extends BaseVariant {
     ).set(img.DOM.el, { opacity: 0, scale: 0.2 }, ImageTrailVariantPixelated.HOLD);
   }
 }
+function randomBetween(min, max) {
+  return min + Math.random() * (max - min);
+}
+class ImageTrailVariantScale extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation: randomBetween(-20, 20),
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.6, ease: "back.out(2)" }, 0).to(img.DOM.el, { scale: 0, duration: 0.6, ease: "power2.in" }, 0.75).set(img.DOM.el, { opacity: 0 });
+  }
+}
+class ImageTrailVariantFall extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const floor = this.container.getBoundingClientRect().height;
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation: 0,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.8, ease: "elastic.out(1, 0.3)" }, 0).to(img.DOM.el, { rotation: randomBetween(-360, 360), duration: 1.1, ease: "power1.out" }, 0).to(img.DOM.el, { y: floor * 1.2 + h, duration: 1, ease: "back.in(0.4)" }, 0).set(img.DOM.el, { opacity: 0 });
+  }
+}
+class ImageTrailVariantGravity extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const height = this.container.getBoundingClientRect().height;
+    const startY = this.mousePos.y - h / 2;
+    const floorY = Math.max(startY, height - h);
+    const drop = floorY - startY;
+    const push = Math.max(-140, Math.min(140, (this.mousePos.x - this.lastMousePos.x) * 1.4));
+    const fall = 0.3 + 0.35 * Math.sqrt(drop / Math.max(1, height));
+    const bounce = drop * 0.32;
+    gsap.killTweensOf(img.DOM.el);
+    const el = img.DOM.el;
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(el, {
+      opacity: 1,
+      scale: 0,
+      rotation: randomBetween(-10, 10),
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: startY
+    }).to(el, { scale: 1, duration: 0.4, ease: "elastic.out(2, 0.6)" }, 0).to(
+      el,
+      {
+        x: `+=${push}`,
+        rotation: randomBetween(-30, 30),
+        duration: fall + 0.9,
+        ease: "power1.out"
+      },
+      0.1
+    ).to(el, { y: floorY, duration: fall, ease: "power2.in" }, 0.15).to(el, { y: floorY - bounce, duration: 0.28, ease: "power2.out" }).to(el, { y: floorY, duration: 0.28, ease: "power2.in" }).to(el, { y: floorY - bounce * 0.3, duration: 0.16, ease: "power2.out" }).to(el, { y: floorY, duration: 0.16, ease: "power2.in" }).to(el, { opacity: 0, scale: 0.7, duration: 0.3, ease: "power2.in" }, "+=0.15");
+  }
+}
+class ImageTrailVariantFlame extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const { dx, dy } = this.getTouchVelocity();
+    const speed = Math.min(1, Math.hypot(dx, dy) / 160);
+    const rotation = (Math.random() - 0.5) * 30 * (1 + speed * 2);
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.35, ease: "back.out(1.6)" }, 0).to(
+      img.DOM.el,
+      {
+        y: `-=${40 + speed * 40}`,
+        scale: 0,
+        opacity: 0,
+        rotation: rotation * 1.6,
+        duration: 0.55,
+        ease: "power2.in"
+      },
+      0.55
+    );
+  }
+}
+const SEAM = 0.6;
+const lo = (n) => Math.max(0, n - SEAM);
+const hi = (n) => Math.min(100, n + SEAM);
+const pc = (n) => `${Math.round(n * 100) / 100}%`;
+const poly = (pts) => `polygon(${pts.map(([x, y]) => `${pc(x)} ${pc(y)}`).join(", ")})`;
+function revealFragments(pattern) {
+  switch (pattern) {
+    case "venetian": {
+      const n = 6;
+      return Array.from({ length: n }, (_, i) => {
+        const y0 = lo(i * 100 / n);
+        const y1 = hi((i + 1) * 100 / n);
+        return {
+          closed: poly([
+            [0, y0],
+            [100, y0],
+            [100, y0],
+            [0, y0]
+          ]),
+          open: poly([
+            [0, y0],
+            [100, y0],
+            [100, y1],
+            [0, y1]
+          ]),
+          order: i / (n - 1)
+        };
+      });
+    }
+    case "curtain": {
+      const n = 6;
+      const mid = (n - 1) / 2;
+      return Array.from({ length: n }, (_, i) => {
+        const x0 = lo(i * 100 / n);
+        const x1 = hi((i + 1) * 100 / n);
+        const cx = (x0 + x1) / 2;
+        return {
+          closed: poly([
+            [cx, 0],
+            [cx, 0],
+            [cx, 100],
+            [cx, 100]
+          ]),
+          open: poly([
+            [x0, 0],
+            [x1, 0],
+            [x1, 100],
+            [x0, 100]
+          ]),
+          order: Math.abs(i - mid) / mid
+        };
+      });
+    }
+    case "hexagon": {
+      const centres = [16.67, 50, 83.33];
+      const r = 31;
+      const cells = [];
+      for (const cy of centres) {
+        for (const cx of centres) {
+          const hex = Array.from({ length: 6 }, (_, k) => {
+            const a = Math.PI / 3 * k + Math.PI / 6;
+            return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+          });
+          cells.push({
+            closed: poly(hex.map(() => [cx, cy])),
+            open: poly(hex),
+            order: Math.hypot(cx - 50, cy - 50) / Math.hypot(33.33, 33.33)
+          });
+        }
+      }
+      return cells;
+    }
+    case "liquid": {
+      const blobs = [
+        [50, 50, 48],
+        [22, 26, 36],
+        [80, 24, 36],
+        [26, 80, 36],
+        [78, 78, 38]
+      ];
+      return blobs.map(([x, y, r], i) => ({
+        closed: `circle(0% at ${pc(x)} ${pc(y)})`,
+        open: `circle(${pc(r)} at ${pc(x)} ${pc(y)})`,
+        order: i / (blobs.length - 1)
+      }));
+    }
+    case "zoom-split": {
+      const quads = [
+        [0, 0],
+        [50, 0],
+        [0, 50],
+        [50, 50]
+      ];
+      return quads.map(([x, y], i) => ({
+        closed: poly([
+          [50, 50],
+          [50, 50],
+          [50, 50],
+          [50, 50]
+        ]),
+        open: poly([
+          [lo(x), lo(y)],
+          [hi(x + 50), lo(y)],
+          [hi(x + 50), hi(y + 50)],
+          [lo(x), hi(y + 50)]
+        ]),
+        order: i / 3
+      }));
+    }
+  }
+}
+const FRAG_CLASS = "content__img-frag";
+class ImageTrailVariantReveal extends BaseVariant {
+  static STAGGER = 0.22;
+  // seconds from first to last fragment
+  fragments;
+  constructor(container, pattern) {
+    super(container);
+    this.fragments = revealFragments(pattern);
+    for (const img of this.images) {
+      const bg = img.DOM.inner?.style.backgroundImage ?? "";
+      for (const f of this.fragments) {
+        const frag = document.createElement("div");
+        frag.className = FRAG_CLASS;
+        frag.style.cssText = `position:absolute;inset:0;background-image:${bg};background-size:cover;background-position:center;clip-path:${f.closed};`;
+        img.DOM.el.appendChild(frag);
+      }
+      if (img.DOM.inner) img.DOM.inner.style.opacity = "0";
+    }
+  }
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const frags = [...img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`)];
+    const stagger = ImageTrailVariantReveal.STAGGER;
+    gsap.killTweensOf([img.DOM.el, ...frags]);
+    const tl = gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0.85,
+      rotation: 0,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.5, ease: "power3.out" }, 0);
+    frags.forEach((frag, i) => {
+      const f = this.fragments[i];
+      tl.fromTo(
+        frag,
+        { clipPath: f.closed },
+        { clipPath: f.open, duration: 0.45, ease: "power3.out" },
+        f.order * stagger
+      );
+      tl.to(
+        frag,
+        { clipPath: f.closed, duration: 0.35, ease: "power3.in" },
+        0.95 + (1 - f.order) * stagger
+      );
+    });
+    tl.set(img.DOM.el, { opacity: 0 });
+  }
+  destroy() {
+    for (const img of this.images) {
+      const frags = img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`);
+      gsap.killTweensOf([...frags]);
+      frags.forEach((f) => f.remove());
+      if (img.DOM.inner) img.DOM.inner.style.opacity = "";
+    }
+    super.destroy();
+  }
+}
+function revealVariant(pattern) {
+  return class extends ImageTrailVariantReveal {
+    constructor(container) {
+      super(container, pattern);
+    }
+  };
+}
 const variantMap = {
   type1: ImageTrailVariant1,
   type2: ImageTrailVariant2,
@@ -770,7 +1078,16 @@ const variantMap = {
   type6: ImageTrailVariant6,
   type7: ImageTrailVariant7,
   type8: ImageTrailVariant8,
-  pixelated: ImageTrailVariantPixelated
+  pixelated: ImageTrailVariantPixelated,
+  scale: ImageTrailVariantScale,
+  fall: ImageTrailVariantFall,
+  gravity: ImageTrailVariantGravity,
+  flame: ImageTrailVariantFlame,
+  venetian: revealVariant("venetian"),
+  curtain: revealVariant("curtain"),
+  hexagon: revealVariant("hexagon"),
+  liquid: revealVariant("liquid"),
+  "zoom-split": revealVariant("zoom-split")
 };
 export {
   ImageItem,
@@ -782,6 +1099,12 @@ export {
   ImageTrailVariant6,
   ImageTrailVariant7,
   ImageTrailVariant8,
+  ImageTrailVariantFall,
+  ImageTrailVariantFlame,
+  ImageTrailVariantGravity,
   ImageTrailVariantPixelated,
+  ImageTrailVariantReveal,
+  ImageTrailVariantScale,
+  revealFragments,
   variantMap
 };

package/dist/components/interactive-hover-button/InteractiveHoverButton.js

@@ -3,12 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                             */
 const InteractiveHoverButton = forwardRef(
-  ({ text = "Button", className, children, sound = false, onClick, disabled, ...restProps }, ref) => {
+  ({ text = "Button", className, children, onClick, sound = false, ...restProps }, ref) => {
     const label = children ?? text;
     const playCue = useSoundCue(sound);
     function handleClick(event) {
-      if (sound && !disabled) playCue("press");
+      if (sound && !restProps.disabled) playCue("press");
       onClick?.(event);
     }
     return /* @__PURE__ */ jsxs(
@@ -16,45 +17,39 @@ const InteractiveHoverButton = forwardRef(
       {
         ref,
         className: cn(
-          "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
+          "ihb group bg-background relative isolate w-auto cursor-pointer overflow-hidden rounded-full border px-6 py-2.5 text-center font-semibold",
           className
         ),
         onClick: handleClick,
-        disabled,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "bg-primary size-2 rounded-lg group-hover:scale-[100.8] motion-safe:transition-all motion-safe:duration-300" }),
-            /* @__PURE__ */ jsx("span", { className: "inline-block group-hover:translate-x-12 group-hover:opacity-0 motion-safe:transition-all motion-safe:duration-300", children: label })
+          /* @__PURE__ */ jsx("span", { className: "ihb-fill", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { className: "ihb-rest", children: [
+            /* @__PURE__ */ jsx("span", { className: "ihb-dot-space", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "ihb-label", children: label })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "text-primary-foreground absolute top-0 z-10 flex size-full translate-x-12 items-center justify-center gap-2 opacity-0 group-hover:-translate-x-5 group-hover:opacity-100 motion-safe:transition-all motion-safe:duration-300",
-              children: [
-                /* @__PURE__ */ jsx("span", { children: label }),
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "24",
-                    height: "24",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-                      /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "ihb-hover", children: [
+            /* @__PURE__ */ jsx("span", { className: "ihb-hover-label", children: label }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "ihb-arrow",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "18",
+                height: "18",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+                  /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+                ]
+              }
+            )
+          ] })
         ]
       }
     );

package/dist/components/marquee/Marquee.d.ts

@@ -4,13 +4,17 @@ export interface MarqueeProps {
     className?: string;
     /** Reverse the scroll direction */
     reverse?: boolean;
-    /** Pause the animation on hover */
+    /** Ease the conveyor to a stop while the pointer (or focus) is inside */
     pauseOnHover?: boolean;
     /** Scroll vertically instead of horizontally */
     vertical?: boolean;
-    /** Number of times to repeat the children track */
+    /** Number of copies of the children rendered on the track */
     repeat?: number;
+    /** Dissolve items at both edges with a gradient mask */
+    fade?: boolean;
+    /** Speed multiplier applied on top of `--duration` (2 = twice as fast) */
+    speed?: number;
     /** Content to repeat and scroll */
     children?: ReactNode;
 }
-export declare function Marquee({ className, reverse, pauseOnHover, vertical, repeat, children, }: MarqueeProps): import("react").JSX.Element;
+export declare function Marquee({ className, reverse, pauseOnHover, vertical, repeat, fade, speed, children, }: MarqueeProps): import("react").JSX.Element;

package/dist/components/marquee/Marquee.js

@@ -1,26 +1,158 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
 import { cn } from "../../utils.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 /* empty css            */
+const EASE_TAU = 140;
+const SETTLE_EPSILON = 2e-3;
+const DEFAULT_DURATION_MS = 4e4;
+function parseDuration(raw) {
+  const match = /^\s*([\d.]+)\s*(ms|s)\s*$/i.exec(raw);
+  if (!match) return DEFAULT_DURATION_MS;
+  const value = Number.parseFloat(match[1] ?? "");
+  if (!Number.isFinite(value) || value <= 0) return DEFAULT_DURATION_MS;
+  return (match[2] ?? "s").toLowerCase() === "ms" ? value : value * 1e3;
+}
+function createConveyor() {
+  const c = {
+    speed: 1,
+    pauseOnHover: false,
+    engaged: false,
+    factor: 1,
+    animations: [],
+    rafId: 0,
+    lastTs: 0,
+    resumeAt: null,
+    applyRate() {
+      const rate = c.speed * c.factor;
+      for (const animation of c.animations) animation.playbackRate = rate;
+    },
+    wake() {
+      if (!c.animations.length || c.rafId) return;
+      c.lastTs = 0;
+      c.rafId = requestAnimationFrame(tick);
+    },
+    setEngaged(next) {
+      c.engaged = next && c.pauseOnHover;
+      c.wake();
+    }
+  };
+  function tick(ts) {
+    const dt = c.lastTs ? Math.min(ts - c.lastTs, 64) : 16;
+    c.lastTs = ts;
+    const target = c.engaged ? 0 : 1;
+    c.factor += (target - c.factor) * (1 - Math.exp(-dt / EASE_TAU));
+    if (Math.abs(target - c.factor) < SETTLE_EPSILON) c.factor = target;
+    c.applyRate();
+    if (c.factor === target) {
+      c.rafId = 0;
+      c.lastTs = 0;
+      return;
+    }
+    c.rafId = requestAnimationFrame(tick);
+  }
+  return c;
+}
 function Marquee({
   className,
   reverse = false,
   pauseOnHover = false,
   vertical = false,
   repeat = 4,
+  fade = true,
+  speed = 1,
   children
 }) {
+  const reduced = useReducedMotion();
+  const rootRef = useRef(null);
+  const [upgraded, setUpgraded] = useState(false);
+  const safeSpeed = Number.isFinite(speed) && speed > 0 ? speed : 1;
+  const conveyorRef = useRef(null);
+  if (!conveyorRef.current) conveyorRef.current = createConveyor();
+  const conveyor = conveyorRef.current;
+  useEffect(() => {
+    conveyor.speed = safeSpeed;
+    conveyor.applyRate();
+  }, [conveyor, safeSpeed]);
+  useEffect(() => {
+    conveyor.pauseOnHover = pauseOnHover;
+    if (!pauseOnHover && conveyor.engaged) conveyor.setEngaged(false);
+  }, [conveyor, pauseOnHover]);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el || reduced) return;
+    if (typeof Element === "undefined" || typeof Element.prototype.animate !== "function") return;
+    const styles = getComputedStyle(el);
+    const duration = parseDuration(styles.getPropertyValue("--duration"));
+    const gapPx = Number.parseFloat(vertical ? styles.rowGap : styles.columnGap) || 0;
+    const axis = vertical ? "translateY" : "translateX";
+    const keyframes = [
+      { transform: `${axis}(0)` },
+      { transform: `${axis}(calc(-100% - ${gapPx}px))` }
+    ];
+    const tracks = Array.from(el.querySelectorAll(":scope > [data-marquee-track]"));
+    let startTime = 0;
+    if (conveyor.resumeAt !== null) {
+      startTime = (reverse ? 1 - conveyor.resumeAt : conveyor.resumeAt) * duration;
+    } else {
+      const running = tracks[0]?.getAnimations?.()[0];
+      if (running && typeof running.currentTime === "number") {
+        startTime = running.currentTime * conveyor.speed;
+      }
+    }
+    conveyor.animations = tracks.map(
+      (track) => track.animate(keyframes, {
+        duration,
+        iterations: Infinity,
+        easing: "linear",
+        direction: reverse ? "reverse" : "normal"
+      })
+    ).filter(Boolean);
+    for (const animation of conveyor.animations) animation.currentTime = startTime % duration;
+    conveyor.applyRate();
+    setUpgraded(true);
+    if (conveyor.factor !== (conveyor.engaged ? 0 : 1)) conveyor.wake();
+    return () => {
+      if (conveyor.rafId) cancelAnimationFrame(conveyor.rafId);
+      conveyor.rafId = 0;
+      const t = conveyor.animations[0]?.currentTime;
+      if (typeof t === "number") {
+        const progress = t % duration / duration;
+        conveyor.resumeAt = reverse ? 1 - progress : progress;
+      } else {
+        conveyor.resumeAt = null;
+      }
+      for (const animation of conveyor.animations) animation.cancel?.();
+      conveyor.animations = [];
+      setUpgraded(false);
+    };
+  }, [conveyor, vertical, reverse, repeat, className, reduced]);
+  function onFocusOut(event) {
+    if (!rootRef.current?.contains(event.relatedTarget)) conveyor.setEngaged(false);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: rootRef,
       className: cn(
-        "fancy-marquee group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
-        vertical ? "flex-col" : "flex-row",
+        "marquee group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        vertical ? "marquee-vertical flex-col" : "flex-row",
+        fade && "marquee-fade",
+        upgraded && "marquee-upgraded",
         className
       ),
+      style: { "--marquee-speed": safeSpeed },
+      "data-paused-on-hover": pauseOnHover ? "" : void 0,
+      onPointerEnter: () => conveyor.setEngaged(true),
+      onPointerLeave: () => conveyor.setEngaged(false),
+      onFocus: () => conveyor.setEngaged(true),
+      onBlur: onFocusOut,
       children: Array.from({ length: repeat }, (_, index) => /* @__PURE__ */ jsx(
         "div",
         {
+          "data-marquee-track": "",
+          "aria-hidden": index > 0 ? "true" : void 0,
           className: cn(
             "flex shrink-0 justify-around [gap:var(--gap)]",
             vertical ? "animate-marquee-vertical flex-col" : "animate-marquee flex-row",

package/dist/components/marquee/ReviewCard.d.ts

@@ -4,5 +4,6 @@ export interface ReviewCardProps {
     username: string;
     body: string;
 }
-/** A ready-made card for testimonial-style marquees. */
+/** A ready-made card for testimonial-style marquees: a nested double frame,
+ * a hairline shell holding a hairline inner panel. */
 export declare function ReviewCard({ img, name, username, body }: ReviewCardProps): import("react").JSX.Element;