masoneffect 2.0.20 → 2.0.21

package/dist/vue/textToParticle/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function i(t,e){let i=null;return function(...s){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,s)},e)}}class s{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=e.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=i(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=i(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=i(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.container.getBoundingClientRect(),e=this.config.width||t.width||this.container.clientWidth||window.innerWidth,i=this.config.height||t.height||this.container.clientHeight||.7*window.innerHeight;if(e<=0||i<=0)return;this.W=Math.floor(e*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=e+"px",this.canvas.style.height=i+"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 v of h){if(0===v.length){c+=a+l;continue}const t=v.split(""),e=this.offCtx.measureText(v).width+r*(t.length>0?t.length-1:0);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 u=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let v=0;v<this.H;v+=u)for(let t=0;t<this.W;t+=u){const e=4*(v*this.W+t);f[e]+f[e+1]+f[e+2]>600&&p.push({x:t,y:v})}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 v=0;v<this.particles.length;v++){const t=this.particles[v],e=p[v];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 s of this.particles){let t=(s.tx-s.x)*this.config.ease,e=(s.ty-s.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=s.x-this.mouse.x,n=s.y-this.mouse.y,o=i*i+n*n,h=this.config.repelRadius*this.DPR;if(o<h*h){const s=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-s/h);t+=i/s*a*6,e+=n/s*a*6}}s.j+=2,t+=.05*Math.cos(s.j),e+=.05*Math.sin(1.3*s.j),s.vx=(s.vx+t)*Math.random(),s.vy=(s.vy+e)*Math.random(),s.x+=s.vx,s.y+=s.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,e=Math.max(.5,Math.min(2,t/1920)),i=this.config.pointSize*this.DPR*e;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.y,i,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.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const n=t.defineComponent({__name:"TextToParticle",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(e,{expose:i,emit:n}){const o=e,h=n,a=t.ref(null);let l=null,r=null,d=null,c=null;const u=t.computed(()=>({width:"100%",height:"100%",minHeight:300,position:"relative",...o.style})),f=()=>{if(!a.value)return;if(l)return;const t=a.value.querySelector("canvas");t&&t.remove();const e=a.value.getBoundingClientRect();if(!(e.width>0&&e.height>0)){if("undefined"!=typeof ResizeObserver){let t=0;const e=20;return d&&(d.disconnect(),d=null),d=new ResizeObserver(()=>{var i;t++;const s=null==(i=a.value)?void 0:i.getBoundingClientRect();(s&&s.width>0&&s.height>0||t>=e)&&(d&&(d.disconnect(),d=null),f())}),void d.observe(a.value)}return void(c=window.setTimeout(f,50))}const i={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new s(a.value,i),"undefined"!=typeof ResizeObserver&&(r=new ResizeObserver(()=>{l&&l.resize()}),r.observe(a.value))};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(()=>{requestAnimationFrame(f)}),t.onBeforeUnmount(()=>{c&&(clearTimeout(c),c=null),d&&(d.disconnect(),d=null),r&&(r.disconnect(),r=null),l&&(l.destroy(),l=null)}),i({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(u.value)},null,6))}});module.exports=n;
+"use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function i(t,e){let i=null;return function(...s){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,s)},e)}}class s{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=e.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=i(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=i(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=i(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.container.getBoundingClientRect(),e=this.config.width||t.width||this.container.clientWidth||window.innerWidth,i=this.config.height||t.height||this.container.clientHeight||.7*window.innerHeight;if(e<=0||i<=0)return;this.W=Math.floor(e*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=e+"px",this.canvas.style.height=i+"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 v of h){if(0===v.length){c+=a+l;continue}const t=v.split(""),e=this.offCtx.measureText(v).width+r*(t.length>0?t.length-1:0);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 u=Math.max(2,Math.round(this.config.densityStep*this.DPR)),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let v=0;v<this.H;v+=u)for(let t=0;t<this.W;t+=u){const e=4*(v*this.W+t);f[e]+f[e+1]+f[e+2]>600&&p.push({x:t,y:v})}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 v=0;v<this.particles.length;v++){const t=this.particles[v],e=p[v];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 s of this.particles){let t=(s.tx-s.x)*this.config.ease,e=(s.ty-s.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=s.x-this.mouse.x,n=s.y-this.mouse.y,o=i*i+n*n,h=this.config.repelRadius*this.DPR;if(o<h*h){const s=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-s/h);t+=i/s*a*6,e+=n/s*a*6}}s.j+=2,t+=.05*Math.cos(s.j),e+=.05*Math.sin(1.3*s.j),s.vx=(s.vx+t)*Math.random(),s.vy=(s.vy+e)*Math.random(),s.x+=s.vx,s.y+=s.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,e=Math.max(.5,Math.min(3,t/300)),i=this.config.pointSize*this.DPR*e;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.y,i,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.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const n=t.defineComponent({__name:"TextToParticle",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(e,{expose:i,emit:n}){const o=e,h=n,a=t.ref(null);let l=null,r=null,d=null,c=null;const u=t.computed(()=>({width:"100%",height:"100%",minHeight:300,position:"relative",...o.style})),f=()=>{if(!a.value)return;if(l)return;const t=a.value.querySelector("canvas");t&&t.remove();const e=a.value.getBoundingClientRect();if(!(e.width>0&&e.height>0)){if("undefined"!=typeof ResizeObserver){let t=0;const e=20;return d&&(d.disconnect(),d=null),d=new ResizeObserver(()=>{var i;t++;const s=null==(i=a.value)?void 0:i.getBoundingClientRect();(s&&s.width>0&&s.height>0||t>=e)&&(d&&(d.disconnect(),d=null),f())}),void d.observe(a.value)}return void(c=window.setTimeout(f,50))}const i={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new s(a.value,i),"undefined"!=typeof ResizeObserver&&(r=new ResizeObserver(()=>{l&&l.resize()}),r.observe(a.value))};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(()=>{requestAnimationFrame(f)}),t.onBeforeUnmount(()=>{c&&(clearTimeout(c),c=null),d&&(d.disconnect(),d=null),r&&(r.disconnect(),r=null),l&&(l.destroy(),l=null)}),i({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(u.value)},null,6))}});module.exports=n;

package/dist/vue/textToParticle/index.mjs

@@ -317,7 +317,7 @@ class TextToParticle {
       }
       startY += lineHeight + lineSpacing;
     }
-    const step = Math.max(2, this.config.densityStep);
+    const step = Math.max(2, Math.round(this.config.densityStep * this.DPR));
     const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
     const targets = [];
     for (let y = 0; y < this.H; y += step) {
@@ -432,9 +432,8 @@ class TextToParticle {
       p.y += p.vy;
     }
     this.ctx.fillStyle = this.config.particleColor;
-    const baseSize = 1920;
-    const currentSize = Math.min(this.W, this.H) / this.DPR;
-    const sizeRatio = Math.max(0.5, Math.min(2, currentSize / baseSize));
+    const cssMin = Math.min(this.W, this.H) / this.DPR;
+    const sizeRatio = Math.max(0.5, Math.min(3, cssMin / 300));
     const r = this.config.pointSize * this.DPR * sizeRatio;
     for (const p of this.particles) {
       this.ctx.beginPath();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -131,7 +131,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:vue:textSpin && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && npm run build:svelte:textSpin && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:vue:textSpin && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && npm run build:svelte:textSpin",
     "build:vue": "vite build --config config/vite/vite.config.vue.mjs",
     "build:vue:textToParticle": "vite build --config config/vite/vite.config.vue.textToParticle.mjs",
     "build:vue:count": "vite build --config config/vite/vite.config.vue.count.mjs",
@@ -145,8 +145,6 @@
     "build:svelte:scrollFadeIn": "vite build --config config/vite/vite.config.svelte.scrollFadeIn.mjs",
     "build:svelte:textSpin": "vite build --config config/vite/vite.config.svelte.textSpin.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
-    "serve": "npx http-server . -p 8080 -o --cors",
-    "dev:example": "npm run serve",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx}\" \"eslint.config.mjs\" \"prettier.config.mjs\" \"config/**/*.mjs\"",