react-scroll-media 1.0.0

package/dist/index.mjs

@@ -0,0 +1,799 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/react/ScrollSequence.tsx
+import React2, { useRef as useRef3 } from "react";
+
+// src/react/useScrollSequence.ts
+import { useRef, useEffect, useState } from "react";
+
+// src/controllers/imageController.ts
+var ImageController = class {
+  constructor(config) {
+    __publicField(this, "canvas");
+    __publicField(this, "ctx");
+    __publicField(this, "frames");
+    __publicField(this, "imageCache", /* @__PURE__ */ new Map());
+    __publicField(this, "loadingPromises", /* @__PURE__ */ new Map());
+    __publicField(this, "currentFrameIndex", -1);
+    __publicField(this, "strategy");
+    __publicField(this, "bufferSize");
+    /**
+     * Create a new ImageController instance.
+     *
+     * @param config - Configuration object
+     * @throws If canvas doesn't support 2D context
+     */
+    __publicField(this, "isDestroyed", false);
+    this.canvas = config.canvas;
+    this.frames = config.frames;
+    this.strategy = config.strategy || "eager";
+    this.bufferSize = config.bufferSize || 10;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to get 2D context from canvas");
+    }
+    this.ctx = ctx;
+    if (this.strategy === "eager") {
+      this.preloadAll();
+    } else {
+      this.ensureFrameWindow(0);
+    }
+  }
+  // ... preloadAll omitted for brevity if unchanged, but let's include for completeness if needed.
+  // Actually, we need to add guards to preloadFrame, so let's check it.
+  preloadAll() {
+    this.frames.forEach((_, index) => this.preloadFrame(index));
+  }
+  ensureFrameWindow(currentIndex) {
+    if (this.isDestroyed) return;
+    const radius = this.bufferSize;
+    const start = Math.max(0, currentIndex - radius);
+    const end = Math.min(this.frames.length - 1, currentIndex + radius);
+    const needed = /* @__PURE__ */ new Set();
+    for (let i = start; i <= end; i++) {
+      needed.add(this.frames[i]);
+    }
+    for (const [src] of this.imageCache) {
+      if (!needed.has(src)) {
+        this.imageCache.delete(src);
+        this.loadingPromises.delete(src);
+      }
+    }
+    for (let i = start; i <= end; i++) {
+      void this.preloadFrame(i);
+    }
+  }
+  async preloadFrame(index) {
+    if (this.isDestroyed || index < 0 || index >= this.frames.length) return;
+    const src = this.frames[index];
+    if (this.imageCache.has(src)) return;
+    if (!this.loadingPromises.has(src)) {
+      this.loadingPromises.set(src, this.loadImage(src));
+    }
+    try {
+      await this.loadingPromises.get(src);
+    } catch {
+      if (!this.isDestroyed) {
+      }
+    }
+  }
+  loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        if (this.isDestroyed) return;
+        img.decode().then(() => {
+          if (this.isDestroyed) return;
+          this.imageCache.set(src, img);
+          resolve(img);
+        }).catch(() => {
+          if (this.isDestroyed) return;
+          this.imageCache.set(src, img);
+          resolve(img);
+        });
+      };
+      img.onerror = () => {
+        if (this.isDestroyed) return;
+        reject(new Error(`Failed to load image: ${src}`));
+      };
+      img.src = src;
+    });
+  }
+  update(progress) {
+    if (this.isDestroyed || this.frames.length === 0) return;
+    const frameIndex = Math.floor(progress * (this.frames.length - 1));
+    if (this.strategy === "lazy") {
+      this.ensureFrameWindow(frameIndex);
+    }
+    if (frameIndex === this.currentFrameIndex) return;
+    this.currentFrameIndex = frameIndex;
+    this.drawFrame(frameIndex);
+  }
+  drawFrame(index) {
+    if (this.isDestroyed || index < 0 || index >= this.frames.length) return;
+    const src = this.frames[index];
+    const img = this.imageCache.get(src);
+    if (!img) {
+      const promise = this.loadingPromises.get(src);
+      if (promise) {
+        promise.then(() => {
+          if (this.currentFrameIndex === index) {
+            this.drawFrame(index);
+          }
+        }).catch(() => {
+        });
+      }
+      return;
+    }
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    const scale = Math.min(
+      this.canvas.width / img.width,
+      this.canvas.height / img.height
+    );
+    const scaledWidth = img.width * scale;
+    const scaledHeight = img.height * scale;
+    const x = (this.canvas.width - scaledWidth) / 2;
+    const y = (this.canvas.height - scaledHeight) / 2;
+    this.ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+  }
+  setCanvasSize(width, height) {
+    if (this.isDestroyed) return;
+    this.canvas.width = width;
+    this.canvas.height = height;
+    if (this.currentFrameIndex >= 0) {
+      this.drawFrame(this.currentFrameIndex);
+    }
+  }
+  destroy() {
+    this.isDestroyed = true;
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.imageCache.clear();
+    this.loadingPromises.clear();
+  }
+};
+
+// src/sequence/sequenceResolver.ts
+async function resolveSequence(source) {
+  switch (source.type) {
+    case "manual":
+      return processManualFrames(source.frames);
+    case "pattern":
+      return processPatternMode(source.url, source.start ?? 1, source.end, source.pad);
+    case "manifest":
+      return processManifestMode(source.url);
+    default:
+      return { frames: [], frameCount: 0 };
+  }
+}
+function processManualFrames(frames) {
+  const sorted = [...frames].sort((a, b) => {
+    const numA = extractNumber(a);
+    const numB = extractNumber(b);
+    return numA - numB;
+  });
+  return {
+    frames: sorted,
+    frameCount: sorted.length
+  };
+}
+function processPatternMode(pattern, start, end, pad) {
+  const frames = [];
+  for (let i = start; i <= end; i++) {
+    let indexStr = i.toString();
+    if (pad) {
+      indexStr = indexStr.padStart(pad, "0");
+    }
+    frames.push(pattern.replace("{index}", indexStr));
+  }
+  return {
+    frames,
+    frameCount: frames.length
+  };
+}
+var manifestCache = /* @__PURE__ */ new Map();
+async function processManifestMode(url) {
+  if (manifestCache.has(url)) {
+    return manifestCache.get(url);
+  }
+  const promise = (async () => {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(`Failed to fetch manifest: ${res.statusText}`);
+      }
+      const data = await res.json();
+      if (data.frames && Array.isArray(data.frames)) {
+        return processManualFrames(data.frames);
+      }
+      if (data.pattern && typeof data.end === "number") {
+        const start = data.start ?? 1;
+        const pad = data.pad;
+        return processPatternMode(data.pattern, start, data.end, pad);
+      }
+      return { frames: [], frameCount: 0 };
+    } catch (err) {
+      manifestCache.delete(url);
+      throw err;
+    }
+  })();
+  manifestCache.set(url, promise);
+  return promise;
+}
+function extractNumber(filename) {
+  const match = filename.match(/\d+/);
+  return match ? parseInt(match[0], 10) : -1;
+}
+
+// src/core/clamp.ts
+function clamp(value, min = 0, max = 1) {
+  return Math.max(min, Math.min(max, value));
+}
+
+// src/react/scrollTimelineContext.ts
+import { createContext, useContext } from "react";
+var ScrollTimelineContext = createContext({
+  timeline: null
+});
+function useTimelineContext() {
+  return useContext(ScrollTimelineContext);
+}
+
+// src/react/useScrollTimeline.ts
+function useScrollTimeline() {
+  const { timeline } = useTimelineContext();
+  const subscribe = (callback) => {
+    if (!timeline) return () => {
+    };
+    return timeline.subscribe(callback);
+  };
+  return { subscribe, timeline };
+}
+
+// src/react/useScrollSequence.ts
+function useScrollSequence({
+  source,
+  debugRef,
+  memoryStrategy = "eager",
+  lazyBuffer = 10,
+  onError
+}) {
+  const canvasRef = useRef(null);
+  const controllerRef = useRef(null);
+  const { subscribe } = useScrollTimeline();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let active = true;
+    let currentController = null;
+    let unsubscribeTimeline = null;
+    const init = async () => {
+      setIsLoaded(false);
+      setError(null);
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      try {
+        if (typeof window === "undefined") return;
+        const sequence = await resolveSequence(source);
+        if (!active) return;
+        if (sequence.frames.length === 0) {
+          return;
+        }
+        if (typeof window !== "undefined") {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        }
+        currentController = new ImageController({
+          canvas,
+          frames: sequence.frames,
+          strategy: memoryStrategy,
+          bufferSize: lazyBuffer
+        });
+        controllerRef.current = currentController;
+        unsubscribeTimeline = subscribe((progress) => {
+          if (!currentController) return;
+          const clamped = clamp(progress);
+          currentController.update(clamped);
+          if (debugRef?.current) {
+            const frameIndex = Math.floor(clamped * (sequence.frames.length - 1));
+            debugRef.current.innerText = `Progress: ${clamped.toFixed(2)}
+Frame: ${frameIndex + 1} / ${sequence.frames.length}`;
+          }
+        });
+        if (active) setIsLoaded(true);
+      } catch (err) {
+        if (active) {
+          const e = err instanceof Error ? err : new Error("Unknown initialization error");
+          setError(e);
+          if (onError) onError(e);
+        }
+      }
+    };
+    init();
+    return () => {
+      active = false;
+      currentController?.destroy();
+      controllerRef.current = null;
+      if (unsubscribeTimeline) unsubscribeTimeline();
+    };
+  }, [source, memoryStrategy, lazyBuffer, subscribe]);
+  return {
+    canvasRef,
+    isLoaded,
+    error
+  };
+}
+
+// src/react/ScrollTimelineProvider.tsx
+import React, { useRef as useRef2, useState as useState2 } from "react";
+
+// src/core/loopManager.ts
+var _ScrollLoopManager = class _ScrollLoopManager {
+  constructor() {
+    __publicField(this, "callbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "rafId", null);
+    __publicField(this, "isActive", false);
+    __publicField(this, "tick", () => {
+      if (!this.isActive) return;
+      this.callbacks.forEach((cb) => {
+        try {
+          cb();
+        } catch (e) {
+        }
+      });
+      this.rafId = requestAnimationFrame(this.tick);
+    });
+  }
+  static getInstance() {
+    if (!_ScrollLoopManager.instance) {
+      _ScrollLoopManager.instance = new _ScrollLoopManager();
+    }
+    return _ScrollLoopManager.instance;
+  }
+  /**
+   * Register a callback to be called on every animation frame.
+   */
+  register(callback) {
+    if (this.callbacks.has(callback)) return;
+    this.callbacks.add(callback);
+    if (this.callbacks.size === 1) {
+      this.start();
+    }
+  }
+  /**
+   * Unregister a callback.
+   */
+  unregister(callback) {
+    this.callbacks.delete(callback);
+    if (this.callbacks.size === 0) {
+      this.stop();
+    }
+  }
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    if (typeof window !== "undefined") {
+      this.tick();
+    }
+  }
+  stop() {
+    this.isActive = false;
+    if (this.rafId !== null && typeof window !== "undefined") {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+};
+__publicField(_ScrollLoopManager, "instance");
+var ScrollLoopManager = _ScrollLoopManager;
+
+// src/constants.ts
+var SCROLL_THRESHOLD = 1e-4;
+
+// src/core/scrollTimeline.ts
+var ScrollTimeline = class {
+  constructor(container) {
+    __publicField(this, "container");
+    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
+    __publicField(this, "currentProgress", 0);
+    // Caching for performance
+    __publicField(this, "cachedRect", null);
+    __publicField(this, "cachedScrollParent", null);
+    __publicField(this, "cachedScrollParentRect", null);
+    __publicField(this, "cachedViewportHeight", 0);
+    __publicField(this, "cachedOffsetTop", 0);
+    __publicField(this, "isLayoutDirty", true);
+    __publicField(this, "resizeObserver", null);
+    __publicField(this, "id", typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 9));
+    __publicField(this, "onWindowResize", () => {
+      this.isLayoutDirty = true;
+    });
+    __publicField(this, "tick", () => {
+      const progress = this.calculateProgress();
+      if (Math.abs(progress - this.currentProgress) > SCROLL_THRESHOLD) {
+        this.currentProgress = progress;
+        this.notify();
+      }
+    });
+    this.container = container;
+    if (typeof window !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.isLayoutDirty = true;
+      });
+      this.resizeObserver.observe(this.container);
+      if (document.body) {
+        this.resizeObserver.observe(document.body);
+      }
+      window.addEventListener("resize", this.onWindowResize);
+    }
+  }
+  /**
+   * Subscribe to progress updates.
+   * Returns an unsubscribe function.
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    try {
+      callback(this.currentProgress);
+    } catch (e) {
+    }
+    if (this.subscribers.size === 1) {
+      ScrollLoopManager.getInstance().register(this.tick);
+    }
+    return () => {
+      this.subscribers.delete(callback);
+      if (this.subscribers.size === 0) {
+        ScrollLoopManager.getInstance().unregister(this.tick);
+      }
+    };
+  }
+  unsubscribe(callback) {
+    this.subscribers.delete(callback);
+    if (this.subscribers.size === 0) {
+      ScrollLoopManager.getInstance().unregister(this.tick);
+    }
+  }
+  /**
+   * Start is now handled by LoopManager via subscriptions
+   * Deprecated but kept for API stability if needed.
+   */
+  start() {
+  }
+  stop() {
+    ScrollLoopManager.getInstance().unregister(this.tick);
+  }
+  notify() {
+    this.subscribers.forEach((cb) => {
+      try {
+        cb(this.currentProgress);
+      } catch (e) {
+      }
+    });
+  }
+  updateCache() {
+    if (!this.isLayoutDirty && this.cachedRect) return;
+    this.cachedRect = this.container.getBoundingClientRect();
+    if (!this.cachedScrollParent) {
+      this.cachedScrollParent = this.getScrollParent(this.container);
+    }
+    if (this.cachedScrollParent instanceof Element) {
+      this.cachedScrollParentRect = this.cachedScrollParent.getBoundingClientRect();
+      this.cachedViewportHeight = this.cachedScrollParentRect.height;
+      this.cachedOffsetTop = this.cachedScrollParentRect.top;
+    } else if (typeof window !== "undefined") {
+      this.cachedViewportHeight = window.innerHeight;
+      this.cachedOffsetTop = 0;
+    }
+    this.isLayoutDirty = false;
+  }
+  calculateProgress() {
+    if (this.isLayoutDirty || !this.cachedRect) {
+      this.updateCache();
+    }
+    const currentRect = this.container.getBoundingClientRect();
+    const scrollDist = (this.cachedRect?.height || currentRect.height) - this.cachedViewportHeight;
+    if (scrollDist <= 0) return 1;
+    const relativeTop = currentRect.top - this.cachedOffsetTop;
+    const rawProgress = -relativeTop / scrollDist;
+    const clamped = Math.min(Math.max(rawProgress, 0), 1);
+    return Math.round(clamped * 1e6) / 1e6;
+  }
+  getScrollParent(node) {
+    if (typeof window === "undefined") return node;
+    let current = node.parentElement;
+    while (current) {
+      const style = getComputedStyle(current);
+      if (["auto", "scroll"].includes(style.overflowY)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return window;
+  }
+  destroy() {
+    this.subscribers.clear();
+    ScrollLoopManager.getInstance().unregister(this.tick);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (typeof window !== "undefined") {
+      window.removeEventListener("resize", this.onWindowResize);
+    }
+  }
+};
+
+// src/react/ScrollTimelineProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function ScrollTimelineProvider({
+  children,
+  scrollLength = "300vh",
+  className = "",
+  style = {}
+}) {
+  const containerRef = useRef2(null);
+  const [timeline, setTimeline] = useState2(null);
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+  useIsomorphicLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!containerRef.current) return;
+    const instance = new ScrollTimeline(containerRef.current);
+    setTimeline(instance);
+    return () => {
+      instance.destroy();
+      setTimeline(null);
+    };
+  }, []);
+  const containerStyle = {
+    height: scrollLength,
+    position: "relative",
+    width: "100%",
+    ...style
+  };
+  const stickyWrapperStyle = {
+    position: "sticky",
+    top: 0,
+    height: "100vh",
+    width: "100%",
+    overflow: "hidden"
+  };
+  const contextValue = React.useMemo(() => ({ timeline }), [timeline]);
+  return /* @__PURE__ */ jsx(ScrollTimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      children: /* @__PURE__ */ jsx("div", { style: stickyWrapperStyle, children })
+    }
+  ) });
+}
+
+// src/react/ScrollSequence.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var InnerSequence = ({
+  source,
+  debug,
+  memoryStrategy,
+  lazyBuffer,
+  accessibilityLabel = "Scroll sequence",
+  fallback,
+  onError
+}) => {
+  const debugRef = useRef3(null);
+  const { canvasRef, isLoaded } = useScrollSequence({
+    source,
+    debugRef,
+    memoryStrategy,
+    lazyBuffer,
+    onError
+  });
+  const canvasStyle = {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    opacity: isLoaded ? 1 : 0,
+    transition: "opacity 0.2s ease-in"
+  };
+  const debugStyle = {
+    position: "absolute",
+    top: "10px",
+    left: "10px",
+    background: "rgba(0, 0, 0, 0.7)",
+    color: "#00ff00",
+    padding: "8px",
+    borderRadius: "4px",
+    fontFamily: "monospace",
+    fontSize: "12px",
+    pointerEvents: "none",
+    whiteSpace: "pre-wrap",
+    zIndex: 9999
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isLoaded && fallback && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: 0, zIndex: 1 }, children: fallback }),
+    /* @__PURE__ */ jsx2(
+      "canvas",
+      {
+        ref: canvasRef,
+        style: canvasStyle,
+        role: "img",
+        "aria-label": accessibilityLabel
+      }
+    ),
+    debug && /* @__PURE__ */ jsx2("div", { ref: debugRef, style: debugStyle, children: "Waiting for scroll..." })
+  ] });
+};
+var ScrollSequence = React2.forwardRef(
+  (props, ref) => {
+    const {
+      source,
+      scrollLength = "300vh",
+      className = "",
+      debug = false,
+      memoryStrategy = "eager",
+      lazyBuffer = 10,
+      fallback,
+      accessibilityLabel,
+      onError
+    } = props;
+    const prefersReducedMotion = React2.useMemo(() => {
+      if (typeof window !== "undefined") {
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      }
+      return false;
+    }, []);
+    return /* @__PURE__ */ jsx2("div", { ref, className, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(ScrollTimelineProvider, { scrollLength, children: [
+      prefersReducedMotion && fallback ? /* @__PURE__ */ jsx2("div", { style: { position: "sticky", top: 0, height: "100vh", width: "100%" }, children: fallback }) : /* @__PURE__ */ jsx2(
+        InnerSequence,
+        {
+          source,
+          debug,
+          memoryStrategy,
+          lazyBuffer,
+          fallback,
+          accessibilityLabel,
+          onError
+        }
+      ),
+      props.children
+    ] }) });
+  }
+);
+
+// src/react/ScrollText.tsx
+import { useRef as useRef4, useEffect as useEffect2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ScrollText({
+  children,
+  start = 0,
+  end = 0.2,
+  exitStart,
+  exitEnd,
+  initialOpacity = 0,
+  targetOpacity = 1,
+  finalOpacity = 0,
+  translateY = 50,
+  style,
+  className
+}) {
+  const ref = useRef4(null);
+  const { subscribe } = useScrollTimeline();
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const unsubscribe = subscribe((progress) => {
+      if (!ref.current) return;
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const effectiveTranslateY = prefersReducedMotion ? 0 : translateY;
+      let opacity = initialOpacity;
+      let currentY = effectiveTranslateY;
+      if (progress < start) {
+        opacity = initialOpacity;
+        currentY = effectiveTranslateY;
+      } else if (progress >= start && progress <= end) {
+        const local = (progress - start) / (end - start);
+        opacity = initialOpacity + (targetOpacity - initialOpacity) * local;
+        currentY = effectiveTranslateY * (1 - local);
+      } else if (!exitStart || progress < exitStart) {
+        opacity = targetOpacity;
+        currentY = 0;
+      } else if (exitStart && exitEnd && progress >= exitStart && progress <= exitEnd) {
+        const local = (progress - exitStart) / (exitEnd - exitStart);
+        opacity = targetOpacity + (finalOpacity - targetOpacity) * local;
+        currentY = -effectiveTranslateY * local;
+      } else {
+        opacity = finalOpacity;
+        currentY = -effectiveTranslateY;
+      }
+      ref.current.style.opacity = opacity.toFixed(3);
+      ref.current.style.transform = `translateY(${currentY}px)`;
+    });
+    return unsubscribe;
+  }, [subscribe, start, end, exitStart, exitEnd, initialOpacity, targetOpacity, finalOpacity, translateY]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      className,
+      style: {
+        opacity: initialOpacity,
+        transform: `translateY(${translateY}px)`,
+        transition: "none",
+        // Critical: no CSS transition fighting JS
+        willChange: "opacity, transform",
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/react/ScrollWordReveal.tsx
+import { useRef as useRef5, useEffect as useEffect3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ScrollWordReveal({
+  text,
+  start = 0,
+  end = 1,
+  className,
+  style
+}) {
+  const containerRef = useRef5(null);
+  const { subscribe } = useScrollTimeline();
+  const words = text.split(/\s+/);
+  useEffect3(() => {
+    const unsubscribe = subscribe((globalProgress) => {
+      if (!containerRef.current) return;
+      const spans = containerRef.current.children;
+      let localProgress = 0;
+      if (globalProgress <= start) localProgress = 0;
+      else if (globalProgress >= end) localProgress = 1;
+      else localProgress = (globalProgress - start) / (end - start);
+      const totalWords = spans.length;
+      const progressPerWord = 1 / totalWords;
+      for (let i = 0; i < totalWords; i++) {
+        const span = spans[i];
+        const wordStart = i * progressPerWord;
+        const wordEnd = (i + 1) * progressPerWord;
+        let wordOpacity = 0;
+        if (localProgress >= wordEnd) {
+          wordOpacity = 1;
+        } else if (localProgress <= wordStart) {
+          wordOpacity = 0.1;
+        } else {
+          wordOpacity = 0.1 + 0.9 * ((localProgress - wordStart) / (wordEnd - wordStart));
+        }
+        span.style.opacity = wordOpacity.toFixed(2);
+        const translate = (1 - wordOpacity) * 10;
+        span.style.transform = `translateY(${translate}px)`;
+      }
+    });
+    return unsubscribe;
+  }, [subscribe, start, end]);
+  return /* @__PURE__ */ jsx4("div", { ref: containerRef, className, style: { ...style, display: "flex", flexWrap: "wrap", gap: "0.25em" }, children: words.map((word, i) => /* @__PURE__ */ jsx4(
+    "span",
+    {
+      style: {
+        opacity: 0.1,
+        transform: "translateY(10px)",
+        transition: "none",
+        willChange: "opacity, transform"
+      },
+      children: word
+    },
+    i
+  )) });
+}
+export {
+  ImageController,
+  ScrollSequence,
+  ScrollText,
+  ScrollTimeline,
+  ScrollTimelineProvider,
+  ScrollWordReveal,
+  clamp,
+  resolveSequence,
+  useScrollSequence,
+  useScrollTimeline
+};
+//# sourceMappingURL=index.mjs.map