svg-scroll-draw 2.7.0 → 2.10.0

package/dist/cdn/svg-scroll-draw.dev.global.js

@@ -0,0 +1,1878 @@
+"use strict";
+var SvgScrollDraw = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/cdn.ts
+  var cdn_exports = {};
+  __export(cdn_exports, {
+    Cinematic: () => Cinematic,
+    PRESETS: () => PRESETS,
+    createBounce: () => createBounce,
+    createElastic: () => createElastic,
+    createSpring: () => createSpring,
+    scrollAnimate: () => scrollAnimate,
+    scrollCounter: () => scrollCounter,
+    scrollDraw: () => scrollDraw,
+    scrollParallax: () => scrollParallax
+  });
+
+  // src/core/utils.ts
+  function createSpring({
+    tension = 2.5,
+    friction = 2.2
+  } = {}) {
+    return (t) => 1 - Math.cos(t * Math.PI * tension) * Math.pow(1 - t, friction);
+  }
+  function createBounce({
+    bounces = 3,
+    decay = 0.5
+  } = {}) {
+    const n = Math.max(1, Math.round(bounces));
+    const d = Math.max(0.01, Math.min(0.99, decay));
+    const sqrtD = Math.sqrt(d);
+    let totalW = 0;
+    const rawWidths = [];
+    for (let i = 0; i < n; i++) {
+      const w = Math.pow(sqrtD, i);
+      rawWidths.push(w);
+      totalW += w;
+    }
+    const boundaries = [0];
+    let cum = 0;
+    for (let i = 0; i < n; i++) {
+      cum += rawWidths[i] / totalW;
+      boundaries.push(cum);
+    }
+    return (t) => {
+      if (t <= 0) return 0;
+      if (t >= 1) return 1;
+      for (let i = 0; i < n; i++) {
+        if (t <= boundaries[i + 1]) {
+          const u = (t - boundaries[i]) / (boundaries[i + 1] - boundaries[i]);
+          if (i === 0) {
+            return u * (2 - u);
+          }
+          const trough = 1 - Math.pow(d, i);
+          return trough + (1 - trough) * (2 * u - 1) * (2 * u - 1);
+        }
+      }
+      return 1;
+    };
+  }
+  function createElastic({
+    amplitude = 1,
+    period = 0.4
+  } = {}) {
+    const a = Math.max(1, amplitude);
+    const p = Math.max(0.1, period);
+    const s = a <= 1 ? p / 4 : p / (2 * Math.PI) * Math.asin(1 / a);
+    return (t) => {
+      if (t <= 0) return 0;
+      if (t >= 1) return 1;
+      return a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
+    };
+  }
+  var EASINGS = {
+    linear: (t) => t,
+    "ease-in": (t) => t * t,
+    "ease-out": (t) => t * (2 - t),
+    "ease-in-out": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+    spring: (t) => 1 - Math.cos(t * Math.PI * 2.5) * Math.pow(1 - t, 2.2),
+    bounce: createBounce(),
+    elastic: createElastic()
+  };
+  function parseTrigger(str = "top bottom") {
+    const trimmed = str.trim();
+    if (/^\d+(\.\d+)?%$/.test(trimmed)) return { element: "top", viewport: trimmed };
+    const [element = "top", viewport = "bottom"] = trimmed.split(/\s+/).filter(Boolean);
+    return { element, viewport };
+  }
+  function elementAnchorY(top, height, scrollY, anchor) {
+    switch (anchor) {
+      case "top":
+        return top + scrollY;
+      case "center":
+        return top + scrollY + height / 2;
+      case "bottom":
+        return top + scrollY + height;
+      default:
+        return top + scrollY;
+    }
+  }
+  function viewportAnchorY(anchor, vpHeight) {
+    if (/^\d+(\.\d+)?%$/.test(anchor)) return vpHeight * (parseFloat(anchor) / 100);
+    switch (anchor) {
+      case "top":
+        return 0;
+      case "center":
+        return vpHeight / 2;
+      case "bottom":
+        return vpHeight;
+      default:
+        return vpHeight;
+    }
+  }
+  function getElementLength(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === "rect") {
+      const w = parseFloat(el.getAttribute("width") ?? "0");
+      const h = parseFloat(el.getAttribute("height") ?? "0");
+      return 2 * (w + h);
+    }
+    if (tag === "circle") {
+      const r = parseFloat(el.getAttribute("r") ?? "0");
+      return 2 * Math.PI * r;
+    }
+    return el.getTotalLength();
+  }
+  function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+  function computeProgress(scrollY, tStart, tEnd, speed) {
+    if (tEnd === tStart) return 0;
+    return clamp((scrollY - tStart) / (tEnd - tStart) * speed, 0, 1);
+  }
+  function measureTriggerFrame(el, scrollEl, axis) {
+    const rect = el.getBoundingClientRect();
+    const size = axis === "x" ? rect.width : rect.height;
+    if (scrollEl) {
+      const top = axis === "x" ? rect.left - scrollEl.getBoundingClientRect().left + scrollEl.scrollLeft : rect.top - scrollEl.getBoundingClientRect().top + scrollEl.scrollTop;
+      return { top, height: size, scroll: 0 };
+    }
+    return {
+      top: axis === "x" ? rect.left : rect.top,
+      height: size,
+      scroll: axis === "x" ? window.scrollX : window.scrollY
+    };
+  }
+  function computeTriggers(rect, scrollY, vpHeight, startConfig, endConfig) {
+    const tStart = elementAnchorY(rect.top, rect.height, scrollY, startConfig.element) - viewportAnchorY(startConfig.viewport, vpHeight);
+    const tEnd = elementAnchorY(rect.top, rect.height, scrollY, endConfig.element) - viewportAnchorY(endConfig.viewport, vpHeight);
+    return { tStart, tEnd };
+  }
+  function parseColor(color) {
+    const short = /^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+    if (short) return [
+      parseInt(short[1] + short[1], 16),
+      parseInt(short[2] + short[2], 16),
+      parseInt(short[3] + short[3], 16)
+    ];
+    const full = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+    if (full) return [parseInt(full[1], 16), parseInt(full[2], 16), parseInt(full[3], 16)];
+    const rgb = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(color);
+    if (rgb) return [parseInt(rgb[1]), parseInt(rgb[2]), parseInt(rgb[3])];
+    return null;
+  }
+  function lerpColor(from, to, t) {
+    const a = parseColor(from);
+    const b = parseColor(to);
+    if (!a || !b) return from;
+    return `rgb(${Math.round(a[0] + (b[0] - a[0]) * t)},${Math.round(a[1] + (b[1] - a[1]) * t)},${Math.round(a[2] + (b[2] - a[2]) * t)})`;
+  }
+
+  // src/core/presets.ts
+  var PRESETS = {
+    /**
+     * Pencil-drawing feel — paths trace in one by one with a slight stagger.
+     * Great for diagrams, illustrations, and handwriting effects.
+     */
+    sketch: {
+      easing: "ease-in",
+      stagger: 0.1,
+      speed: 0.9,
+      fade: false
+    },
+    /**
+     * Clean viewport reveal — fades and draws in once as the element enters view.
+     * Best for logos, hero graphics, and section illustrations.
+     */
+    reveal: {
+      easing: "ease-out",
+      fade: true,
+      speed: 1.2,
+      once: true
+    },
+    /**
+     * Fast mechanical draw — paths appear quickly left-to-right, one after another.
+     * Great for code, timelines, and data-driven infographics.
+     */
+    typewriter: {
+      easing: "linear",
+      stagger: 0.05,
+      speed: 1.5
+    },
+    /**
+     * Slow dramatic entrance — long ease-in-out with a gentle fade.
+     * Suits hero sections, landing pages, and storytelling layouts.
+     */
+    cinematic: {
+      easing: "ease-in-out",
+      fade: true,
+      speed: 0.75
+    },
+    /**
+     * Bouncy physics feel — spring easing gives a natural overshoot-and-settle.
+     * Pairs well with icons and small decorative SVGs.
+     */
+    spring: {
+      easing: "spring",
+      speed: 1.1
+    }
+  };
+
+  // src/core/env.ts
+  var IS_DEV = (
+    /*
+     * Build-time override, substituted as a literal by the two CDN builds.
+     *
+     * The `process` test below is unanswerable without a bundler — `process` does
+     * not exist in a browser — so `IS_DEV` was false for every CDN user, the people
+     * least likely to have any other diagnostics available. Every warning this
+     * library has was invisible to exactly them, including the zero-length trigger
+     * window that would have caught the `scrollHorizontal` defect.
+     *
+     * `svg-scroll-draw.dev.global.js` defines this to `true`; the production CDN
+     * build defines it to `false`, which also lets the minifier drop the warning
+     * bodies outright. Left undefined for the npm builds, where the `process` test
+     * is the right one and bundlers fold it away.
+     */
+    true ? true : typeof process !== "undefined" && typeof process.env !== "undefined" && process.env.NODE_ENV !== "production"
+  );
+  function warn(msg, ...rest) {
+    if (IS_DEV) console.warn(`[svg-scroll-draw] ${msg}`, ...rest);
+  }
+
+  // src/core/css-easing.ts
+  var QUAD_IN = "cubic-bezier(0.333333, 0, 0.666667, 0.333333)";
+  var QUAD_OUT = "cubic-bezier(0.333333, 0.666667, 0.666667, 1)";
+  var LINEAR_STOPS = 33;
+  function supportsLinearTiming() {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timing-function: linear(0, 1)");
+  }
+  function sampleAsLinear(fn) {
+    const stops = [];
+    for (let i = 0; i < LINEAR_STOPS; i++) {
+      const t = i / (LINEAR_STOPS - 1);
+      stops.push(String(Math.round(fn(t) * 1e5) / 1e5));
+    }
+    return `linear(${stops.join(",")})`;
+  }
+  function cssTimingFor(easing) {
+    switch (easing) {
+      case "linear":
+        return "linear";
+      case "ease-in":
+        return QUAD_IN;
+      case "ease-out":
+        return QUAD_OUT;
+      case "ease-in-out":
+        return supportsLinearTiming() ? sampleAsLinear(EASINGS["ease-in-out"]) : null;
+      default:
+        return null;
+    }
+  }
+
+  // src/core/engine.ts
+  var nativeUid = 0;
+  function supportsNativeTimeline() {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timeline: view()") && // The fast path anchors the timeline to the container via a named
+    // view-timeline, so named-timeline support is also required — without it the
+    // animation-timeline reference would not resolve and nothing would animate.
+    CSS.supports("view-timeline-name: --x");
+  }
+  function checkElement(el) {
+    const stroke = el.getAttribute("stroke");
+    const fill = el.getAttribute("fill");
+    if (!stroke || stroke === "none") warn("Element has no stroke \u2014 path will not be visible.", el);
+    else if (fill && fill !== "none" && fill !== "transparent") warn("Element has a fill \u2014 it may obscure the stroke animation.", el);
+  }
+  function createDebugOverlay(tStart, tEnd, axis) {
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-svg-scroll-draw-debug", "");
+    overlay.style.cssText = "position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";
+    function update() {
+      const scroll = axis === "x" ? window.scrollX : window.scrollY;
+      const a = tStart - scroll, b = tEnd - scroll, x = axis === "x";
+      overlay.innerHTML = `
+      <div style="position:absolute;${x ? `left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;` : `top:${a}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${x ? `left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;` : `top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;
+    }
+    document.body.appendChild(overlay);
+    window.addEventListener("scroll", update, { passive: true });
+    update();
+    return {
+      el: overlay,
+      destroy() {
+        window.removeEventListener("scroll", update);
+        overlay.remove();
+      }
+    };
+  }
+  var PATH_NUMBER = /[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g;
+  var PATH_COMMAND = /[MmLlHhVvCcSsQqTtAaZz]/g;
+  function checkMorphCompatible(from, to, el) {
+    if (!IS_DEV) return;
+    const fromCmds = (from.match(PATH_COMMAND) ?? []).join("").toUpperCase();
+    const toCmds = (to.match(PATH_COMMAND) ?? []).join("").toUpperCase();
+    const fromNums = (from.match(PATH_NUMBER) ?? []).length;
+    const toNums = (to.match(PATH_NUMBER) ?? []).length;
+    if (fromCmds !== toCmds) {
+      warn(
+        `morphTo: command sequence differs (${fromCmds || "\u2205"} \u2192 ${toCmds || "\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,
+        el
+      );
+      return;
+    }
+    if (fromNums !== toNums) {
+      warn(
+        `morphTo: coordinate count differs (${fromNums} \u2192 ${toNums}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,
+        el
+      );
+    }
+  }
+  function morphPath(from, to, t) {
+    const toNums = (to.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g) ?? []).map(Number);
+    let idx = 0;
+    return from.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g, (match) => {
+      const f = parseFloat(match);
+      const target = toNums[idx++] ?? f;
+      return String(+(f + (target - f) * t).toFixed(4));
+    });
+  }
+  function createEngine(container, rawOptions = {}) {
+    if (typeof window === "undefined") {
+      return { destroy: () => {
+      }, replay: () => {
+      }, pause: () => {
+      }, resume: () => {
+      }, seek: () => {
+      }, getProgress: () => 0 };
+    }
+    const { preset, ...userOptions } = rawOptions;
+    const options = preset ? { ...PRESETS[preset], ...userOptions } : userOptions;
+    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const {
+      selector = "path, polyline, line, polygon, rect, circle",
+      speed = 1,
+      fade = false,
+      easing = "linear",
+      trigger = {},
+      stagger = 0,
+      direction = "forward",
+      once = false,
+      debug = false,
+      axis = "y",
+      scrollContainer,
+      autoReverse = false,
+      delay = 0,
+      strokeColor,
+      strokeWidth,
+      fillOpacity,
+      waypoints,
+      velocityScale = false,
+      threshold = 0,
+      rootMargin = "0px",
+      repeat = 0,
+      repeatDelay = 0,
+      morphTo,
+      clip,
+      autoplay = false,
+      duration = 1e3,
+      native = true,
+      onProgress,
+      onStart,
+      onComplete,
+      onEnter,
+      onLeave,
+      onEnterBack,
+      onLeaveBack
+    } = options;
+    const clipDirection = clip === true ? "left" : typeof clip === "string" ? clip : false;
+    const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS.linear;
+    const startConfig = parseTrigger(trigger.start ?? "top bottom");
+    const endConfig = parseTrigger(trigger.end ?? "bottom top");
+    const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
+    const colorFrom = Array.isArray(strokeColor) ? strokeColor[0] : null;
+    const colorTo = Array.isArray(strokeColor) ? strokeColor[1] : typeof strokeColor === "string" ? strokeColor : null;
+    const widthFrom = Array.isArray(strokeWidth) ? strokeWidth[0] : null;
+    const widthTo = Array.isArray(strokeWidth) ? strokeWidth[1] : typeof strokeWidth === "number" ? strokeWidth : null;
+    const fillOpacityFrom = Array.isArray(fillOpacity) ? fillOpacity[0] : null;
+    const fillOpacityTo = Array.isArray(fillOpacity) ? fillOpacity[1] : typeof fillOpacity === "number" ? fillOpacity : null;
+    function computeClipPath(alpha) {
+      const p = alpha * 100;
+      switch (clipDirection) {
+        case "right":
+          return `inset(0 0 0 ${100 - p}%)`;
+        case "top":
+          return `inset(0 0 ${100 - p}% 0)`;
+        case "bottom":
+          return `inset(${100 - p}% 0 0 0)`;
+        case "center":
+          return `circle(${alpha * 150}% at 50% 50%)`;
+        default:
+          return `inset(0 ${100 - p}% 0 0)`;
+      }
+    }
+    const paths = clipDirection ? [] : Array.from(container.querySelectorAll(selector));
+    const lengths = [];
+    const originalDs = [];
+    let tStart = 0;
+    let tEnd = 0;
+    let completed = false;
+    let started = false;
+    let rafId = 0;
+    let isVisible = false;
+    let frozenAlpha = -1;
+    let prevScroll = -1;
+    let paused = false;
+    let currentAlpha = 0;
+    let repeatCount = 0;
+    let repeatTimer;
+    let debugOverlay = null;
+    function destroyDebugOverlay() {
+      debugOverlay?.destroy();
+      debugOverlay = null;
+    }
+    const firedWaypoints = /* @__PURE__ */ new Set();
+    let lastAppliedScroll = NaN;
+    let dirty = true;
+    let prevVelScroll = -1;
+    let prevVelTime = performance.now();
+    let prevRawProgress = NaN;
+    function scrollPos() {
+      if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
+      return axis === "x" ? window.scrollX : window.scrollY;
+    }
+    function vpSize() {
+      if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
+      return axis === "x" ? window.innerWidth : window.innerHeight;
+    }
+    function cacheTriggers() {
+      const frame = measureTriggerFrame(container, scrollEl, axis);
+      const result = computeTriggers(frame, frame.scroll, vpSize(), startConfig, endConfig);
+      tStart = result.tStart;
+      tEnd = result.tEnd;
+      if (debug && IS_DEV) {
+        destroyDebugOverlay();
+        debugOverlay = createDebugOverlay(tStart, tEnd, axis);
+      }
+    }
+    function applyAlpha(alpha, dir) {
+      container.style.setProperty("--scroll-draw-progress", String(alpha));
+      if (clipDirection) {
+        const a = dir === "reverse" ? 1 - alpha : alpha;
+        container.style.clipPath = computeClipPath(a);
+        return;
+      }
+      paths.forEach((el, i) => {
+        el.style.strokeDashoffset = dir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
+        if (fade) el.style.opacity = dir === "reverse" ? `${1 - alpha}` : `${alpha}`;
+        if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
+        else if (colorTo) el.style.stroke = colorTo;
+        if (widthFrom !== null && widthTo !== null)
+          el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
+        else if (widthTo !== null)
+          el.style.strokeWidth = `${widthTo}`;
+        if (fillOpacityFrom !== null && fillOpacityTo !== null)
+          el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
+        else if (fillOpacityTo !== null)
+          el.style.fillOpacity = `${fillOpacityTo}`;
+        if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i]) {
+          el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
+        }
+      });
+    }
+    function resetPaths() {
+      container.style.setProperty("--scroll-draw-progress", "0");
+      if (clipDirection) {
+        container.style.clipPath = computeClipPath(0);
+        return;
+      }
+      paths.forEach((el, i) => {
+        el.style.strokeDasharray = `${lengths[i]}`;
+        el.style.strokeDashoffset = direction === "reverse" ? "0" : `${lengths[i]}`;
+        if (fade) el.style.opacity = direction === "reverse" ? "1" : "0";
+        else el.style.opacity = "";
+        if (colorFrom) el.style.stroke = colorFrom;
+        if (widthFrom !== null) el.style.strokeWidth = `${widthFrom}`;
+        if (fillOpacityFrom !== null) el.style.fillOpacity = `${fillOpacityFrom}`;
+        if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
+          el.setAttribute("d", originalDs[i]);
+      });
+    }
+    paths.forEach((el) => {
+      checkElement(el);
+      const len = getElementLength(el);
+      lengths.push(len);
+      const isPath = el.tagName.toLowerCase() === "path";
+      if (isPath) originalDs.push(el.getAttribute("d") ?? "");
+      else originalDs.push("");
+      if (morphTo) {
+        if (!isPath) {
+          warn(`morphTo only applies to <path> elements \u2014 ignored on <${el.tagName}>.`, el);
+        } else {
+          checkMorphCompatible(originalDs[originalDs.length - 1], morphTo, el);
+        }
+      }
+      if (prefersReduced) {
+        el.style.strokeDasharray = `${len}`;
+        el.style.strokeDashoffset = direction === "reverse" ? `${len}` : "0";
+        if (fade) el.style.opacity = "1";
+        if (colorTo) el.style.stroke = colorTo;
+        if (widthTo !== null) el.style.strokeWidth = `${widthTo}`;
+        if (fillOpacityTo !== null) el.style.fillOpacity = `${fillOpacityTo}`;
+        if (morphTo && el.tagName.toLowerCase() === "path") el.setAttribute("d", morphTo);
+      } else {
+        el.style.strokeDasharray = `${len}`;
+        el.style.strokeDashoffset = direction === "reverse" ? "0" : `${len}`;
+        if (fade) el.style.opacity = direction === "reverse" ? "1" : "0";
+        else el.style.opacity = "";
+        if (colorFrom) el.style.stroke = colorFrom;
+        if (widthFrom !== null) el.style.strokeWidth = `${widthFrom}`;
+        if (fillOpacityFrom !== null) el.style.fillOpacity = `${fillOpacityFrom}`;
+      }
+    });
+    if (clipDirection) {
+      if (prefersReduced) {
+        container.style.clipPath = computeClipPath(1);
+        onComplete?.();
+        return { destroy: () => {
+        }, replay: () => {
+        }, pause: () => {
+        }, resume: () => {
+        }, seek: () => {
+        }, getProgress: () => 1 };
+      }
+      container.style.clipPath = computeClipPath(0);
+    } else if (prefersReduced) {
+      onComplete?.();
+      return { destroy: () => {
+      }, replay: () => {
+      }, pause: () => {
+      }, resume: () => {
+      }, seek: () => {
+      }, getProgress: () => 1 };
+    }
+    const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
+    function nativeEligible() {
+      if (native === false) return false;
+      if (!supportsNativeTimeline()) return false;
+      if (!paths.length) return false;
+      if (!cssTiming) return false;
+      if (clipDirection) return false;
+      if (axis !== "y") return false;
+      if (scrollEl) return false;
+      if (speed !== 1) return false;
+      if (stagger !== 0) return false;
+      if (once) return false;
+      if (autoReverse) return false;
+      if (velocityScale !== false) return false;
+      if (morphTo) return false;
+      if (waypoints) return false;
+      if (repeat) return false;
+      if (delay > 0) return false;
+      if (onProgress || onStart || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
+      if (strokeColor != null || strokeWidth != null || fillOpacity != null) return false;
+      if ((trigger.start ?? "top bottom").trim() !== "top bottom") return false;
+      if ((trigger.end ?? "bottom top").trim() !== "bottom top") return false;
+      return true;
+    }
+    function buildNative() {
+      const uid = ++nativeUid;
+      const cls = `svg-scroll-draw-${uid}`;
+      const containerCls = `svg-scroll-draw-host-${uid}`;
+      const timeline = `--svg-scroll-draw-${uid}`;
+      const fromO = direction === "reverse" ? "0" : "var(--ssd-len)";
+      const toO = direction === "reverse" ? "var(--ssd-len)" : "0";
+      let fromBody = `stroke-dashoffset:${fromO};`;
+      let toBody = `stroke-dashoffset:${toO};`;
+      if (fade) {
+        fromBody += `opacity:${direction === "reverse" ? 1 : 0};`;
+        toBody += `opacity:${direction === "reverse" ? 0 : 1};`;
+      }
+      const style = document.createElement("style");
+      style.setAttribute("data-svg-scroll-draw", "");
+      style.textContent = `@keyframes ${cls}{from{${fromBody}}to{${toBody}}}.${containerCls}{view-timeline-name:${timeline};view-timeline-axis:block;}.${cls}{animation-name:${cls};animation-duration:auto;animation-timing-function:${cssTiming};animation-fill-mode:both;animation-timeline:${timeline};animation-range:cover 0% cover 100%;}`;
+      document.head.appendChild(style);
+      container.classList.add(containerCls);
+      function attach(el, i) {
+        el.style.setProperty("--ssd-len", String(lengths[i]));
+        el.style.strokeDasharray = `${lengths[i]}`;
+        el.style.strokeDashoffset = "";
+        el.style.opacity = "";
+        el.style.animationPlayState = "";
+        el.classList.add(cls);
+      }
+      paths.forEach(attach);
+      let paused2 = false;
+      let lastSeek = -1;
+      function liveProgress() {
+        if (lastSeek >= 0) return lastSeek;
+        const rect = container.getBoundingClientRect();
+        const { tStart: tStart2, tEnd: tEnd2 } = computeTriggers(
+          { top: rect.top, height: rect.height },
+          scrollPos(),
+          vpSize(),
+          startConfig,
+          endConfig
+        );
+        return easeFn(computeProgress(scrollPos(), tStart2, tEnd2, speed));
+      }
+      return {
+        destroy() {
+          container.classList.remove(containerCls);
+          paths.forEach((el) => {
+            el.classList.remove(cls);
+            el.style.removeProperty("--ssd-len");
+            el.style.animationPlayState = "";
+          });
+          style.remove();
+        },
+        replay() {
+          paused2 = false;
+          lastSeek = -1;
+          paths.forEach(attach);
+        },
+        pause() {
+          paused2 = true;
+          paths.forEach((el) => {
+            el.style.animationPlayState = "paused";
+          });
+        },
+        resume() {
+          if (!paused2) return;
+          paused2 = false;
+          paths.forEach((el) => {
+            el.style.animationPlayState = "running";
+          });
+        },
+        seek(progress) {
+          const p = Math.min(1, Math.max(0, progress));
+          lastSeek = p;
+          paused2 = true;
+          paths.forEach((el, i) => {
+            el.classList.remove(cls);
+            el.style.strokeDashoffset = direction === "reverse" ? `${lengths[i] * p}` : `${lengths[i] * (1 - p)}`;
+            if (fade) el.style.opacity = direction === "reverse" ? `${1 - p}` : `${p}`;
+          });
+        },
+        getProgress() {
+          return liveProgress();
+        },
+        /**
+         * Re-measure the path lengths.
+         *
+         * There is no trigger window to refresh on this path — the browser's own
+         * view-timeline is live and never goes stale — but `--ssd-len` is a number
+         * baked in at attach time, and the keyframes interpolate from it. A path
+         * that changed length keeps animating to the old one until this is called.
+         */
+        refresh() {
+          paths.forEach((el, i) => {
+            lengths[i] = getElementLength(el);
+            el.style.setProperty("--ssd-len", String(lengths[i]));
+            el.style.strokeDasharray = `${lengths[i]}`;
+          });
+        }
+      };
+    }
+    if (nativeEligible()) return buildNative();
+    function buildAutoplay() {
+      const effectiveDuration = Math.max(1, duration);
+      let startTime = 0;
+      let pausedElapsed = 0;
+      let running = false;
+      function applyAutoAlpha(elapsed) {
+        let allDone = true;
+        if (clipDirection) {
+          const raw = Math.min(1, Math.max(0, elapsed / effectiveDuration));
+          const alpha = easeFn(raw);
+          currentAlpha = alpha;
+          container.style.setProperty("--scroll-draw-progress", String(alpha));
+          container.style.clipPath = computeClipPath(direction === "reverse" ? 1 - alpha : alpha);
+          onProgress?.(alpha);
+          if (raw < 1) allDone = false;
+        } else {
+          paths.forEach((el, i) => {
+            const staggerMs = i * stagger * effectiveDuration;
+            const raw = Math.min(1, Math.max(0, (elapsed - staggerMs) / effectiveDuration));
+            const alpha = easeFn(raw);
+            el.style.strokeDashoffset = direction === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
+            if (fade) el.style.opacity = direction === "reverse" ? `${1 - alpha}` : `${alpha}`;
+            if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
+            else if (colorTo) el.style.stroke = colorTo;
+            if (widthFrom !== null && widthTo !== null)
+              el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
+            else if (widthTo !== null)
+              el.style.strokeWidth = `${widthTo}`;
+            if (fillOpacityFrom !== null && fillOpacityTo !== null)
+              el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
+            else if (fillOpacityTo !== null)
+              el.style.fillOpacity = `${fillOpacityTo}`;
+            if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
+              el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
+            if (i === 0) {
+              currentAlpha = alpha;
+              onProgress?.(alpha);
+              container.style.setProperty("--scroll-draw-progress", String(alpha));
+            }
+            if (raw < 1) allDone = false;
+          });
+        }
+        if (waypoints) {
+          const globalRaw = Math.min(1, Math.max(0, elapsed / effectiveDuration));
+          const globalAlpha = easeFn(globalRaw);
+          for (const key in waypoints) {
+            const t = parseFloat(key);
+            if (globalAlpha >= t && !firedWaypoints.has(t)) {
+              firedWaypoints.add(t);
+              waypoints[key]?.();
+            }
+          }
+        }
+        return allDone;
+      }
+      function tick(now) {
+        if (paused) return;
+        const elapsed = now - startTime;
+        if (!started) {
+          started = true;
+          onStart?.();
+        }
+        const done = applyAutoAlpha(elapsed);
+        if (done && !completed) {
+          completed = true;
+          applyAutoAlpha(effectiveDuration * (1 + Math.max(0, paths.length - 1) * stagger));
+          onComplete?.();
+          const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
+          if (repeatCount < maxRepeats) {
+            repeatCount++;
+            repeatTimer = setTimeout(() => {
+              startTime = performance.now();
+              started = false;
+              completed = false;
+              firedWaypoints.clear();
+              resetPaths();
+              rafId = requestAnimationFrame(tick);
+            }, repeatDelay);
+          }
+          return;
+        }
+        if (!done) rafId = requestAnimationFrame(tick);
+      }
+      function startAnimation() {
+        cancelAnimationFrame(rafId);
+        clearTimeout(repeatTimer);
+        startTime = performance.now();
+        pausedElapsed = 0;
+        paused = false;
+        started = false;
+        completed = false;
+        repeatCount = 0;
+        running = true;
+        currentAlpha = 0;
+        firedWaypoints.clear();
+        resetPaths();
+        rafId = requestAnimationFrame(tick);
+      }
+      const observer2 = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((e) => {
+            if (e.isIntersecting && !(once && completed)) {
+              startAnimation();
+            } else if (!e.isIntersecting && !once && !completed) {
+              cancelAnimationFrame(rafId);
+              clearTimeout(repeatTimer);
+              running = false;
+            }
+          });
+        },
+        { root: scrollEl ?? null, threshold, rootMargin }
+      );
+      let resizeTimer2;
+      function onResize2() {
+        clearTimeout(resizeTimer2);
+        resizeTimer2 = setTimeout(() => {
+          paths.forEach((el, i) => {
+            lengths[i] = getElementLength(el);
+            el.style.strokeDasharray = `${lengths[i]}`;
+          });
+        }, 150);
+      }
+      window.addEventListener("resize", onResize2);
+      window.addEventListener("orientationchange", onResize2);
+      if (delay > 0) setTimeout(() => observer2.observe(container), delay);
+      else observer2.observe(container);
+      return {
+        destroy() {
+          cancelAnimationFrame(rafId);
+          clearTimeout(repeatTimer);
+          observer2.disconnect();
+          window.removeEventListener("resize", onResize2);
+          window.removeEventListener("orientationchange", onResize2);
+          clearTimeout(resizeTimer2);
+        },
+        replay() {
+          repeatCount = 0;
+          startAnimation();
+        },
+        pause() {
+          if (paused || !running) return;
+          paused = true;
+          pausedElapsed = performance.now() - startTime;
+          cancelAnimationFrame(rafId);
+        },
+        resume() {
+          if (!paused) return;
+          paused = false;
+          running = true;
+          startTime = performance.now() - pausedElapsed;
+          rafId = requestAnimationFrame(tick);
+        },
+        seek(p) {
+          const clamped = Math.min(1, Math.max(0, p));
+          currentAlpha = clamped;
+          paused = true;
+          pausedElapsed = clamped * effectiveDuration;
+          startTime = performance.now() - pausedElapsed;
+          cancelAnimationFrame(rafId);
+          applyAutoAlpha(pausedElapsed);
+        },
+        getProgress() {
+          return currentAlpha;
+        },
+        /** No trigger window on this path — it runs on time — so lengths only. */
+        refresh() {
+          clearTimeout(resizeTimer2);
+          paths.forEach((el, i) => {
+            lengths[i] = getElementLength(el);
+            el.style.strokeDasharray = `${lengths[i]}`;
+          });
+        }
+      };
+    }
+    if (autoplay) return buildAutoplay();
+    cacheTriggers();
+    function update() {
+      if (!isVisible || paused) return;
+      const now = performance.now();
+      const currentScroll = scrollPos();
+      if (!dirty && velocityScale === false && currentScroll === lastAppliedScroll) {
+        rafId = requestAnimationFrame(update);
+        return;
+      }
+      dirty = false;
+      lastAppliedScroll = currentScroll;
+      let effectiveSpeed = speed;
+      if (velocityScale !== false) {
+        const dt = now - prevVelTime;
+        const vel = dt > 0 ? Math.abs(currentScroll - (prevVelScroll < 0 ? currentScroll : prevVelScroll)) / dt : 0;
+        const sensitivity = typeof velocityScale === "number" ? velocityScale : 1;
+        effectiveSpeed = speed * Math.max(0.2, 1 + vel * sensitivity * 0.04);
+      }
+      prevVelScroll = currentScroll;
+      prevVelTime = now;
+      const effectiveDir = autoReverse ? prevScroll === -1 || currentScroll >= prevScroll ? "forward" : "reverse" : direction;
+      prevScroll = currentScroll;
+      const range = tEnd - tStart;
+      let allComplete = true;
+      const rawProgress = range === 0 ? 0 : (currentScroll - tStart) / range;
+      if (!isNaN(prevRawProgress)) {
+        if (prevRawProgress <= 0 && rawProgress > 0) onEnter?.();
+        else if (prevRawProgress > 0 && rawProgress <= 0) onLeaveBack?.();
+        if (prevRawProgress < 1 && rawProgress >= 1) onLeave?.();
+        else if (prevRawProgress >= 1 && rawProgress < 1) onEnterBack?.();
+      }
+      prevRawProgress = rawProgress;
+      if (clipDirection) {
+        let alpha = easeFn(computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
+        if (once && !autoReverse) {
+          frozenAlpha = Math.max(frozenAlpha, alpha);
+          alpha = frozenAlpha;
+        }
+        currentAlpha = alpha;
+        container.style.setProperty("--scroll-draw-progress", String(alpha));
+        const visual = effectiveDir === "reverse" ? 1 - alpha : alpha;
+        container.style.clipPath = computeClipPath(visual);
+        onProgress?.(alpha);
+        if (!started && computeProgress(currentScroll, tStart, tEnd, effectiveSpeed) > 0) {
+          started = true;
+          onStart?.();
+        }
+        if (alpha >= 1 && !completed) {
+          completed = true;
+          onComplete?.();
+          const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
+          if (repeatCount < maxRepeats) {
+            repeatCount++;
+            repeatTimer = setTimeout(() => {
+              frozenAlpha = -1;
+              started = false;
+              completed = false;
+              container.style.clipPath = computeClipPath(0);
+            }, repeatDelay);
+          }
+        } else if (alpha < 1 && !once) {
+          completed = false;
+        }
+        rafId = requestAnimationFrame(update);
+        return;
+      }
+      paths.forEach((el, i) => {
+        const offset = i * stagger * range;
+        let alpha = easeFn(computeProgress(currentScroll, tStart + offset, tEnd + offset, effectiveSpeed));
+        if (once && !autoReverse) {
+          frozenAlpha = Math.max(frozenAlpha, alpha);
+          alpha = frozenAlpha;
+        }
+        currentAlpha = alpha;
+        el.style.strokeDashoffset = effectiveDir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
+        if (fade) el.style.opacity = effectiveDir === "reverse" ? `${1 - alpha}` : `${alpha}`;
+        if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
+        else if (colorTo) el.style.stroke = colorTo;
+        if (widthFrom !== null && widthTo !== null)
+          el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
+        else if (widthTo !== null)
+          el.style.strokeWidth = `${widthTo}`;
+        if (fillOpacityFrom !== null && fillOpacityTo !== null)
+          el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
+        else if (fillOpacityTo !== null)
+          el.style.fillOpacity = `${fillOpacityTo}`;
+        if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
+          el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
+        if (i === 0) {
+          onProgress?.(alpha);
+          container.style.setProperty("--scroll-draw-progress", String(alpha));
+        }
+        if (alpha < 1) allComplete = false;
+      });
+      if (waypoints) {
+        const rawAlpha = easeFn(computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
+        for (const key in waypoints) {
+          const t = parseFloat(key);
+          if (rawAlpha >= t && !firedWaypoints.has(t)) {
+            firedWaypoints.add(t);
+            waypoints[key]?.();
+          }
+        }
+      }
+      if (!started && computeProgress(currentScroll, tStart, tEnd, effectiveSpeed) > 0) {
+        started = true;
+        onStart?.();
+      }
+      if (allComplete && !completed) {
+        completed = true;
+        onComplete?.();
+        const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
+        if (repeatCount < maxRepeats) {
+          repeatCount++;
+          repeatTimer = setTimeout(() => {
+            frozenAlpha = -1;
+            started = false;
+            completed = false;
+            firedWaypoints.clear();
+            resetPaths();
+            dirty = true;
+          }, repeatDelay);
+        }
+      } else if (!allComplete && !once) {
+        completed = false;
+      }
+      rafId = requestAnimationFrame(update);
+    }
+    let looping = false;
+    function startLoop() {
+      if (looping) return;
+      looping = true;
+      rafId = requestAnimationFrame(function frame() {
+        update();
+      });
+    }
+    function stopLoop() {
+      looping = false;
+      cancelAnimationFrame(rafId);
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          isVisible = e.isIntersecting;
+          if (isVisible && !paused) {
+            dirty = true;
+            startLoop();
+          } else {
+            stopLoop();
+          }
+        });
+      },
+      { root: scrollEl ?? null, threshold, rootMargin }
+    );
+    function remeasure() {
+      paths.forEach((el, i) => {
+        lengths[i] = getElementLength(el);
+        el.style.strokeDasharray = `${lengths[i]}`;
+      });
+      cacheTriggers();
+      dirty = true;
+    }
+    let resizeTimer;
+    function onResize() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(remeasure, 150);
+    }
+    window.addEventListener("resize", onResize);
+    window.addEventListener("orientationchange", onResize);
+    let layoutObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      layoutObserver = new ResizeObserver(() => onResize());
+      layoutObserver.observe(document.body);
+      layoutObserver.observe(document.documentElement);
+      layoutObserver.observe(container);
+    }
+    if (delay > 0) setTimeout(() => observer.observe(container), delay);
+    else observer.observe(container);
+    return {
+      destroy() {
+        cancelAnimationFrame(rafId);
+        clearTimeout(repeatTimer);
+        stopLoop();
+        observer.disconnect();
+        layoutObserver?.disconnect();
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("orientationchange", onResize);
+        clearTimeout(resizeTimer);
+        destroyDebugOverlay();
+      },
+      replay() {
+        frozenAlpha = -1;
+        prevScroll = -1;
+        prevVelScroll = -1;
+        started = false;
+        completed = false;
+        repeatCount = 0;
+        paused = false;
+        currentAlpha = 0;
+        firedWaypoints.clear();
+        clearTimeout(repeatTimer);
+        resetPaths();
+        dirty = true;
+        if (isVisible) startLoop();
+      },
+      pause() {
+        paused = true;
+        stopLoop();
+      },
+      resume() {
+        if (!paused) return;
+        paused = false;
+        dirty = true;
+        if (isVisible) startLoop();
+      },
+      seek(progress) {
+        const p = Math.min(1, Math.max(0, progress));
+        currentAlpha = p;
+        frozenAlpha = p;
+        paused = true;
+        stopLoop();
+        applyAlpha(p, direction);
+        dirty = true;
+      },
+      getProgress() {
+        return currentAlpha;
+      },
+      /**
+       * Re-measure now, rather than waiting for a resize that may never come.
+       *
+       * Same work the debounced resize handler does — path lengths and the trigger
+       * window — run immediately and marked dirty so the next frame repaints from
+       * the new numbers.
+       */
+      refresh() {
+        clearTimeout(resizeTimer);
+        remeasure();
+        if (isVisible && !paused) startLoop();
+      }
+    };
+  }
+
+  // src/core/registry.ts
+  var _registry = /* @__PURE__ */ new Map();
+  function _register(el, entry) {
+    _registry.set(el, entry);
+  }
+  function _unregister(el) {
+    _registry.delete(el);
+  }
+
+  // src/animate/index.ts
+  function isColorValue(val) {
+    return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+  }
+  function parseTransformFns(str) {
+    const result = [];
+    const re = /([\w]+)\(([^)]*)\)/g;
+    let m;
+    while ((m = re.exec(str)) !== null) {
+      const nums = [];
+      const units = [];
+      const raw = m[2].trim();
+      if (raw) {
+        for (const arg of raw.split(/[\s,]+/)) {
+          const pm = arg.match(/^([-+]?[\d.eE]+)(.*)$/);
+          nums.push(pm ? parseFloat(pm[1]) : 0);
+          units.push(pm ? pm[2] : "");
+        }
+      }
+      result.push({ fn: m[1], nums, units });
+    }
+    return result;
+  }
+  function interpolateTransform(from, to, t) {
+    const fp = parseTransformFns(from);
+    const tp = parseTransformFns(to);
+    if (fp.length === 0 || fp.length !== tp.length) return t < 1 ? from : to;
+    return fp.map((f, i) => {
+      const tf = tp[i];
+      if (f.fn !== tf.fn || f.nums.length !== tf.nums.length) {
+        return t < 1 ? `${f.fn}(${f.nums.map((n, j) => `${n}${f.units[j]}`).join(", ")})` : `${tf.fn}(${tf.nums.map((n, j) => `${n}${tf.units[j]}`).join(", ")})`;
+      }
+      return `${f.fn}(${f.nums.map((n, j) => `${n + (tf.nums[j] - n) * t}${f.units[j]}`).join(", ")})`;
+    }).join(" ");
+  }
+  function interpolateValue(from, to, t) {
+    if (typeof from === "number" && typeof to === "number") {
+      return String(from + (to - from) * t);
+    }
+    const f = String(from);
+    const tStr = String(to);
+    if (isColorValue(f)) return lerpColor(f, tStr, t);
+    if (f.includes("(")) return interpolateTransform(f, tStr, t);
+    const fm = f.match(/^([-+]?[\d.]+)(.*)$/);
+    const tm = tStr.match(/^([-+]?[\d.]+)(.*)$/);
+    if (fm && tm) {
+      const fNum = parseFloat(fm[1]);
+      const tNum = parseFloat(tm[1]);
+      return `${fNum + (tNum - fNum) * t}${fm[2] || tm[2]}`;
+    }
+    return t < 1 ? f : tStr;
+  }
+  function toCSSProp(prop) {
+    return prop.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`);
+  }
+  var NATIVE_SAFE_PROPS = /* @__PURE__ */ new Set([
+    "opacity",
+    "transform",
+    "background-color",
+    "color",
+    "filter",
+    "scale",
+    "translate",
+    "rotate"
+  ]);
+  var animateNativeUid = 0;
+  var PROGRESS_VAR = "--scroll-draw-progress";
+  function supportsNativeTimeline2() {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timeline: view()");
+  }
+  function createAnimateEngine(el, options) {
+    const NOOP3 = {
+      destroy: () => {
+      },
+      replay: () => {
+      },
+      pause: () => {
+      },
+      resume: () => {
+      },
+      seek: () => {
+      },
+      getProgress: () => 0
+    };
+    if (typeof window === "undefined") return NOOP3;
+    const {
+      props,
+      trigger = {},
+      easing = "ease-out",
+      speed = 1,
+      once = false,
+      axis = "y",
+      scrollContainer,
+      native = true,
+      velocityScale = false,
+      respectReducedMotion = true,
+      triggerElement,
+      onProgress,
+      onComplete,
+      onEnter,
+      onLeave,
+      onEnterBack,
+      onLeaveBack
+    } = options;
+    const prefersReduced = respectReducedMotion && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
+    const startConfig = parseTrigger(trigger.start ?? "top bottom");
+    const endConfig = parseTrigger(trigger.end ?? "bottom top");
+    const triggerEl = triggerElement ?? el;
+    const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
+    const entries = Object.entries(props).map(([key, val]) => ({
+      prop: toCSSProp(key),
+      from: Array.isArray(val) ? val[0] : "",
+      to: Array.isArray(val) ? val[1] : val
+    }));
+    function resolveFromValues() {
+      const computed = window.getComputedStyle(el);
+      for (const entry of entries) {
+        if (entry.from === "") {
+          entry.from = computed.getPropertyValue(entry.prop).trim() || "0";
+        }
+      }
+    }
+    function applyFinal() {
+      for (const entry of entries) {
+        el.style.setProperty(entry.prop, String(entry.to));
+      }
+    }
+    const savedInline = /* @__PURE__ */ new Map();
+    for (const prop of [...entries.map((e) => e.prop), PROGRESS_VAR]) {
+      savedInline.set(prop, el.style.getPropertyValue(prop));
+    }
+    function restoreInline() {
+      for (const [prop, value] of savedInline) {
+        if (value) el.style.setProperty(prop, value);
+        else el.style.removeProperty(prop);
+      }
+    }
+    if (prefersReduced) {
+      applyFinal();
+      onComplete?.();
+      return { ...NOOP3, destroy: restoreInline, getProgress: () => 1 };
+    }
+    resolveFromValues();
+    const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
+    function nativeEligible() {
+      if (!native) return false;
+      if (!supportsNativeTimeline2()) return false;
+      if (!cssTiming) return false;
+      if (axis !== "y") return false;
+      if (scrollEl) return false;
+      if (triggerEl !== el) return false;
+      if (once) return false;
+      if (speed !== 1) return false;
+      if (onProgress || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
+      if (velocityScale !== false) return false;
+      if ((trigger.start ?? "top bottom").trim() !== "top bottom") return false;
+      if ((trigger.end ?? "bottom top").trim() !== "bottom top") return false;
+      for (const entry of entries) {
+        if (!NATIVE_SAFE_PROPS.has(entry.prop)) return false;
+      }
+      return true;
+    }
+    function buildNative() {
+      const cls = `ssd-a-${++animateNativeUid}`;
+      const fromBody = entries.map((e) => `${e.prop}:${e.from}`).join(";");
+      const toBody = entries.map((e) => `${e.prop}:${e.to}`).join(";");
+      const style = document.createElement("style");
+      style.setAttribute("data-ssd-animate", "");
+      style.textContent = `@keyframes ${cls}{from{${fromBody}}to{${toBody}}}.${cls}{animation-name:${cls};animation-duration:auto;animation-timing-function:${cssTiming};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`;
+      document.head.appendChild(style);
+      el.classList.add(cls);
+      const scrollPos2 = () => axis === "x" ? window.scrollX : window.scrollY;
+      const vpSize2 = () => axis === "x" ? window.innerWidth : window.innerHeight;
+      return {
+        destroy() {
+          el.classList.remove(cls);
+          style.remove();
+          el.style.animationPlayState = "";
+          restoreInline();
+        },
+        replay() {
+          el.classList.remove(cls);
+          void el.offsetWidth;
+          el.classList.add(cls);
+        },
+        pause() {
+          el.style.animationPlayState = "paused";
+        },
+        resume() {
+          el.style.animationPlayState = "";
+        },
+        seek(p) {
+          const clamped = Math.min(1, Math.max(0, p));
+          el.classList.remove(cls);
+          for (const entry of entries) {
+            el.style.setProperty(entry.prop, interpolateValue(entry.from, entry.to, clamped));
+          }
+        },
+        getProgress() {
+          const rect = el.getBoundingClientRect();
+          const scroll = scrollPos2();
+          const vp = vpSize2();
+          const { tStart: tStart2, tEnd: tEnd2 } = computeTriggers(
+            { top: rect.top, height: rect.height },
+            scroll,
+            vp,
+            startConfig,
+            endConfig
+          );
+          return easeFn(computeProgress(scroll, tStart2, tEnd2, speed));
+        }
+      };
+    }
+    if (nativeEligible()) return buildNative();
+    let tStart = 0;
+    let tEnd = 0;
+    let rafId = 0;
+    let isVisible = false;
+    let paused = false;
+    let frozenAlpha = -1;
+    let currentAlpha = 0;
+    let completed = false;
+    let prevRawProgress = NaN;
+    let prevVelScroll = -1;
+    let prevVelTime = 0;
+    const scrollPos = () => {
+      if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
+      return axis === "x" ? window.scrollX : window.scrollY;
+    };
+    const vpSize = () => {
+      if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
+      return axis === "x" ? window.innerWidth : window.innerHeight;
+    };
+    function cacheTriggers() {
+      const frame = measureTriggerFrame(triggerEl, scrollEl, axis);
+      const result = computeTriggers(frame, frame.scroll, vpSize(), startConfig, endConfig);
+      tStart = result.tStart;
+      tEnd = result.tEnd;
+    }
+    function applyAlpha(alpha) {
+      el.style.setProperty(PROGRESS_VAR, String(alpha));
+      for (const entry of entries) {
+        el.style.setProperty(entry.prop, interpolateValue(entry.from, entry.to, alpha));
+      }
+      onProgress?.(alpha);
+    }
+    function fireScrollCallbacks(raw) {
+      if (isNaN(prevRawProgress)) {
+        prevRawProgress = raw;
+        return;
+      }
+      if (prevRawProgress <= 0 && raw > 0) onEnter?.();
+      else if (prevRawProgress > 0 && raw <= 0) onLeaveBack?.();
+      if (prevRawProgress < 1 && raw >= 1) onLeave?.();
+      else if (prevRawProgress >= 1 && raw < 1) onEnterBack?.();
+      prevRawProgress = raw;
+    }
+    function update() {
+      if (!isVisible || paused) return;
+      const now = performance.now();
+      const currentScroll = scrollPos();
+      let effectiveSpeed = speed;
+      if (velocityScale !== false) {
+        const dt = now - prevVelTime;
+        const vel = dt > 0 ? Math.abs(currentScroll - (prevVelScroll < 0 ? currentScroll : prevVelScroll)) / dt : 0;
+        const sensitivity = typeof velocityScale === "number" ? velocityScale : 1;
+        effectiveSpeed = speed * Math.max(0.2, 1 + vel * sensitivity * 0.04);
+      }
+      prevVelScroll = currentScroll;
+      prevVelTime = now;
+      const raw = tEnd === tStart ? 0 : (currentScroll - tStart) / (tEnd - tStart);
+      fireScrollCallbacks(raw);
+      let alpha = easeFn(computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
+      if (once) {
+        frozenAlpha = Math.max(frozenAlpha, alpha);
+        alpha = frozenAlpha;
+      }
+      currentAlpha = alpha;
+      applyAlpha(alpha);
+      if (alpha >= 1 && !completed) {
+        completed = true;
+        onComplete?.();
+      } else if (alpha < 1 && !once) {
+        completed = false;
+      }
+      rafId = requestAnimationFrame(update);
+    }
+    cacheTriggers();
+    if (tEnd === tStart) {
+      warn(
+        "scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",
+        el
+      );
+    }
+    {
+      const initAlpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, speed));
+      if (once && initAlpha > 0) frozenAlpha = initAlpha;
+      currentAlpha = initAlpha;
+      applyAlpha(initAlpha);
+    }
+    const observer = new IntersectionObserver(
+      (ioEntries) => {
+        ioEntries.forEach((e) => {
+          isVisible = e.isIntersecting;
+          if (isVisible && !paused) rafId = requestAnimationFrame(update);
+          else cancelAnimationFrame(rafId);
+        });
+      },
+      { root: scrollEl ?? null }
+    );
+    let resizeTimer;
+    function onResize() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(cacheTriggers, 150);
+    }
+    window.addEventListener("resize", onResize);
+    window.addEventListener("orientationchange", onResize);
+    observer.observe(el);
+    _register(el, {
+      type: "animate",
+      getProgress: () => currentAlpha,
+      getTrigger: () => ({ tStart, tEnd })
+    });
+    return {
+      destroy() {
+        cancelAnimationFrame(rafId);
+        observer.disconnect();
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("orientationchange", onResize);
+        clearTimeout(resizeTimer);
+        restoreInline();
+        _unregister(el);
+      },
+      replay() {
+        frozenAlpha = -1;
+        completed = false;
+        currentAlpha = 0;
+        paused = false;
+        applyAlpha(0);
+      },
+      pause() {
+        paused = true;
+        cancelAnimationFrame(rafId);
+      },
+      resume() {
+        if (!paused) return;
+        paused = false;
+        if (isVisible) rafId = requestAnimationFrame(update);
+      },
+      seek(p) {
+        const clamped = Math.min(1, Math.max(0, p));
+        currentAlpha = clamped;
+        frozenAlpha = clamped;
+        paused = true;
+        cancelAnimationFrame(rafId);
+        applyAlpha(clamped);
+      },
+      getProgress() {
+        return currentAlpha;
+      }
+    };
+  }
+  var NOOP = {
+    destroy: () => {
+    },
+    replay: () => {
+    },
+    pause: () => {
+    },
+    resume: () => {
+    },
+    seek: () => {
+    },
+    getProgress: () => 0
+  };
+  function scrollAnimate(target, options) {
+    if (typeof window === "undefined") return NOOP;
+    const el = typeof target === "string" ? document.querySelector(target) : target;
+    if (!el) {
+      warn("scrollAnimate: element not found:", target);
+      return NOOP;
+    }
+    return createAnimateEngine(el, options);
+  }
+  function scrollParallax(target, options = {}) {
+    if (typeof window === "undefined") return NOOP;
+    const el = typeof target === "string" ? document.querySelector(target) : target;
+    if (!el) {
+      warn("scrollParallax: element not found:", target);
+      return NOOP;
+    }
+    const { speed = 0.3, axis = "y", easing = "linear", trigger, onProgress } = options;
+    const rect = el.getBoundingClientRect();
+    const size = axis === "x" ? rect.width : rect.height;
+    const travel = speed * size;
+    return createAnimateEngine(el, {
+      props: axis === "x" ? { transform: [`translateX(0px)`, `translateX(${-travel}px)`] } : { transform: [`translateY(0px)`, `translateY(${-travel}px)`] },
+      trigger: trigger ?? { start: "top bottom", end: "bottom top" },
+      easing,
+      native: false,
+      onProgress
+    });
+  }
+
+  // src/counter/index.ts
+  var NOOP2 = {
+    destroy: () => {
+    },
+    replay: () => {
+    },
+    pause: () => {
+    },
+    resume: () => {
+    },
+    seek: () => {
+    },
+    getProgress: () => 0
+  };
+  function scrollCounter(target, options) {
+    if (typeof window === "undefined") return NOOP2;
+    const raw = typeof target === "string" ? document.querySelector(target) : target;
+    if (!raw) {
+      warn("scrollCounter: element not found:", target);
+      return NOOP2;
+    }
+    const el = raw;
+    const {
+      from = 0,
+      to,
+      format,
+      easing = "ease-out",
+      trigger = {},
+      once = true,
+      decimals,
+      onComplete
+    } = options;
+    const fmt = decimals !== void 0 ? (n) => n.toFixed(decimals) : format ?? ((n) => String(Math.round(n)));
+    const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
+    const startConfig = parseTrigger(trigger.start ?? "top 80%");
+    const endConfig = parseTrigger(trigger.end ?? "top 20%");
+    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReduced) {
+      el.textContent = fmt(to);
+      onComplete?.();
+      return NOOP2;
+    }
+    let tStart = 0;
+    let tEnd = 0;
+    let rafId = 0;
+    let isVisible = false;
+    let paused = false;
+    let frozenAlpha = -1;
+    let currentAlpha = 0;
+    let completed = false;
+    const scrollPos = () => window.scrollY;
+    const vpSize = () => window.innerHeight;
+    function cacheTriggers() {
+      const rect = el.getBoundingClientRect();
+      const result = computeTriggers(
+        { top: rect.top, height: rect.height },
+        scrollPos(),
+        vpSize(),
+        startConfig,
+        endConfig
+      );
+      tStart = result.tStart;
+      tEnd = result.tEnd;
+    }
+    function applyAlpha(alpha) {
+      el.textContent = fmt(from + (to - from) * alpha);
+      el.style.setProperty("--scroll-draw-progress", String(alpha));
+    }
+    function update() {
+      if (!isVisible || paused) return;
+      let alpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, 1));
+      if (once) {
+        frozenAlpha = Math.max(frozenAlpha, alpha);
+        alpha = frozenAlpha;
+      }
+      currentAlpha = alpha;
+      applyAlpha(alpha);
+      if (alpha >= 1 && !completed) {
+        completed = true;
+        onComplete?.();
+      } else if (alpha < 1 && !once) {
+        completed = false;
+      }
+      rafId = requestAnimationFrame(update);
+    }
+    cacheTriggers();
+    {
+      const initAlpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, 1));
+      if (once && initAlpha > 0) frozenAlpha = initAlpha;
+      currentAlpha = initAlpha;
+      applyAlpha(initAlpha);
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          isVisible = e.isIntersecting;
+          if (isVisible && !paused) rafId = requestAnimationFrame(update);
+          else cancelAnimationFrame(rafId);
+        });
+      }
+    );
+    let resizeTimer;
+    function onResize() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(cacheTriggers, 150);
+    }
+    window.addEventListener("resize", onResize);
+    window.addEventListener("orientationchange", onResize);
+    observer.observe(el);
+    _register(el, {
+      type: "counter",
+      getProgress: () => currentAlpha,
+      getTrigger: () => ({ tStart, tEnd })
+    });
+    return {
+      destroy() {
+        cancelAnimationFrame(rafId);
+        observer.disconnect();
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("orientationchange", onResize);
+        clearTimeout(resizeTimer);
+        _unregister(el);
+      },
+      replay() {
+        frozenAlpha = -1;
+        completed = false;
+        currentAlpha = 0;
+        paused = false;
+        applyAlpha(0);
+      },
+      pause() {
+        paused = true;
+        cancelAnimationFrame(rafId);
+      },
+      resume() {
+        if (!paused) return;
+        paused = false;
+        if (isVisible) rafId = requestAnimationFrame(update);
+      },
+      seek(p) {
+        const clamped = Math.min(1, Math.max(0, p));
+        currentAlpha = clamped;
+        frozenAlpha = clamped;
+        paused = true;
+        cancelAnimationFrame(rafId);
+        applyAlpha(clamped);
+      },
+      getProgress() {
+        return currentAlpha;
+      }
+    };
+  }
+
+  // src/cinematic/index.ts
+  var SVGNS = "http://www.w3.org/2000/svg";
+  var PHOTO_ID = "cinematic-photo";
+  var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+  function parsePercent(v) {
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? clamp01(n / 100) : 0;
+  }
+  function easeOf(name) {
+    return EASINGS[name] ?? EASINGS.linear;
+  }
+  var noop = { destroy: () => {
+  }, getProgress: () => 0 };
+  var Cinematic = class {
+    constructor(options) {
+      if (typeof document === "undefined") {
+        this.mount = null;
+        return;
+      }
+      this.mount = typeof options.wrapper === "string" ? document.querySelector(options.wrapper) : options.wrapper;
+      if (!this.mount) warn("Cinematic: wrapper not found:", options.wrapper);
+    }
+    loadStory(story) {
+      const mount = this.mount;
+      if (typeof window === "undefined" || !mount) return noop;
+      mount.style.position = "relative";
+      mount.style.height = story.totalHeight;
+      mount.style.display = "block";
+      const stage = document.createElement("div");
+      stage.setAttribute("data-cinematic-stage", "");
+      stage.style.cssText = "position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;";
+      mount.appendChild(stage);
+      const records = [];
+      for (const scene of story.scenes) {
+        if (scene.background) {
+          const img = document.createElement("img");
+          img.id = PHOTO_ID;
+          img.src = scene.background;
+          img.alt = "";
+          img.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;";
+          stage.appendChild(img);
+        }
+        const drawAnims = scene.animations.filter((a) => a.type === "draw");
+        if (drawAnims.length) {
+          const svg = document.createElementNS(SVGNS, "svg");
+          svg.setAttribute("viewBox", `0 0 ${story.canvas.width} ${story.canvas.height}`);
+          svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+          svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%;overflow:visible;";
+          stage.appendChild(svg);
+          for (const a of drawAnims) {
+            const path = document.createElementNS(SVGNS, "path");
+            path.id = a.target.replace(/^#/, "");
+            path.setAttribute("d", a.d);
+            path.setAttribute("fill", "none");
+            path.setAttribute("stroke", a.stroke);
+            path.setAttribute("stroke-width", String(a.strokeWidth));
+            path.setAttribute("stroke-linecap", "round");
+            path.setAttribute("stroke-linejoin", "round");
+            const len = a.length || path.getTotalLength?.() || 0;
+            path.style.strokeDasharray = String(len);
+            path.style.strokeDashoffset = String(len);
+            svg.appendChild(path);
+            records.push({
+              kind: "draw",
+              el: path,
+              start: parsePercent(a.start),
+              end: parsePercent(a.end),
+              ease: easeOf(a.easing),
+              length: len
+            });
+          }
+        }
+        for (const a of scene.animations) {
+          if (a.type !== "fade") continue;
+          const el = stage.querySelector(a.target) ?? document.querySelector(a.target);
+          if (!el) continue;
+          el.style.opacity = String(a.from);
+          records.push({
+            kind: "fade",
+            el,
+            start: parsePercent(a.start),
+            end: parsePercent(a.end),
+            ease: EASINGS["ease-in-out"] ?? EASINGS.linear,
+            from: a.from,
+            to: a.to
+          });
+        }
+      }
+      let progress = 0;
+      const computeProgress2 = () => {
+        const scrollable = mount.offsetHeight - window.innerHeight;
+        if (scrollable <= 0) return mount.getBoundingClientRect().top <= 0 ? 1 : 0;
+        return clamp01(-mount.getBoundingClientRect().top / scrollable);
+      };
+      const apply = (global) => {
+        for (const r of records) {
+          const span = r.end - r.start;
+          const local = span <= 0 ? global >= r.end ? 1 : 0 : clamp01((global - r.start) / span);
+          const alpha = r.ease(local);
+          if (r.kind === "draw") {
+            r.el.style.strokeDashoffset = String(r.length * (1 - alpha));
+          } else {
+            r.el.style.opacity = String(r.from + (r.to - r.from) * alpha);
+          }
+        }
+      };
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        apply(1);
+        return { destroy: () => {
+        }, getProgress: () => 1 };
+      }
+      let rafId = 0;
+      let running = false;
+      let visible = false;
+      const tick = () => {
+        progress = computeProgress2();
+        apply(progress);
+        if (running) rafId = requestAnimationFrame(tick);
+      };
+      const start = () => {
+        if (running) return;
+        running = true;
+        rafId = requestAnimationFrame(tick);
+      };
+      const stop = () => {
+        running = false;
+        cancelAnimationFrame(rafId);
+      };
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            visible = e.isIntersecting;
+            if (visible) start();
+            else stop();
+          }
+        },
+        { threshold: 0 }
+      );
+      observer.observe(stage);
+      progress = computeProgress2();
+      apply(progress);
+      return {
+        destroy() {
+          stop();
+          observer.disconnect();
+        },
+        getProgress: () => progress
+      };
+    }
+  };
+
+  // src/index.ts
+  function scrollDraw(target, options) {
+    const noop2 = { destroy: () => {
+    }, replay: () => {
+    }, pause: () => {
+    }, resume: () => {
+    }, seek: () => {
+    }, getProgress: () => 0 };
+    if (typeof window === "undefined") return noop2;
+    const container = typeof target === "string" ? document.querySelector(target) : target;
+    if (!container) {
+      warn("Container not found:", target);
+      return noop2;
+    }
+    return createEngine(container, options);
+  }
+
+  // src/web-component/index.ts
+  if (typeof HTMLElement !== "undefined" && typeof customElements !== "undefined" && !customElements.get("scroll-draw")) {
+    class ScrollDrawElement extends HTMLElement {
+      constructor() {
+        super(...arguments);
+        this.instance = null;
+      }
+      connectedCallback() {
+        const opts = {};
+        const speed = this.getAttribute("speed");
+        const easing = this.getAttribute("easing");
+        const stagger = this.getAttribute("stagger");
+        const direction = this.getAttribute("direction");
+        const selector = this.getAttribute("selector");
+        if (speed) opts.speed = parseFloat(speed);
+        if (easing) opts.easing = easing;
+        if (stagger) opts.stagger = parseFloat(stagger);
+        if (direction) opts.direction = direction;
+        if (selector) opts.selector = selector;
+        if (this.hasAttribute("fade")) opts.fade = this.getAttribute("fade") !== "false";
+        this.instance = createEngine(this, opts);
+      }
+      disconnectedCallback() {
+        this.instance?.destroy();
+        this.instance = null;
+      }
+    }
+    customElements.define("scroll-draw", ScrollDrawElement);
+  }
+  return __toCommonJS(cdn_exports);
+})();