masoneffect 2.0.8 → 2.0.11

package/dist/vue/scrollFadeIn/index.mjs

@@ -5,6 +5,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
     };
@@ -42,7 +44,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);
@@ -100,9 +104,7 @@ class VisibilityManager {
     }
   }
 }
-const easingFunctions = {
-  easeOutCubic: (t) => --t * t * t + 1
-};
+const defaultEasing = (t) => --t * t * t + 1;
 class ScrollFadeIn {
   // 계산된 거리 (px)
   constructor(container, options = {}) {
@@ -114,14 +116,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;
@@ -197,15 +201,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();
         }
       }
     });
@@ -225,7 +237,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;
@@ -292,7 +304,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
     };
@@ -300,7 +311,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;
@@ -331,9 +342,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     direction: { default: "bottom" },
     distance: { default: "50px" },
     duration: { default: 800 },
-    easing: { type: Function, default: () => (t) => t },
     threshold: { default: 0.1 },
     rootMargin: { default: "0px" },
+    root: { default: null },
     triggerOnce: { type: Boolean, default: false },
     enabled: { type: Boolean, default: true },
     onStart: { type: Function, default: null },
@@ -351,9 +362,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         direction: props.direction,
         distance: props.distance,
         duration: props.duration,
-        easing: props.easing,
         threshold: props.threshold,
         rootMargin: props.rootMargin,
+        root: props.root,
         triggerOnce: props.triggerOnce,
         enabled: props.enabled,
         onStart: () => {
@@ -372,9 +383,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         props.direction,
         props.distance,
         props.duration,
-        props.easing,
         props.threshold,
         props.rootMargin,
+        props.root,
         props.triggerOnce,
         props.enabled
       ],
@@ -384,9 +395,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             direction: props.direction,
             distance: props.distance,
             duration: props.duration,
-            easing: props.easing,
             threshold: props.threshold,
             rootMargin: props.rootMargin,
+            root: props.root,
             triggerOnce: props.triggerOnce,
             enabled: props.enabled,
             onStart: () => {

package/dist/vue/textToParticle/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");class i{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)}}function e(t,i){let e=null;return function(...s){null!==e&&clearTimeout(e),e=setTimeout(()=>{e=null,t.apply(this,s)},i)}}class s{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 s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,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 o=this.handleResize.bind(this);this.handleResize=e(o,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=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(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 i(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 s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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,s){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const n=i.split("\n"),o=t,h=.1*t,a=.05*t;let l=0;for(const d of n){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+a*(d.length>0?d.length-1:0);l=Math.max(l,t)}const r=n.length>0?o*n.length+h*(n.length-1):o;return{width:l,height:r,fits:l<=e&&r<=s}}findOptimalFontSize(t,i,e,s){if(this.measureTextFit(s,t,i,e).fits)return s;if(s<=12)return 12;let n=12,o=s,h=12;for(;n<=o;){const s=Math.floor((n+o)/2);this.measureTextFit(s,t,i,e).fits?(h=s,n=s+1):o=s-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)),s=this.W-80,n=this.H-80,o=this.findOptimalFontSize(t,s,n,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,l=.1*o,r=.05*o,d=h.length>0?a*h.length+l*(h.length-1):a;let c=this.H/2-d/2+a/2;for(const g of h){if(0===g.length){c+=a+l;continue}const t=g.split(""),i=this.offCtx.measureText(g).width+r*(t.length>0?t.length-1:0);let e=this.W/2-i/2;for(const s of t)this.offCtx.fillText(s,e+this.offCtx.measureText(s).width/2,c),e+=this.offCtx.measureText(s).width+r;c+=a+l}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 s of this.particles){let t=(s.tx-s.x)*this.config.ease,i=(s.ty-s.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const e=s.x-this.mouse.x,n=s.y-this.mouse.y,o=e*e+n*n,h=this.config.repelRadius*this.DPR;if(o<h*h){const s=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-s/h);t+=e/s*a*6,i+=n/s*a*6}}s.j+=2,t+=.05*Math.cos(s.j),i+=.05*Math.sin(1.3*s.j),s.vx=(s.vx+t)*Math.random(),s.vy=(s.vy+i)*Math.random(),s.x+=s.vx,s.y+=s.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 s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.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)}}const n=t.defineComponent({__name:"TextToParticle",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(i,{expose:e,emit:n}){const o=i,h=n,a=t.ref(null);let l=null;return t.watch(()=>[o.text,o.densityStep,o.maxParticles,o.pointSize,o.ease,o.repelRadius,o.repelStrength,o.particleColor,o.fontFamily,o.fontSize,o.width,o.height,o.devicePixelRatio],()=>{l&&l.updateConfig({text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new s(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),e({morph:t=>{l&&l.morph(t)},scatter:()=>{l&&l.scatter()},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(e,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(i.className),style:t.normalizeStyle(i.style)},null,6))}});module.exports=n;
+"use strict";const t=require("vue");class i{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 e(t,i){let e=null;return function(...s){null!==e&&clearTimeout(e),e=setTimeout(()=>{e=null,t.apply(this,s)},i)}}class s{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 s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,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 o=this.handleResize.bind(this);this.handleResize=e(o,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=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(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 i(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 s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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,s){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const n=i.split("\n"),o=t,h=.1*t,a=.05*t;let l=0;for(const d of n){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+a*(d.length>0?d.length-1:0);l=Math.max(l,t)}const r=n.length>0?o*n.length+h*(n.length-1):o;return{width:l,height:r,fits:l<=e&&r<=s}}findOptimalFontSize(t,i,e,s){if(this.measureTextFit(s,t,i,e).fits)return s;if(s<=12)return 12;let n=12,o=s,h=12;for(;n<=o;){const s=Math.floor((n+o)/2);this.measureTextFit(s,t,i,e).fits?(h=s,n=s+1):o=s-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)),s=this.W-80,n=this.H-80,o=this.findOptimalFontSize(t,s,n,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,l=.1*o,r=.05*o,d=h.length>0?a*h.length+l*(h.length-1):a;let c=this.H/2-d/2+a/2;for(const g of h){if(0===g.length){c+=a+l;continue}const t=g.split(""),i=this.offCtx.measureText(g).width+r*(t.length>0?t.length-1:0);let e=this.W/2-i/2;for(const s of t)this.offCtx.fillText(s,e+this.offCtx.measureText(s).width/2,c),e+=this.offCtx.measureText(s).width+r;c+=a+l}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 s of this.particles){let t=(s.tx-s.x)*this.config.ease,i=(s.ty-s.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const e=s.x-this.mouse.x,n=s.y-this.mouse.y,o=e*e+n*n,h=this.config.repelRadius*this.DPR;if(o<h*h){const s=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-s/h);t+=e/s*a*6,i+=n/s*a*6}}s.j+=2,t+=.05*Math.cos(s.j),i+=.05*Math.sin(1.3*s.j),s.vx=(s.vx+t)*Math.random(),s.vy=(s.vy+i)*Math.random(),s.x+=s.vx,s.y+=s.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 s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.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)}}const n=t.defineComponent({__name:"TextToParticle",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(i,{expose:e,emit:n}){const o=i,h=n,a=t.ref(null);let l=null;return t.watch(()=>[o.text,o.densityStep,o.maxParticles,o.pointSize,o.ease,o.repelRadius,o.repelStrength,o.particleColor,o.fontFamily,o.fontSize,o.width,o.height,o.devicePixelRatio],()=>{l&&l.updateConfig({text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new s(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),e({morph:t=>{l&&l.morph(t)},scatter:()=>{l&&l.scatter()},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(e,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(i.className),style:t.normalizeStyle(i.style)},null,6))}});module.exports=n;

package/dist/vue/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;
@@ -209,6 +208,7 @@ declare class TextToParticle {
         originalText: string;
         constructor(container: HTMLElement | string, options: TypingOptions);
         init(): void;
+        private injectStyles;
         setupVisibilityManager(): void;
         private buildTextFromUnits;
         start(): void;
@@ -216,6 +216,7 @@ declare class TextToParticle {
         stop(): void;
         reset(): void;
         updateDisplay(text: string): void;
+        private escapeHtml;
         setText(newText: string): void;
         destroy(): void;
     }
@@ -265,6 +266,7 @@ declare class TextToParticle {
     declare interface VisibilityManagerOptions {
         threshold?: number;
         rootMargin?: string;
+        root?: HTMLElement | null;
         onVisible?: () => void;
         onHidden?: () => void;
     }

package/dist/vue/textToParticle/index.mjs

@@ -5,6 +5,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
     };
@@ -42,7 +44,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);

package/dist/vue/typing/index.cjs

@@ -1 +1 @@
-"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;
+"use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,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,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 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=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],l=[];return l.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),l.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][n]),o>0&&l.push(r[o]),l}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),l=e.length;if(r>=44032&&r<=55203){const t=i(o);e.push(...t),s.push({start:l,end:e.length,isHangul:!0})}else e.push(o),s.push({start:l,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.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n      .typing-char {\n        transition: opacity 0.2s ease-in;\n        display: inline-block;\n      }\n      .typing-cursor {\n        display: inline-block;\n      }\n    ",document.head.appendChild(t)}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){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),s=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let n="";for(let r=0;r<e.length;r++){const t=e[r];n+=r>=s.length?`<span class="typing-char typing-fade-in" style="opacity: 0;">${this.escapeHtml(t)}</span>`:`<span class="typing-char" style="opacity: 1;">${this.escapeHtml(t)}</span>`}i&&(n+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=n;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}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

@@ -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;
@@ -209,6 +208,7 @@ declare class TextToParticle {
         originalText: string;
         constructor(container: HTMLElement | string, options: TypingOptions);
         init(): void;
+        private injectStyles;
         setupVisibilityManager(): void;
         private buildTextFromUnits;
         start(): void;
@@ -216,6 +216,7 @@ declare class TextToParticle {
         stop(): void;
         reset(): void;
         updateDisplay(text: string): void;
+        private escapeHtml;
         setText(newText: string): void;
         destroy(): void;
     }
@@ -265,6 +266,7 @@ declare class TextToParticle {
     declare interface VisibilityManagerOptions {
         threshold?: number;
         rootMargin?: string;
+        root?: HTMLElement | null;
         onVisible?: () => void;
         onHidden?: () => void;
     }

package/dist/vue/typing/index.mjs

@@ -5,6 +5,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
     };
@@ -42,7 +44,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);
@@ -193,8 +197,26 @@ class Typing {
   }
   init() {
     this.updateDisplay("");
+    this.injectStyles();
     this.setupVisibilityManager();
   }
+  injectStyles() {
+    if (document.getElementById("masoneffect-typing-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "masoneffect-typing-styles";
+    style.textContent = `
+      .typing-char {
+        transition: opacity 0.2s ease-in;
+        display: inline-block;
+      }
+      .typing-cursor {
+        display: inline-block;
+      }
+    `;
+    document.head.appendChild(style);
+  }
   setupVisibilityManager() {
     this.visibilityManager = new VisibilityManager(this.container, {
       threshold: this.config.threshold,
@@ -287,7 +309,39 @@ class Typing {
     this.updateDisplay("");
   }
   updateDisplay(text) {
-    this.container.textContent = text;
+    const textWithoutCursor = text.replace(new RegExp(this.escapeHtml(this.config.cursorChar) + "$"), "");
+    const hasCursor = text.endsWith(this.config.cursorChar);
+    const previousTextContent = this.container.textContent || "";
+    const previousTextWithoutCursor = previousTextContent.replace(new RegExp(this.config.cursorChar + "$"), "");
+    let html = "";
+    for (let i = 0; i < textWithoutCursor.length; i++) {
+      const char = textWithoutCursor[i];
+      const isNewChar = i >= previousTextWithoutCursor.length;
+      if (isNewChar) {
+        html += `<span class="typing-char typing-fade-in" style="opacity: 0;">${this.escapeHtml(char)}</span>`;
+      } else {
+        html += `<span class="typing-char" style="opacity: 1;">${this.escapeHtml(char)}</span>`;
+      }
+    }
+    if (hasCursor) {
+      html += `<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`;
+    }
+    this.container.innerHTML = html;
+    const newChars = this.container.querySelectorAll(".typing-fade-in");
+    if (newChars.length > 0) {
+      requestAnimationFrame(() => {
+        newChars.forEach((char) => {
+          char.style.opacity = "1";
+          char.classList.remove("typing-fade-in");
+        });
+      });
+    }
+  }
+  // HTML 이스케이프 유틸리티
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
   }
   // 텍스트 변경
   setText(newText) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.8",
+  "version": "2.0.11",
   "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",