masoneffect 1.0.30 → 2.0.1

package/dist/svelte/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 f;function d(t){f=t}const u=[],p=[];let g=[];const m=[],v=Promise.resolve();let x=!1;function y(t){g.push(t)}const w=new Set;let b=0;function $(){if(0!==b)return;const t=f;do{try{for(;b<u.length;){const t=u[b];b++,d(t),M(t.$$)}}catch(e){throw u.length=0,b=0,e}for(d(null),u.length=0,b=0;p.length;)p.pop()();for(let t=0;t<g.length;t+=1){const e=g[t];w.has(e)||(w.add(e),e())}g.length=0}while(u.length);for(;m.length;)m.pop()();x=!1,w.clear(),d(t)}function M(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(y)}}const R=new Set;function C(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 S(t,e){-1===t.$$.dirty[0]&&(u.push(t),x||(x=!0,v.then($)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function P(t,e,i,r,c,u,p=null,g=[-1]){const m=f;d(t);const v=t.$$={fragment:null,ctx:[],props:u,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 x=!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),x&&S(t,e)),i}):[],v.update(),x=!0,h(v.before_update),v.fragment=!!r&&r(v.ctx),e.target){if(e.hydrate){const t=(M=e.target,Array.from(M.childNodes));v.fragment&&v.fragment.l(t),t.forEach(l)}else v.fragment&&v.fragment.c();e.intro&&((w=t.$$.fragment)&&w.i&&(R.delete(w),w.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),y(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):h(e),t.$$.on_mount=[]}),o.forEach(y)}(t,e.target,e.anchor),$()}var w,b,M;d(m)}class _{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){C(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)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");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.isVisible=!1,this.intersectionObserver=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.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/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=t+"px",this.canvas.style.height=e+"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 f=this.H/2-c/2+a/2;for(const g of h){if(0===g.length){f+=a+r;continue}const t=g.split(""),e=this.offCtx.measureText(g).width+l*(t.length-1);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,f),i+=this.offCtx.measureText(n).width+l;f+=a+r}const d=Math.max(2,this.config.densityStep),u=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=d)for(let t=0;t<this.W;t+=d){const e=4*(g*this.W+t);u[e]+u[e+1]+u[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 e of this.particles){let t=(e.tx-e.x)*this.config.ease,i=(e.ty-e.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const n=e.x-this.mouse.x,s=e.y-this.mouse.y,o=n*n+s*s,h=this.config.repelRadius*this.DPR;if(o<h*h){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/h);t+=n/e*a*6,i+=s/e*a*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,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.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}function D(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 W(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:f="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:u=null}=e,{width:g=null}=e,{height:m=null}=e,{devicePixelRatio:v=null}=e,{className:x=""}=e,{style:y={}}=e;const w=i.createEventDispatcher();let b,$=null;return i.onMount(()=>{if(!b)return;n(20,$=new E(b,{text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:f,fontFamily:d,fontSize:u,width:g,height:m,devicePixelRatio:v,onReady:t=>{w("ready",t)},onUpdate:t=>{w("update",t)}}))}),i.onDestroy(()=>{$&&($.destroy(),n(20,$=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,f=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,u=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,x=t.className),"style"in t&&n(1,y=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&$&&$.updateConfig({text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:f,fontFamily:d,fontSize:u,width:g,height:m,devicePixelRatio:v})},[x,y,b,s,o,h,a,r,l,c,f,d,u,g,m,v,function(t){$&&$.morph(t)},function(){$&&$.scatter()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),n(20,$=null))},$,function(t){p[t?"unshift":"push"](()=>{b=t,n(2,b)})}]}module.exports=class extends _{constructor(t){super(),P(this,t,W,D,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,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);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}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 h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t,e,i){t.insertBefore(e,i||null)}function c(t){t.parentNode&&t.parentNode.removeChild(t)}function u(t){return document.createElement(t)}function d(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let f;function g(t){f=t}const p=[],m=[];let v=[];const x=[],y=Promise.resolve();let b=!1;function $(t){v.push(t)}const w=new Set;let M=0;function C(){if(0!==M)return;const t=f;do{try{for(;M<p.length;){const t=p[M];M++,g(t),R(t.$$)}}catch(e){throw p.length=0,M=0,e}for(g(null),p.length=0,M=0;m.length;)m.pop()();for(let t=0;t<v.length;t+=1){const e=v[t];w.has(e)||(w.add(e),e())}v.length=0}while(p.length);for(;x.length;)x.pop()();b=!1,w.clear(),g(t)}function R(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const S=new Set;function V(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];v.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),v=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function O(t,e){-1===t.$$.dirty[0]&&(p.push(t),b||(b=!0,y.then(C)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function P(t,e,i,h,l,u,d=null,p=[-1]){const m=f;g(t);const v=t.$$={fragment:null,ctx:[],props:u,update:n,not_equal:l,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:e.target||m.$$.root};d&&d(v.root);let x=!1;if(v.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return v.ctx&&l(v.ctx[e],v.ctx[e]=s)&&(!v.skip_bound&&v.bound[e]&&v.bound[e](s),x&&O(t,e)),i}):[],v.update(),x=!0,r(v.before_update),v.fragment=!!h&&h(v.ctx),e.target){if(e.hydrate){const t=(w=e.target,Array.from(w.childNodes));v.fragment&&v.fragment.l(t),t.forEach(c)}else v.fragment&&v.fragment.c();e.intro&&((y=t.$$.fragment)&&y.i&&(S.delete(y),y.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),C()}var y,b,w;g(m)}class _{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){V(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)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class D{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.isVisible=!1,this.intersectionObserver=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.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/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=t+"px",this.canvas.style.height=e+"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,r=.1*t,a=.05*t;let h=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);h=Math.max(h,t)}const l=s.length>0?o*s.length+r*(s.length-1):o;return{width:h,height:l,fits:h<=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,r=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(r=n,s=n+1):o=n-1}return r}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 r=t.split("\n"),a=o,h=.1*o,l=.05*o,c=r.length>0?a*r.length+h*(r.length-1):a;let u=this.H/2-c/2+a/2;for(const p of r){if(0===p.length){u+=a+h;continue}const t=p.split(""),e=this.offCtx.measureText(p).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,u),i+=this.offCtx.measureText(n).width+l;u+=a+h}const d=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,g=[];for(let p=0;p<this.H;p+=d)for(let t=0;t<this.W;t+=d){const e=4*(p*this.W+t);f[e]+f[e+1]+f[e+2]>600&&g.push({x:t,y:p})}for(;g.length>this.config.maxParticles;)g.splice(Math.floor(Math.random()*g.length),1);if(this.particles.length<g.length){const t=g.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>g.length&&(this.particles.length=g.length);for(let p=0;p<this.particles.length;p++){const t=this.particles[p],e=g[p];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 e of this.particles){let t=(e.tx-e.x)*this.config.ease,i=(e.ty-e.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const n=e.x-this.mouse.x,s=e.y-this.mouse.y,o=n*n+s*s,r=this.config.repelRadius*this.DPR;if(o<r*r){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/r);t+=n/e*a*6,i+=s/e*a*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,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.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const E={linear:t=>t};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.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??E.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=i.boundingClientRect,e=window.innerHeight,n=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=n)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function T(t){let e;return{c(){e=u("div"),d(e,"class",t[0]),d(e,"style",t[1])},m(i,n){l(i,e,n),t[21](e)},p(t,[i]){1&i&&d(e,"class",t[0]),2&i&&d(e,"style",t[1])},i:n,o:n,d(i){i&&c(e),t[21](null)}}}function F(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:r=3200}=e,{pointSize:a=.5}=e,{ease:h=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:u="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:p=null}=e,{devicePixelRatio:v=null}=e,{className:x=""}=e,{style:y={}}=e;const b=i.createEventDispatcher();let $,w=null;return i.onMount(()=>{if(!$)return;n(20,w=new D($,{text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:v,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{w&&(w.destroy(),n(20,w=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,r=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,h=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,u=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,p=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,x=t.className),"style"in t&&n(1,y=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&w&&w.updateConfig({text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:v})},[x,y,$,s,o,r,a,h,l,c,u,d,f,g,p,v,function(t){w&&w.morph(t)},function(){w&&w.scatter()},function(t){w&&w.updateConfig(t)},function(){w&&(w.destroy(),n(20,w=null))},w,function(t){m[t?"unshift":"push"](()=>{$=t,n(2,$)})}]}class W extends _{constructor(t){super(),P(this,t,F,T,h,{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]}}function H(t){let e;return{c(){e=u("div"),d(e,"class",t[0]),d(e,"style",t[1])},m(i,n){l(i,e,n),t[18](e)},p(t,[i]){1&i&&d(e,"class",t[0]),2&i&&d(e,"style",t[1])},i:n,o:n,d(i){i&&c(e),t[18](null)}}}function U(t,e,n){let{targetValue:s=0}=e,{duration:o=2e3}=e,{startValue:r=0}=e,{enabled:a=!0}=e,{easing:h=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:u=!1}=e,{className:d=""}=e,{style:f={}}=e;const g=i.createEventDispatcher();let p,v=null;return i.onMount(()=>{if(!p)return;n(17,v=new I(p,{targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}}))}),i.onDestroy(()=>{v&&(v.destroy(),n(17,v=null))}),t.$$set=t=>{"targetValue"in t&&n(3,s=t.targetValue),"duration"in t&&n(4,o=t.duration),"startValue"in t&&n(5,r=t.startValue),"enabled"in t&&n(6,a=t.enabled),"easing"in t&&n(7,h=t.easing),"threshold"in t&&n(8,l=t.threshold),"rootMargin"in t&&n(9,c=t.rootMargin),"triggerOnce"in t&&n(10,u=t.triggerOnce),"className"in t&&n(0,d=t.className),"style"in t&&n(1,f=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&v&&v.updateConfig({targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}})},[d,f,p,s,o,r,a,h,l,c,u,function(){v&&v.start()},function(){v&&v.stop()},function(){v&&v.reset()},function(){return v?v.getValue():0},function(t){v&&v.updateConfig(t)},function(){v&&(v.destroy(),n(17,v=null))},v,function(t){m[t?"unshift":"push"](()=>{p=t,n(2,p)})}]}exports.Count=class extends _{constructor(t){super(),P(this,t,U,H,h,{targetValue:3,duration:4,startValue:5,enabled:6,easing:7,threshold:8,rootMargin:9,triggerOnce:10,className:0,style:1,start:11,stop:12,reset:13,getValue:14,updateConfig:15,destroy:16})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get getValue(){return this.$$.ctx[14]}get updateConfig(){return this.$$.ctx[15]}get destroy(){return this.$$.ctx[16]}},exports.MasonEffect=W,exports.TextToParticle=W,exports.default=W;

package/dist/svelte/index.d.ts

@@ -1,8 +1,73 @@
-declare class MasonEffect {
+export declare class Count {
     container: HTMLElement;
-    config: Required<Omit<MasonEffectOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
-        onReady: MasonEffectOptions['onReady'];
-        onUpdate: MasonEffectOptions['onUpdate'];
+    config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
+        onUpdate: CountOptions['onUpdate'];
+        onComplete: CountOptions['onComplete'];
+    };
+    currentValue: number;
+    startTime: number | null;
+    animationFrameId: number | null;
+    intersectionObserver: IntersectionObserver | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    constructor(container: HTMLElement | string, options: CountOptions);
+    init(): void;
+    setupIntersectionObserver(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateDisplay(value: number): void;
+    formatNumber(value: number): string;
+    updateConfig(newConfig: Partial<CountOptions>): void;
+    getValue(): number;
+    destroy(): void;
+}
+
+/**
+ * Count - 숫자 카운팅 애니메이션 효과
+ * 바닐라 JS 코어 클래스
+ *
+ * 사용법:
+ * import { Count } from 'masoneffect/count';
+ */
+export declare interface CountOptions {
+    targetValue: number;
+    duration?: number;
+    startValue?: number;
+    enabled?: boolean;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    onUpdate?: (value: number) => void;
+    onComplete?: () => void;
+}
+
+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 declare interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    tx: number;
+    ty: number;
+    initialX?: number;
+    initialY?: number;
+    j: number;
+}
+
+declare class TextToParticle {
+    container: HTMLElement;
+    config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
+        onReady: TextToParticleOptions['onReady'];
+        onUpdate: TextToParticleOptions['onUpdate'];
     };
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
@@ -22,9 +87,9 @@ declare class MasonEffect {
     isVisible: boolean;
     intersectionObserver: IntersectionObserver | null;
     debounceDelay: number;
-    _debouncedMorph: (textOrOptions?: string | Partial<MasonEffectOptions> | null) => void;
-    _debouncedUpdateConfig: (newConfig: Partial<MasonEffectOptions>) => void;
-    constructor(container: HTMLElement | string, options?: MasonEffectOptions);
+    _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
+    _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
+    constructor(container: HTMLElement | string, options?: TextToParticleOptions);
     init(): void;
     setupIntersectionObserver(): void;
     resize(): void;
@@ -46,8 +111,8 @@ declare class MasonEffect {
      makeParticle(): Particle;
      initParticles(): void;
      scatter(): void;
-     morph(textOrOptions?: string | Partial<MasonEffectOptions> | null): void;
-     _morphInternal(textOrOptions?: string | Partial<MasonEffectOptions> | null): void;
+     morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
      update(): void;
      animate(): void;
      start(): void;
@@ -59,18 +124,22 @@ declare class MasonEffect {
      handleMouseLeave(): void;
      handleMouseDown(): void;
      handleMouseUp(): void;
-     updateConfig(newConfig: Partial<MasonEffectOptions>): void;
-     _updateConfigInternal(newConfig: Partial<MasonEffectOptions>): void;
+     updateConfig(newConfig: Partial<TextToParticleOptions>): void;
+     _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
      destroy(): void;
     }
-    export { MasonEffect }
-    export default MasonEffect;
+    export { TextToParticle as MasonEffect }
+    export { TextToParticle }
+    export default TextToParticle;
 
     /**
-     * MasonEffect - 파티클 모핑 효과 라이브러리
+     * TextToParticle - 텍스트를 파티클로 변환하는 효과
      * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { TextToParticle } from 'masoneffect/textToParticle';
      */
-    export declare interface MasonEffectOptions {
+    declare interface TextToParticleOptions {
         text?: string;
         densityStep?: number;
         maxParticles?: number;
@@ -85,20 +154,10 @@ declare class MasonEffect {
         height?: number | null;
         devicePixelRatio?: number | null;
         debounceDelay?: number;
-        onReady?: (instance: MasonEffect) => void;
-        onUpdate?: (instance: MasonEffect) => void;
-    }
-
-    export declare interface Particle {
-        x: number;
-        y: number;
-        vx: number;
-        vy: number;
-        tx: number;
-        ty: number;
-        initialX?: number;
-        initialY?: number;
-        j: number;
+        onReady?: (instance: TextToParticle) => void;
+        onUpdate?: (instance: TextToParticle) => void;
     }
+    export { TextToParticleOptions as MasonEffectOptions }
+    export { TextToParticleOptions }
 
     export { }

package/dist/svelte/index.mjs

@@ -276,7 +276,7 @@ function debounce(func, wait) {
     timeout = setTimeout(later, wait);
   };
 }
-class MasonEffect {
+class TextToParticle {
   constructor(container, options = {}) {
     this.container = typeof container === "string" ? document.querySelector(container) : container;
     if (!this.container) {
@@ -482,7 +482,7 @@ class MasonEffect {
         continue;
       }
       const chars = line.split("");
-      const totalWidth = this.offCtx.measureText(line).width + spacing * (chars.length - 1);
+      const totalWidth = this.offCtx.measureText(line).width + spacing * (chars.length > 0 ? chars.length - 1 : 0);
       let x = this.W / 2 - totalWidth / 2;
       for (const ch of chars) {
         this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, startY);
@@ -686,7 +686,168 @@ class MasonEffect {
     }
   }
 }
-function create_fragment(ctx) {
+const easingFunctions = {
+  linear: (t) => t
+};
+class Count {
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      targetValue: options.targetValue,
+      duration: options.duration ?? 2e3,
+      startValue: options.startValue ?? 0,
+      enabled: options.enabled ?? true,
+      easing: options.easing ?? easingFunctions.linear,
+      threshold: options.threshold ?? 0.2,
+      rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
+      triggerOnce: options.triggerOnce ?? false,
+      onUpdate: options.onUpdate || null,
+      onComplete: options.onComplete || null
+    };
+    this.currentValue = this.config.startValue;
+    this.startTime = null;
+    this.animationFrameId = null;
+    this.intersectionObserver = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.init();
+  }
+  init() {
+    this.updateDisplay(this.config.startValue);
+    this.setupIntersectionObserver();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      if (this.config.enabled) {
+        this.start();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            if (!this.hasTriggered && this.config.enabled) {
+              this.hasTriggered = true;
+              this.start();
+            }
+            if (this.config.triggerOnce) {
+              (_a = this.intersectionObserver) == null ? void 0 : _a.unobserve(this.container);
+            }
+          } else {
+            if (!this.config.triggerOnce) {
+              const rect = entry.boundingClientRect;
+              const viewportHeight = window.innerHeight;
+              const viewportWidth = window.innerWidth;
+              const isCompletelyOutOfViewport = rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth;
+              if (isCompletelyOutOfViewport && this.isRunning) {
+                this.reset();
+              }
+            }
+          }
+        }
+      },
+      {
+        threshold: this.config.threshold,
+        rootMargin: this.config.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  start() {
+    if (this.isRunning) return;
+    if (!this.config.enabled) return;
+    this.isRunning = true;
+    this.startTime = null;
+    this.currentValue = this.config.startValue;
+    this.updateDisplay(this.currentValue);
+    const animate = (currentTime) => {
+      if (this.startTime === null) {
+        this.startTime = currentTime;
+      }
+      const elapsed = currentTime - this.startTime;
+      const progress = Math.min(elapsed / this.config.duration, 1);
+      const easedProgress = this.config.easing(progress);
+      this.currentValue = Math.floor(
+        this.config.startValue + (this.config.targetValue - this.config.startValue) * easedProgress
+      );
+      this.updateDisplay(this.currentValue);
+      if (this.config.onUpdate) {
+        this.config.onUpdate(this.currentValue);
+      }
+      if (progress < 1) {
+        this.animationFrameId = requestAnimationFrame(animate);
+      } else {
+        this.currentValue = this.config.targetValue;
+        this.updateDisplay(this.currentValue);
+        this.isRunning = false;
+        if (this.config.onComplete) {
+          this.config.onComplete();
+        }
+      }
+    };
+    this.animationFrameId = requestAnimationFrame(animate);
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  reset() {
+    this.stop();
+    this.currentValue = this.config.startValue;
+    this.updateDisplay(this.currentValue);
+    this.hasTriggered = false;
+    this.startTime = null;
+  }
+  updateDisplay(value) {
+    this.container.textContent = this.formatNumber(value);
+  }
+  formatNumber(value) {
+    return Math.floor(value).toLocaleString();
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasRunning = this.isRunning;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      onUpdate: newConfig.onUpdate !== void 0 ? newConfig.onUpdate : this.config.onUpdate,
+      onComplete: newConfig.onComplete !== void 0 ? newConfig.onComplete : this.config.onComplete
+    };
+    if (newConfig.targetValue !== void 0) {
+      this.reset();
+      if (wasRunning && this.config.enabled) {
+        this.start();
+      }
+    } else {
+      if (wasRunning && this.config.enabled) {
+        this.start();
+      }
+    }
+  }
+  // 현재 값 가져오기
+  getValue() {
+    return this.currentValue;
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+}
+function create_fragment$1(ctx) {
   let div;
   return {
     c() {
@@ -738,7 +899,7 @@ function create_fragment(ctx) {
     }
   };
 }
-function instance_1($$self, $$props, $$invalidate) {
+function instance_1$1($$self, $$props, $$invalidate) {
   let { text = "mason effect" } = $$props;
   let { densityStep = 2 } = $$props;
   let { maxParticles = 3200 } = $$props;
@@ -780,7 +941,7 @@ function instance_1($$self, $$props, $$invalidate) {
         dispatch("update", inst);
       }
     };
-    $$invalidate(20, instance = new MasonEffect(container, options));
+    $$invalidate(20, instance = new TextToParticle(container, options));
   });
   onDestroy(() => {
     if (instance) {
@@ -881,10 +1042,10 @@ function instance_1($$self, $$props, $$invalidate) {
     div_binding
   ];
 }
-class MasonEffect_1 extends SvelteComponent {
+class TextToParticle_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1, create_fragment, safe_not_equal, {
+    init(this, options, instance_1$1, create_fragment$1, safe_not_equal, {
       text: 3,
       densityStep: 4,
       maxParticles: 5,
@@ -919,6 +1080,239 @@ class MasonEffect_1 extends SvelteComponent {
     return this.$$.ctx[19];
   }
 }
+function create_fragment(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      attr(
+        div,
+        "class",
+        /*className*/
+        ctx[0]
+      );
+      attr(
+        div,
+        "style",
+        /*style*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      ctx[18](div);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*className*/
+      1) {
+        attr(
+          div,
+          "class",
+          /*className*/
+          ctx2[0]
+        );
+      }
+      if (dirty & /*style*/
+      2) {
+        attr(
+          div,
+          "style",
+          /*style*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) {
+        detach(div);
+      }
+      ctx[18](null);
+    }
+  };
+}
+function instance_1($$self, $$props, $$invalidate) {
+  let { targetValue = 0 } = $$props;
+  let { duration = 2e3 } = $$props;
+  let { startValue = 0 } = $$props;
+  let { enabled = true } = $$props;
+  let { easing = (t) => t } = $$props;
+  let { threshold = 0.2 } = $$props;
+  let { rootMargin = "0px 0px -100px 0px" } = $$props;
+  let { triggerOnce = false } = $$props;
+  let { className = "" } = $$props;
+  let { style = {} } = $$props;
+  const dispatch = createEventDispatcher();
+  let container;
+  let instance = null;
+  onMount(() => {
+    if (!container) return;
+    const options = {
+      targetValue,
+      duration,
+      startValue,
+      enabled,
+      easing,
+      threshold,
+      rootMargin,
+      triggerOnce,
+      onUpdate: (value) => {
+        dispatch("update", value);
+      },
+      onComplete: () => {
+        dispatch("complete");
+      }
+    };
+    $$invalidate(17, instance = new Count(container, options));
+  });
+  onDestroy(() => {
+    if (instance) {
+      instance.destroy();
+      $$invalidate(17, instance = null);
+    }
+  });
+  function start() {
+    if (instance) {
+      instance.start();
+    }
+  }
+  function stop() {
+    if (instance) {
+      instance.stop();
+    }
+  }
+  function reset() {
+    if (instance) {
+      instance.reset();
+    }
+  }
+  function getValue() {
+    if (instance) {
+      return instance.getValue();
+    }
+    return 0;
+  }
+  function updateConfig(config) {
+    if (instance) {
+      instance.updateConfig(config);
+    }
+  }
+  function destroy() {
+    if (instance) {
+      instance.destroy();
+      $$invalidate(17, instance = null);
+    }
+  }
+  function div_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      container = $$value;
+      $$invalidate(2, container);
+    });
+  }
+  $$self.$$set = ($$props2) => {
+    if ("targetValue" in $$props2) $$invalidate(3, targetValue = $$props2.targetValue);
+    if ("duration" in $$props2) $$invalidate(4, duration = $$props2.duration);
+    if ("startValue" in $$props2) $$invalidate(5, startValue = $$props2.startValue);
+    if ("enabled" in $$props2) $$invalidate(6, enabled = $$props2.enabled);
+    if ("easing" in $$props2) $$invalidate(7, easing = $$props2.easing);
+    if ("threshold" in $$props2) $$invalidate(8, threshold = $$props2.threshold);
+    if ("rootMargin" in $$props2) $$invalidate(9, rootMargin = $$props2.rootMargin);
+    if ("triggerOnce" in $$props2) $$invalidate(10, triggerOnce = $$props2.triggerOnce);
+    if ("className" in $$props2) $$invalidate(0, className = $$props2.className);
+    if ("style" in $$props2) $$invalidate(1, style = $$props2.style);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & /*instance, targetValue, duration, startValue, enabled, easing, threshold, rootMargin, triggerOnce*/
+    133112) {
+      {
+        if (instance) {
+          instance.updateConfig({
+            targetValue,
+            duration,
+            startValue,
+            enabled,
+            easing,
+            threshold,
+            rootMargin,
+            triggerOnce,
+            onUpdate: (value) => {
+              dispatch("update", value);
+            },
+            onComplete: () => {
+              dispatch("complete");
+            }
+          });
+        }
+      }
+    }
+  };
+  return [
+    className,
+    style,
+    container,
+    targetValue,
+    duration,
+    startValue,
+    enabled,
+    easing,
+    threshold,
+    rootMargin,
+    triggerOnce,
+    start,
+    stop,
+    reset,
+    getValue,
+    updateConfig,
+    destroy,
+    instance,
+    div_binding
+  ];
+}
+class Count_1 extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance_1, create_fragment, safe_not_equal, {
+      targetValue: 3,
+      duration: 4,
+      startValue: 5,
+      enabled: 6,
+      easing: 7,
+      threshold: 8,
+      rootMargin: 9,
+      triggerOnce: 10,
+      className: 0,
+      style: 1,
+      start: 11,
+      stop: 12,
+      reset: 13,
+      getValue: 14,
+      updateConfig: 15,
+      destroy: 16
+    });
+  }
+  get start() {
+    return this.$$.ctx[11];
+  }
+  get stop() {
+    return this.$$.ctx[12];
+  }
+  get reset() {
+    return this.$$.ctx[13];
+  }
+  get getValue() {
+    return this.$$.ctx[14];
+  }
+  get updateConfig() {
+    return this.$$.ctx[15];
+  }
+  get destroy() {
+    return this.$$.ctx[16];
+  }
+}
 export {
-  MasonEffect_1 as default
+  Count_1 as Count,
+  TextToParticle_1 as MasonEffect,
+  TextToParticle_1 as TextToParticle,
+  TextToParticle_1 as default
 };