masoneffect 1.0.25 → 1.0.27

package/README.md

@@ -1,6 +1,6 @@
 # MasonEffect ![npm](https://img.shields.io/npm/dy/masoneffect)
 
-**Release version 1.0.25**
+**Release version 1.0.27**
 
 A library that provides particle morphing effects. It can be used with React, Vue, and vanilla JavaScript.
 
@@ -29,6 +29,9 @@ const effect = new MasonEffect(container, {
 // Change text
 effect.morph({ text: 'New Text' });
 
+// Multi-line text support (use \n for line breaks)
+effect.morph({ text: 'Line 1\nLine 2\nLine 3' });
+
 // Change text along with other properties
 effect.morph({
   text: 'New Text',
@@ -44,7 +47,7 @@ effect.scatter();
 #### Using CDN (UMD)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.25/dist/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.27/dist/index.umd.min.js"></script>
 <script>
   const container = document.getElementById('my-container');
   const effect = new MasonEffect(container, {
@@ -59,6 +62,9 @@ effect.scatter();
   // Change text
   effect.morph({ text: 'Morphed!' });
 
+  // Multi-line text support
+  effect.morph({ text: 'Line 1\nLine 2\nLine 3' });
+
   // Return particles to initial position
   effect.scatter();
 
@@ -90,7 +96,7 @@ function App() {
   };
 
   const handleChangeText = () => {
-    const texts = ['Hello', 'World', 'Mason', 'Effect', 'Particles'];
+    const texts = ['Hello', 'World', 'Mason', 'Effect', 'Particles', 'Line 1\nLine 2'];
     const randomText = texts[Math.floor(Math.random() * texts.length)];
     effectRef.current?.morph({ text: randomText });
   };
@@ -117,6 +123,8 @@ function App() {
             console.log('Ready!', instance);
           }}
         />
+        {/* Multi-line text example */}
+        {/* <MasonEffect text="Line 1\nLine 2\nLine 3" /> */}
       </div>
       <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
         <button onClick={handleMorph}>Morph</button>
@@ -151,9 +159,9 @@ const handleScatter = () => {
 };
 
 const handleChangeText = () => {
-  const texts = ['Hello', 'World', 'Mason', 'Effect'];
+  const texts = ['Hello', 'World', 'Mason', 'Effect', 'Line 1\nLine 2'];
   const randomText = texts[Math.floor(Math.random() * texts.length)];
-  effectRef.value?.morph(randomText);
+  effectRef.value?.morph({ text: randomText });
 };
 
 const onReady = (instance) => {
@@ -170,6 +178,8 @@ const onReady = (instance) => {
       :max-particles="2000"
       @ready="onReady"
     />
+    <!-- Multi-line text example -->
+    <!-- <MasonEffect text="Line 1\nLine 2\nLine 3" /> -->
     <div style="padding: 20px; display: flex; gap: 10px">
       <button @click="handleMorph">Morph</button>
       <button @click="handleScatter">Scatter</button>
@@ -185,7 +195,7 @@ const onReady = (instance) => {
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `text` | `string` | `'mason effect'` | Text to display |
+| `text` | `string` | `'mason effect'` | Text to display (use `\n` for line breaks) |
 | `densityStep` | `number` | `2` | Particle sampling density (smaller = denser) |
 | `maxParticles` | `number` | `3200` | Maximum number of particles |
 | `pointSize` | `number` | `0.5` | Particle point size |
@@ -194,7 +204,7 @@ const onReady = (instance) => {
 | `repelStrength` | `number` | `1` | Mouse repel strength |
 | `particleColor` | `string` | `'#fff'` | Particle color |
 | `fontFamily` | `string` | `'Inter, system-ui, Arial'` | Font family |
-| `fontSize` | `number \| null` | `null` | Font size (auto if null) |
+| `fontSize` | `number \| null` | `null` | Font size (auto-adjusts to fit container if null, responsive to screen size) |
 | `width` | `number \| null` | `null` | Canvas width (container size if null) |
 | `height` | `number \| null` | `null` | Canvas height (container size if null) |
 | `devicePixelRatio` | `number \| null` | `null` | Device pixel ratio (auto if null) |
@@ -247,6 +257,8 @@ Destroys the instance and cleans up resources.
 - 👁️ **IntersectionObserver**: Automatically pauses animation when not visible (saves resources)
 - ⏱️ **Debouncing**: Prevents excessive calls on resize, morph, and updateConfig methods
 - 🎛️ **Configurable debounce delay**: Adjust or disable debouncing via `debounceDelay` option
+- 📝 **Multi-line text support**: Use `\n` to create line breaks in text
+- 🔤 **Auto font size adjustment**: Automatically adjusts font size to fit within the container (responsive to screen size)
 
 ## Development
 

package/dist/core/index.d.ts

@@ -61,6 +61,20 @@ export declare class MasonEffect {
     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;

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -1 +1 @@
-function t(t,s){let i=null;return function(...h){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,h)},s)}}Object.defineProperty(exports,"t",{value:!0});class s{constructor(s,i={}){if(this.container="string"==typeof s?document.querySelector(s):s,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=t(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.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 s of t)s.target===this.container&&(s.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,s=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||s<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(s*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=s+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}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 s=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*s));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${i}px ${this.config.fontFamily}`;const h=t.split(""),e=.05*i,o=this.offCtx.measureText(t).width+e*(h.length-1);let n=this.W/2-o/2;for(const t of h)this.offCtx.fillText(t,n+this.offCtx.measureText(t).width/2,this.H/2),n+=this.offCtx.measureText(t).width+e;const a=Math.max(2,this.config.densityStep),r=this.offCtx.getImageData(0,0,this.W,this.H).data,l=[];for(let t=0;t<this.H;t+=a)for(let s=0;s<this.W;s+=a){const i=4*(t*this.W+s);r[i]+r[i+1]+r[i+2]>600&&l.push({x:s,y:t})}for(;l.length>this.config.maxParticles;)l.splice(Math.floor(Math.random()*l.length),1);if(this.particles.length<l.length){const t=l.length-this.particles.length;for(let s=0;s<t;s++)this.particles.push(this.makeParticle())}else this.particles.length>l.length&&(this.particles.length=l.length);for(let t=0;t<this.particles.length;t++){const s=this.particles[t],i=l[t];s.tx=i.x,s.ty=i.y}}makeParticle(){const t=Math.random()*this.W,s=Math.random()*this.H;return{x:t,y:s,vx:0,vy:0,tx:t,ty:s,initialX:t,initialY:s,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const s=Math.random()*this.W,i=Math.random()*this.H;t.x=s,t.y=i,t.vx=t.vy=0,t.initialX=s,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.i(t)}h(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 s=void 0!==t.text;this.config={...this.config,...t},s&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let s=(t.tx-t.x)*this.config.ease,i=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,o=h*h+e*e,n=this.config.repelRadius*this.DPR;if(o<n*n){const t=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/n);s+=h/t*a*6,i+=e/t*a*6}}t.j+=2,s+=.05*Math.cos(t.j),i+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+s)*Math.random(),t.vy=(t.vy+i)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.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 s=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-s.left)*this.DPR,this.mouse.y=(t.clientY-s.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(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)}}exports.MasonEffect=s,exports.default=s;
+function t(t,s){let i=null;return function(...h){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,h)},s)}}Object.defineProperty(exports,"t",{value:!0});class s{constructor(s,i={}){if(this.container="string"==typeof s?document.querySelector(s):s,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=i.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.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 s of t)s.target===this.container&&(s.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,s=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||s<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(s*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=s+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,s,i,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=s.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const s=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,s)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=i&&l<=h}}findOptimalFontSize(t,s,i,h){if(this.measureTextFit(h,t,s,i).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,s,i).fits?(o=h,e=h+1):n=h-1}return o}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 s=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*s)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,c=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const s=t.split(""),i=this.offCtx.measureText(t).width+l*(s.length-1);let h=this.W/2-i/2;for(const t of s)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=u)for(let s=0;s<this.W;s+=u){const i=4*(t*this.W+s);d[i]+d[i+1]+d[i+2]>600&&m.push({x:s,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let s=0;s<t;s++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const s=this.particles[t],i=m[t];s.tx=i.x,s.ty=i.y}}makeParticle(){const t=Math.random()*this.W,s=Math.random()*this.H;return{x:t,y:s,vx:0,vy:0,tx:t,ty:s,initialX:t,initialY:s,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const s=Math.random()*this.W,i=Math.random()*this.H;t.x=s,t.y=i,t.vx=t.vy=0,t.initialX=s,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.i(t)}h(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 s=void 0!==t.text;this.config={...this.config,...t},s&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let s=(t.tx-t.x)*this.config.ease,i=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);s+=h/t*r*6,i+=e/t*r*6}}t.j+=2,s+=.05*Math.cos(t.j),i+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+s)*Math.random(),t.vy=(t.vy+i)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.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 s=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-s.left)*this.DPR,this.mouse.y=(t.clientY-s.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(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)}}exports.MasonEffect=s,exports.default=s;

package/dist/index.mjs

@@ -1 +1 @@
-function t(t,s){let i=null;return function(...h){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,h)},s)}}class s{constructor(s,i={}){if(this.container="string"==typeof s?document.querySelector(s):s,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=i.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.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 s of t)s.target===this.container&&(s.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,s=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||s<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(s*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=s+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}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 s=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*s));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${i}px ${this.config.fontFamily}`;const h=t.split(""),e=.05*i,n=this.offCtx.measureText(t).width+e*(h.length-1);let o=this.W/2-n/2;for(const t of h)this.offCtx.fillText(t,o+this.offCtx.measureText(t).width/2,this.H/2),o+=this.offCtx.measureText(t).width+e;const a=Math.max(2,this.config.densityStep),r=this.offCtx.getImageData(0,0,this.W,this.H).data,l=[];for(let t=0;t<this.H;t+=a)for(let s=0;s<this.W;s+=a){const i=4*(t*this.W+s);r[i]+r[i+1]+r[i+2]>600&&l.push({x:s,y:t})}for(;l.length>this.config.maxParticles;)l.splice(Math.floor(Math.random()*l.length),1);if(this.particles.length<l.length){const t=l.length-this.particles.length;for(let s=0;s<t;s++)this.particles.push(this.makeParticle())}else this.particles.length>l.length&&(this.particles.length=l.length);for(let t=0;t<this.particles.length;t++){const s=this.particles[t],i=l[t];s.tx=i.x,s.ty=i.y}}makeParticle(){const t=Math.random()*this.W,s=Math.random()*this.H;return{x:t,y:s,vx:0,vy:0,tx:t,ty:s,initialX:t,initialY:s,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const s=Math.random()*this.W,i=Math.random()*this.H;t.x=s,t.y=i,t.vx=t.vy=0,t.initialX=s,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.t(t)}i(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 s=void 0!==t.text;this.config={...this.config,...t},s&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let s=(t.tx-t.x)*this.config.ease,i=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);s+=h/t*a*6,i+=e/t*a*6}}t.j+=2,s+=.05*Math.cos(t.j),i+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+s)*Math.random(),t.vy=(t.vy+i)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.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 s=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-s.left)*this.DPR,this.mouse.y=(t.clientY-s.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}export{s as MasonEffect,s as default};
+function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,f=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-f/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length-1);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&m.push({x:i,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=m[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}export{i as MasonEffect,i as default};

package/dist/index.umd.min.js

@@ -1 +1 @@
-var t,i;t=this,i=function(){function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}return class{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${s}px ${this.config.fontFamily}`;const h=t.split(""),e=.05*s,n=this.offCtx.measureText(t).width+e*(h.length-1);let o=this.W/2-n/2;for(const t of h)this.offCtx.fillText(t,o+this.offCtx.measureText(t).width/2,this.H/2),o+=this.offCtx.measureText(t).width+e;const a=Math.max(2,this.config.densityStep),r=this.offCtx.getImageData(0,0,this.W,this.H).data,l=[];for(let t=0;t<this.H;t+=a)for(let i=0;i<this.W;i+=a){const s=4*(t*this.W+i);r[s]+r[s+1]+r[s+2]>600&&l.push({x:i,y:t})}for(;l.length>this.config.maxParticles;)l.splice(Math.floor(Math.random()*l.length),1);if(this.particles.length<l.length){const t=l.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>l.length&&(this.particles.length=l.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=l[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*a*6,s+=e/t*a*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).MasonEffect=i();
+var t,i;t=this,i=function(){function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}return class{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,f=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-f/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length-1);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&m.push({x:i,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=m[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).MasonEffect=i();

package/dist/react/MasonEffect.cjs

@@ -1 +1 @@
-var t=require("react");function i(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class s{constructor(t,s={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=i(n,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.t=i(this.i.bind(this),this.debounceDelay),this.h=i(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${s}px ${this.config.fontFamily}`;const h=t.split(""),e=.05*s,n=this.offCtx.measureText(t).width+e*(h.length-1);let o=this.W/2-n/2;for(const t of h)this.offCtx.fillText(t,o+this.offCtx.measureText(t).width/2,this.H/2),o+=this.offCtx.measureText(t).width+e;const a=Math.max(2,this.config.densityStep),r=this.offCtx.getImageData(0,0,this.W,this.H).data,l=[];for(let t=0;t<this.H;t+=a)for(let i=0;i<this.W;i+=a){const s=4*(t*this.W+i);r[s]+r[s+1]+r[s+2]>600&&l.push({x:i,y:t})}for(;l.length>this.config.maxParticles;)l.splice(Math.floor(Math.random()*l.length),1);if(this.particles.length<l.length){const t=l.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>l.length&&(this.particles.length=l.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=l[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*a*6,s+=e/t*a*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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 h=t.forwardRef((i,h)=>{const e=t.useRef(null),n=t.useRef(null);t.useEffect(()=>{if(!e.current)return;let t=null,h=null;const o=()=>{const a=e.current;if(!a)return;if(n.current)return;const r=a.querySelector("canvas");r&&r.remove();const l=a.getBoundingClientRect();if(l.width<=0||l.height<=0)return void(h=window.setTimeout(o,50));const c=100;(l.width<c||l.height<c)&&(a.style.minWidth=c+"px",a.style.minHeight=c+"px");const{className:f,style:u,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:y,particleColor:x,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:b}=i,E={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:y,particleColor:x,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:b};n.current=new s(a,E),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{n.current&&n.current.resize()}),t.observe(a))};return requestAnimationFrame(o),()=>{h&&(clearTimeout(h),h=null),t&&(t.disconnect(),t=null),n.current&&(n.current.destroy(),n.current=null)}},[]),t.useEffect(()=>{if(!n.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:a,repelStrength:r,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p}=i;n.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:a,repelStrength:r,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),t.useImperativeHandle(h,()=>({morph:t=>{n.current?n.current.morph(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{n.current?n.current.scatter():console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{n.current?n.current.updateConfig(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{n.current&&(n.current.destroy(),n.current=null)}}));const o={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:e,className:i.className,style:o})});h.displayName="MasonEffect",module.exports=h;
+var t=require("react");function i(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class s{constructor(t,s={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d");if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d");if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=i(n,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.t=i(this.i.bind(this),this.debounceDelay),this.h=i(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,c=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length-1);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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 h=t.forwardRef((i,h)=>{const e=t.useRef(null),n=t.useRef(null);t.useEffect(()=>{if(!e.current)return;let t=null,h=null;const o=()=>{const r=e.current;if(!r)return;if(n.current)return;const a=r.querySelector("canvas");a&&a.remove();const l=r.getBoundingClientRect();if(l.width<=0||l.height<=0)return void(h=window.setTimeout(o,50));const c=100;(l.width<c||l.height<c)&&(r.style.minWidth=c+"px",r.style.minHeight=c+"px");const{className:f,style:u,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:F}=i,b={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:F};n.current=new s(r,b),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{n.current&&n.current.resize()}),t.observe(r))};return requestAnimationFrame(o),()=>{h&&(clearTimeout(h),h=null),t&&(t.disconnect(),t=null),n.current&&(n.current.destroy(),n.current=null)}},[]),t.useEffect(()=>{if(!n.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:r,repelStrength:a,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p}=i;n.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:r,repelStrength:a,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),t.useImperativeHandle(h,()=>({morph:t=>{n.current?n.current.morph(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{n.current?n.current.scatter():console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{n.current?n.current.updateConfig(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{n.current&&(n.current.destroy(),n.current=null)}}));const o={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:e,className:i.className,style:o})});h.displayName="MasonEffect",module.exports=h;

package/dist/react/MasonEffect.mjs

@@ -1 +1 @@
-import t,{forwardRef as i,useRef as s,useEffect as h,useImperativeHandle as e}from"react";function n(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class o{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d");if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const h=this.offCanvas.getContext("2d");if(!h)throw new Error("Offscreen canvas context not available");this.offCtx=h,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=i.debounceDelay??150;const e=this.handleResize.bind(this);this.handleResize=n(e,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.t=n(this.i.bind(this),this.debounceDelay),this.h=n(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${s}px ${this.config.fontFamily}`;const h=t.split(""),e=.05*s,n=this.offCtx.measureText(t).width+e*(h.length-1);let o=this.W/2-n/2;for(const t of h)this.offCtx.fillText(t,o+this.offCtx.measureText(t).width/2,this.H/2),o+=this.offCtx.measureText(t).width+e;const a=Math.max(2,this.config.densityStep),r=this.offCtx.getImageData(0,0,this.W,this.H).data,l=[];for(let t=0;t<this.H;t+=a)for(let i=0;i<this.W;i+=a){const s=4*(t*this.W+i);r[s]+r[s+1]+r[s+2]>600&&l.push({x:i,y:t})}for(;l.length>this.config.maxParticles;)l.splice(Math.floor(Math.random()*l.length),1);if(this.particles.length<l.length){const t=l.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>l.length&&(this.particles.length=l.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=l[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*a*6,s+=e/t*a*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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 a=i((i,n)=>{const a=s(null),r=s(null);h(()=>{if(!a.current)return;let t=null,s=null;const h=()=>{const e=a.current;if(!e)return;if(r.current)return;const n=e.querySelector("canvas");n&&n.remove();const l=e.getBoundingClientRect();if(l.width<=0||l.height<=0)return void(s=window.setTimeout(h,50));const c=100;(l.width<c||l.height<c)&&(e.style.minWidth=c+"px",e.style.minHeight=c+"px");const{className:f,style:u,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:b}=i,E={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:b};r.current=new o(e,E),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{r.current&&r.current.resize()}),t.observe(e))};return requestAnimationFrame(h),()=>{s&&(clearTimeout(s),s=null),t&&(t.disconnect(),t=null),r.current&&(r.current.destroy(),r.current=null)}},[]),h(()=>{if(!r.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:a,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p}=i;r.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:a,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),e(n,()=>({morph:t=>{r.current?r.current.morph(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{r.current?r.current.scatter():console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{r.current?r.current.updateConfig(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{r.current&&(r.current.destroy(),r.current=null)}}));const l={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:a,className:i.className,style:l})});a.displayName="MasonEffect";export{a as default};
+import t,{forwardRef as i,useRef as s,useEffect as h,useImperativeHandle as e}from"react";function n(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class o{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d");if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const h=this.offCanvas.getContext("2d");if(!h)throw new Error("Offscreen canvas context not available");this.offCtx=h,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=i.debounceDelay??150;const e=this.handleResize.bind(this);this.handleResize=n(e,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.t=n(this.i.bind(this),this.debounceDelay),this.h=n(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,c=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length-1);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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 r=i((i,n)=>{const r=s(null),a=s(null);h(()=>{if(!r.current)return;let t=null,s=null;const h=()=>{const e=r.current;if(!e)return;if(a.current)return;const n=e.querySelector("canvas");n&&n.remove();const l=e.getBoundingClientRect();if(l.width<=0||l.height<=0)return void(s=window.setTimeout(h,50));const c=100;(l.width<c||l.height<c)&&(e.style.minWidth=c+"px",e.style.minHeight=c+"px");const{className:f,style:u,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:F}=i,b={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:M,repelStrength:x,particleColor:y,fontFamily:S,fontSize:g,width:z,height:R,devicePixelRatio:P,onReady:C,onUpdate:F};a.current=new o(e,b),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{a.current&&a.current.resize()}),t.observe(e))};return requestAnimationFrame(h),()=>{s&&(clearTimeout(s),s=null),t&&(t.disconnect(),t=null),a.current&&(a.current.destroy(),a.current=null)}},[]),h(()=>{if(!a.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:r,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p}=i;a.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:r,particleColor:l,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),e(n,()=>({morph:t=>{a.current?a.current.morph(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{a.current?a.current.scatter():console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{a.current?a.current.updateConfig(t):console.warn("MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{a.current&&(a.current.destroy(),a.current=null)}}));const l={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:r,className:i.className,style:l})});r.displayName="MasonEffect";export{r as default};

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

@@ -61,6 +61,20 @@ export declare class MasonEffect {
     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;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"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"}

package/dist/vue/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");function e(t,e){let i=null;return function(...s){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,s)},e)}}class i{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d");if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d");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=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=e(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.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())}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));this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${i}px ${this.config.fontFamily}`;const s=t.split(""),n=.05*i,o=this.offCtx.measureText(t).width+n*(s.length-1);let a=this.W/2-o/2;for(const d of s)this.offCtx.fillText(d,a+this.offCtx.measureText(d).width/2,this.H/2),a+=this.offCtx.measureText(d).width+n;const h=Math.max(2,this.config.densityStep),l=this.offCtx.getImageData(0,0,this.W,this.H).data,r=[];for(let d=0;d<this.H;d+=h)for(let t=0;t<this.W;t+=h){const e=4*(d*this.W+t);l[e]+l[e+1]+l[e+2]>600&&r.push({x:t,y:d})}for(;r.length>this.config.maxParticles;)r.splice(Math.floor(Math.random()*r.length),1);if(this.particles.length<r.length){const t=r.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>r.length&&(this.particles.length=r.length);for(let d=0;d<this.particles.length;d++){const t=this.particles[d],e=r[d];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 s=e.x-this.mouse.x,n=e.y-this.mouse.y,o=s*s+n*n,a=this.config.repelRadius*this.DPR;if(o<a*a){const e=Math.sqrt(o)+1e-4,h=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/a);t+=s/e*h*6,i+=n/e*h*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 s=t.defineComponent({__name:"MasonEffect",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(e,{expose:s,emit:n}){const o=e,a=n,h=t.ref(null);let l=null;return t.watch(()=>[o.text,o.densityStep,o.maxParticles,o.pointSize,o.ease,o.repelRadius,o.repelStrength,o.particleColor,o.fontFamily,o.fontSize,o.width,o.height,o.devicePixelRatio],()=>{l&&l.updateConfig({text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio})}),t.onMounted(()=>{(()=>{if(!h.value)return;const t={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),a("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)}};l=new i(h.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),s({morph:t=>{l&&l.morph(t)},scatter:()=>{l&&l.scatter()},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(i,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:h,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=s;
+"use strict";const t=require("vue");function e(t,e){let i=null;return function(...s){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,s)},e)}}class i{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d");if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d");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=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=e(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.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,s){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const n=e.split("\n"),o=t,h=.1*t,a=.05*t;let l=0;for(const d of n){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+a*(d.length>0?d.length-1:0);l=Math.max(l,t)}const r=n.length>0?o*n.length+h*(n.length-1):o;return{width:l,height:r,fits:l<=i&&r<=s}}findOptimalFontSize(t,e,i,s){if(this.measureTextFit(s,t,e,i).fits)return s;if(s<=12)return 12;let n=12,o=s,h=12;for(;n<=o;){const s=Math.floor((n+o)/2);this.measureTextFit(s,t,e,i).fits?(h=s,n=s+1):o=s-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),s=this.W-80,n=this.H-80,o=this.findOptimalFontSize(t,s,n,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,l=.1*o,r=.05*o,d=h.length>0?a*h.length+l*(h.length-1):a;let c=this.H/2-d/2+a/2;for(const m of h){if(0===m.length){c+=a+l;continue}const t=m.split(""),e=this.offCtx.measureText(m).width+r*(t.length-1);let i=this.W/2-e/2;for(const s of t)this.offCtx.fillText(s,i+this.offCtx.measureText(s).width/2,c),i+=this.offCtx.measureText(s).width+r;c+=a+l}const f=Math.max(2,this.config.densityStep),u=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let m=0;m<this.H;m+=f)for(let t=0;t<this.W;t+=f){const e=4*(m*this.W+t);u[e]+u[e+1]+u[e+2]>600&&p.push({x:t,y:m})}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 m=0;m<this.particles.length;m++){const t=this.particles[m],e=p[m];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 s=e.x-this.mouse.x,n=e.y-this.mouse.y,o=s*s+n*n,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+=s/e*a*6,i+=n/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 s=t.defineComponent({__name:"MasonEffect",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(e,{expose:s,emit:n}){const o=e,h=n,a=t.ref(null);let l=null;return t.watch(()=>[o.text,o.densityStep,o.maxParticles,o.pointSize,o.ease,o.repelRadius,o.repelStrength,o.particleColor,o.fontFamily,o.fontSize,o.width,o.height,o.devicePixelRatio],()=>{l&&l.updateConfig({text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new i(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),s({morph:t=>{l&&l.morph(t)},scatter:()=>{l&&l.scatter()},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(i,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=s;

package/dist/vue/index.d.ts

@@ -28,63 +28,77 @@ declare class MasonEffect {
     init(): void;
     setupIntersectionObserver(): void;
     resize(): void;
-    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;
+    /**
+     * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+     * @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;
-}
+    /**
+     * 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 declare interface Particle {
+        x: number;
+        y: number;
+        vx: number;
+        vy: number;
+        tx: number;
+        ty: number;
+        initialX?: number;
+        initialY?: number;
+        j: number;
+    }
 
-export { }
+    export { }

package/dist/vue/index.mjs

@@ -132,6 +132,62 @@ class MasonEffect {
       }
     }
   }
+  /**
+   * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+   * @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;
@@ -141,27 +197,43 @@ class MasonEffect {
     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 fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
+    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 chars = text.split("");
+    const lines = text.split("\n");
+    const lineHeight = fontSize;
+    const lineSpacing = fontSize * 0.1;
     const spacing = fontSize * 0.05;
-    const totalWidth = this.offCtx.measureText(text).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, this.H / 2);
-      x += this.offCtx.measureText(ch).width + spacing;
+    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 x2 = 0; x2 < this.W; x2 += step) {
-        const i = (y * this.W + x2) * 4;
+      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: x2, y });
+          targets.push({ x, y });
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",