masoneffect 2.0.4 → 2.0.6

package/dist/svelte/index.mjs

@@ -4,6 +4,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { createEventDispatcher, onMount, onDestroy } from "svelte";
 function noop() {
 }
+function assign(tar, src) {
+  for (const k in src) tar[k] = src[k];
+  return (
+    /** @type {T & S} */
+    tar
+  );
+}
 function run(fn) {
   return fn();
 }
@@ -35,6 +42,36 @@ function subscribe(store, ...callbacks) {
 function component_subscribe(component, store, callback) {
   component.$$.on_destroy.push(subscribe(store, callback));
 }
+function create_slot(definition, ctx, $$scope, fn) {
+  if (definition) {
+    const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+    return definition[0](slot_ctx);
+  }
+}
+function get_slot_context(definition, ctx, $$scope, fn) {
+  return definition[1] && fn ? assign($$scope.ctx.slice(), definition[1](fn(ctx))) : $$scope.ctx;
+}
+function get_slot_changes(definition, $$scope, dirty, fn) {
+  if (definition[2] && fn) ;
+  return $$scope.dirty;
+}
+function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+  if (slot_changes) {
+    const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+    slot.p(slot_context, slot_changes);
+  }
+}
+function get_all_dirty_from_scope($$scope) {
+  if ($$scope.ctx.length > 32) {
+    const dirty = [];
+    const length = $$scope.ctx.length / 32;
+    for (let i = 0; i < length; i++) {
+      dirty[i] = -1;
+    }
+    return dirty;
+  }
+  return -1;
+}
 function insert(target, node, anchor) {
   target.insertBefore(node, anchor || null);
 }
@@ -130,12 +167,23 @@ function flush_render_callbacks(fns) {
   render_callbacks = filtered;
 }
 const outroing = /* @__PURE__ */ new Set();
+let outros;
 function transition_in(block, local) {
   if (block && block.i) {
     outroing.delete(block);
     block.i(local);
   }
 }
+function transition_out(block, local, detach2, callback) {
+  if (block && block.o) {
+    if (outroing.has(block)) return;
+    outroing.add(block);
+    outros.c.push(() => {
+      outroing.delete(block);
+    });
+    block.o(local);
+  }
+}
 function mount_component(component, target, anchor) {
   const { fragment, after_update } = component.$$;
   fragment && fragment.m(target, anchor);
@@ -276,6 +324,107 @@ class SvelteComponent {
 const PUBLIC_VERSION = "4";
 if (typeof window !== "undefined")
   (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
 function debounce(func, wait) {
   let timeout = null;
   return function executedFunction(...args) {
@@ -333,8 +482,7 @@ class TextToParticle {
     this.mouse = { x: 0, y: 0, down: false };
     this.animationId = null;
     this.isRunning = false;
-    this.isVisible = false;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.debounceDelay = options.debounceDelay ?? 150;
     const boundHandleResize = this.handleResize.bind(this);
     this.handleResize = debounce(boundHandleResize, this.debounceDelay);
@@ -349,39 +497,22 @@ class TextToParticle {
   init() {
     this.resize();
     this.setupEventListeners();
-    this.setupIntersectionObserver();
+    this.setupVisibilityManager();
     if (this.config.onReady) {
       this.config.onReady(this);
     }
   }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      this.isVisible = true;
-      this.start();
-      return;
-    }
-    if (this.intersectionObserver) {
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting) {
-            this.isVisible = true;
-            this.start();
-          } else {
-            this.isVisible = false;
-            this.stop();
-          }
-        }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: 0.1,
+      // 10% 이상 보일 때 동작
+      onVisible: () => {
+        this.start();
       },
-      {
-        threshold: 0.1
-        // 10% 이상 보일 때 동작
+      onHidden: () => {
+        this.stop();
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   resize() {
     const width = this.config.width || this.container.clientWidth || window.innerWidth;
@@ -618,7 +749,10 @@ class TextToParticle {
       p.y += p.vy;
     }
     this.ctx.fillStyle = this.config.particleColor;
-    const r = this.config.pointSize * this.DPR;
+    const baseSize = 1920;
+    const currentSize = Math.min(this.W, this.H) / this.DPR;
+    const sizeRatio = Math.max(0.5, Math.min(2, currentSize / baseSize));
+    const r = this.config.pointSize * this.DPR * sizeRatio;
     for (const p of this.particles) {
       this.ctx.beginPath();
       this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
@@ -690,16 +824,16 @@ class TextToParticle {
   destroy() {
     this.stop();
     this.removeEventListeners();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
     if (this.canvas && this.canvas.parentNode) {
       this.canvas.parentNode.removeChild(this.canvas);
     }
   }
 }
-const easingFunctions = {
+const easingFunctions$1 = {
   linear: (t) => t
 };
 class Count {
@@ -713,7 +847,7 @@ class Count {
       duration: options.duration ?? 2e3,
       startValue: options.startValue ?? 0,
       enabled: options.enabled ?? true,
-      easing: options.easing ?? easingFunctions.linear,
+      easing: options.easing ?? easingFunctions$1.linear,
       threshold: options.threshold ?? 0.2,
       rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
       triggerOnce: options.triggerOnce ?? false,
@@ -723,54 +857,31 @@ class Count {
     this.currentValue = this.config.startValue;
     this.startTime = null;
     this.animationFrameId = null;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.isRunning = false;
     this.hasTriggered = false;
     this.init();
   }
   init() {
     this.updateDisplay(this.config.startValue);
-    this.setupIntersectionObserver();
-  }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      if (this.config.enabled) {
-        this.start();
-      }
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        var _a;
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting) {
-            if (!this.hasTriggered && this.config.enabled) {
-              this.hasTriggered = true;
-              this.start();
-            }
-            if (this.config.triggerOnce) {
-              (_a = this.intersectionObserver) == null ? void 0 : _a.unobserve(this.container);
-            }
-          } else {
-            if (!this.config.triggerOnce) {
-              const rect = entry.boundingClientRect;
-              const viewportHeight = window.innerHeight;
-              const viewportWidth = window.innerWidth;
-              const isCompletelyOutOfViewport = rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth;
-              if (isCompletelyOutOfViewport && this.isRunning) {
-                this.reset();
-              }
-            }
-          }
+    this.setupVisibilityManager();
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
         }
       },
-      {
-        threshold: this.config.threshold,
-        rootMargin: this.config.rootMargin
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   start() {
     if (this.isRunning) return;
@@ -854,9 +965,9 @@ class Count {
   // 파괴 및 정리
   destroy() {
     this.stop();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
   }
 }
@@ -946,44 +1057,28 @@ class Typing {
     this.currentIndex = 0;
     this.displayedText = "";
     this.timeoutId = null;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.isRunning = false;
     this.hasTriggered = false;
     this.init();
   }
   init() {
     this.updateDisplay("");
-    this.setupIntersectionObserver();
-  }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      if (this.config.enabled) {
-        setTimeout(() => this.start(), this.config.delay);
-      }
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        var _a;
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting && !this.hasTriggered) {
-            if (this.config.enabled) {
-              setTimeout(() => this.start(), this.config.delay);
-            }
-            this.hasTriggered = true;
-            if (this.config.triggerOnce) {
-              (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
-            }
-          }
+    this.setupVisibilityManager();
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          setTimeout(() => this.start(), this.config.delay);
         }
       },
-      {
-        threshold: this.config.threshold,
-        rootMargin: this.config.rootMargin
+      onHidden: () => {
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
   // 한글의 경우 자음/모음이 하나씩 보이도록 합성
@@ -1079,13 +1174,236 @@ class Typing {
   }
   destroy() {
     this.stop();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
   }
 }
-function create_fragment$2(ctx) {
+const easingFunctions = {
+  easeOutCubic: (t) => --t * t * t + 1
+};
+class ScrollFadeIn {
+  // 계산된 거리 (px)
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      direction: options.direction ?? "bottom",
+      distance: options.distance ?? "50px",
+      duration: options.duration ?? 800,
+      easing: options.easing ?? easingFunctions.easeOutCubic,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.animationFrameId = null;
+    this.startTime = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.initialTransform = "";
+    this.targetDistance = 0;
+    this.init();
+  }
+  init() {
+    const computedStyle = window.getComputedStyle(this.container);
+    this.initialTransform = computedStyle.transform !== "none" ? computedStyle.transform : this.container.style.transform || "";
+    this.targetDistance = this.parseDistance(this.config.distance);
+    this.setInitialPosition();
+    this.setupVisibilityManager();
+  }
+  parseDistance(distance) {
+    const match = distance.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);
+    if (!match) {
+      const num = parseFloat(distance) || 50;
+      return num;
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case "px":
+        return value;
+      case "rem":
+      case "em":
+        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return value * fontSize;
+      case "%":
+        const rect = this.container.getBoundingClientRect();
+        const dimension = this.config.direction === "top" || this.config.direction === "bottom" ? rect.height : rect.width;
+        return value / 100 * dimension;
+      case "vh":
+        return value / 100 * window.innerHeight;
+      case "vw":
+        return value / 100 * window.innerWidth;
+      default:
+        return value;
+    }
+  }
+  setInitialPosition() {
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance;
+        break;
+      case "right":
+        translateX = this.targetDistance;
+        break;
+      case "bottom":
+        translateY = this.targetDistance;
+        break;
+      case "left":
+        translateX = -this.targetDistance;
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = "0";
+    this.container.style.transition = "none";
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
+        }
+      },
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.startTime = performance.now();
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.container.style.transition = "none";
+    this.animate();
+  }
+  animate() {
+    if (!this.isRunning) return;
+    const currentTime = performance.now();
+    const elapsed = currentTime - (this.startTime || 0);
+    const progress = Math.min(elapsed / this.config.duration, 1);
+    const easedProgress = this.config.easing(progress);
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance * (1 - easedProgress);
+        break;
+      case "right":
+        translateX = this.targetDistance * (1 - easedProgress);
+        break;
+      case "bottom":
+        translateY = this.targetDistance * (1 - easedProgress);
+        break;
+      case "left":
+        translateX = -this.targetDistance * (1 - easedProgress);
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = String(easedProgress);
+    if (progress < 1) {
+      this.animationFrameId = requestAnimationFrame(() => this.animate());
+    } else {
+      this.complete();
+    }
+  }
+  complete() {
+    this.isRunning = false;
+    if (this.initialTransform && this.initialTransform !== "none") {
+      this.container.style.transform = this.initialTransform;
+    } else {
+      this.container.style.transform = "";
+    }
+    this.container.style.opacity = "1";
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    if (this.config.onComplete) {
+      this.config.onComplete();
+    }
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+    this.setInitialPosition();
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasRunning = this.isRunning;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      easing: newConfig.easing ?? this.config.easing,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.distance) {
+      this.targetDistance = this.parseDistance(this.config.distance);
+    }
+    this.setInitialPosition();
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasRunning && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.style.transform = this.initialTransform || "";
+    this.container.style.opacity = "";
+    this.container.style.transition = "";
+  }
+}
+function create_fragment$3(ctx) {
   let div;
   return {
     c() {
@@ -1137,7 +1455,7 @@ function create_fragment$2(ctx) {
     }
   };
 }
-function instance_1$1($$self, $$props, $$invalidate) {
+function instance_1$2($$self, $$props, $$invalidate) {
   let { text = "mason effect" } = $$props;
   let { densityStep = 2 } = $$props;
   let { maxParticles = 3200 } = $$props;
@@ -1283,7 +1601,7 @@ function instance_1$1($$self, $$props, $$invalidate) {
 class TextToParticle_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1$1, create_fragment$2, safe_not_equal, {
+    init(this, options, instance_1$2, create_fragment$3, safe_not_equal, {
       text: 3,
       densityStep: 4,
       maxParticles: 5,
@@ -1318,7 +1636,7 @@ class TextToParticle_1 extends SvelteComponent {
     return this.$$.ctx[19];
   }
 }
-function create_fragment$1(ctx) {
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -1370,7 +1688,7 @@ function create_fragment$1(ctx) {
     }
   };
 }
-function instance_1($$self, $$props, $$invalidate) {
+function instance_1$1($$self, $$props, $$invalidate) {
   let { targetValue = 0 } = $$props;
   let { duration = 2e3 } = $$props;
   let { startValue = 0 } = $$props;
@@ -1510,7 +1828,7 @@ function instance_1($$self, $$props, $$invalidate) {
 class Count_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1, create_fragment$1, safe_not_equal, {
+    init(this, options, instance_1$1, create_fragment$2, safe_not_equal, {
       targetValue: 3,
       duration: 4,
       startValue: 5,
@@ -1548,7 +1866,7 @@ class Count_1 extends SvelteComponent {
     return this.$$.ctx[16];
   }
 }
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
   let div;
   return {
     c() {
@@ -1656,7 +1974,7 @@ function instance($$self, $$props, $$invalidate) {
 class Typing_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance, create_fragment, safe_not_equal, {
+    init(this, options, instance, create_fragment$1, safe_not_equal, {
       start: 3,
       stop: 4,
       reset: 5,
@@ -1680,9 +1998,281 @@ class Typing_1 extends SvelteComponent {
     return this.$$.ctx[7];
   }
 }
+function create_fragment(ctx) {
+  let div;
+  let current;
+  const default_slot_template = (
+    /*#slots*/
+    ctx[18].default
+  );
+  const default_slot = create_slot(
+    default_slot_template,
+    ctx,
+    /*$$scope*/
+    ctx[17],
+    null
+  );
+  return {
+    c() {
+      div = element("div");
+      if (default_slot) default_slot.c();
+      attr(
+        div,
+        "class",
+        /*className*/
+        ctx[0]
+      );
+      attr(
+        div,
+        "style",
+        /*style*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      if (default_slot) {
+        default_slot.m(div, null);
+      }
+      ctx[19](div);
+      current = true;
+    },
+    p(ctx2, [dirty]) {
+      if (default_slot) {
+        if (default_slot.p && (!current || dirty & /*$$scope*/
+        131072)) {
+          update_slot_base(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            /*$$scope*/
+            ctx2[17],
+            !current ? get_all_dirty_from_scope(
+              /*$$scope*/
+              ctx2[17]
+            ) : get_slot_changes(
+              default_slot_template,
+              /*$$scope*/
+              ctx2[17],
+              dirty,
+              null
+            ),
+            null
+          );
+        }
+      }
+      if (!current || dirty & /*className*/
+      1) {
+        attr(
+          div,
+          "class",
+          /*className*/
+          ctx2[0]
+        );
+      }
+      if (!current || dirty & /*style*/
+      2) {
+        attr(
+          div,
+          "style",
+          /*style*/
+          ctx2[1]
+        );
+      }
+    },
+    i(local) {
+      if (current) return;
+      transition_in(default_slot, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(default_slot, local);
+      current = false;
+    },
+    d(detaching) {
+      if (detaching) {
+        detach(div);
+      }
+      if (default_slot) default_slot.d(detaching);
+      ctx[19](null);
+    }
+  };
+}
+function instance_1($$self, $$props, $$invalidate) {
+  let { $$slots: slots = {}, $$scope } = $$props;
+  let { direction = "bottom" } = $$props;
+  let { distance = "50px" } = $$props;
+  let { duration = 800 } = $$props;
+  let { easing = (t) => t } = $$props;
+  let { threshold = 0.1 } = $$props;
+  let { rootMargin = "0px" } = $$props;
+  let { triggerOnce = false } = $$props;
+  let { enabled = true } = $$props;
+  let { className = "" } = $$props;
+  let { style = {} } = $$props;
+  const dispatch = createEventDispatcher();
+  let container;
+  let instance2 = null;
+  onMount(() => {
+    if (!container) return;
+    const options = {
+      direction,
+      distance,
+      duration,
+      easing,
+      threshold,
+      rootMargin,
+      triggerOnce,
+      enabled,
+      onStart: () => {
+        dispatch("start");
+      },
+      onComplete: () => {
+        dispatch("complete");
+      }
+    };
+    $$invalidate(16, instance2 = new ScrollFadeIn(container, options));
+  });
+  onDestroy(() => {
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(16, instance2 = null);
+    }
+  });
+  function start() {
+    if (instance2) {
+      instance2.start();
+    }
+  }
+  function stop() {
+    if (instance2) {
+      instance2.stop();
+    }
+  }
+  function reset() {
+    if (instance2) {
+      instance2.reset();
+    }
+  }
+  function updateConfig(config) {
+    if (instance2) {
+      instance2.updateConfig(config);
+    }
+  }
+  function destroy() {
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(16, instance2 = null);
+    }
+  }
+  function div_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      container = $$value;
+      $$invalidate(2, container);
+    });
+  }
+  $$self.$$set = ($$props2) => {
+    if ("direction" in $$props2) $$invalidate(3, direction = $$props2.direction);
+    if ("distance" in $$props2) $$invalidate(4, distance = $$props2.distance);
+    if ("duration" in $$props2) $$invalidate(5, duration = $$props2.duration);
+    if ("easing" in $$props2) $$invalidate(6, easing = $$props2.easing);
+    if ("threshold" in $$props2) $$invalidate(7, threshold = $$props2.threshold);
+    if ("rootMargin" in $$props2) $$invalidate(8, rootMargin = $$props2.rootMargin);
+    if ("triggerOnce" in $$props2) $$invalidate(9, triggerOnce = $$props2.triggerOnce);
+    if ("enabled" in $$props2) $$invalidate(10, enabled = $$props2.enabled);
+    if ("className" in $$props2) $$invalidate(0, className = $$props2.className);
+    if ("style" in $$props2) $$invalidate(1, style = $$props2.style);
+    if ("$$scope" in $$props2) $$invalidate(17, $$scope = $$props2.$$scope);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & /*instance, direction, distance, duration, easing, threshold, rootMargin, triggerOnce, enabled*/
+    67576) {
+      {
+        if (instance2) {
+          instance2.updateConfig({
+            direction,
+            distance,
+            duration,
+            easing,
+            threshold,
+            rootMargin,
+            triggerOnce,
+            enabled,
+            onStart: () => {
+              dispatch("start");
+            },
+            onComplete: () => {
+              dispatch("complete");
+            }
+          });
+        }
+      }
+    }
+  };
+  return [
+    className,
+    style,
+    container,
+    direction,
+    distance,
+    duration,
+    easing,
+    threshold,
+    rootMargin,
+    triggerOnce,
+    enabled,
+    start,
+    stop,
+    reset,
+    updateConfig,
+    destroy,
+    instance2,
+    $$scope,
+    slots,
+    div_binding
+  ];
+}
+class ScrollFadeIn_1 extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance_1, create_fragment, safe_not_equal, {
+      direction: 3,
+      distance: 4,
+      duration: 5,
+      easing: 6,
+      threshold: 7,
+      rootMargin: 8,
+      triggerOnce: 9,
+      enabled: 10,
+      className: 0,
+      style: 1,
+      start: 11,
+      stop: 12,
+      reset: 13,
+      updateConfig: 14,
+      destroy: 15
+    });
+  }
+  get start() {
+    return this.$$.ctx[11];
+  }
+  get stop() {
+    return this.$$.ctx[12];
+  }
+  get reset() {
+    return this.$$.ctx[13];
+  }
+  get updateConfig() {
+    return this.$$.ctx[14];
+  }
+  get destroy() {
+    return this.$$.ctx[15];
+  }
+}
 export {
   Count_1 as Count,
   TextToParticle_1 as MasonEffect,
+  ScrollFadeIn_1 as ScrollFadeIn,
   TextToParticle_1 as TextToParticle,
   Typing_1 as Typing,
   TextToParticle_1 as default