masoneffect 1.0.27 → 1.0.29

package/README.md

@@ -1,8 +1,8 @@
 # MasonEffect ![npm](https://img.shields.io/npm/dy/masoneffect)
 
-**Release version 1.0.27**
+**Release version 1.0.29**
 
-A library that provides particle morphing effects. It can be used with React, Vue, and vanilla JavaScript.
+A library that provides particle morphing effects. It can be used with React, Vue, Svelte, and vanilla JavaScript.
 
 ## Installation
 
@@ -47,7 +47,7 @@ effect.scatter();
 #### Using CDN (UMD)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.27/dist/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.29/dist/index.umd.min.js"></script>
 <script>
   const container = document.getElementById('my-container');
   const effect = new MasonEffect(container, {
@@ -189,6 +189,67 @@ const onReady = (instance) => {
 </template>
 ```
 
+### Svelte
+
+```svelte
+<script lang="ts">
+  import MasonEffect from 'masoneffect/svelte';
+  import type { MasonEffect as MasonEffectType } from 'masoneffect';
+
+  let effectRef: MasonEffect | null = null;
+
+  const handleMorph = () => {
+    // Change text
+    effectRef?.morph({ text: 'Morphed!' });
+  };
+
+  const handleScatter = () => {
+    // Return particles to initial position
+    effectRef?.scatter();
+  };
+
+  const handleChangeText = () => {
+    const texts = ['Hello', 'World', 'Mason', 'Effect', 'Line 1\nLine 2'];
+    const randomText = texts[Math.floor(Math.random() * texts.length)];
+    effectRef?.morph({ text: randomText });
+  };
+
+  const handleChangeWithOptions = () => {
+    // Change text along with other properties
+    effectRef?.morph({
+      text: 'New Text',
+      particleColor: '#ff00ff',
+      maxParticles: 3000,
+      pointSize: 1.0,
+    });
+  };
+
+  const onReady = (instance: MasonEffectType) => {
+    console.log('Ready!', instance);
+  };
+</script>
+
+<div style="width: 100%; height: 70vh; background: #000; display: flex; flex-direction: column">
+  <div style="flex: 1; position: relative; min-height: 400px">
+    <MasonEffect
+      bind:this={effectRef}
+      text="Hello Svelte"
+      particleColor="#00ff88"
+      maxParticles={2000}
+      on:ready={onReady}
+    />
+  </div>
+  <div style="padding: 20px; display: flex; gap: 10px">
+    <button on:click={handleMorph}>Morph</button>
+    <button on:click={handleScatter}>Scatter</button>
+    <button on:click={handleChangeText}>Change Text</button>
+    <button on:click={handleChangeWithOptions}>Change with Options</button>
+  </div>
+</div>
+```
+
+**Note**: In Svelte, you can access component methods using `bind:this`. The component exposes `morph()`, `scatter()`, `updateConfig()`, and `destroy()` methods. Make sure to specify an explicit size for the container.
+
 ## API
 
 ### Options
@@ -250,7 +311,7 @@ Destroys the instance and cleans up resources.
 - 🖱️ Mouse interaction support (repel/attract)
 - 📱 Responsive design
 - ⚡ High-performance Canvas rendering
-- 🔧 Supports React, Vue, and vanilla JS (including CDN)
+- 🔧 Supports React, Vue, Svelte, and vanilla JS (including CDN)
 - 🎯 Includes TypeScript type definitions
 - 💾 Automatic obfuscation and optimization in production builds
 - 🔄 Scatter effect that returns to initial position
@@ -283,6 +344,7 @@ Running the build will generate the following files:
 - **Core library**: `dist/index.mjs` (ESM), `dist/index.cjs` (CommonJS), `dist/index.d.ts` (TypeScript types)
 - **React component**: `dist/react/index.mjs`, `dist/react/index.cjs`, `dist/react/index.d.ts`
 - **Vue component**: `dist/vue/index.mjs`, `dist/vue/index.cjs`, `dist/vue/index.d.ts`
+- **Svelte component**: `dist/svelte/index.mjs`, `dist/svelte/index.cjs`, `dist/svelte/index.d.ts`
 - **UMD build**: `dist/index.umd.min.js` (for CDN usage)
 
 When installed via npm, the appropriate module format is automatically selected based on your bundler. The UMD files (`index.umd.min.js`) can be used directly in browsers via CDN or script tags.

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

@@ -0,0 +1,5 @@
+/**
+ * Svelte component entry point
+ * Exports the compiled Svelte component
+ */
+export { default } from './MasonEffect.svelte';

package/dist/react/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/svelte/index.cjs

@@ -0,0 +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");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");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]}};

package/dist/svelte/index.d.ts

@@ -0,0 +1,104 @@
+declare class MasonEffect {
+    container: HTMLElement;
+    config: Required<Omit<MasonEffectOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
+        onReady: MasonEffectOptions['onReady'];
+        onUpdate: MasonEffectOptions['onUpdate'];
+    };
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    offCanvas: HTMLCanvasElement;
+    offCtx: CanvasRenderingContext2D;
+    W: number;
+    H: number;
+    DPR: number;
+    particles: Particle[];
+    mouse: {
+        x: number;
+        y: number;
+        down: boolean;
+    };
+    animationId: number | null;
+    isRunning: boolean;
+    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);
+    init(): void;
+    setupIntersectionObserver(): void;
+    resize(): void;
+    /**
+     * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+     * @param fontSize 확인할 폰트 크기
+     * @param text 텍스트 (\n으로 줄바꿈 구분)
+     * @param maxWidth 최대 너비
+     * @param maxHeight 최대 높이
+     * @returns { width: number, height: number, fits: boolean }
+         */
+     private measureTextFit;
+     /**
+      * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+      * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+      */
+     private findOptimalFontSize;
+     buildTargets(): void;
+     makeParticle(): Particle;
+     initParticles(): void;
+     scatter(): void;
+     morph(textOrOptions?: string | Partial<MasonEffectOptions> | null): void;
+     _morphInternal(textOrOptions?: string | Partial<MasonEffectOptions> | null): void;
+     update(): void;
+     animate(): void;
+     start(): void;
+     stop(): void;
+     setupEventListeners(): void;
+     removeEventListeners(): void;
+     handleResize(): void;
+     handleMouseMove(e: MouseEvent): void;
+     handleMouseLeave(): void;
+     handleMouseDown(): void;
+     handleMouseUp(): void;
+     updateConfig(newConfig: Partial<MasonEffectOptions>): void;
+     _updateConfigInternal(newConfig: Partial<MasonEffectOptions>): void;
+     destroy(): void;
+    }
+    export { MasonEffect }
+    export default MasonEffect;
+
+    /**
+     * MasonEffect - 파티클 모핑 효과 라이브러리
+     * 바닐라 JS 코어 클래스
+     */
+    export declare interface MasonEffectOptions {
+        text?: string;
+        densityStep?: number;
+        maxParticles?: number;
+        pointSize?: number;
+        ease?: number;
+        repelRadius?: number;
+        repelStrength?: number;
+        particleColor?: string;
+        fontFamily?: string;
+        fontSize?: number | null;
+        width?: number | null;
+        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;
+    }
+
+    export { }

package/dist/svelte/index.mjs

@@ -0,0 +1,924 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createEventDispatcher, onMount, onDestroy } from "svelte";
+function noop() {
+}
+function run(fn) {
+  return fn();
+}
+function blank_object() {
+  return /* @__PURE__ */ Object.create(null);
+}
+function run_all(fns) {
+  fns.forEach(run);
+}
+function is_function(thing) {
+  return typeof thing === "function";
+}
+function safe_not_equal(a, b) {
+  return a != a ? b == b : a !== b || a && typeof a === "object" || typeof a === "function";
+}
+function is_empty(obj) {
+  return Object.keys(obj).length === 0;
+}
+function insert(target, node, anchor) {
+  target.insertBefore(node, anchor || null);
+}
+function detach(node) {
+  if (node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
+}
+function element(name) {
+  return document.createElement(name);
+}
+function attr(node, attribute, value) {
+  if (value == null) node.removeAttribute(attribute);
+  else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
+}
+function children(element2) {
+  return Array.from(element2.childNodes);
+}
+let current_component;
+function set_current_component(component) {
+  current_component = component;
+}
+const dirty_components = [];
+const binding_callbacks = [];
+let render_callbacks = [];
+const flush_callbacks = [];
+const resolved_promise = /* @__PURE__ */ Promise.resolve();
+let update_scheduled = false;
+function schedule_update() {
+  if (!update_scheduled) {
+    update_scheduled = true;
+    resolved_promise.then(flush);
+  }
+}
+function add_render_callback(fn) {
+  render_callbacks.push(fn);
+}
+const seen_callbacks = /* @__PURE__ */ new Set();
+let flushidx = 0;
+function flush() {
+  if (flushidx !== 0) {
+    return;
+  }
+  const saved_component = current_component;
+  do {
+    try {
+      while (flushidx < dirty_components.length) {
+        const component = dirty_components[flushidx];
+        flushidx++;
+        set_current_component(component);
+        update(component.$$);
+      }
+    } catch (e) {
+      dirty_components.length = 0;
+      flushidx = 0;
+      throw e;
+    }
+    set_current_component(null);
+    dirty_components.length = 0;
+    flushidx = 0;
+    while (binding_callbacks.length) binding_callbacks.pop()();
+    for (let i = 0; i < render_callbacks.length; i += 1) {
+      const callback = render_callbacks[i];
+      if (!seen_callbacks.has(callback)) {
+        seen_callbacks.add(callback);
+        callback();
+      }
+    }
+    render_callbacks.length = 0;
+  } while (dirty_components.length);
+  while (flush_callbacks.length) {
+    flush_callbacks.pop()();
+  }
+  update_scheduled = false;
+  seen_callbacks.clear();
+  set_current_component(saved_component);
+}
+function update($$) {
+  if ($$.fragment !== null) {
+    $$.update();
+    run_all($$.before_update);
+    const dirty = $$.dirty;
+    $$.dirty = [-1];
+    $$.fragment && $$.fragment.p($$.ctx, dirty);
+    $$.after_update.forEach(add_render_callback);
+  }
+}
+function flush_render_callbacks(fns) {
+  const filtered = [];
+  const targets = [];
+  render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
+  targets.forEach((c) => c());
+  render_callbacks = filtered;
+}
+const outroing = /* @__PURE__ */ new Set();
+function transition_in(block, local) {
+  if (block && block.i) {
+    outroing.delete(block);
+    block.i(local);
+  }
+}
+function mount_component(component, target, anchor) {
+  const { fragment, after_update } = component.$$;
+  fragment && fragment.m(target, anchor);
+  add_render_callback(() => {
+    const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+    if (component.$$.on_destroy) {
+      component.$$.on_destroy.push(...new_on_destroy);
+    } else {
+      run_all(new_on_destroy);
+    }
+    component.$$.on_mount = [];
+  });
+  after_update.forEach(add_render_callback);
+}
+function destroy_component(component, detaching) {
+  const $$ = component.$$;
+  if ($$.fragment !== null) {
+    flush_render_callbacks($$.after_update);
+    run_all($$.on_destroy);
+    $$.fragment && $$.fragment.d(detaching);
+    $$.on_destroy = $$.fragment = null;
+    $$.ctx = [];
+  }
+}
+function make_dirty(component, i) {
+  if (component.$$.dirty[0] === -1) {
+    dirty_components.push(component);
+    schedule_update();
+    component.$$.dirty.fill(0);
+  }
+  component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
+}
+function init(component, options, instance, create_fragment2, not_equal, props, append_styles = null, dirty = [-1]) {
+  const parent_component = current_component;
+  set_current_component(component);
+  const $$ = component.$$ = {
+    fragment: null,
+    ctx: [],
+    // state
+    props,
+    update: noop,
+    not_equal,
+    bound: blank_object(),
+    // lifecycle
+    on_mount: [],
+    on_destroy: [],
+    on_disconnect: [],
+    before_update: [],
+    after_update: [],
+    context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
+    // everything else
+    callbacks: blank_object(),
+    dirty,
+    skip_bound: false,
+    root: options.target || parent_component.$$.root
+  };
+  append_styles && append_styles($$.root);
+  let ready = false;
+  $$.ctx = instance ? instance(component, options.props || {}, (i, ret, ...rest) => {
+    const value = rest.length ? rest[0] : ret;
+    if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
+      if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
+      if (ready) make_dirty(component, i);
+    }
+    return ret;
+  }) : [];
+  $$.update();
+  ready = true;
+  run_all($$.before_update);
+  $$.fragment = create_fragment2 ? create_fragment2($$.ctx) : false;
+  if (options.target) {
+    if (options.hydrate) {
+      const nodes = children(options.target);
+      $$.fragment && $$.fragment.l(nodes);
+      nodes.forEach(detach);
+    } else {
+      $$.fragment && $$.fragment.c();
+    }
+    if (options.intro) transition_in(component.$$.fragment);
+    mount_component(component, options.target, options.anchor);
+    flush();
+  }
+  set_current_component(parent_component);
+}
+class SvelteComponent {
+  constructor() {
+    /**
+     * ### PRIVATE API
+     *
+     * Do not use, may change at any time
+     *
+     * @type {any}
+     */
+    __publicField(this, "$$");
+    /**
+     * ### PRIVATE API
+     *
+     * Do not use, may change at any time
+     *
+     * @type {any}
+     */
+    __publicField(this, "$$set");
+  }
+  /** @returns {void} */
+  $destroy() {
+    destroy_component(this, 1);
+    this.$destroy = noop;
+  }
+  /**
+   * @template {Extract<keyof Events, string>} K
+   * @param {K} type
+   * @param {((e: Events[K]) => void) | null | undefined} callback
+   * @returns {() => void}
+   */
+  $on(type, callback) {
+    if (!is_function(callback)) {
+      return noop;
+    }
+    const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
+    callbacks.push(callback);
+    return () => {
+      const index = callbacks.indexOf(callback);
+      if (index !== -1) callbacks.splice(index, 1);
+    };
+  }
+  /**
+   * @param {Partial<Props>} props
+   * @returns {void}
+   */
+  $set(props) {
+    if (this.$$set && !is_empty(props)) {
+      this.$$.skip_bound = true;
+      this.$$set(props);
+      this.$$.skip_bound = false;
+    }
+  }
+}
+const PUBLIC_VERSION = "4";
+if (typeof window !== "undefined")
+  (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
+function debounce(func, wait) {
+  let timeout = null;
+  return function executedFunction(...args) {
+    const later = () => {
+      timeout = null;
+      func.apply(this, args);
+    };
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}
+class MasonEffect {
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      text: options.text || "mason effect",
+      densityStep: options.densityStep ?? 2,
+      maxParticles: options.maxParticles ?? 3200,
+      pointSize: options.pointSize ?? 0.5,
+      ease: options.ease ?? 0.05,
+      repelRadius: options.repelRadius ?? 150,
+      repelStrength: options.repelStrength ?? 1,
+      particleColor: options.particleColor || "#fff",
+      fontFamily: options.fontFamily || "Inter, system-ui, Arial",
+      fontSize: options.fontSize || null,
+      width: options.width || null,
+      height: options.height || null,
+      devicePixelRatio: options.devicePixelRatio ?? null,
+      onReady: options.onReady || null,
+      onUpdate: options.onUpdate || null
+    };
+    this.canvas = document.createElement("canvas");
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas context not available");
+    }
+    this.ctx = ctx;
+    this.container.appendChild(this.canvas);
+    this.canvas.style.display = "block";
+    this.offCanvas = document.createElement("canvas");
+    const offCtx = this.offCanvas.getContext("2d");
+    if (!offCtx) {
+      throw new Error("Offscreen canvas context not available");
+    }
+    this.offCtx = offCtx;
+    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: false };
+    this.animationId = null;
+    this.isRunning = false;
+    this.isVisible = false;
+    this.intersectionObserver = null;
+    this.debounceDelay = options.debounceDelay ?? 150;
+    const boundHandleResize = this.handleResize.bind(this);
+    this.handleResize = debounce(boundHandleResize, 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 = debounce(this._morphInternal.bind(this), this.debounceDelay);
+    this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
+    this.init();
+  }
+  init() {
+    this.resize();
+    this.setupEventListeners();
+    this.setupIntersectionObserver();
+    if (this.config.onReady) {
+      this.config.onReady(this);
+    }
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      this.start();
+      return;
+    }
+    if (this.intersectionObserver) {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            this.start();
+          } else {
+            this.isVisible = false;
+            this.stop();
+          }
+        }
+      },
+      {
+        threshold: 0.1
+        // 10% 이상 보일 때 동작
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  resize() {
+    const width = this.config.width || this.container.clientWidth || window.innerWidth;
+    const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+    this.W = Math.floor(width * this.DPR);
+    this.H = Math.floor(height * this.DPR);
+    const MAX_CANVAS_SIZE = 4096;
+    if (this.W > MAX_CANVAS_SIZE || this.H > MAX_CANVAS_SIZE) {
+      const scale = Math.min(MAX_CANVAS_SIZE / this.W, MAX_CANVAS_SIZE / this.H);
+      this.W = Math.floor(this.W * scale);
+      this.H = Math.floor(this.H * scale);
+      this.DPR = this.DPR * scale;
+    }
+    this.canvas.width = this.W;
+    this.canvas.height = this.H;
+    this.canvas.style.width = width + "px";
+    this.canvas.style.height = height + "px";
+    if (this.W > 0 && this.H > 0) {
+      this.buildTargets();
+      if (!this.particles.length) {
+        this.initParticles();
+      }
+    }
+  }
+  /**
+   * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+   * @param fontSize 확인할 폰트 크기
+   * @param text 텍스트 (\n으로 줄바꿈 구분)
+   * @param maxWidth 최대 너비
+   * @param maxHeight 최대 높이
+   * @returns { width: number, height: number, fits: boolean }
+   */
+  measureTextFit(fontSize, text, maxWidth, maxHeight) {
+    this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+    const lines = text.split("\n");
+    const lineHeight = fontSize;
+    const lineSpacing = fontSize * 0.1;
+    const spacing = fontSize * 0.05;
+    let maxLineWidth = 0;
+    for (const line of lines) {
+      if (line.length === 0) continue;
+      const textWidth = this.offCtx.measureText(line).width;
+      const totalWidth = textWidth + spacing * (line.length > 0 ? line.length - 1 : 0);
+      maxLineWidth = Math.max(maxLineWidth, totalWidth);
+    }
+    const totalHeight = lines.length > 0 ? lineHeight * lines.length + lineSpacing * (lines.length - 1) : lineHeight;
+    return {
+      width: maxLineWidth,
+      height: totalHeight,
+      fits: maxLineWidth <= maxWidth && totalHeight <= maxHeight
+    };
+  }
+  /**
+   * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+   * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+   */
+  findOptimalFontSize(text, maxWidth, maxHeight, initialFontSize) {
+    const minFontSize = 12;
+    const initialMeasure = this.measureTextFit(initialFontSize, text, maxWidth, maxHeight);
+    if (initialMeasure.fits) {
+      return initialFontSize;
+    }
+    if (initialFontSize <= minFontSize) {
+      return minFontSize;
+    }
+    let low = minFontSize;
+    let high = initialFontSize;
+    let bestSize = minFontSize;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const measure = this.measureTextFit(mid, text, maxWidth, maxHeight);
+      if (measure.fits) {
+        bestSize = mid;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    return bestSize;
+  }
+  buildTargets() {
+    if (this.W <= 0 || this.H <= 0) {
+      return;
+    }
+    const text = 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 base = Math.min(this.W, this.H);
+    const initialFontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
+    const padding = 40;
+    const maxWidth = this.W - padding * 2;
+    const maxHeight = this.H - padding * 2;
+    const fontSize = this.findOptimalFontSize(text, maxWidth, maxHeight, initialFontSize);
+    this.offCtx.fillStyle = "#ffffff";
+    this.offCtx.textAlign = "center";
+    this.offCtx.textBaseline = "middle";
+    this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+    const lines = text.split("\n");
+    const lineHeight = fontSize;
+    const lineSpacing = fontSize * 0.1;
+    const spacing = fontSize * 0.05;
+    const totalTextHeight = lines.length > 0 ? lineHeight * lines.length + lineSpacing * (lines.length - 1) : lineHeight;
+    let startY = this.H / 2 - totalTextHeight / 2 + lineHeight / 2;
+    for (const line of lines) {
+      if (line.length === 0) {
+        startY += lineHeight + lineSpacing;
+        continue;
+      }
+      const chars = line.split("");
+      const totalWidth = this.offCtx.measureText(line).width + spacing * (chars.length - 1);
+      let x = this.W / 2 - totalWidth / 2;
+      for (const ch of chars) {
+        this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, startY);
+        x += this.offCtx.measureText(ch).width + spacing;
+      }
+      startY += lineHeight + lineSpacing;
+    }
+    const step = Math.max(2, this.config.densityStep);
+    const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
+    const targets = [];
+    for (let y = 0; y < this.H; y += step) {
+      for (let x = 0; x < this.W; x += step) {
+        const i = (y * this.W + x) * 4;
+        if (img[i] + img[i + 1] + img[i + 2] > 600) {
+          targets.push({ x, y });
+        }
+      }
+    }
+    while (targets.length > this.config.maxParticles) {
+      targets.splice(Math.floor(Math.random() * targets.length), 1);
+    }
+    if (this.particles.length < targets.length) {
+      const need = targets.length - this.particles.length;
+      for (let i = 0; i < need; i++) {
+        this.particles.push(this.makeParticle());
+      }
+    } else if (this.particles.length > targets.length) {
+      this.particles.length = targets.length;
+    }
+    for (let i = 0; i < this.particles.length; i++) {
+      const p = this.particles[i];
+      const t = targets[i];
+      p.tx = t.x;
+      p.ty = t.y;
+    }
+  }
+  makeParticle() {
+    const sx = Math.random() * this.W;
+    const sy = Math.random() * this.H;
+    return {
+      x: sx,
+      y: sy,
+      vx: 0,
+      vy: 0,
+      tx: sx,
+      ty: sy,
+      initialX: sx,
+      // 초기 위치 저장 (scatter 시 돌아갈 위치)
+      initialY: sy,
+      j: Math.random() * Math.PI * 2
+    };
+  }
+  initParticles() {
+    for (const p of this.particles) {
+      const sx = Math.random() * this.W;
+      const sy = Math.random() * this.H;
+      p.x = sx;
+      p.y = sy;
+      p.vx = p.vy = 0;
+      p.initialX = sx;
+      p.initialY = sy;
+    }
+  }
+  scatter() {
+    for (const p of this.particles) {
+      if (p.initialX !== void 0 && p.initialY !== void 0) {
+        p.tx = p.initialX;
+        p.ty = p.initialY;
+      } else {
+        p.initialX = p.x;
+        p.initialY = p.y;
+        p.tx = p.initialX;
+        p.ty = p.initialY;
+      }
+    }
+  }
+  morph(textOrOptions) {
+    this._debouncedMorph(textOrOptions);
+  }
+  _morphInternal(textOrOptions) {
+    if (this.W === 0 || this.H === 0) {
+      this.resize();
+    }
+    if (typeof textOrOptions === "string") {
+      this.config.text = textOrOptions;
+      this.buildTargets();
+    } else if (textOrOptions && typeof textOrOptions === "object") {
+      const needsRebuild = textOrOptions.text !== void 0;
+      this.config = { ...this.config, ...textOrOptions };
+      if (needsRebuild) {
+        this.buildTargets();
+      }
+    } else {
+      this.buildTargets();
+    }
+  }
+  update() {
+    this.ctx.clearRect(0, 0, this.W, this.H);
+    for (const p of this.particles) {
+      let ax = (p.tx - p.x) * this.config.ease;
+      let ay = (p.ty - p.y) * this.config.ease;
+      if (this.mouse.x || this.mouse.y) {
+        const dx = p.x - this.mouse.x;
+        const dy = p.y - this.mouse.y;
+        const d2 = dx * dx + dy * dy;
+        const r2 = this.config.repelRadius * this.DPR;
+        if (d2 < r2 * r2) {
+          const d = Math.sqrt(d2) + 1e-4;
+          const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r2);
+          ax += dx / d * f * 6;
+          ay += dy / d * f * 6;
+        }
+      }
+      p.j += 2;
+      ax += Math.cos(p.j) * 0.05;
+      ay += Math.sin(p.j * 1.3) * 0.05;
+      p.vx = (p.vx + ax) * Math.random();
+      p.vy = (p.vy + ay) * Math.random();
+      p.x += p.vx;
+      p.y += p.vy;
+    }
+    this.ctx.fillStyle = this.config.particleColor;
+    const r = this.config.pointSize * this.DPR;
+    for (const p of this.particles) {
+      this.ctx.beginPath();
+      this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+      this.ctx.fill();
+    }
+    if (this.config.onUpdate) {
+      this.config.onUpdate(this);
+    }
+  }
+  animate() {
+    if (!this.isRunning) return;
+    this.update();
+    this.animationId = requestAnimationFrame(() => this.animate());
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.animate();
+  }
+  stop() {
+    this.isRunning = false;
+    if (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(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    this.mouse.x = (e.clientX - rect.left) * this.DPR;
+    this.mouse.y = (e.clientY - rect.top) * this.DPR;
+  }
+  handleMouseLeave() {
+    this.mouse.x = this.mouse.y = 0;
+  }
+  handleMouseDown() {
+    this.mouse.down = true;
+  }
+  handleMouseUp() {
+    this.mouse.down = false;
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    this._debouncedUpdateConfig(newConfig);
+  }
+  _updateConfigInternal(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    if (newConfig.text) {
+      this.buildTargets();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    this.removeEventListeners();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
+  }
+}
+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[21](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[21](null);
+    }
+  };
+}
+function instance_1($$self, $$props, $$invalidate) {
+  let { text = "mason effect" } = $$props;
+  let { densityStep = 2 } = $$props;
+  let { maxParticles = 3200 } = $$props;
+  let { pointSize = 0.5 } = $$props;
+  let { ease = 0.05 } = $$props;
+  let { repelRadius = 150 } = $$props;
+  let { repelStrength = 1 } = $$props;
+  let { particleColor = "#fff" } = $$props;
+  let { fontFamily = "Inter, system-ui, Arial" } = $$props;
+  let { fontSize = null } = $$props;
+  let { width = null } = $$props;
+  let { height = null } = $$props;
+  let { devicePixelRatio = null } = $$props;
+  let { className = "" } = $$props;
+  let { style = {} } = $$props;
+  const dispatch = createEventDispatcher();
+  let container;
+  let instance = null;
+  onMount(() => {
+    if (!container) return;
+    const options = {
+      text,
+      densityStep,
+      maxParticles,
+      pointSize,
+      ease,
+      repelRadius,
+      repelStrength,
+      particleColor,
+      fontFamily,
+      fontSize,
+      width,
+      height,
+      devicePixelRatio,
+      onReady: (inst) => {
+        dispatch("ready", inst);
+      },
+      onUpdate: (inst) => {
+        dispatch("update", inst);
+      }
+    };
+    $$invalidate(20, instance = new MasonEffect(container, options));
+  });
+  onDestroy(() => {
+    if (instance) {
+      instance.destroy();
+      $$invalidate(20, instance = null);
+    }
+  });
+  function morph(textOrOptions) {
+    if (instance) {
+      instance.morph(textOrOptions);
+    }
+  }
+  function scatter() {
+    if (instance) {
+      instance.scatter();
+    }
+  }
+  function updateConfig(config) {
+    if (instance) {
+      instance.updateConfig(config);
+    }
+  }
+  function destroy() {
+    if (instance) {
+      instance.destroy();
+      $$invalidate(20, instance = null);
+    }
+  }
+  function div_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      container = $$value;
+      $$invalidate(2, container);
+    });
+  }
+  $$self.$$set = ($$props2) => {
+    if ("text" in $$props2) $$invalidate(3, text = $$props2.text);
+    if ("densityStep" in $$props2) $$invalidate(4, densityStep = $$props2.densityStep);
+    if ("maxParticles" in $$props2) $$invalidate(5, maxParticles = $$props2.maxParticles);
+    if ("pointSize" in $$props2) $$invalidate(6, pointSize = $$props2.pointSize);
+    if ("ease" in $$props2) $$invalidate(7, ease = $$props2.ease);
+    if ("repelRadius" in $$props2) $$invalidate(8, repelRadius = $$props2.repelRadius);
+    if ("repelStrength" in $$props2) $$invalidate(9, repelStrength = $$props2.repelStrength);
+    if ("particleColor" in $$props2) $$invalidate(10, particleColor = $$props2.particleColor);
+    if ("fontFamily" in $$props2) $$invalidate(11, fontFamily = $$props2.fontFamily);
+    if ("fontSize" in $$props2) $$invalidate(12, fontSize = $$props2.fontSize);
+    if ("width" in $$props2) $$invalidate(13, width = $$props2.width);
+    if ("height" in $$props2) $$invalidate(14, height = $$props2.height);
+    if ("devicePixelRatio" in $$props2) $$invalidate(15, devicePixelRatio = $$props2.devicePixelRatio);
+    if ("className" in $$props2) $$invalidate(0, className = $$props2.className);
+    if ("style" in $$props2) $$invalidate(1, style = $$props2.style);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & /*instance, text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio*/
+    1114104) {
+      {
+        if (instance) {
+          instance.updateConfig({
+            text,
+            densityStep,
+            maxParticles,
+            pointSize,
+            ease,
+            repelRadius,
+            repelStrength,
+            particleColor,
+            fontFamily,
+            fontSize,
+            width,
+            height,
+            devicePixelRatio
+          });
+        }
+      }
+    }
+  };
+  return [
+    className,
+    style,
+    container,
+    text,
+    densityStep,
+    maxParticles,
+    pointSize,
+    ease,
+    repelRadius,
+    repelStrength,
+    particleColor,
+    fontFamily,
+    fontSize,
+    width,
+    height,
+    devicePixelRatio,
+    morph,
+    scatter,
+    updateConfig,
+    destroy,
+    instance,
+    div_binding
+  ];
+}
+class MasonEffect_1 extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance_1, create_fragment, safe_not_equal, {
+      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];
+  }
+}
+export {
+  MasonEffect_1 as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masoneffect",
-  "version": "1.0.27",
-  "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
+  "version": "1.0.29",
+  "description": "A library that provides particle morphing effects. It can be used with React, Vue, Svelte, and vanilla JavaScript.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -20,13 +20,20 @@
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
       "types": "./dist/vue/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./dist/svelte/index.mjs",
+      "require": "./dist/svelte/index.cjs",
+      "types": "./dist/svelte/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && vite build && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:svelte && node scripts/generate-react-types.js",
+    "build:vue": "vite build --config vite.config.vue.mjs",
+    "build:svelte": "vite build --config vite.config.svelte.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -57,12 +64,15 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-vue": "^5.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rollup": "^4.9.0",
+    "svelte": "^4.0.0",
+    "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
@@ -70,6 +80,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0 || >=19.0.0-0",
+    "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
     "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
@@ -78,6 +89,9 @@
     },
     "vue": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   }
 }