masoneffect 2.0.4 → 2.0.6

package/dist/vue/textToParticle/index.mjs

@@ -1,4 +1,105 @@
 import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+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) {
@@ -56,8 +157,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);
@@ -72,39 +172,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;
@@ -341,7 +424,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);
@@ -413,9 +499,9 @@ 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);

package/dist/vue/typing/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");function e(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const s=e-44032,n=Math.floor(s/588),i=Math.floor(s%588/28),r=s%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][i]),r>0&&a.push(o[r]),a}function s(t,e,s){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),i=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),r=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===n||-1===i)return t+(e||"")+(s||"");const o=44032+21*n*28+28*i+r;return String.fromCharCode(o)}function n(t){const s=[],n=[];for(let i=0;i<t.length;i++){const r=t[i],o=r.charCodeAt(0),a=s.length;if(o>=44032&&o<=55203){const t=e(r);s.push(...t),n.push({start:a,end:s.length,isHangul:!0})}else s.push(r),n.push({start:a,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:n}}class i{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const s=n(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let e="";for(let n=0;n<this.charUnitRanges.length;n++){const i=this.charUnitRanges[n];if(i.start>=t)break;const r=Math.min(t-i.start,i.end-i.start);if(r<=0)break;if(i.isHangul){const t=this.textUnits.slice(i.start,i.start+r);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else r>0&&(e+=this.textUnits[i.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const r=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:s}){const n=e,r=t.ref(null),o=t.ref(null);return t.onMounted(()=>{if(!r.value)return;const t={text:n.text,speed:n.speed,delay:n.delay,enabled:n.enabled,threshold:n.threshold,rootMargin:n.rootMargin,triggerOnce:n.triggerOnce,showCursor:n.showCursor,cursorChar:n.cursorChar,onUpdate:n.onUpdate,onComplete:n.onComplete};o.value=new i(r.value,t)}),t.onUnmounted(()=>{o.value&&(o.value.destroy(),o.value=null)}),t.watch(()=>n.text,t=>{o.value&&t!==o.value.originalText&&o.value.setText(t)}),s({start:()=>{var t;return null==(t=o.value)?void 0:t.start()},stop:()=>{var t;return null==(t=o.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=o.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=o.value)?void 0:e.setText(t)},destroy:()=>{o.value&&(o.value.destroy(),o.value=null)}}),(s,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;
+"use strict";const t=require("vue");class e{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 i(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,s=Math.floor(i/588),n=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][n]),o>0&&h.push(r[o]),h}function s(t,e,i){const s=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),n=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===s||-1===n)return t+(e||"")+(i||"");const r=44032+21*s*28+28*n+o;return String.fromCharCode(r)}function n(t){const e=[],s=[];for(let n=0;n<t.length;n++){const o=t[n],r=o.charCodeAt(0),h=e.length;if(r>=44032&&r<=55203){const t=i(o);e.push(...t),s.push({start:h,end:e.length,isHangul:!0})}else e.push(o),s.push({start:h,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:s}}class o{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=n(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const o=Math.min(t-n.start,n.end-n.start);if(o<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+o);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else o>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const r=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:i}){const s=e,n=t.ref(null),r=t.ref(null);return t.onMounted(()=>{if(!n.value)return;const t={text:s.text,speed:s.speed,delay:s.delay,enabled:s.enabled,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,showCursor:s.showCursor,cursorChar:s.cursorChar,onUpdate:s.onUpdate,onComplete:s.onComplete};r.value=new o(n.value,t)}),t.onUnmounted(()=>{r.value&&(r.value.destroy(),r.value=null)}),t.watch(()=>s.text,t=>{r.value&&t!==r.value.originalText&&r.value.setText(t)}),i({start:()=>{var t;return null==(t=r.value)?void 0:t.start()},stop:()=>{var t;return null==(t=r.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=r.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=r.value)?void 0:e.setText(t)},destroy:()=>{r.value&&(r.value.destroy(),r.value=null)}}),(i,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:n,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;

package/dist/vue/typing/index.d.ts

@@ -7,12 +7,12 @@ export declare class Count {
     currentValue: number;
     startTime: number | null;
     animationFrameId: number | null;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | null;
     isRunning: boolean;
     hasTriggered: boolean;
     constructor(container: HTMLElement | string, options: CountOptions);
     init(): void;
-    setupIntersectionObserver(): void;
+    setupVisibilityManager(): void;
     start(): void;
     stop(): void;
     reset(): void;
@@ -23,13 +23,6 @@ export declare class Count {
     destroy(): void;
 }
 
-/**
- * Count - 숫자 카운팅 애니메이션 효과
- * 바닐라 JS 코어 클래스
- *
- * 사용법:
- * import { Count } from 'masoneffect/count';
- */
 export declare interface CountOptions {
     targetValue: number;
     duration?: number;
@@ -43,13 +36,15 @@ export declare interface CountOptions {
     onComplete?: () => void;
 }
 
-export declare const easingFunctions: {
+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;
@@ -63,6 +58,47 @@ export declare interface Particle {
     j: number;
 }
 
+export declare class ScrollFadeIn {
+    container: HTMLElement;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
+        easing: (t: number) => number;
+        onStart: ScrollFadeInOptions['onStart'];
+        onComplete: ScrollFadeInOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    animationFrameId: number | null;
+    startTime: number | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    initialTransform: string;
+    targetDistance: number;
+    constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
+    init(): void;
+    parseDistance(distance: string): number;
+    setInitialPosition(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    animate(): void;
+    complete(): void;
+    reset(): void;
+    stop(): void;
+    updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
+    destroy(): void;
+}
+
+export declare interface ScrollFadeInOptions {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    distance?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
@@ -84,14 +120,13 @@ declare class TextToParticle {
     };
     animationId: number | null;
     isRunning: boolean;
-    isVisible: boolean;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | null;
     debounceDelay: number;
     _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
     _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
     constructor(container: HTMLElement | string, options?: TextToParticleOptions);
     init(): void;
-    setupIntersectionObserver(): void;
+    setupVisibilityManager(): void;
     resize(): void;
     /**
      * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -132,13 +167,6 @@ declare class TextToParticle {
     export { TextToParticle }
     export default TextToParticle;
 
-    /**
-     * TextToParticle - 텍스트를 파티클로 변환하는 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { TextToParticle } from 'masoneffect/textToParticle';
-     */
     declare interface TextToParticleOptions {
         text?: string;
         densityStep?: number;
@@ -175,13 +203,13 @@ declare class TextToParticle {
         currentIndex: number;
         displayedText: string;
         timeoutId: ReturnType<typeof setTimeout> | null;
-        intersectionObserver: IntersectionObserver | null;
+        visibilityManager: VisibilityManager | null;
         isRunning: boolean;
         hasTriggered: boolean;
         originalText: string;
         constructor(container: HTMLElement | string, options: TypingOptions);
         init(): void;
-        setupIntersectionObserver(): void;
+        setupVisibilityManager(): void;
         private buildTextFromUnits;
         start(): void;
         typeNext(): void;
@@ -192,13 +220,6 @@ declare class TextToParticle {
         destroy(): void;
     }
 
-    /**
-     * Typing - 타이핑 애니메이션 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { Typing } from 'masoneffect/typing';
-     */
     export declare interface TypingOptions {
         text: string;
         speed?: number;
@@ -213,4 +234,39 @@ declare class TextToParticle {
         onComplete?: () => void;
     }
 
+    declare class VisibilityManager {
+        private container;
+        private options;
+        private intersectionObserver;
+        private visibilityChangeHandler;
+        private isVisible;
+        private isPageVisible;
+        constructor(container: HTMLElement, options?: VisibilityManagerOptions);
+        private setupIntersectionObserver;
+        private setupPageVisibility;
+        /**
+         * 현재 요소가 화면에 보이는지 확인
+         */
+        getIsVisible(): boolean;
+        /**
+         * 옵션 업데이트
+         */
+        updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
+        /**
+         * 리소스 정리
+         */
+        destroy(): void;
+    }
+
+    /**
+     * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
+     * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
+     */
+    declare interface VisibilityManagerOptions {
+        threshold?: number;
+        rootMargin?: string;
+        onVisible?: () => void;
+        onHidden?: () => void;
+    }
+
     export { }

package/dist/vue/typing/index.mjs

@@ -1,4 +1,105 @@
 import { defineComponent, ref, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+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 decomposeHangul(char) {
   const code = char.charCodeAt(0);
   if (code < 44032 || code > 55203) {
@@ -85,44 +186,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();
+    this.setupVisibilityManager();
   }
-  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();
-            }
-          }
+  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);
+    });
   }
   // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
   // 한글의 경우 자음/모음이 하나씩 보이도록 합성
@@ -218,9 +303,9 @@ class Typing {
   }
   destroy() {
     this.stop();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -26,6 +26,11 @@
       "require": "./dist/typing/index.cjs",
       "types": "./dist/typing/index.d.ts"
     },
+    "./scrollFadeIn": {
+      "import": "./dist/scrollFadeIn/index.mjs",
+      "require": "./dist/scrollFadeIn/index.cjs",
+      "types": "./dist/scrollFadeIn/index.d.ts"
+    },
     "./react": {
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs",
@@ -46,6 +51,11 @@
       "require": "./dist/react/typing/index.cjs",
       "types": "./dist/react/typing/index.d.ts"
     },
+    "./react/scrollFadeIn": {
+      "import": "./dist/react/scrollFadeIn/index.mjs",
+      "require": "./dist/react/scrollFadeIn/index.cjs",
+      "types": "./dist/react/scrollFadeIn/index.d.ts"
+    },
     "./vue": {
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
@@ -66,6 +76,11 @@
       "require": "./dist/vue/typing/index.cjs",
       "types": "./dist/vue/typing/index.d.ts"
     },
+    "./vue/scrollFadeIn": {
+      "import": "./dist/vue/scrollFadeIn/index.mjs",
+      "require": "./dist/vue/scrollFadeIn/index.cjs",
+      "types": "./dist/vue/scrollFadeIn/index.d.ts"
+    },
     "./svelte": {
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
@@ -85,21 +100,28 @@
       "import": "./dist/svelte/typing/index.mjs",
       "require": "./dist/svelte/typing/index.cjs",
       "types": "./dist/svelte/typing/index.d.ts"
+    },
+    "./svelte/scrollFadeIn": {
+      "import": "./dist/svelte/scrollFadeIn/index.mjs",
+      "require": "./dist/svelte/scrollFadeIn/index.cjs",
+      "types": "./dist/svelte/scrollFadeIn/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && node scripts/generate-react-types.js",
     "build:vue": "vite build --config vite.config.vue.mjs",
     "build:vue:textToParticle": "vite build --config vite.config.vue.textToParticle.mjs",
     "build:vue:count": "vite build --config vite.config.vue.count.mjs",
     "build:vue:typing": "vite build --config vite.config.vue.typing.mjs",
+    "build:vue:scrollFadeIn": "vite build --config vite.config.vue.scrollFadeIn.mjs",
     "build:svelte": "vite build --config vite.config.svelte.mjs",
     "build:svelte:textToParticle": "vite build --config vite.config.svelte.textToParticle.mjs",
     "build:svelte:count": "vite build --config vite.config.svelte.count.mjs",
     "build:svelte:typing": "vite build --config vite.config.svelte.typing.mjs",
+    "build:svelte:scrollFadeIn": "vite build --config vite.config.svelte.scrollFadeIn.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -112,6 +134,8 @@
     "particles",
     "morphing",
     "count",
+    "scroll-fade-in",
+    "scroll-reveal",
     "canvas",
     "react",
     "vue",