masoneffect 2.0.8 → 2.0.10

package/dist/svelte/index.mjs

@@ -330,6 +330,8 @@ class VisibilityManager {
     this.options = {
       threshold: options.threshold ?? 0.1,
       rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
       onVisible: options.onVisible,
       onHidden: options.onHidden
     };
@@ -367,7 +369,9 @@ class VisibilityManager {
       },
       {
         threshold: this.options.threshold,
-        rootMargin: this.options.rootMargin
+        rootMargin: this.options.rootMargin,
+        root: this.options.root || null
+        // null이면 viewport 기준, HTMLElement면 해당 요소 기준
       }
     );
     this.intersectionObserver.observe(this.container);
@@ -834,7 +838,7 @@ class TextToParticle {
     }
   }
 }
-const easingFunctions$1 = {
+const easingFunctions = {
   linear: (t) => t
 };
 class Count {
@@ -848,7 +852,7 @@ class Count {
       duration: options.duration ?? 2e3,
       startValue: options.startValue ?? 0,
       enabled: options.enabled ?? true,
-      easing: options.easing ?? easingFunctions$1.linear,
+      easing: options.easing ?? easingFunctions.linear,
       threshold: options.threshold ?? 0.2,
       rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
       triggerOnce: options.triggerOnce ?? false,
@@ -1181,9 +1185,7 @@ class Typing {
     }
   }
 }
-const easingFunctions = {
-  easeOutCubic: (t) => --t * t * t + 1
-};
+const defaultEasing = (t) => --t * t * t + 1;
 class ScrollFadeIn {
   // 계산된 거리 (px)
   constructor(container, options = {}) {
@@ -1195,14 +1197,16 @@ class ScrollFadeIn {
       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",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
       triggerOnce: options.triggerOnce ?? false,
       enabled: options.enabled ?? true,
       onStart: options.onStart || null,
       onComplete: options.onComplete || null
     };
+    this.easing = defaultEasing;
     this.visibilityManager = null;
     this.animationFrameId = null;
     this.startTime = null;
@@ -1278,15 +1282,23 @@ class ScrollFadeIn {
     this.visibilityManager = new VisibilityManager(this.container, {
       threshold: this.config.threshold,
       rootMargin: this.config.rootMargin,
+      root: this.config.root,
+      // 내부 스크롤 컨테이너 지원
       onVisible: () => {
-        if (!this.hasTriggered && this.config.enabled) {
-          this.hasTriggered = true;
-          this.start();
+        if (this.config.enabled) {
+          if (!this.config.triggerOnce || !this.hasTriggered) {
+            this.hasTriggered = true;
+            this.start();
+          }
         }
       },
       onHidden: () => {
-        if (!this.config.triggerOnce && this.isRunning) {
-          this.reset();
+        if (this.config.enabled) {
+          this.stop();
+          if (!this.config.triggerOnce) {
+            this.hasTriggered = false;
+          }
+          this.setInitialPosition();
         }
       }
     });
@@ -1306,7 +1318,7 @@ class ScrollFadeIn {
     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 easedProgress = this.easing(progress);
     const direction = this.config.direction;
     let translateX = 0;
     let translateY = 0;
@@ -1373,7 +1385,6 @@ class ScrollFadeIn {
     this.config = {
       ...this.config,
       ...newConfig,
-      easing: newConfig.easing ?? this.config.easing,
       onStart: newConfig.onStart ?? this.config.onStart,
       onComplete: newConfig.onComplete ?? this.config.onComplete
     };
@@ -1381,7 +1392,7 @@ class ScrollFadeIn {
       this.targetDistance = this.parseDistance(this.config.distance);
     }
     this.setInitialPosition();
-    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0 || newConfig.root !== void 0) {
       if (this.visibilityManager) {
         this.visibilityManager.destroy();
         this.visibilityManager = null;
@@ -2104,9 +2115,9 @@ function instance_1($$self, $$props, $$invalidate) {
   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 { root = null } = $$props;
   let { triggerOnce = false } = $$props;
   let { enabled = true } = $$props;
   let { className = "" } = $$props;
@@ -2120,9 +2131,9 @@ function instance_1($$self, $$props, $$invalidate) {
       direction,
       distance,
       duration,
-      easing,
       threshold,
       rootMargin,
+      root,
       triggerOnce,
       enabled,
       onStart: () => {
@@ -2176,9 +2187,9 @@ function instance_1($$self, $$props, $$invalidate) {
     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 ("threshold" in $$props2) $$invalidate(6, threshold = $$props2.threshold);
+    if ("rootMargin" in $$props2) $$invalidate(7, rootMargin = $$props2.rootMargin);
+    if ("root" in $$props2) $$invalidate(8, root = $$props2.root);
     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);
@@ -2186,7 +2197,7 @@ function instance_1($$self, $$props, $$invalidate) {
     if ("$$scope" in $$props2) $$invalidate(17, $$scope = $$props2.$$scope);
   };
   $$self.$$.update = () => {
-    if ($$self.$$.dirty & /*instance, direction, distance, duration, easing, threshold, rootMargin, triggerOnce, enabled*/
+    if ($$self.$$.dirty & /*instance, direction, distance, duration, threshold, rootMargin, root, triggerOnce, enabled*/
     67576) {
       {
         if (instance2) {
@@ -2194,9 +2205,9 @@ function instance_1($$self, $$props, $$invalidate) {
             direction,
             distance,
             duration,
-            easing,
             threshold,
             rootMargin,
+            root,
             triggerOnce,
             enabled,
             onStart: () => {
@@ -2217,9 +2228,9 @@ function instance_1($$self, $$props, $$invalidate) {
     direction,
     distance,
     duration,
-    easing,
     threshold,
     rootMargin,
+    root,
     triggerOnce,
     enabled,
     start,
@@ -2240,9 +2251,9 @@ class ScrollFadeIn_1 extends SvelteComponent {
       direction: 3,
       distance: 4,
       duration: 5,
-      easing: 6,
-      threshold: 7,
-      rootMargin: 8,
+      threshold: 6,
+      rootMargin: 7,
+      root: 8,
       triggerOnce: 9,
       enabled: 10,
       className: 0,

package/dist/svelte/scrollFadeIn/index.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty,i=(i,n,e)=>((i,n,e)=>n in i?t(i,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[n]=e)(i,"symbol"!=typeof n?n+"":n,e);const n=require("svelte");function e(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function c(t,i){return t!=t?i==i:t!==i||t&&"object"==typeof t||"function"==typeof t}function h(t,i,n,e){return t[1]&&e?function(t,i){for(const n in i)t[n]=i[n];return t}(n.ctx.slice(),t[1](e(i))):n.ctx}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t,i,n){null==n?t.removeAttribute(i):t.getAttribute(i)!==n&&t.setAttribute(i,n)}let u;function g(t){u=t}const f=[],p=[];let m=[];const b=[],y=Promise.resolve();let $=!1;function v(t){m.push(t)}const w=new Set;let x=0;function O(){if(0!==x)return;const t=u;do{try{for(;x<f.length;){const t=f[x];x++,g(t),M(t.$$)}}catch(i){throw f.length=0,x=0,i}for(g(null),f.length=0,x=0;p.length;)p.pop()();for(let t=0;t<m.length;t+=1){const i=m[t];w.has(i)||(w.add(i),i())}m.length=0}while(f.length);for(;b.length;)b.pop()();$=!1,w.clear(),g(t)}function M(t){if(null!==t.fragment){t.update(),r(t.before_update);const i=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,i),t.after_update.forEach(v)}}const V=new Set;function C(t,i){t&&t.i&&(V.delete(t),t.i(i))}function _(t,i){const n=t.$$;null!==n.fragment&&(!function(t){const i=[],n=[];m.forEach(e=>-1===t.indexOf(e)?i.push(e):n.push(e)),n.forEach(t=>t()),m=i}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(i),n.on_destroy=n.fragment=null,n.ctx=[])}function I(t,i){-1===t.$$.dirty[0]&&(f.push(t),$||($=!0,y.then(O)),t.$$.dirty.fill(0)),t.$$.dirty[i/31|0]|=1<<i%31}function S(t,i,n,c,h,d,f=null,p=[-1]){const m=u;g(t);const b=t.$$={fragment:null,ctx:[],props:d,update:e,not_equal:h,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(i.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:i.target||m.$$.root};f&&f(b.root);let y=!1;if(b.ctx=n?n(t,i.props||{},(i,n,...e)=>{const s=e.length?e[0]:n;return b.ctx&&h(b.ctx[i],b.ctx[i]=s)&&(!b.skip_bound&&b.bound[i]&&b.bound[i](s),y&&I(t,i)),n}):[],b.update(),y=!0,r(b.before_update),b.fragment=!!c&&c(b.ctx),i.target){if(i.hydrate){const t=($=i.target,Array.from($.childNodes));b.fragment&&b.fragment.l(t),t.forEach(l)}else b.fragment&&b.fragment.c();i.intro&&C(t.$$.fragment),function(t,i,n){const{fragment:e,after_update:o}=t.$$;e&&e.m(i,n),v(()=>{const i=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...i):r(i),t.$$.on_mount=[]}),o.forEach(v)}(t,i.target,i.anchor),O()}var $;g(m)}class D{constructor(){i(this,"$$"),i(this,"$$set")}$destroy(){_(this,1),this.$destroy=e}$on(t,i){if(!a(i))return e;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(i),()=>{const t=n.indexOf(i);-1!==t&&n.splice(t,1)}}$set(t){var i;this.$$set&&(i=t,0!==Object.keys(i).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class H{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}const P={easeOutCubic:t=>--t*t*t+1};class T{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={direction:i.direction??"bottom",distance:i.distance??"50px",duration:i.duration??800,easing:i.easing??P.easeOutCubic,threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",triggerOnce:i.triggerOnce??!1,enabled:i.enabled??!0,onStart:i.onStart||null,onComplete:i.onComplete||null},this.visibilityManager=null,this.animationFrameId=null,this.startTime=null,this.isRunning=!1,this.hasTriggered=!1,this.initialTransform="",this.targetDistance=0,this.init()}init(){const t=window.getComputedStyle(this.container);this.initialTransform="none"!==t.transform?t.transform:this.container.style.transform||"",this.targetDistance=this.parseDistance(this.config.distance),this.setInitialPosition(),this.setupVisibilityManager()}parseDistance(t){const i=t.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);if(!i){return parseFloat(t)||50}const n=parseFloat(i[1]);switch(i[2]){case"px":default:return n;case"rem":case"em":return n*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16);case"%":const t=this.container.getBoundingClientRect();return n/100*("top"===this.config.direction||"bottom"===this.config.direction?t.height:t.width);case"vh":return n/100*window.innerHeight;case"vw":return n/100*window.innerWidth}}setInitialPosition(){let t=0,i=0;switch(this.config.direction){case"top":i=-this.targetDistance;break;case"right":t=this.targetDistance;break;case"bottom":i=this.targetDistance;break;case"left":t=-this.targetDistance}const n=this.initialTransform||"",e=`translate(${t}px, ${i}px)`;this.container.style.transform=n&&"none"!==n?`${e} ${n}`:e,this.container.style.opacity="0",this.container.style.transition="none"}setupVisibilityManager(){this.visibilityManager=new H(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start())},onHidden:()=>{!this.config.triggerOnce&&this.isRunning&&this.reset()}})}start(){this.isRunning||(this.isRunning=!0,this.startTime=performance.now(),this.config.onStart&&this.config.onStart(),this.container.style.transition="none",this.animate())}animate(){if(!this.isRunning)return;const t=performance.now()-(this.startTime||0),i=Math.min(t/this.config.duration,1),n=this.config.easing(i);let e=0,s=0;switch(this.config.direction){case"top":s=-this.targetDistance*(1-n);break;case"right":e=this.targetDistance*(1-n);break;case"bottom":s=this.targetDistance*(1-n);break;case"left":e=-this.targetDistance*(1-n)}const o=this.initialTransform||"",r=`translate(${e}px, ${s}px)`;this.container.style.transform=o&&"none"!==o?`${r} ${o}`:r,this.container.style.opacity=String(n),i<1?this.animationFrameId=requestAnimationFrame(()=>this.animate()):this.complete()}complete(){this.isRunning=!1,this.initialTransform&&"none"!==this.initialTransform?this.container.style.transform=this.initialTransform:this.container.style.transform="",this.container.style.opacity="1",this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.config.onComplete&&this.config.onComplete()}reset(){this.stop(),this.hasTriggered=!1,this.setInitialPosition()}stop(){this.isRunning=!1,this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,easing:t.easing??this.config.easing,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},t.distance&&(this.targetDistance=this.parseDistance(this.config.distance)),this.setInitialPosition(),void 0===t.threshold&&void 0===t.rootMargin||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),i&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.style.transform=this.initialTransform||"",this.container.style.opacity="",this.container.style.transition=""}}function k(t){let i,n;const e=t[18].default,s=function(t,i,n,e){if(t){const s=h(t,i,n,e);return t[0](s)}}(e,t,t[17],null);return{c(){var n;n="div",i=document.createElement(n),s&&s.c(),d(i,"class",t[0]),d(i,"style",t[1])},m(e,o){!function(t,i,n){t.insertBefore(i,n||null)}(e,i,o),s&&s.m(i,null),t[19](i),n=!0},p(t,[o]){var r,a;s&&s.p&&(!n||131072&o)&&function(t,i,n,e,s,o){if(s){const r=h(i,n,e,o);t.p(r,s)}}(s,e,t,t[17],n?(r=e,a=t[17],r[2],a.dirty):function(t){if(t.ctx.length>32){const i=[],n=t.ctx.length/32;for(let t=0;t<n;t++)i[t]=-1;return i}return-1}(t[17]),null),(!n||1&o)&&d(i,"class",t[0]),(!n||2&o)&&d(i,"style",t[1])},i(t){n||(C(s,t),n=!0)},o(t){!function(t,i){if(t&&t.o){if(V.has(t))return;V.add(t),(void 0).c.push(()=>{V.delete(t)}),t.o(i)}}(s,t),n=!1},d(n){n&&l(i),s&&s.d(n),t[19](null)}}}function F(t,i,e){let{$$slots:s={},$$scope:o}=i,{direction:r="bottom"}=i,{distance:a="50px"}=i,{duration:c=800}=i,{easing:h=t=>t}=i,{threshold:l=.1}=i,{rootMargin:d="0px"}=i,{triggerOnce:u=!1}=i,{enabled:g=!0}=i,{className:f=""}=i,{style:m={}}=i;const b=n.createEventDispatcher();let y,$=null;return n.onMount(()=>{if(!y)return;e(16,$=new T(y,{direction:r,distance:a,duration:c,easing:h,threshold:l,rootMargin:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}}))}),n.onDestroy(()=>{$&&($.destroy(),e(16,$=null))}),t.$$set=t=>{"direction"in t&&e(3,r=t.direction),"distance"in t&&e(4,a=t.distance),"duration"in t&&e(5,c=t.duration),"easing"in t&&e(6,h=t.easing),"threshold"in t&&e(7,l=t.threshold),"rootMargin"in t&&e(8,d=t.rootMargin),"triggerOnce"in t&&e(9,u=t.triggerOnce),"enabled"in t&&e(10,g=t.enabled),"className"in t&&e(0,f=t.className),"style"in t&&e(1,m=t.style),"$$scope"in t&&e(17,o=t.$$scope)},t.$$.update=()=>{67576&t.$$.dirty&&$&&$.updateConfig({direction:r,distance:a,duration:c,easing:h,threshold:l,rootMargin:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}})},[f,m,y,r,a,c,h,l,d,u,g,function(){$&&$.start()},function(){$&&$.stop()},function(){$&&$.reset()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),e(16,$=null))},$,o,s,function(t){p[t?"unshift":"push"](()=>{y=t,e(2,y)})}]}module.exports=class extends D{constructor(t){super(),S(this,t,F,k,c,{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]}};
+"use strict";var t=Object.defineProperty,i=(i,n,e)=>((i,n,e)=>n in i?t(i,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[n]=e)(i,"symbol"!=typeof n?n+"":n,e);const n=require("svelte");function e(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function c(t,i){return t!=t?i==i:t!==i||t&&"object"==typeof t||"function"==typeof t}function h(t,i,n,e){return t[1]&&e?function(t,i){for(const n in i)t[n]=i[n];return t}(n.ctx.slice(),t[1](e(i))):n.ctx}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t,i,n){null==n?t.removeAttribute(i):t.getAttribute(i)!==n&&t.setAttribute(i,n)}let u;function g(t){u=t}const f=[],p=[];let m=[];const b=[],y=Promise.resolve();let $=!1;function v(t){m.push(t)}const w=new Set;let x=0;function O(){if(0!==x)return;const t=u;do{try{for(;x<f.length;){const t=f[x];x++,g(t),M(t.$$)}}catch(i){throw f.length=0,x=0,i}for(g(null),f.length=0,x=0;p.length;)p.pop()();for(let t=0;t<m.length;t+=1){const i=m[t];w.has(i)||(w.add(i),i())}m.length=0}while(f.length);for(;b.length;)b.pop()();$=!1,w.clear(),g(t)}function M(t){if(null!==t.fragment){t.update(),r(t.before_update);const i=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,i),t.after_update.forEach(v)}}const V=new Set;function C(t,i){t&&t.i&&(V.delete(t),t.i(i))}function _(t,i){const n=t.$$;null!==n.fragment&&(!function(t){const i=[],n=[];m.forEach(e=>-1===t.indexOf(e)?i.push(e):n.push(e)),n.forEach(t=>t()),m=i}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(i),n.on_destroy=n.fragment=null,n.ctx=[])}function I(t,i){-1===t.$$.dirty[0]&&(f.push(t),$||($=!0,y.then(O)),t.$$.dirty.fill(0)),t.$$.dirty[i/31|0]|=1<<i%31}function S(t,i,n,c,h,d,f=null,p=[-1]){const m=u;g(t);const b=t.$$={fragment:null,ctx:[],props:d,update:e,not_equal:h,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(i.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:i.target||m.$$.root};f&&f(b.root);let y=!1;if(b.ctx=n?n(t,i.props||{},(i,n,...e)=>{const s=e.length?e[0]:n;return b.ctx&&h(b.ctx[i],b.ctx[i]=s)&&(!b.skip_bound&&b.bound[i]&&b.bound[i](s),y&&I(t,i)),n}):[],b.update(),y=!0,r(b.before_update),b.fragment=!!c&&c(b.ctx),i.target){if(i.hydrate){const t=($=i.target,Array.from($.childNodes));b.fragment&&b.fragment.l(t),t.forEach(l)}else b.fragment&&b.fragment.c();i.intro&&C(t.$$.fragment),function(t,i,n){const{fragment:e,after_update:o}=t.$$;e&&e.m(i,n),v(()=>{const i=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...i):r(i),t.$$.on_mount=[]}),o.forEach(v)}(t,i.target,i.anchor),O()}var $;g(m)}class D{constructor(){i(this,"$$"),i(this,"$$set")}$destroy(){_(this,1),this.$destroy=e}$on(t,i){if(!a(i))return e;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(i),()=>{const t=n.indexOf(i);-1!==t&&n.splice(t,1)}}$set(t){var i;this.$$set&&(i=t,0!==Object.keys(i).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class H{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",root:i.root??null,onVisible:i.onVisible,onHidden:i.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}const P=t=>--t*t*t+1;class T{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={direction:i.direction??"bottom",distance:i.distance??"50px",duration:i.duration??800,threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",root:i.root??null,triggerOnce:i.triggerOnce??!1,enabled:i.enabled??!0,onStart:i.onStart||null,onComplete:i.onComplete||null},this.easing=P,this.visibilityManager=null,this.animationFrameId=null,this.startTime=null,this.isRunning=!1,this.hasTriggered=!1,this.initialTransform="",this.targetDistance=0,this.init()}init(){const t=window.getComputedStyle(this.container);this.initialTransform="none"!==t.transform?t.transform:this.container.style.transform||"",this.targetDistance=this.parseDistance(this.config.distance),this.setInitialPosition(),this.setupVisibilityManager()}parseDistance(t){const i=t.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);if(!i){return parseFloat(t)||50}const n=parseFloat(i[1]);switch(i[2]){case"px":default:return n;case"rem":case"em":return n*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16);case"%":const t=this.container.getBoundingClientRect();return n/100*("top"===this.config.direction||"bottom"===this.config.direction?t.height:t.width);case"vh":return n/100*window.innerHeight;case"vw":return n/100*window.innerWidth}}setInitialPosition(){let t=0,i=0;switch(this.config.direction){case"top":i=-this.targetDistance;break;case"right":t=this.targetDistance;break;case"bottom":i=this.targetDistance;break;case"left":t=-this.targetDistance}const n=this.initialTransform||"",e=`translate(${t}px, ${i}px)`;this.container.style.transform=n&&"none"!==n?`${e} ${n}`:e,this.container.style.opacity="0",this.container.style.transition="none"}setupVisibilityManager(){this.visibilityManager=new H(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1),this.setInitialPosition())}})}start(){this.isRunning||(this.isRunning=!0,this.startTime=performance.now(),this.config.onStart&&this.config.onStart(),this.container.style.transition="none",this.animate())}animate(){if(!this.isRunning)return;const t=performance.now()-(this.startTime||0),i=Math.min(t/this.config.duration,1),n=this.easing(i);let e=0,s=0;switch(this.config.direction){case"top":s=-this.targetDistance*(1-n);break;case"right":e=this.targetDistance*(1-n);break;case"bottom":s=this.targetDistance*(1-n);break;case"left":e=-this.targetDistance*(1-n)}const o=this.initialTransform||"",r=`translate(${e}px, ${s}px)`;this.container.style.transform=o&&"none"!==o?`${r} ${o}`:r,this.container.style.opacity=String(n),i<1?this.animationFrameId=requestAnimationFrame(()=>this.animate()):this.complete()}complete(){this.isRunning=!1,this.initialTransform&&"none"!==this.initialTransform?this.container.style.transform=this.initialTransform:this.container.style.transform="",this.container.style.opacity="1",this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.config.onComplete&&this.config.onComplete()}reset(){this.stop(),this.hasTriggered=!1,this.setInitialPosition()}stop(){this.isRunning=!1,this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},t.distance&&(this.targetDistance=this.parseDistance(this.config.distance)),this.setInitialPosition(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),i&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.style.transform=this.initialTransform||"",this.container.style.opacity="",this.container.style.transition=""}}function k(t){let i,n;const e=t[18].default,s=function(t,i,n,e){if(t){const s=h(t,i,n,e);return t[0](s)}}(e,t,t[17],null);return{c(){var n;n="div",i=document.createElement(n),s&&s.c(),d(i,"class",t[0]),d(i,"style",t[1])},m(e,o){!function(t,i,n){t.insertBefore(i,n||null)}(e,i,o),s&&s.m(i,null),t[19](i),n=!0},p(t,[o]){var r,a;s&&s.p&&(!n||131072&o)&&function(t,i,n,e,s,o){if(s){const r=h(i,n,e,o);t.p(r,s)}}(s,e,t,t[17],n?(r=e,a=t[17],r[2],a.dirty):function(t){if(t.ctx.length>32){const i=[],n=t.ctx.length/32;for(let t=0;t<n;t++)i[t]=-1;return i}return-1}(t[17]),null),(!n||1&o)&&d(i,"class",t[0]),(!n||2&o)&&d(i,"style",t[1])},i(t){n||(C(s,t),n=!0)},o(t){!function(t,i){if(t&&t.o){if(V.has(t))return;V.add(t),(void 0).c.push(()=>{V.delete(t)}),t.o(i)}}(s,t),n=!1},d(n){n&&l(i),s&&s.d(n),t[19](null)}}}function F(t,i,e){let{$$slots:s={},$$scope:o}=i,{direction:r="bottom"}=i,{distance:a="50px"}=i,{duration:c=800}=i,{threshold:h=.1}=i,{rootMargin:l="0px"}=i,{root:d=null}=i,{triggerOnce:u=!1}=i,{enabled:g=!0}=i,{className:f=""}=i,{style:m={}}=i;const b=n.createEventDispatcher();let y,$=null;return n.onMount(()=>{if(!y)return;e(16,$=new T(y,{direction:r,distance:a,duration:c,threshold:h,rootMargin:l,root:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}}))}),n.onDestroy(()=>{$&&($.destroy(),e(16,$=null))}),t.$$set=t=>{"direction"in t&&e(3,r=t.direction),"distance"in t&&e(4,a=t.distance),"duration"in t&&e(5,c=t.duration),"threshold"in t&&e(6,h=t.threshold),"rootMargin"in t&&e(7,l=t.rootMargin),"root"in t&&e(8,d=t.root),"triggerOnce"in t&&e(9,u=t.triggerOnce),"enabled"in t&&e(10,g=t.enabled),"className"in t&&e(0,f=t.className),"style"in t&&e(1,m=t.style),"$$scope"in t&&e(17,o=t.$$scope)},t.$$.update=()=>{67576&t.$$.dirty&&$&&$.updateConfig({direction:r,distance:a,duration:c,threshold:h,rootMargin:l,root:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}})},[f,m,y,r,a,c,h,l,d,u,g,function(){$&&$.start()},function(){$&&$.stop()},function(){$&&$.reset()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),e(16,$=null))},$,o,s,function(t){p[t?"unshift":"push"](()=>{y=t,e(2,y)})}]}module.exports=class extends D{constructor(t){super(),S(this,t,F,k,c,{direction:3,distance:4,duration:5,threshold:6,rootMargin:7,root: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]}};

package/dist/svelte/scrollFadeIn/index.d.ts

@@ -36,15 +36,13 @@ export declare interface CountOptions {
     onComplete?: () => void;
 }
 
-declare const easingFunctions: {
+export declare const easingFunctions: {
     linear: (t: number) => number;
     easeInQuad: (t: number) => number;
     easeOutQuad: (t: number) => number;
     easeInOutQuad: (t: number) => number;
     easeOutCubic: (t: number) => number;
 };
-export { easingFunctions }
-export { easingFunctions as scrollFadeInEasingFunctions }
 
 export declare interface Particle {
     x: number;
@@ -60,11 +58,12 @@ export declare interface Particle {
 
 export declare class ScrollFadeIn {
     container: HTMLElement;
-    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
-        easing: (t: number) => number;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
         onStart: ScrollFadeInOptions['onStart'];
         onComplete: ScrollFadeInOptions['onComplete'];
     };
+    private easing;
     visibilityManager: VisibilityManager | null;
     animationFrameId: number | null;
     startTime: number | null;
@@ -90,9 +89,9 @@ export declare interface ScrollFadeInOptions {
     direction?: 'top' | 'right' | 'bottom' | 'left';
     distance?: string;
     duration?: number;
-    easing?: (t: number) => number;
     threshold?: number;
     rootMargin?: string;
+    root?: HTMLElement | null;
     triggerOnce?: boolean;
     enabled?: boolean;
     onStart?: () => void;
@@ -265,6 +264,7 @@ declare class TextToParticle {
     declare interface VisibilityManagerOptions {
         threshold?: number;
         rootMargin?: string;
+        root?: HTMLElement | null;
         onVisible?: () => void;
         onHidden?: () => void;
     }

package/dist/svelte/scrollFadeIn/index.mjs

@@ -317,6 +317,8 @@ class VisibilityManager {
     this.options = {
       threshold: options.threshold ?? 0.1,
       rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
       onVisible: options.onVisible,
       onHidden: options.onHidden
     };
@@ -354,7 +356,9 @@ class VisibilityManager {
       },
       {
         threshold: this.options.threshold,
-        rootMargin: this.options.rootMargin
+        rootMargin: this.options.rootMargin,
+        root: this.options.root || null
+        // null이면 viewport 기준, HTMLElement면 해당 요소 기준
       }
     );
     this.intersectionObserver.observe(this.container);
@@ -412,9 +416,7 @@ class VisibilityManager {
     }
   }
 }
-const easingFunctions = {
-  easeOutCubic: (t) => --t * t * t + 1
-};
+const defaultEasing = (t) => --t * t * t + 1;
 class ScrollFadeIn {
   // 계산된 거리 (px)
   constructor(container, options = {}) {
@@ -426,14 +428,16 @@ class ScrollFadeIn {
       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",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
       triggerOnce: options.triggerOnce ?? false,
       enabled: options.enabled ?? true,
       onStart: options.onStart || null,
       onComplete: options.onComplete || null
     };
+    this.easing = defaultEasing;
     this.visibilityManager = null;
     this.animationFrameId = null;
     this.startTime = null;
@@ -509,15 +513,23 @@ class ScrollFadeIn {
     this.visibilityManager = new VisibilityManager(this.container, {
       threshold: this.config.threshold,
       rootMargin: this.config.rootMargin,
+      root: this.config.root,
+      // 내부 스크롤 컨테이너 지원
       onVisible: () => {
-        if (!this.hasTriggered && this.config.enabled) {
-          this.hasTriggered = true;
-          this.start();
+        if (this.config.enabled) {
+          if (!this.config.triggerOnce || !this.hasTriggered) {
+            this.hasTriggered = true;
+            this.start();
+          }
         }
       },
       onHidden: () => {
-        if (!this.config.triggerOnce && this.isRunning) {
-          this.reset();
+        if (this.config.enabled) {
+          this.stop();
+          if (!this.config.triggerOnce) {
+            this.hasTriggered = false;
+          }
+          this.setInitialPosition();
         }
       }
     });
@@ -537,7 +549,7 @@ class ScrollFadeIn {
     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 easedProgress = this.easing(progress);
     const direction = this.config.direction;
     let translateX = 0;
     let translateY = 0;
@@ -604,7 +616,6 @@ class ScrollFadeIn {
     this.config = {
       ...this.config,
       ...newConfig,
-      easing: newConfig.easing ?? this.config.easing,
       onStart: newConfig.onStart ?? this.config.onStart,
       onComplete: newConfig.onComplete ?? this.config.onComplete
     };
@@ -612,7 +623,7 @@ class ScrollFadeIn {
       this.targetDistance = this.parseDistance(this.config.distance);
     }
     this.setInitialPosition();
-    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0 || newConfig.root !== void 0) {
       if (this.visibilityManager) {
         this.visibilityManager.destroy();
         this.visibilityManager = null;
@@ -740,9 +751,9 @@ function instance_1($$self, $$props, $$invalidate) {
   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 { root = null } = $$props;
   let { triggerOnce = false } = $$props;
   let { enabled = true } = $$props;
   let { className = "" } = $$props;
@@ -756,9 +767,9 @@ function instance_1($$self, $$props, $$invalidate) {
       direction,
       distance,
       duration,
-      easing,
       threshold,
       rootMargin,
+      root,
       triggerOnce,
       enabled,
       onStart: () => {
@@ -812,9 +823,9 @@ function instance_1($$self, $$props, $$invalidate) {
     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 ("threshold" in $$props2) $$invalidate(6, threshold = $$props2.threshold);
+    if ("rootMargin" in $$props2) $$invalidate(7, rootMargin = $$props2.rootMargin);
+    if ("root" in $$props2) $$invalidate(8, root = $$props2.root);
     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);
@@ -822,7 +833,7 @@ function instance_1($$self, $$props, $$invalidate) {
     if ("$$scope" in $$props2) $$invalidate(17, $$scope = $$props2.$$scope);
   };
   $$self.$$.update = () => {
-    if ($$self.$$.dirty & /*instance, direction, distance, duration, easing, threshold, rootMargin, triggerOnce, enabled*/
+    if ($$self.$$.dirty & /*instance, direction, distance, duration, threshold, rootMargin, root, triggerOnce, enabled*/
     67576) {
       {
         if (instance) {
@@ -830,9 +841,9 @@ function instance_1($$self, $$props, $$invalidate) {
             direction,
             distance,
             duration,
-            easing,
             threshold,
             rootMargin,
+            root,
             triggerOnce,
             enabled,
             onStart: () => {
@@ -853,9 +864,9 @@ function instance_1($$self, $$props, $$invalidate) {
     direction,
     distance,
     duration,
-    easing,
     threshold,
     rootMargin,
+    root,
     triggerOnce,
     enabled,
     start,
@@ -876,9 +887,9 @@ class ScrollFadeIn_1 extends SvelteComponent {
       direction: 3,
       distance: 4,
       duration: 5,
-      easing: 6,
-      threshold: 7,
-      rootMargin: 8,
+      threshold: 6,
+      rootMargin: 7,
+      root: 8,
       triggerOnce: 9,
       enabled: 10,
       className: 0,

package/dist/svelte/textToParticle/index.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function h(t){t.forEach(s)}function a(t){return"function"==typeof t}function r(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function u(t){d=t}const f=[],p=[];let g=[];const m=[],v=Promise.resolve();let y=!1;function x(t){g.push(t)}const b=new Set;let w=0;function M(){if(0!==w)return;const t=d;do{try{for(;w<f.length;){const t=f[w];w++,u(t),$(t.$$)}}catch(e){throw f.length=0,w=0,e}for(u(null),f.length=0,w=0;p.length;)p.pop()();for(let t=0;t<g.length;t+=1){const e=g[t];b.has(e)||(b.add(e),e())}g.length=0}while(f.length);for(;m.length;)m.pop()();y=!1,b.clear(),u(t)}function $(t){if(null!==t.fragment){t.update(),h(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(x)}}const C=new Set;function R(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];g.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),g=e}(i.after_update),h(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function P(t,e){-1===t.$$.dirty[0]&&(f.push(t),y||(y=!0,v.then(M)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function S(t,e,i,r,c,f,p=null,g=[-1]){const m=d;u(t);const v=t.$$={fragment:null,ctx:[],props:f,update:n,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:g,skip_bound:!1,root:e.target||m.$$.root};p&&p(v.root);let y=!1;if(v.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return v.ctx&&c(v.ctx[e],v.ctx[e]=s)&&(!v.skip_bound&&v.bound[e]&&v.bound[e](s),y&&P(t,e)),i}):[],v.update(),y=!0,h(v.before_update),v.fragment=!!r&&r(v.ctx),e.target){if(e.hydrate){const t=($=e.target,Array.from($.childNodes));v.fragment&&v.fragment.l(t),t.forEach(l)}else v.fragment&&v.fragment.c();e.intro&&((b=t.$$.fragment)&&b.i&&(C.delete(b),b.i(w))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),x(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):h(e),t.$$.on_mount=[]}),o.forEach(x)}(t,e.target,e.anchor),M()}var b,w,$;u(m)}class H{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){R(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class _{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class E{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d",{willReadFrequently:!0});if(!i)throw new Error("Canvas context not available");this.ctx=i,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=e.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=z(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=z(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=z(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new _(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.container.getBoundingClientRect(),e=this.config.width||t.width||this.container.clientWidth||window.innerWidth,i=this.config.height||t.height||this.container.clientHeight||.7*window.innerHeight;if(e<=0||i<=0)return;this.W=Math.floor(e*this.DPR),this.H=Math.floor(i*this.DPR);const n=4096;if(this.W>n||this.H>n){const t=Math.min(n/this.W,n/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=e+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,h=.1*t,a=.05*t;let r=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);r=Math.max(r,t)}const l=s.length>0?o*s.length+h*(s.length-1):o;return{width:r,height:l,fits:r<=i&&l<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,h=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(h=n,s=n+1):o=n-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const h=t.split("\n"),a=o,r=.1*o,l=.05*o,c=h.length>0?a*h.length+r*(h.length-1):a;let d=this.H/2-c/2+a/2;for(const g of h){if(0===g.length){d+=a+r;continue}const t=g.split(""),e=this.offCtx.measureText(g).width+l*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,d),i+=this.offCtx.measureText(n).width+l;d+=a+r}const u=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=u)for(let t=0;t<this.W;t+=u){const e=4*(g*this.W+t);f[e]+f[e+1]+f[e+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],e=p[g];t.tx=e.x,t.ty=e.y}}makeParticle(){const t=Math.random()*this.W,e=Math.random()*this.H;return{x:t,y:e,vx:0,vy:0,tx:t,ty:e,initialX:t,initialY:e,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const e=Math.random()*this.W,i=Math.random()*this.H;t.x=e,t.y=i,t.vx=t.vy=0,t.initialX=e,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const e=void 0!==t.text;this.config={...this.config,...t},e&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const n of this.particles){let t=(n.tx-n.x)*this.config.ease,e=(n.ty-n.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=n.x-this.mouse.x,s=n.y-this.mouse.y,o=i*i+s*s,h=this.config.repelRadius*this.DPR;if(o<h*h){const n=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-n/h);t+=i/n*a*6,e+=s/n*a*6}}n.j+=2,t+=.05*Math.cos(n.j),e+=.05*Math.sin(1.3*n.j),n.vx=(n.vx+t)*Math.random(),n.vy=(n.vy+e)*Math.random(),n.x+=n.vx,n.y+=n.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,e=Math.max(.5,Math.min(2,t/1920)),i=this.config.pointSize*this.DPR*e;for(const n of this.particles)this.ctx.beginPath(),this.ctx.arc(n.x,n.y,i,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}function V(t){let e;return{c(){var i;i="div",e=document.createElement(i),c(e,"class",t[0]),c(e,"style",t[1])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[21](e)},p(t,[i]){1&i&&c(e,"class",t[0]),2&i&&c(e,"style",t[1])},i:n,o:n,d(i){i&&l(e),t[21](null)}}}function D(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:h=3200}=e,{pointSize:a=.5}=e,{ease:r=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:d="#fff"}=e,{fontFamily:u="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:m=null}=e,{devicePixelRatio:v=null}=e,{className:y=""}=e,{style:x={}}=e;const b=i.createEventDispatcher();let w,M=null;return i.onMount(()=>{if(!w)return;n(20,M=new E(w,{text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{M&&(M.destroy(),n(20,M=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,h=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,r=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,d=t.particleColor),"fontFamily"in t&&n(11,u=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,m=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,x=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&M&&M.updateConfig({text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v})},[y,x,w,s,o,h,a,r,l,c,d,u,f,g,m,v,function(t){M&&M.morph(t)},function(){M&&M.scatter()},function(t){M&&M.updateConfig(t)},function(){M&&(M.destroy(),n(20,M=null))},M,function(t){p[t?"unshift":"push"](()=>{w=t,n(2,w)})}]}module.exports=class extends H{constructor(t){super(),S(this,t,D,V,r,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}};
+"use strict";var t=Object.defineProperty,i=(i,e,n)=>((i,e,n)=>e in i?t(i,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):i[e]=n)(i,"symbol"!=typeof e?e+"":e,n);const e=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function h(t){t.forEach(s)}function a(t){return"function"==typeof t}function r(t,i){return t!=t?i==i:t!==i||t&&"object"==typeof t||"function"==typeof t}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,i,e){null==e?t.removeAttribute(i):t.getAttribute(i)!==e&&t.setAttribute(i,e)}let d;function u(t){d=t}const f=[],p=[];let g=[];const m=[],v=Promise.resolve();let y=!1;function x(t){g.push(t)}const b=new Set;let w=0;function M(){if(0!==w)return;const t=d;do{try{for(;w<f.length;){const t=f[w];w++,u(t),$(t.$$)}}catch(i){throw f.length=0,w=0,i}for(u(null),f.length=0,w=0;p.length;)p.pop()();for(let t=0;t<g.length;t+=1){const i=g[t];b.has(i)||(b.add(i),i())}g.length=0}while(f.length);for(;m.length;)m.pop()();y=!1,b.clear(),u(t)}function $(t){if(null!==t.fragment){t.update(),h(t.before_update);const i=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,i),t.after_update.forEach(x)}}const C=new Set;function R(t,i){const e=t.$$;null!==e.fragment&&(!function(t){const i=[],e=[];g.forEach(n=>-1===t.indexOf(n)?i.push(n):e.push(n)),e.forEach(t=>t()),g=i}(e.after_update),h(e.on_destroy),e.fragment&&e.fragment.d(i),e.on_destroy=e.fragment=null,e.ctx=[])}function P(t,i){-1===t.$$.dirty[0]&&(f.push(t),y||(y=!0,v.then(M)),t.$$.dirty.fill(0)),t.$$.dirty[i/31|0]|=1<<i%31}function S(t,i,e,r,c,f,p=null,g=[-1]){const m=d;u(t);const v=t.$$={fragment:null,ctx:[],props:f,update:n,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(i.context||(m?m.$$.context:[])),callbacks:o(),dirty:g,skip_bound:!1,root:i.target||m.$$.root};p&&p(v.root);let y=!1;if(v.ctx=e?e(t,i.props||{},(i,e,...n)=>{const s=n.length?n[0]:e;return v.ctx&&c(v.ctx[i],v.ctx[i]=s)&&(!v.skip_bound&&v.bound[i]&&v.bound[i](s),y&&P(t,i)),e}):[],v.update(),y=!0,h(v.before_update),v.fragment=!!r&&r(v.ctx),i.target){if(i.hydrate){const t=($=i.target,Array.from($.childNodes));v.fragment&&v.fragment.l(t),t.forEach(l)}else v.fragment&&v.fragment.c();i.intro&&((b=t.$$.fragment)&&b.i&&(C.delete(b),b.i(w))),function(t,i,e){const{fragment:n,after_update:o}=t.$$;n&&n.m(i,e),x(()=>{const i=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...i):h(i),t.$$.on_mount=[]}),o.forEach(x)}(t,i.target,i.anchor),M()}var b,w,$;u(m)}class H{constructor(){i(this,"$$"),i(this,"$$set")}$destroy(){R(this,1),this.$destroy=n}$on(t,i){if(!a(i))return n;const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(i),()=>{const t=e.indexOf(i);-1!==t&&e.splice(t,1)}}$set(t){var i;this.$$set&&(i=t,0!==Object.keys(i).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class _{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",root:i.root??null,onVisible:i.onVisible,onHidden:i.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function z(t,i){let e=null;return function(...n){null!==e&&clearTimeout(e),e=setTimeout(()=>{e=null,t.apply(this,n)},i)}}class E{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const e=this.canvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Canvas context not available");this.ctx=e,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=i.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=z(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=z(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=z(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new _(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.container.getBoundingClientRect(),i=this.config.width||t.width||this.container.clientWidth||window.innerWidth,e=this.config.height||t.height||this.container.clientHeight||.7*window.innerHeight;if(i<=0||e<=0)return;this.W=Math.floor(i*this.DPR),this.H=Math.floor(e*this.DPR);const n=4096;if(this.W>n||this.H>n){const t=Math.min(n/this.W,n/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=i+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,e,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=i.split("\n"),o=t,h=.1*t,a=.05*t;let r=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);r=Math.max(r,t)}const l=s.length>0?o*s.length+h*(s.length-1):o;return{width:r,height:l,fits:r<=e&&l<=n}}findOptimalFontSize(t,i,e,n){if(this.measureTextFit(n,t,i,e).fits)return n;if(n<=12)return 12;let s=12,o=n,h=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,i,e).fits?(h=n,s=n+1):o=n-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),e=this.config.fontSize||Math.max(80,Math.floor(.18*i)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,e);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const h=t.split("\n"),a=o,r=.1*o,l=.05*o,c=h.length>0?a*h.length+r*(h.length-1):a;let d=this.H/2-c/2+a/2;for(const g of h){if(0===g.length){d+=a+r;continue}const t=g.split(""),i=this.offCtx.measureText(g).width+l*(t.length>0?t.length-1:0);let e=this.W/2-i/2;for(const n of t)this.offCtx.fillText(n,e+this.offCtx.measureText(n).width/2,d),e+=this.offCtx.measureText(n).width+l;d+=a+r}const u=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=u)for(let t=0;t<this.W;t+=u){const i=4*(g*this.W+t);f[i]+f[i+1]+f[i+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],i=p[g];t.tx=i.x,t.ty=i.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,e=Math.random()*this.H;t.x=i,t.y=e,t.vx=t.vy=0,t.initialX=i,t.initialY=e}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const n of this.particles){let t=(n.tx-n.x)*this.config.ease,i=(n.ty-n.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const e=n.x-this.mouse.x,s=n.y-this.mouse.y,o=e*e+s*s,h=this.config.repelRadius*this.DPR;if(o<h*h){const n=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-n/h);t+=e/n*a*6,i+=s/n*a*6}}n.j+=2,t+=.05*Math.cos(n.j),i+=.05*Math.sin(1.3*n.j),n.vx=(n.vx+t)*Math.random(),n.vy=(n.vy+i)*Math.random(),n.x+=n.vx,n.y+=n.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,i=Math.max(.5,Math.min(2,t/1920)),e=this.config.pointSize*this.DPR*i;for(const n of this.particles)this.ctx.beginPath(),this.ctx.arc(n.x,n.y,e,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}function V(t){let i;return{c(){var e;e="div",i=document.createElement(e),c(i,"class",t[0]),c(i,"style",t[1])},m(e,n){!function(t,i,e){t.insertBefore(i,e||null)}(e,i,n),t[21](i)},p(t,[e]){1&e&&c(i,"class",t[0]),2&e&&c(i,"style",t[1])},i:n,o:n,d(e){e&&l(i),t[21](null)}}}function D(t,i,n){let{text:s="mason effect"}=i,{densityStep:o=2}=i,{maxParticles:h=3200}=i,{pointSize:a=.5}=i,{ease:r=.05}=i,{repelRadius:l=150}=i,{repelStrength:c=1}=i,{particleColor:d="#fff"}=i,{fontFamily:u="Inter, system-ui, Arial"}=i,{fontSize:f=null}=i,{width:g=null}=i,{height:m=null}=i,{devicePixelRatio:v=null}=i,{className:y=""}=i,{style:x={}}=i;const b=e.createEventDispatcher();let w,M=null;return e.onMount(()=>{if(!w)return;n(20,M=new E(w,{text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),e.onDestroy(()=>{M&&(M.destroy(),n(20,M=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,h=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,r=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,d=t.particleColor),"fontFamily"in t&&n(11,u=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,m=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,x=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&M&&M.updateConfig({text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v})},[y,x,w,s,o,h,a,r,l,c,d,u,f,g,m,v,function(t){M&&M.morph(t)},function(){M&&M.scatter()},function(t){M&&M.updateConfig(t)},function(){M&&(M.destroy(),n(20,M=null))},M,function(t){p[t?"unshift":"push"](()=>{w=t,n(2,w)})}]}module.exports=class extends H{constructor(t){super(),S(this,t,D,V,r,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}};

package/dist/svelte/textToParticle/index.d.ts

@@ -36,15 +36,13 @@ export declare interface CountOptions {
     onComplete?: () => void;
 }
 
-declare const easingFunctions: {
+export declare const easingFunctions: {
     linear: (t: number) => number;
     easeInQuad: (t: number) => number;
     easeOutQuad: (t: number) => number;
     easeInOutQuad: (t: number) => number;
     easeOutCubic: (t: number) => number;
 };
-export { easingFunctions }
-export { easingFunctions as scrollFadeInEasingFunctions }
 
 export declare interface Particle {
     x: number;
@@ -60,11 +58,12 @@ export declare interface Particle {
 
 export declare class ScrollFadeIn {
     container: HTMLElement;
-    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
-        easing: (t: number) => number;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
         onStart: ScrollFadeInOptions['onStart'];
         onComplete: ScrollFadeInOptions['onComplete'];
     };
+    private easing;
     visibilityManager: VisibilityManager | null;
     animationFrameId: number | null;
     startTime: number | null;
@@ -90,9 +89,9 @@ export declare interface ScrollFadeInOptions {
     direction?: 'top' | 'right' | 'bottom' | 'left';
     distance?: string;
     duration?: number;
-    easing?: (t: number) => number;
     threshold?: number;
     rootMargin?: string;
+    root?: HTMLElement | null;
     triggerOnce?: boolean;
     enabled?: boolean;
     onStart?: () => void;
@@ -265,6 +264,7 @@ declare class TextToParticle {
     declare interface VisibilityManagerOptions {
         threshold?: number;
         rootMargin?: string;
+        root?: HTMLElement | null;
         onVisible?: () => void;
         onHidden?: () => void;
     }

package/dist/svelte/textToParticle/index.mjs

@@ -269,6 +269,8 @@ class VisibilityManager {
     this.options = {
       threshold: options.threshold ?? 0.1,
       rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
       onVisible: options.onVisible,
       onHidden: options.onHidden
     };
@@ -306,7 +308,9 @@ class VisibilityManager {
       },
       {
         threshold: this.options.threshold,
-        rootMargin: this.options.rootMargin
+        rootMargin: this.options.rootMargin,
+        root: this.options.root || null
+        // null이면 viewport 기준, HTMLElement면 해당 요소 기준
       }
     );
     this.intersectionObserver.observe(this.container);