masoneffect 2.0.18 → 2.0.19

package/README.md

@@ -1,6 +1,6 @@
 # MasonEffect ![npm](https://img.shields.io/npm/dy/masoneffect)
 
-**Release version 2.0.18**
+**Release version 2.0.19**
 
 A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with **Tree-shaking** support.
 
@@ -33,20 +33,11 @@ This guide is optimized for AI agents to automatically configure MasonEffect cor
 
 ## 🎯 Available Effects
 
-### 1. TextToParticle
-Converts text into animated particles with morphing effects.
-
-### 2. Count
-Animated number counting with intersection observer support.
-
-### 3. Typing
-Typing animation effect with Korean character decomposition.
-
-### 4. ScrollFadeIn
-Scroll-triggered fade-in animation effect with IntersectionObserver and Page Visibility API support.
-
-### 5. TextSpin
-Text animation effect that splits text into individual characters and reveals them randomly with a spin effect.
+1. **TextToParticle** - Converts text into animated particles with morphing effects
+2. **Count** - Animated number counting with intersection observer support
+3. **Typing** - Typing animation effect with Korean character decomposition
+4. **ScrollFadeIn** - Scroll-triggered fade-in animation effect
+5. **TextSpin** - Text animation that splits text into characters and reveals them randomly with a spin effect
 
 ---
 
@@ -54,26 +45,33 @@ Text animation effect that splits text into individual characters and reveals th
 
 ### Tree-shaking (Recommended)
 
-Import only the effects you need:
-
 ```typescript
 // ✅ Recommended: Import only what you need
 import { TextToParticle } from 'masoneffect/textToParticle';
 import { Count } from 'masoneffect/count';
 ```
 
-### Legacy Import (Backward Compatible)
+### Framework-specific imports
 
 ```typescript
-// ⚠️ Not recommended: Imports all effects
-import { TextToParticle, Count } from 'masoneffect';
+// React
+import TextToParticle from 'masoneffect/react/textToParticle';
+import Count from 'masoneffect/react/count';
+
+// Vue
+import TextToParticle from 'masoneffect/vue/textToParticle';
+import Count from 'masoneffect/vue/count';
+
+// Svelte
+import TextToParticle from 'masoneffect/svelte/textToParticle';
+import Count from 'masoneffect/svelte/count';
 ```
 
 ---
 
-## 📖 Usage
+## 📖 Usage Examples
 
-### TextToParticle Effect
+### TextToParticle
 
 #### Vanilla JavaScript
 
@@ -87,13 +85,7 @@ const effect = new TextToParticle(container, {
   maxParticles: 2000,
 });
 
-// Change text
 effect.morph({ text: 'New Text' });
-
-// Multi-line text support
-effect.morph({ text: 'Line 1\nLine 2\nLine 3' });
-
-// Return particles to initial position
 effect.scatter();
 ```
 
@@ -114,9 +106,6 @@ function App() {
         text="Hello React"
         particleColor="#00ff88"
         maxParticles={2000}
-        onReady={(instance) => {
-          console.log('Ready!', instance);
-        }}
       />
       <button onClick={() => effectRef.current?.morph({ text: 'Morphed!' })}>
         Morph
@@ -126,53 +115,7 @@ function App() {
 }
 ```
 
-#### Vue 3
-
-```vue
-<script setup>
-import TextToParticle from 'masoneffect/vue/textToParticle';
-
-const effectRef = ref(null);
-</script>
-
-<template>
-  <div style="width: 100%; height: 70vh; background: #000">
-    <TextToParticle
-      ref="effectRef"
-      text="Hello Vue"
-      particle-color="#00ff88"
-      :max-particles="2000"
-    />
-    <button @click="effectRef?.morph({ text: 'Morphed!' })">Morph</button>
-  </div>
-</template>
-```
-
-#### Svelte
-
-```svelte
-<script lang="ts">
-  import TextToParticle from 'masoneffect/svelte/textToParticle';
-
-  let effectRef: TextToParticle | null = null;
-</script>
-
-<div style="width: 100%; height: 70vh; background: #000">
-  <TextToParticle
-    bind:this={effectRef}
-    text="Hello Svelte"
-    particleColor="#00ff88"
-    maxParticles={2000}
-  />
-  <button on:click={() => effectRef?.morph({ text: 'Morphed!' })}>
-    Morph
-  </button>
-</div>
-```
-
----
-
-### Count Effect
+### Count
 
 #### Vanilla JavaScript
 
@@ -183,95 +126,32 @@ const container = document.getElementById('count-container');
 const count = new Count(container, {
   targetValue: 1000,
   duration: 2000,
-  startValue: 0,
   easing: easingFunctions.easeOutCubic,
-  onUpdate: (value) => {
-    console.log(value);
-  },
-  onComplete: () => {
-    console.log('Complete!');
-  }
 });
 
-// Start animation
 count.start();
-
-// Reset
-count.reset();
 ```
 
 #### React
 
 ```tsx
-import React, { useRef } from 'react';
+import React from 'react';
 import Count from 'masoneffect/react/count';
 import { easingFunctions } from 'masoneffect/react/count';
-import type { CountRef } from 'masoneffect/react/count';
 
 function App() {
-  const countRef = useRef<CountRef>(null);
-
   return (
-    <div>
-      <Count
-        ref={countRef}
-        targetValue={1000}
-        duration={2000}
-        easing={easingFunctions.easeOutCubic}
-        onUpdate={(value) => console.log(value)}
-        onComplete={() => console.log('Complete!')}
-        style={{ fontSize: '3rem', fontWeight: 'bold' }}
-      />
-      <button onClick={() => countRef.current?.reset()}>Reset</button>
-      <button onClick={() => countRef.current?.start()}>Start</button>
-    </div>
-  );
-}
-```
-
-#### Vue 3
-
-```vue
-<script setup>
-import Count from 'masoneffect/vue/count';
-import { easingFunctions } from 'masoneffect/vue/count';
-</script>
-
-<template>
-  <div>
     <Count
-      :target-value="1000"
-      :duration="2000"
-      :easing="easingFunctions.easeOutCubic"
-      @update="(value) => console.log(value)"
-      @complete="() => console.log('Complete!')"
-      style="font-size: 3rem; font-weight: bold"
+      targetValue={1000}
+      duration={2000}
+      easing={easingFunctions.easeOutCubic}
+      style={{ fontSize: '3rem', fontWeight: 'bold' }}
     />
-  </div>
-</template>
-```
-
-#### Svelte
-
-```svelte
-<script lang="ts">
-  import Count from 'masoneffect/svelte/count';
-  import { easingFunctions } from 'masoneffect/svelte/count';
-</script>
-
-<div>
-  <Count
-    targetValue={1000}
-    duration={2000}
-    easing={easingFunctions.easeOutCubic}
-    on:update={(e) => console.log(e.detail)}
-    on:complete={() => console.log('Complete!')}
-    style="font-size: 3rem; font-weight: bold"
-  />
-</div>
+  );
+}
 ```
 
-### ScrollFadeIn Effect
+### ScrollFadeIn
 
 #### Vanilla JavaScript
 
@@ -279,16 +159,10 @@ import { easingFunctions } from 'masoneffect/vue/count';
 import { ScrollFadeIn } from 'masoneffect/scrollFadeIn';
 
 const container = document.querySelector('#scroll-fade-in-container');
-// For viewport-based scrolling (default)
 const scrollFadeIn = new ScrollFadeIn(container, {
   direction: 'bottom',
   distance: '50px',
   duration: 800,
-  threshold: 0.1,
-  rootMargin: '0px',
-  triggerOnce: false,
-  onStart: () => console.log('Animation started'),
-  onComplete: () => console.log('Animation completed'),
 });
 
 // For internal scroll container
@@ -297,100 +171,25 @@ const scrollFadeInInContainer = new ScrollFadeIn(container, {
   direction: 'bottom',
   distance: '50px',
   root: scrollContainer, // Specify scroll container element
-  threshold: 0.1,
 });
-
-// Methods
-scrollFadeIn.start();
-scrollFadeIn.stop();
-scrollFadeIn.reset();
-scrollFadeIn.updateConfig({ distance: '100px' });
-scrollFadeIn.destroy();
 ```
 
 #### React
 
 ```tsx
-import React, { useRef } from 'react';
+import React from 'react';
 import { ScrollFadeIn } from 'masoneffect/react/scrollFadeIn';
-import type { ScrollFadeInRef } from 'masoneffect/react/scrollFadeIn';
 
 function App() {
-  const scrollFadeInRef = useRef<ScrollFadeInRef>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
   return (
-    <div>
-      {/* For viewport-based scrolling (default) */}
-      <ScrollFadeIn
-        ref={scrollFadeInRef}
-        direction="bottom"
-        distance="50px"
-        duration={800}
-        threshold={0.1}
-        onStart={() => console.log('Started')}
-        onComplete={() => console.log('Completed')}
-        style={{ padding: '20px' }}
-      >
-        <div>Content that fades in on scroll</div>
-      </ScrollFadeIn>
-      
-      {/* For internal scroll container */}
-      <div ref={scrollContainerRef} style={{ height: '400px', overflow: 'auto' }}>
-        <ScrollFadeIn root={scrollContainerRef.current} direction="bottom" distance="50px">
-          <div>Content that fades in when scrolled within container</div>
-        </ScrollFadeIn>
-      </div>
-      
-      <button onClick={() => scrollFadeInRef.current?.reset()}>Reset</button>
-    </div>
+    <ScrollFadeIn direction="bottom" distance="50px" duration={800}>
+      <div>Content that fades in on scroll</div>
+    </ScrollFadeIn>
   );
 }
 ```
 
-#### Vue 3
-
-```vue
-<script setup>
-import { ScrollFadeIn } from 'masoneffect/vue/scrollFadeIn';
-</script>
-
-<template>
-  <ScrollFadeIn
-    direction="bottom"
-    distance="50px"
-    :duration="800"
-    :threshold="0.1"
-    @start="() => console.log('Started')"
-    @complete="() => console.log('Completed')"
-    style="padding: 20px"
-  >
-    <div>Content that fades in on scroll</div>
-  </ScrollFadeIn>
-</template>
-```
-
-#### Svelte
-
-```svelte
-<script lang="ts">
-  import { ScrollFadeIn } from 'masoneffect/svelte/scrollFadeIn';
-</script>
-
-<ScrollFadeIn
-  direction="bottom"
-  distance="50px"
-  duration={800}
-  threshold={0.1}
-  on:start={() => console.log('Started')}
-  on:complete={() => console.log('Completed')}
-  style="padding: 20px"
->
-  <div>Content that fades in on scroll</div>
-</ScrollFadeIn>
-```
-
-### TextSpin Effect
+### TextSpin
 
 #### Vanilla JavaScript
 
@@ -403,86 +202,31 @@ const textSpin = new TextSpin(container, {
   delay: 0.2,
   duration: 0.6,
   randomDelay: 2,
-  threshold: 0.1,
-  triggerOnce: false,
-  onStart: () => console.log('Animation started'),
-  onComplete: () => console.log('Animation completed'),
 });
 
-// Update text
 textSpin.updateText('New Text');
 ```
 
 #### React
 
 ```tsx
-import React, { useRef } from 'react';
+import React from 'react';
 import { TextSpin } from 'masoneffect/react/textSpin';
-import type { TextSpinRef } from 'masoneffect/react/textSpin';
 
 function App() {
-  const textSpinRef = useRef<TextSpinRef>(null);
-
   return (
-    <div>
-      <TextSpin
-        ref={textSpinRef}
-        text="Hello World"
-        delay={0.2}
-        duration={0.6}
-        randomDelay={2}
-        threshold={0.1}
-        onStart={() => console.log('Started')}
-        onComplete={() => console.log('Completed')}
-        style={{ fontSize: '2rem', color: '#fff' }}
-      />
-      <button onClick={() => textSpinRef.current?.updateText('New Text')}>
-        Update Text
-      </button>
-    </div>
+    <TextSpin
+      text="Hello World"
+      delay={0.2}
+      duration={0.6}
+      randomDelay={2}
+      style={{ fontSize: '2rem', color: '#fff' }}
+    />
   );
 }
 ```
 
-#### Vue 3
-
-```vue
-<script setup>
-import { TextSpin } from 'masoneffect/vue/textSpin';
-</script>
-
-<template>
-  <TextSpin
-    text="Hello World"
-    :delay="0.2"
-    :duration="0.6"
-    :random-delay="2"
-    :threshold="0.1"
-    @start="() => console.log('Started')"
-    @complete="() => console.log('Completed')"
-    style="font-size: 2rem; color: #fff"
-  />
-</template>
-```
-
-#### Svelte
-
-```svelte
-<script lang="ts">
-  import { TextSpin } from 'masoneffect/svelte/textSpin';
-</script>
-
-<TextSpin
-  text="Hello World"
-  delay={0.2}
-  duration={0.6}
-  randomDelay={2}
-  threshold={0.1}
-  on:start={() => console.log('Started')}
-  on:complete={() => console.log('Completed')}
-  style="font-size: 2rem; color: #fff"
-/>
-```
+> 💡 **Note**: For Vue and Svelte examples, see [llms.txt](./llms.txt) or check the framework-specific import paths above.
 
 ---
 
@@ -551,14 +295,12 @@ import { TextSpin } from 'masoneffect/vue/textSpin';
 ```typescript
 import { easingFunctions } from 'masoneffect/count';
 
-// Available easing functions:
-easingFunctions.linear
-easingFunctions.easeInQuad
-easingFunctions.easeOutQuad
-easingFunctions.easeInOutQuad
+// Available: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeOutCubic
 easingFunctions.easeOutCubic
 ```
 
+---
+
 ### ScrollFadeIn
 
 #### Options
@@ -584,6 +326,8 @@ easingFunctions.easeOutCubic
 - `updateConfig(config: Partial<ScrollFadeInOptions>)` - Update configuration
 - `destroy()` - Destroy instance and cleanup
 
+---
+
 ### TextSpin
 
 #### Options
@@ -627,22 +371,6 @@ import { Count } from 'masoneffect/count';
 import { Count } from 'masoneffect';
 ```
 
-### Framework-specific imports
-
-```typescript
-// React
-import Count from 'masoneffect/react/count';
-import TextToParticle from 'masoneffect/react/textToParticle';
-
-// Vue
-import Count from 'masoneffect/vue/count';
-import TextToParticle from 'masoneffect/vue/textToParticle';
-
-// Svelte
-import Count from 'masoneffect/svelte/count';
-import TextToParticle from 'masoneffect/svelte/textToParticle';
-```
-
 ---
 
 ## 🔄 Backward Compatibility
@@ -662,43 +390,6 @@ However, we recommend using the new Tree-shaking-friendly imports for better per
 
 ---
 
-## 🎨 Features
-
-### TextToParticle
-- 🎨 Morphing effect that converts text into particles
-- 🖱️ Mouse interaction support (repel/attract)
-- 📱 Responsive design
-- ⚡ High-performance Canvas rendering
-- 👁️ IntersectionObserver: Automatically pauses when not visible
-- ⏱️ Debouncing: Prevents excessive calls
-- 📝 Multi-line text support
-- 🔤 Auto font size adjustment
-
-### Count
-- 🔢 Animated number counting
-- 👁️ IntersectionObserver: Starts when element is visible
-- 🎯 Multiple easing functions
-- ⚡ Smooth animations with requestAnimationFrame
-- 🔄 Reset and restart support
-
-### Typing
-- ⌨️ Typing animation effect
-- 🇰🇷 Korean character decomposition (jamo support)
-- 👁️ IntersectionObserver: Starts when element is visible
-- ⚡ Smooth character-by-character animation
-- 🎨 Customizable cursor and speed
-
-### Slide
-- 🎬 Slide-in animation effect
-- 📐 Direction control (top, right, bottom, left)
-- 📏 Flexible distance units (px, rem, em, %, vh, vw)
-- 👁️ IntersectionObserver: Starts when element is visible
-- 🎯 Multiple easing functions
-- ⚡ Smooth animations with requestAnimationFrame
-- 🔄 Reset and restart support
-
----
-
 ## 🛠️ Development
 
 ```bash
@@ -720,7 +411,7 @@ npm run serve
 ## 📦 CDN Usage (UMD)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.12/dist/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.19/dist/index.umd.min.js"></script>
 <script>
   // TextToParticle (MasonEffect alias for backward compatibility)
   const container = document.getElementById('my-container');

package/dist/vue/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});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(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class n{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 n=this.canvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Canvas context not available");this.ctx=n,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const s=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Offscreen canvas context not available");this.offCtx=s,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 n=4096;if(this.W>n||this.H>n){const t=Math.min(n/this.W,n/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,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,a=.1*t,r=.05*t;let l=0;for(const d of s){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+r*(d.length>0?d.length-1:0);l=Math.max(l,t)}const h=s.length>0?o*s.length+a*(s.length-1):o;return{width:l,height:h,fits:l<=i&&h<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,a=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(a=n,s=n+1):o=n-1}return a}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const a=t.split("\n"),r=o,l=.1*o,h=.05*o,d=a.length>0?r*a.length+l*(a.length-1):r;let c=this.H/2-d/2+r/2;for(const f of a){if(0===f.length){c+=r+l;continue}const t=f.split(""),e=this.offCtx.measureText(f).width+h*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,c),i+=this.offCtx.measureText(n).width+h;c+=r+l}const u=Math.max(2,this.config.densityStep),g=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let f=0;f<this.H;f+=u)for(let t=0;t<this.W;t+=u){const e=4*(f*this.W+t);g[e]+g[e+1]+g[e+2]>600&&p.push({x:t,y:f})}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 f=0;f<this.particles.length;f++){const t=this.particles[f],e=p[f];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 n of this.particles){let t=(n.tx-n.x)*this.config.ease,e=(n.ty-n.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=n.x-this.mouse.x,s=n.y-this.mouse.y,o=i*i+s*s,a=this.config.repelRadius*this.DPR;if(o<a*a){const n=Math.sqrt(o)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-n/a);t+=i/n*r*6,e+=s/n*r*6}}n.j+=2,t+=.05*Math.cos(n.j),e+=.05*Math.sin(1.3*n.j),n.vx=(n.vx+t)*Math.random(),n.vy=(n.vy+e)*Math.random(),n.x+=n.vx,n.y+=n.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 n of this.particles)this.ctx.beginPath(),this.ctx.arc(n.x,n.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 s={linear:t=>t};class o{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??s.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start())},onHidden:()=>{!this.config.triggerOnce&&this.isRunning&&this.reset()}})}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function a(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,a=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],r=[];return r.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),r.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&r.push(a[o]),r}function r(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const a=44032+21*n*28+28*s+o;return String.fromCharCode(a)}function l(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=a(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class h{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=l(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n      .typing-char {\n        transition: opacity 0.3s ease-in;\n        display: inline-block;\n      }\n      .typing-cursor {\n        display: inline-block;\n      }\n    ",document.head.appendChild(t),this.container.style.whiteSpace="pre-wrap"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=r(t[0],t[1]):t.length>=3&&(e+=r(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),n=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let s="";for(let a=0;a<e.length;a++){const t=e[a],i=a>=n.length,o=" "===t?"&nbsp;":this.escapeHtml(t);s+=i?`<span class="typing-char typing-fade-in" style="opacity: 0;">${o}</span>`:`<span class="typing-char" style="opacity: 1;">${o}</span>`}i&&(s+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=s;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=l(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const d=t=>--t*t*t+1;class c{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={direction:e.direction??"bottom",distance:e.distance??"50px",duration:e.duration??800,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.easing=d,this.visibilityManager=null,this.animationFrameId=null,this.startTime=null,this.isRunning=!1,this.hasTriggered=!1,this.initialTransform="",this.targetDistance=0,this.init()}init(){const t=window.getComputedStyle(this.container);this.initialTransform="none"!==t.transform?t.transform:this.container.style.transform||"",this.targetDistance=this.parseDistance(this.config.distance),this.setInitialPosition(),this.setupVisibilityManager()}parseDistance(t){const e=t.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);if(!e){return parseFloat(t)||50}const i=parseFloat(e[1]);switch(e[2]){case"px":default:return i;case"rem":case"em":return i*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16);case"%":const t=this.container.getBoundingClientRect();return i/100*("top"===this.config.direction||"bottom"===this.config.direction?t.height:t.width);case"vh":return i/100*window.innerHeight;case"vw":return i/100*window.innerWidth}}setInitialPosition(){let t=0,e=0;switch(this.config.direction){case"top":e=-this.targetDistance;break;case"right":t=this.targetDistance;break;case"bottom":e=this.targetDistance;break;case"left":t=-this.targetDistance}const i=this.initialTransform||"",n=`translate(${t}px, ${e}px)`;this.container.style.transform=i&&"none"!==i?`${n} ${i}`:n,this.container.style.opacity="0",this.container.style.transition="none"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1),this.setInitialPosition())}})}start(){this.isRunning||(this.isRunning=!0,this.startTime=performance.now(),this.config.onStart&&this.config.onStart(),this.container.style.transition="none",this.animate())}animate(){if(!this.isRunning)return;const t=performance.now()-(this.startTime||0),e=Math.min(t/this.config.duration,1),i=this.easing(e);let n=0,s=0;switch(this.config.direction){case"top":s=-this.targetDistance*(1-i);break;case"right":n=this.targetDistance*(1-i);break;case"bottom":s=this.targetDistance*(1-i);break;case"left":n=-this.targetDistance*(1-i)}const o=this.initialTransform||"",a=`translate(${n}px, ${s}px)`;this.container.style.transform=o&&"none"!==o?`${a} ${o}`:a,this.container.style.opacity=String(i),e<1?this.animationFrameId=requestAnimationFrame(()=>this.animate()):this.complete()}complete(){this.isRunning=!1,this.initialTransform&&"none"!==this.initialTransform?this.container.style.transform=this.initialTransform:this.container.style.transform="",this.container.style.opacity="1",this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.config.onComplete&&this.config.onComplete()}reset(){this.stop(),this.hasTriggered=!1,this.setInitialPosition()}stop(){this.isRunning=!1,this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},t.distance&&(this.targetDistance=this.parseDistance(this.config.distance)),this.setInitialPosition(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),e&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.style.transform=this.initialTransform||"",this.container.style.opacity="",this.container.style.transition=""}}class u{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");if(!e.text)throw new Error("Text is required");this.config={text:e.text,delay:e.delay??.2,duration:e.duration??.6,randomDelay:e.randomDelay??2,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.visibilityManager=null,this.textElements=[],this.randomPoints=[],this.hasTriggered=!1,this.isActive=!1,this.init()}init(){this.injectStyles(),this.createTextStructure(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-textspin-styles"))return;const t=document.createElement("style");t.id="masoneffect-textspin-styles",t.textContent="\n      .masoneffect-textspin {\n        display: inline-block;\n      }\n      .masoneffect-textspin-char {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateY(90deg);\n      }\n      .masoneffect-textspin-char.active {\n        opacity: 1;\n        transform: rotateY(0deg);\n      }\n      .masoneffect-textspin-char.space {\n        width: 0.25em;\n      }\n    ",document.head.appendChild(t)}createTextStructure(){this.container.innerHTML="",this.textElements=[],this.randomPoints=[];const t=this.config.text.split("");t.forEach(()=>{this.randomPoints.push(Math.random())}),t.forEach((t,e)=>{const i=document.createElement("span");i.className="masoneffect-textspin-char",i.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`," "===t?(i.classList.add("space"),i.innerHTML="&nbsp;"):i.textContent=t,this.container.appendChild(i),this.textElements.push(i)}),this.container.classList.add("masoneffect-textspin")}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1))}})}start(){if(this.isActive)return;this.isActive=!0,this.config.onStart&&this.config.onStart(),this.textElements.forEach((t,e)=>{const i=this.config.delay+this.randomPoints[e]*this.config.randomDelay;t.style.transitionDelay=`${i}s`,requestAnimationFrame(()=>{t.classList.add("active")})});const t=this.config.delay+this.config.randomDelay+this.config.duration;setTimeout(()=>{this.config.onComplete&&this.config.onComplete()},1e3*t)}stop(){this.isActive&&(this.isActive=!1,this.textElements.forEach(t=>{t.classList.remove("active"),t.style.transitionDelay=""}))}reset(){this.stop(),this.hasTriggered=!1}updateText(t){this.config.text=t,this.createTextStructure(),this.isActive&&this.start()}updateTransitions(){this.textElements.forEach(t=>{t.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`})}updateConfig(t){var e;const i=this.isActive;this.config.enabled;const n=void 0!==t.enabled&&t.enabled!==this.config.enabled;(n&&!1===t.enabled||i)&&this.stop(),this.config={...this.config,...t,text:t.text??this.config.text,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},void 0!==t.text?this.createTextStructure():void 0!==t.duration&&this.updateTransitions(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),this.config.enabled&&(i||n&&!0===t.enabled)&&(null==(e=this.visibilityManager)?void 0:e.getIsVisible())&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.innerHTML="",this.container.classList.remove("masoneffect-textspin")}}const g=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:s}){const o=e,a=s,r=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(!r.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 n(r.value,t)})()}),t.onBeforeUnmount(()=>{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,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}}),p=t.defineComponent({__name:"Count",props:{className:{default:""},style:{default:()=>({})},targetValue:{default:0},duration:{default:2e3},startValue:{default:0},enabled:{type:Boolean,default:!0},easing:{type:Function,default:()=>t=>t},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},onUpdate:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["update","complete"],setup(e,{expose:i,emit:n}){const s=e,a=n,r=t.ref(null);let l=null;return t.watch(()=>[s.targetValue,s.duration,s.startValue,s.enabled,s.easing,s.threshold,s.rootMargin,s.triggerOnce],()=>{l&&l.updateConfig({targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!r.value)return;const t={targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}};l=new o(r.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),i({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},getValue:()=>l?l.getValue():0,updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}}),f=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:i}){const n=e,s=t.ref(null),o=t.ref(null);return t.onMounted(()=>{if(!s.value)return;const t={text:n.text,speed:n.speed,delay:n.delay,enabled:n.enabled,threshold:n.threshold,rootMargin:n.rootMargin,triggerOnce:n.triggerOnce,showCursor:n.showCursor,cursorChar:n.cursorChar,onUpdate:n.onUpdate,onComplete:n.onComplete};o.value=new h(s.value,t)}),t.onUnmounted(()=>{o.value&&(o.value.destroy(),o.value=null)}),t.watch(()=>n.text,t=>{o.value&&t!==o.value.originalText&&o.value.setText(t)}),i({start:()=>{var t;return null==(t=o.value)?void 0:t.start()},stop:()=>{var t;return null==(t=o.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=o.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=o.value)?void 0:e.setText(t)},destroy:()=>{o.value&&(o.value.destroy(),o.value=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:s,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}}),m=t.defineComponent({__name:"ScrollFadeIn",props:{className:{default:""},style:{default:()=>({})},direction:{default:"bottom"},distance:{default:"50px"},duration:{default:800},threshold:{default:.1},rootMargin:{default:"0px"},root:{default:null},triggerOnce:{type:Boolean,default:!1},enabled:{type:Boolean,default:!0},onStart:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["start","complete"],setup(e,{expose:i,emit:n}){const s=e,o=n,a=t.ref(null);let r=null;return t.watch(()=>[s.direction,s.distance,s.duration,s.threshold,s.rootMargin,s.root,s.triggerOnce,s.enabled],()=>{r&&r.updateConfig({direction:s.direction,distance:s.distance,duration:s.duration,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={direction:s.direction,distance:s.distance,duration:s.duration,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}};r=new c(a.value,t)})()}),t.onBeforeUnmount(()=>{r&&(r.destroy(),r=null)}),i({start:()=>{r&&r.start()},stop:()=>{r&&r.stop()},reset:()=>{r&&r.reset()},updateConfig:t=>{r&&r.updateConfig(t)},destroy:()=>{r&&(r.destroy(),r=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},[t.renderSlot(i.$slots,"default")],6))}}),y=t.defineComponent({__name:"TextSpin",props:{className:{default:""},style:{default:()=>({})},onStart:{type:Function,default:null},onComplete:{type:Function,default:null},text:{default:""},delay:{default:.2},duration:{default:.6},randomDelay:{default:2},threshold:{default:.1},rootMargin:{default:"0px"},root:{default:null},triggerOnce:{type:Boolean,default:!1},enabled:{type:Boolean,default:!0}},emits:["start","complete"],setup(e,{expose:i,emit:n}){const s=e,o=n,a=t.ref(null);let r=null;return t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:s.text,delay:s.delay,duration:s.duration,randomDelay:s.randomDelay,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}};r=new u(a.value,t)})()}),t.onBeforeUnmount(()=>{r&&(r.destroy(),r=null)}),t.watch(()=>[s.text,s.delay,s.duration,s.randomDelay,s.threshold,s.rootMargin,s.root,s.triggerOnce,s.enabled,s.onStart,s.onComplete],()=>{r&&r.updateConfig({text:s.text,delay:s.delay,duration:s.duration,randomDelay:s.randomDelay,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:s.onStart||void 0,onComplete:s.onComplete||void 0})},{deep:!0}),i({start:()=>{r&&r.start()},stop:()=>{r&&r.stop()},reset:()=>{r&&r.reset()},updateText:t=>{r&&r.updateText(t)},updateConfig:t=>{r&&r.updateConfig(t)},destroy:()=>{r&&(r.destroy(),r=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});exports.Count=p,exports.MasonEffect=g,exports.ScrollFadeIn=m,exports.TextSpin=y,exports.TextToParticle=g,exports.Typing=f,exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});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(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class n{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 n=this.canvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Canvas context not available");this.ctx=n,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const s=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Offscreen canvas context not available");this.offCtx=s,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 n=4096;if(this.W>n||this.H>n){const t=Math.min(n/this.W,n/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,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,a=.1*t,r=.05*t;let l=0;for(const d of s){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+r*(d.length>0?d.length-1:0);l=Math.max(l,t)}const h=s.length>0?o*s.length+a*(s.length-1):o;return{width:l,height:h,fits:l<=i&&h<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,a=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(a=n,s=n+1):o=n-1}return a}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const a=t.split("\n"),r=o,l=.1*o,h=.05*o,d=a.length>0?r*a.length+l*(a.length-1):r;let c=this.H/2-d/2+r/2;for(const f of a){if(0===f.length){c+=r+l;continue}const t=f.split(""),e=this.offCtx.measureText(f).width+h*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,c),i+=this.offCtx.measureText(n).width+h;c+=r+l}const u=Math.max(2,this.config.densityStep),g=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let f=0;f<this.H;f+=u)for(let t=0;t<this.W;t+=u){const e=4*(f*this.W+t);g[e]+g[e+1]+g[e+2]>600&&p.push({x:t,y:f})}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 f=0;f<this.particles.length;f++){const t=this.particles[f],e=p[f];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 n of this.particles){let t=(n.tx-n.x)*this.config.ease,e=(n.ty-n.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=n.x-this.mouse.x,s=n.y-this.mouse.y,o=i*i+s*s,a=this.config.repelRadius*this.DPR;if(o<a*a){const n=Math.sqrt(o)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-n/a);t+=i/n*r*6,e+=s/n*r*6}}n.j+=2,t+=.05*Math.cos(n.j),e+=.05*Math.sin(1.3*n.j),n.vx=(n.vx+t)*Math.random(),n.vy=(n.vy+e)*Math.random(),n.x+=n.vx,n.y+=n.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 n of this.particles)this.ctx.beginPath(),this.ctx.arc(n.x,n.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 s={linear:t=>t};class o{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??s.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start())},onHidden:()=>{!this.config.triggerOnce&&this.isRunning&&this.reset()}})}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function a(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,a=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],r=[];return r.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),r.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&r.push(a[o]),r}function r(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const a=44032+21*n*28+28*s+o;return String.fromCharCode(a)}function l(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=a(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class h{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=l(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n      .typing-char {\n        transition: opacity 0.3s ease-in;\n        display: inline-block;\n      }\n      .typing-cursor {\n        display: inline-block;\n      }\n    ",document.head.appendChild(t),this.container.style.whiteSpace="pre-wrap"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=r(t[0],t[1]):t.length>=3&&(e+=r(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),n=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let s="";for(let a=0;a<e.length;a++){const t=e[a],i=a>=n.length,o=" "===t?"&nbsp;":this.escapeHtml(t);s+=i?`<span class="typing-char typing-fade-in" style="opacity: 0;">${o}</span>`:`<span class="typing-char" style="opacity: 1;">${o}</span>`}i&&(s+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=s;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=l(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const d=t=>--t*t*t+1;class c{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={direction:e.direction??"bottom",distance:e.distance??"50px",duration:e.duration??800,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.easing=d,this.visibilityManager=null,this.animationFrameId=null,this.startTime=null,this.isRunning=!1,this.hasTriggered=!1,this.initialTransform="",this.targetDistance=0,this.init()}init(){const t=window.getComputedStyle(this.container);this.initialTransform="none"!==t.transform?t.transform:this.container.style.transform||"",this.targetDistance=this.parseDistance(this.config.distance),this.setInitialPosition(),this.setupVisibilityManager()}parseDistance(t){const e=t.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);if(!e){return parseFloat(t)||50}const i=parseFloat(e[1]);switch(e[2]){case"px":default:return i;case"rem":case"em":return i*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16);case"%":const t=this.container.getBoundingClientRect();return i/100*("top"===this.config.direction||"bottom"===this.config.direction?t.height:t.width);case"vh":return i/100*window.innerHeight;case"vw":return i/100*window.innerWidth}}setInitialPosition(){let t=0,e=0;switch(this.config.direction){case"top":e=-this.targetDistance;break;case"right":t=this.targetDistance;break;case"bottom":e=this.targetDistance;break;case"left":t=-this.targetDistance}const i=this.initialTransform||"",n=`translate(${t}px, ${e}px)`;this.container.style.transform=i&&"none"!==i?`${n} ${i}`:n,this.container.style.opacity="0",this.container.style.transition="none"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1),this.setInitialPosition())}})}start(){this.isRunning||(this.isRunning=!0,this.startTime=performance.now(),this.config.onStart&&this.config.onStart(),this.container.style.transition="none",this.animate())}animate(){if(!this.isRunning)return;const t=performance.now()-(this.startTime||0),e=Math.min(t/this.config.duration,1),i=this.easing(e);let n=0,s=0;switch(this.config.direction){case"top":s=-this.targetDistance*(1-i);break;case"right":n=this.targetDistance*(1-i);break;case"bottom":s=this.targetDistance*(1-i);break;case"left":n=-this.targetDistance*(1-i)}const o=this.initialTransform||"",a=`translate(${n}px, ${s}px)`;this.container.style.transform=o&&"none"!==o?`${a} ${o}`:a,this.container.style.opacity=String(i),e<1?this.animationFrameId=requestAnimationFrame(()=>this.animate()):this.complete()}complete(){this.isRunning=!1,this.initialTransform&&"none"!==this.initialTransform?this.container.style.transform=this.initialTransform:this.container.style.transform="",this.container.style.opacity="1",this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.config.onComplete&&this.config.onComplete()}reset(){this.stop(),this.hasTriggered=!1,this.setInitialPosition()}stop(){this.isRunning=!1,this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},t.distance&&(this.targetDistance=this.parseDistance(this.config.distance)),this.setInitialPosition(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),e&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.style.transform=this.initialTransform||"",this.container.style.opacity="",this.container.style.transition=""}}class u{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");if(!e.text)throw new Error("Text is required");this.config={text:e.text,delay:e.delay??.2,duration:e.duration??.6,randomDelay:e.randomDelay??2,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.visibilityManager=null,this.textElements=[],this.randomPoints=[],this.hasTriggered=!1,this.isActive=!1,this.init()}init(){this.injectStyles(),this.createTextStructure(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-textspin-styles"))return;const t=document.createElement("style");t.id="masoneffect-textspin-styles",t.textContent="\n      .masoneffect-textspin {\n        display: inline-block;\n      }\n      .masoneffect-textspin-char {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateY(90deg);\n      }\n      .masoneffect-textspin-char.active {\n        opacity: 1;\n        transform: rotateY(0deg);\n      }\n      .masoneffect-textspin-char.space {\n        width: 0.25em;\n      }\n    ",document.head.appendChild(t)}createTextStructure(){this.container.innerHTML="",this.textElements=[],this.randomPoints=[];const t=this.config.text.split("");t.forEach(()=>{this.randomPoints.push(Math.random())}),t.forEach((t,e)=>{const i=document.createElement("span");i.className="masoneffect-textspin-char",i.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`," "===t?(i.classList.add("space"),i.innerHTML="&nbsp;"):i.textContent=t,this.container.appendChild(i),this.textElements.push(i)}),this.container.classList.add("masoneffect-textspin")}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1))}})}start(){if(this.isActive)return;this.isActive=!0,this.config.onStart&&this.config.onStart(),this.textElements.forEach((t,e)=>{const i=this.config.delay+this.randomPoints[e]*this.config.randomDelay;t.style.transitionDelay=`${i}s`,requestAnimationFrame(()=>{t.classList.add("active")})});const t=this.config.delay+this.config.randomDelay+this.config.duration;setTimeout(()=>{this.config.onComplete&&this.config.onComplete()},1e3*t)}stop(){this.isActive&&(this.isActive=!1,this.textElements.forEach(t=>{t.classList.remove("active"),t.style.transitionDelay=""}))}reset(){this.stop(),this.hasTriggered=!1}updateText(t){this.config.text=t,this.createTextStructure(),this.isActive&&this.start()}updateTransitions(){this.textElements.forEach(t=>{t.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`})}updateConfig(t){var e;const i=this.isActive;this.config.enabled;const n=void 0!==t.enabled&&t.enabled!==this.config.enabled;(n&&!1===t.enabled||i)&&this.stop(),this.config={...this.config,...t,text:t.text??this.config.text,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},void 0!==t.text?this.createTextStructure():void 0!==t.duration&&this.updateTransitions(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),this.config.enabled&&(i||n&&!0===t.enabled)&&(null==(e=this.visibilityManager)?void 0:e.getIsVisible())&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.innerHTML="",this.container.classList.remove("masoneffect-textspin")}}const g=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:s}){const o=e,a=s,r=t.ref(null);let l=null,h=null,d=null,c=null;const u=t.computed(()=>({width:"100%",height:"100%",minHeight:300,position:"relative",...o.style})),g=()=>{if(!r.value)return;if(l)return;const t=r.value.querySelector("canvas");t&&t.remove();const e=r.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 n=null==(i=r.value)?void 0:i.getBoundingClientRect();(n&&n.width>0&&n.height>0||t>=e)&&(d&&(d.disconnect(),d=null),g())}),void d.observe(r.value)}return void(c=window.setTimeout(g,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),a("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)}};l=new n(r.value,i),"undefined"!=typeof ResizeObserver&&(h=new ResizeObserver(()=>{l&&l.resize()}),h.observe(r.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(g)}),t.onBeforeUnmount(()=>{c&&(clearTimeout(c),c=null),d&&(d.disconnect(),d=null),h&&(h.disconnect(),h=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,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(u.value)},null,6))}}),p=t.defineComponent({__name:"Count",props:{className:{default:""},style:{default:()=>({})},targetValue:{default:0},duration:{default:2e3},startValue:{default:0},enabled:{type:Boolean,default:!0},easing:{type:Function,default:()=>t=>t},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},onUpdate:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["update","complete"],setup(e,{expose:i,emit:n}){const s=e,a=n,r=t.ref(null);let l=null;return t.watch(()=>[s.targetValue,s.duration,s.startValue,s.enabled,s.easing,s.threshold,s.rootMargin,s.triggerOnce],()=>{l&&l.updateConfig({targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!r.value)return;const t={targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}};l=new o(r.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),i({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},getValue:()=>l?l.getValue():0,updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}}),f=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:i}){const n=e,s=t.ref(null),o=t.ref(null);return t.onMounted(()=>{if(!s.value)return;const t={text:n.text,speed:n.speed,delay:n.delay,enabled:n.enabled,threshold:n.threshold,rootMargin:n.rootMargin,triggerOnce:n.triggerOnce,showCursor:n.showCursor,cursorChar:n.cursorChar,onUpdate:n.onUpdate,onComplete:n.onComplete};o.value=new h(s.value,t)}),t.onUnmounted(()=>{o.value&&(o.value.destroy(),o.value=null)}),t.watch(()=>n.text,t=>{o.value&&t!==o.value.originalText&&o.value.setText(t)}),i({start:()=>{var t;return null==(t=o.value)?void 0:t.start()},stop:()=>{var t;return null==(t=o.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=o.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=o.value)?void 0:e.setText(t)},destroy:()=>{o.value&&(o.value.destroy(),o.value=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:s,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}}),m=t.defineComponent({__name:"ScrollFadeIn",props:{className:{default:""},style:{default:()=>({})},direction:{default:"bottom"},distance:{default:"50px"},duration:{default:800},threshold:{default:.1},rootMargin:{default:"0px"},root:{default:null},triggerOnce:{type:Boolean,default:!1},enabled:{type:Boolean,default:!0},onStart:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["start","complete"],setup(e,{expose:i,emit:n}){const s=e,o=n,a=t.ref(null);let r=null;return t.watch(()=>[s.direction,s.distance,s.duration,s.threshold,s.rootMargin,s.root,s.triggerOnce,s.enabled],()=>{r&&r.updateConfig({direction:s.direction,distance:s.distance,duration:s.duration,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={direction:s.direction,distance:s.distance,duration:s.duration,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}};r=new c(a.value,t)})()}),t.onBeforeUnmount(()=>{r&&(r.destroy(),r=null)}),i({start:()=>{r&&r.start()},stop:()=>{r&&r.stop()},reset:()=>{r&&r.reset()},updateConfig:t=>{r&&r.updateConfig(t)},destroy:()=>{r&&(r.destroy(),r=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},[t.renderSlot(i.$slots,"default")],6))}}),y=t.defineComponent({__name:"TextSpin",props:{className:{default:""},style:{default:()=>({})},onStart:{type:Function,default:null},onComplete:{type:Function,default:null},text:{default:""},delay:{default:.2},duration:{default:.6},randomDelay:{default:2},threshold:{default:.1},rootMargin:{default:"0px"},root:{default:null},triggerOnce:{type:Boolean,default:!1},enabled:{type:Boolean,default:!0}},emits:["start","complete"],setup(e,{expose:i,emit:n}){const s=e,o=n,a=t.ref(null);let r=null;return t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:s.text,delay:s.delay,duration:s.duration,randomDelay:s.randomDelay,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:()=>{s.onStart&&s.onStart(),o("start")},onComplete:()=>{s.onComplete&&s.onComplete(),o("complete")}};r=new u(a.value,t)})()}),t.onBeforeUnmount(()=>{r&&(r.destroy(),r=null)}),t.watch(()=>[s.text,s.delay,s.duration,s.randomDelay,s.threshold,s.rootMargin,s.root,s.triggerOnce,s.enabled,s.onStart,s.onComplete],()=>{r&&r.updateConfig({text:s.text,delay:s.delay,duration:s.duration,randomDelay:s.randomDelay,threshold:s.threshold,rootMargin:s.rootMargin,root:s.root,triggerOnce:s.triggerOnce,enabled:s.enabled,onStart:s.onStart||void 0,onComplete:s.onComplete||void 0})},{deep:!0}),i({start:()=>{r&&r.start()},stop:()=>{r&&r.stop()},reset:()=>{r&&r.reset()},updateText:t=>{r&&r.updateText(t)},updateConfig:t=>{r&&r.updateConfig(t)},destroy:()=>{r&&(r.destroy(),r=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});exports.Count=p,exports.MasonEffect=g,exports.ScrollFadeIn=m,exports.TextSpin=y,exports.TextToParticle=g,exports.Typing=f,exports.default=g;

package/dist/vue/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, onUnmounted, renderSlot } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, onUnmounted, renderSlot } from "vue";
 class VisibilityManager {
   constructor(container, options = {}) {
     this.container = container;
@@ -1370,8 +1370,60 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const container = ref(null);
     let instance = null;
+    let resizeObserver = null;
+    let tempResizeObserver = null;
+    let initTimeout = null;
+    const defaultStyle = computed(() => ({
+      width: "100%",
+      height: "100%",
+      minHeight: 300,
+      position: "relative",
+      ...props.style
+    }));
     const init = () => {
       if (!container.value) return;
+      if (instance) {
+        return;
+      }
+      const existingCanvas = container.value.querySelector("canvas");
+      if (existingCanvas) {
+        existingCanvas.remove();
+      }
+      const rect = container.value.getBoundingClientRect();
+      const hasValidSize = rect.width > 0 && rect.height > 0;
+      if (!hasValidSize) {
+        if (typeof ResizeObserver !== "undefined") {
+          let resizeCheckCount = 0;
+          const maxResizeChecks = 20;
+          if (tempResizeObserver) {
+            tempResizeObserver.disconnect();
+            tempResizeObserver = null;
+          }
+          tempResizeObserver = new ResizeObserver(() => {
+            var _a;
+            resizeCheckCount++;
+            const newRect = (_a = container.value) == null ? void 0 : _a.getBoundingClientRect();
+            if (newRect && newRect.width > 0 && newRect.height > 0) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            } else if (resizeCheckCount >= maxResizeChecks) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            }
+          });
+          tempResizeObserver.observe(container.value);
+          return;
+        } else {
+          initTimeout = window.setTimeout(init, 50);
+          return;
+        }
+      }
       const options = {
         text: props.text,
         densityStep: props.densityStep,
@@ -1396,6 +1448,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }
       };
       instance = new TextToParticle(container.value, options);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => {
+          if (instance) {
+            instance.resize();
+          }
+        });
+        resizeObserver.observe(container.value);
+      }
     };
     watch(
       () => [
@@ -1434,9 +1494,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     );
     onMounted(() => {
-      init();
+      requestAnimationFrame(init);
     });
     onBeforeUnmount(() => {
+      if (initTimeout) {
+        clearTimeout(initTimeout);
+        initTimeout = null;
+      }
+      if (tempResizeObserver) {
+        tempResizeObserver.disconnect();
+        tempResizeObserver = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
       if (instance) {
         instance.destroy();
         instance = null;
@@ -1464,7 +1536,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         ref_key: "container",
         ref: container,
         class: normalizeClass(__props.className),
-        style: normalizeStyle(__props.style)
+        style: normalizeStyle(defaultStyle.value)
       }, null, 6);
     };
   }

package/dist/vue/textToParticle/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");class i{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",root:i.root??null,onVisible:i.onVisible,onHidden:i.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function e(t,i){let e=null;return function(...s){null!==e&&clearTimeout(e),e=setTimeout(()=>{e=null,t.apply(this,s)},i)}}class s{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=e(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new i(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.container.getBoundingClientRect(),i=this.config.width||t.width||this.container.clientWidth||window.innerWidth,e=this.config.height||t.height||this.container.clientHeight||.7*window.innerHeight;if(i<=0||e<=0)return;this.W=Math.floor(i*this.DPR),this.H=Math.floor(e*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=i+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,e,s){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const n=i.split("\n"),o=t,h=.1*t,a=.05*t;let l=0;for(const d of n){if(0===d.length)continue;const t=this.offCtx.measureText(d).width+a*(d.length>0?d.length-1:0);l=Math.max(l,t)}const r=n.length>0?o*n.length+h*(n.length-1):o;return{width:l,height:r,fits:l<=e&&r<=s}}findOptimalFontSize(t,i,e,s){if(this.measureTextFit(s,t,i,e).fits)return s;if(s<=12)return 12;let n=12,o=s,h=12;for(;n<=o;){const s=Math.floor((n+o)/2);this.measureTextFit(s,t,i,e).fits?(h=s,n=s+1):o=s-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),e=this.config.fontSize||Math.max(80,Math.floor(.18*i)),s=this.W-80,n=this.H-80,o=this.findOptimalFontSize(t,s,n,e);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const h=t.split("\n"),a=o,l=.1*o,r=.05*o,d=h.length>0?a*h.length+l*(h.length-1):a;let c=this.H/2-d/2+a/2;for(const g of h){if(0===g.length){c+=a+l;continue}const t=g.split(""),i=this.offCtx.measureText(g).width+r*(t.length>0?t.length-1:0);let e=this.W/2-i/2;for(const s of t)this.offCtx.fillText(s,e+this.offCtx.measureText(s).width/2,c),e+=this.offCtx.measureText(s).width+r;c+=a+l}const u=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=u)for(let t=0;t<this.W;t+=u){const i=4*(g*this.W+t);f[i]+f[i+1]+f[i+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],i=p[g];t.tx=i.x,t.ty=i.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,e=Math.random()*this.H;t.x=i,t.y=e,t.vx=t.vy=0,t.initialX=i,t.initialY=e}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const s of this.particles){let t=(s.tx-s.x)*this.config.ease,i=(s.ty-s.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const e=s.x-this.mouse.x,n=s.y-this.mouse.y,o=e*e+n*n,h=this.config.repelRadius*this.DPR;if(o<h*h){const s=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-s/h);t+=e/s*a*6,i+=n/s*a*6}}s.j+=2,t+=.05*Math.cos(s.j),i+=.05*Math.sin(1.3*s.j),s.vx=(s.vx+t)*Math.random(),s.vy=(s.vy+i)*Math.random(),s.x+=s.vx,s.y+=s.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,i=Math.max(.5,Math.min(2,t/1920)),e=this.config.pointSize*this.DPR*i;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.y,e,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const n=t.defineComponent({__name:"TextToParticle",props:{className:{default:""},style:{default:()=>({})},text:{default:"mason effect"},densityStep:{default:2},maxParticles:{default:3200},pointSize:{default:.5},ease:{default:.05},repelRadius:{default:150},repelStrength:{default:1},particleColor:{default:"#fff"},fontFamily:{default:"Inter, system-ui, Arial"},fontSize:{default:null},width:{default:null},height:{default:null},devicePixelRatio:{default:null},debounceDelay:{},onReady:{type:Function,default:null},onUpdate:{type:Function,default:null}},emits:["ready","update"],setup(i,{expose:e,emit:n}){const o=i,h=n,a=t.ref(null);let l=null;return t.watch(()=>[o.text,o.densityStep,o.maxParticles,o.pointSize,o.ease,o.repelRadius,o.repelStrength,o.particleColor,o.fontFamily,o.fontSize,o.width,o.height,o.devicePixelRatio],()=>{l&&l.updateConfig({text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:o.text,densityStep:o.densityStep,maxParticles:o.maxParticles,pointSize:o.pointSize,ease:o.ease,repelRadius:o.repelRadius,repelStrength:o.repelStrength,particleColor:o.particleColor,fontFamily:o.fontFamily,fontSize:o.fontSize,width:o.width,height:o.height,devicePixelRatio:o.devicePixelRatio,onReady:t=>{o.onReady&&o.onReady(t),h("ready",t)},onUpdate:t=>{o.onUpdate&&o.onUpdate(t),h("update",t)}};l=new s(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),e({morph:t=>{l&&l.morph(t)},scatter:()=>{l&&l.scatter()},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(e,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(i.className),style:t.normalizeStyle(i.style)},null,6))}});module.exports=n;
+"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;

package/dist/vue/textToParticle/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
 class VisibilityManager {
   constructor(container, options = {}) {
     this.container = container;
@@ -541,8 +541,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const container = ref(null);
     let instance = null;
+    let resizeObserver = null;
+    let tempResizeObserver = null;
+    let initTimeout = null;
+    const defaultStyle = computed(() => ({
+      width: "100%",
+      height: "100%",
+      minHeight: 300,
+      position: "relative",
+      ...props.style
+    }));
     const init = () => {
       if (!container.value) return;
+      if (instance) {
+        return;
+      }
+      const existingCanvas = container.value.querySelector("canvas");
+      if (existingCanvas) {
+        existingCanvas.remove();
+      }
+      const rect = container.value.getBoundingClientRect();
+      const hasValidSize = rect.width > 0 && rect.height > 0;
+      if (!hasValidSize) {
+        if (typeof ResizeObserver !== "undefined") {
+          let resizeCheckCount = 0;
+          const maxResizeChecks = 20;
+          if (tempResizeObserver) {
+            tempResizeObserver.disconnect();
+            tempResizeObserver = null;
+          }
+          tempResizeObserver = new ResizeObserver(() => {
+            var _a;
+            resizeCheckCount++;
+            const newRect = (_a = container.value) == null ? void 0 : _a.getBoundingClientRect();
+            if (newRect && newRect.width > 0 && newRect.height > 0) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            } else if (resizeCheckCount >= maxResizeChecks) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            }
+          });
+          tempResizeObserver.observe(container.value);
+          return;
+        } else {
+          initTimeout = window.setTimeout(init, 50);
+          return;
+        }
+      }
       const options = {
         text: props.text,
         densityStep: props.densityStep,
@@ -567,6 +619,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
       instance = new TextToParticle(container.value, options);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => {
+          if (instance) {
+            instance.resize();
+          }
+        });
+        resizeObserver.observe(container.value);
+      }
     };
     watch(
       () => [
@@ -605,9 +665,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     onMounted(() => {
-      init();
+      requestAnimationFrame(init);
     });
     onBeforeUnmount(() => {
+      if (initTimeout) {
+        clearTimeout(initTimeout);
+        initTimeout = null;
+      }
+      if (tempResizeObserver) {
+        tempResizeObserver.disconnect();
+        tempResizeObserver = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
       if (instance) {
         instance.destroy();
         instance = null;
@@ -635,7 +707,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "container",
         ref: container,
         class: normalizeClass(__props.className),
-        style: normalizeStyle(__props.style)
+        style: normalizeStyle(defaultStyle.value)
       }, null, 6);
     };
   }

package/package.json

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