masoneffect 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/core/typing/index.d.ts +5 -4
- package/dist/core/typing/index.d.ts.map +1 -1
- package/dist/count/core/typing/index.d.ts +5 -4
- package/dist/count/core/typing/index.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react/core/typing/index.d.ts +5 -4
- package/dist/react/count/core/typing/index.d.ts +5 -4
- package/dist/react/count/core/typing/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/typing/index.d.ts +5 -4
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/core/typing/index.d.ts +5 -4
- package/dist/react/typing/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/index.cjs +1 -1
- package/dist/react/typing/index.mjs +1 -1
- package/dist/svelte/count/index.d.ts +5 -4
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +5 -4
- package/dist/svelte/index.mjs +57 -53
- package/dist/svelte/textToParticle/index.d.ts +5 -4
- package/dist/svelte/typing/index.cjs +1 -1
- package/dist/svelte/typing/index.d.ts +5 -4
- package/dist/svelte/typing/index.mjs +57 -53
- package/dist/textToParticle/core/typing/index.d.ts +5 -4
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/typing/core/typing/index.d.ts +5 -4
- package/dist/typing/core/typing/index.d.ts.map +1 -1
- package/dist/typing/index.cjs +1 -1
- package/dist/typing/index.mjs +1 -1
- package/dist/vue/count/index.d.ts +5 -4
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +5 -4
- package/dist/vue/index.mjs +57 -53
- package/dist/vue/textToParticle/index.d.ts +5 -4
- package/dist/vue/typing/index.cjs +1 -1
- package/dist/vue/typing/index.d.ts +5 -4
- package/dist/vue/typing/index.mjs +57 -53
- package/package.json +1 -1
|
@@ -25,6 +25,11 @@ export declare class Typing {
|
|
|
25
25
|
onComplete: TypingOptions['onComplete'];
|
|
26
26
|
};
|
|
27
27
|
textUnits: string[];
|
|
28
|
+
charUnitRanges: Array<{
|
|
29
|
+
start: number;
|
|
30
|
+
end: number;
|
|
31
|
+
isHangul: boolean;
|
|
32
|
+
}>;
|
|
28
33
|
currentIndex: number;
|
|
29
34
|
displayedText: string;
|
|
30
35
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -35,10 +40,6 @@ export declare class Typing {
|
|
|
35
40
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
41
|
init(): void;
|
|
37
42
|
setupIntersectionObserver(): void;
|
|
38
|
-
private originalChars;
|
|
39
|
-
private charUnitMap;
|
|
40
|
-
private initializeTextStructure;
|
|
41
|
-
private getCharIndexFromUnitIndex;
|
|
42
43
|
private buildTextFromUnits;
|
|
43
44
|
start(): void;
|
|
44
45
|
typeNext(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyFD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IA6CnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,kBAAkB;IAgD1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAuChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|
package/dist/typing/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(s){const i=[];for(let
|
|
1
|
+
function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(t,s,i){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(s),n=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===h||-1===e)return t+(s||"")+(i||"");const o=44032+21*h*28+28*e+n;return String.fromCharCode(o)}function i(s){const i=[],h=[];for(let e=0;e<s.length;e++){const n=s[e],o=n.charCodeAt(0),r=i.length;if(o>=44032&&o<=55203){const s=t(n);i.push(...s),h.push({start:r,end:i.length,isHangul:!0})}else i.push(n),h.push({start:r,end:i.length,isHangul:!1})}return{units:i,charUnitRanges:h}}Object.defineProperty(exports,"t",{value:!0});class h{constructor(t,s){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=s.text,this.config={text:s.text,speed:s.speed??50,delay:s.delay??0,enabled:s.enabled??!0,threshold:s.threshold??.2,rootMargin:s.rootMargin??"0px 0px -100px 0px",triggerOnce:s.triggerOnce??!1,showCursor:s.showCursor??!0,cursorChar:s.cursorChar??"|",onUpdate:s.onUpdate||null,onComplete:s.onComplete||null};const h=i(this.config.text);this.textUnits=h.units,this.charUnitRanges=h.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}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){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const s=i(t);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}exports.Typing=h,exports.default=h;
|
package/dist/typing/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,
|
|
1
|
+
function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,r=[];return r.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),r.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&r.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),r}function s(t,s,i){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(s),n=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===h||-1===e)return t+(s||"")+(i||"");const r=44032+21*h*28+28*e+n;return String.fromCharCode(r)}function i(s){const i=[],h=[];for(let e=0;e<s.length;e++){const n=s[e],r=n.charCodeAt(0),o=i.length;if(r>=44032&&r<=55203){const s=t(n);i.push(...s),h.push({start:o,end:i.length,isHangul:!0})}else i.push(n),h.push({start:o,end:i.length,isHangul:!1})}return{units:i,charUnitRanges:h}}class h{constructor(t,s){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=s.text,this.config={text:s.text,speed:s.speed??50,delay:s.delay??0,enabled:s.enabled??!0,threshold:s.threshold??.2,rootMargin:s.rootMargin??"0px 0px -100px 0px",triggerOnce:s.triggerOnce??!1,showCursor:s.showCursor??!0,cursorChar:s.cursorChar??"|",onUpdate:s.onUpdate||null,onComplete:s.onComplete||null};const h=i(this.config.text);this.textUnits=h.units,this.charUnitRanges=h.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}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){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const s=i(t);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}export{h as Typing,h as default};
|
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
package/dist/vue/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");function e(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class i{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const 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.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=e(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,a=.1*t,r=.05*t;let h=0;for(const u of s){if(0===u.length)continue;const t=this.offCtx.measureText(u).width+r*(u.length>0?u.length-1:0);h=Math.max(h,t)}const l=s.length>0?o*s.length+a*(s.length-1):o;return{width:h,height:l,fits:h<=i&&l<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,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,h=.1*o,l=.05*o,u=a.length>0?r*a.length+h*(a.length-1):r;let d=this.H/2-u/2+r/2;for(const g of a){if(0===g.length){d+=r+h;continue}const t=g.split(""),e=this.offCtx.measureText(g).width+l*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,d),i+=this.offCtx.measureText(n).width+l;d+=r+h}const c=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+=c)for(let t=0;t<this.W;t+=c){const e=4*(g*this.W+t);f[e]+f[e+1]+f[e+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],e=p[g];t.tx=e.x,t.ty=e.y}}makeParticle(){const t=Math.random()*this.W,e=Math.random()*this.H;return{x:t,y:e,vx:0,vy:0,tx:t,ty:e,initialX:t,initialY:e,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const e=Math.random()*this.W,i=Math.random()*this.H;t.x=e,t.y=i,t.vx=t.vy=0,t.initialX=e,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const e=void 0!==t.text;this.config={...this.config,...t},e&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const e of this.particles){let t=(e.tx-e.x)*this.config.ease,i=(e.ty-e.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const n=e.x-this.mouse.x,s=e.y-this.mouse.y,o=n*n+s*s,a=this.config.repelRadius*this.DPR;if(o<a*a){const e=Math.sqrt(o)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/a);t+=n/e*r*6,i+=s/e*r*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const n={linear:t=>t};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={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??n.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=i.boundingClientRect,e=window.innerHeight,n=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=n)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function o(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 a(t){const e=[];for(let i=0;i<t.length;i++){const n=t[i],s=n.charCodeAt(0);if(s>=44032&&s<=55203){const t=o(n);e.push(...t)}else e.push(n)}return e}class r{constructor(t,e){if(this.originalChars=[],this.charUnitMap=[],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},this.textUnits=a(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)i.target===this.container&&i.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const e=this.originalText[t],i=e.charCodeAt(0);if(this.originalChars.push(e),i>=44032&&i<=55203){const t=o(e);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let e=0,i=0;for(let n=0;n<this.charUnitMap.length;n++){const s=this.charUnitMap[n];if(i+=s,!(t>=i)){const o=t-(i-s);if(o>0){const t=this.originalChars[n]&&this.originalChars[n].charCodeAt(0)>=44032&&this.originalChars[n].charCodeAt(0)<=55203;(t&&o>=2||!t&&o>=1)&&(e=n+1)}break}e=n+1}return e}buildTextFromUnits(t){if(0===t.length)return"";const e=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,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());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let e=this.displayedText;this.config.showCursor&&(e+=this.config.cursorChar),this.updateDisplay(e),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){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t,this.textUnits=a(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const h=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:n,emit:s}){const o=e,a=s,r=t.ref(null);let h=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],()=>{h&&h.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)}};h=new i(r.value,t)})()}),t.onBeforeUnmount(()=>{h&&(h.destroy(),h=null)}),n({morph:t=>{h&&h.morph(t)},scatter:()=>{h&&h.scatter()},updateConfig:t=>{h&&h.updateConfig(t)},destroy:()=>{h&&(h.destroy(),h=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))}}),l=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 o=e,a=n,r=t.ref(null);let h=null;return t.watch(()=>[o.targetValue,o.duration,o.startValue,o.enabled,o.easing,o.threshold,o.rootMargin,o.triggerOnce],()=>{h&&h.updateConfig({targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!r.value)return;const t={targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),a("complete")}};h=new s(r.value,t)})()}),t.onBeforeUnmount(()=>{h&&(h.destroy(),h=null)}),i({start:()=>{h&&h.start()},stop:()=>{h&&h.stop()},reset:()=>{h&&h.reset()},getValue:()=>h?h.getValue():0,updateConfig:t=>{h&&h.updateConfig(t)},destroy:()=>{h&&(h.destroy(),h=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))}}),u=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 r(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))}});exports.Count=l,exports.MasonEffect=h,exports.TextToParticle=h,exports.Typing=u,exports.default=h;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");function e(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class i{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const 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.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=i.debounceDelay??150;const o=this.handleResize.bind(this);this.handleResize=e(o,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=e(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=e(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,a=.1*t,r=.05*t;let h=0;for(const u of s){if(0===u.length)continue;const t=this.offCtx.measureText(u).width+r*(u.length>0?u.length-1:0);h=Math.max(h,t)}const l=s.length>0?o*s.length+a*(s.length-1):o;return{width:h,height:l,fits:h<=i&&l<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,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,h=.1*o,l=.05*o,u=a.length>0?r*a.length+h*(a.length-1):r;let d=this.H/2-u/2+r/2;for(const p of a){if(0===p.length){d+=r+h;continue}const t=p.split(""),e=this.offCtx.measureText(p).width+l*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,d),i+=this.offCtx.measureText(n).width+l;d+=r+h}const c=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,g=[];for(let p=0;p<this.H;p+=c)for(let t=0;t<this.W;t+=c){const e=4*(p*this.W+t);f[e]+f[e+1]+f[e+2]>600&&g.push({x:t,y:p})}for(;g.length>this.config.maxParticles;)g.splice(Math.floor(Math.random()*g.length),1);if(this.particles.length<g.length){const t=g.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>g.length&&(this.particles.length=g.length);for(let p=0;p<this.particles.length;p++){const t=this.particles[p],e=g[p];t.tx=e.x,t.ty=e.y}}makeParticle(){const t=Math.random()*this.W,e=Math.random()*this.H;return{x:t,y:e,vx:0,vy:0,tx:t,ty:e,initialX:t,initialY:e,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const e=Math.random()*this.W,i=Math.random()*this.H;t.x=e,t.y=i,t.vx=t.vy=0,t.initialX=e,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const e=void 0!==t.text;this.config={...this.config,...t},e&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const e of this.particles){let t=(e.tx-e.x)*this.config.ease,i=(e.ty-e.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const n=e.x-this.mouse.x,s=e.y-this.mouse.y,o=n*n+s*s,a=this.config.repelRadius*this.DPR;if(o<a*a){const e=Math.sqrt(o)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/a);t+=n/e*r*6,i+=s/e*r*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const n={linear:t=>t};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={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??n.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=i.boundingClientRect,e=window.innerHeight,n=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=n)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function o(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 a(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 r(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],a=s.charCodeAt(0),r=e.length;if(a>=44032&&a<=55203){const t=o(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=r(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)i.target===this.container&&i.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}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+=a(t[0],t[1]):t.length>=3&&(e+=a(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){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=r(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const l=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:n,emit:s}){const o=e,a=s,r=t.ref(null);let h=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],()=>{h&&h.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)}};h=new i(r.value,t)})()}),t.onBeforeUnmount(()=>{h&&(h.destroy(),h=null)}),n({morph:t=>{h&&h.morph(t)},scatter:()=>{h&&h.scatter()},updateConfig:t=>{h&&h.updateConfig(t)},destroy:()=>{h&&(h.destroy(),h=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))}}),u=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 o=e,a=n,r=t.ref(null);let h=null;return t.watch(()=>[o.targetValue,o.duration,o.startValue,o.enabled,o.easing,o.threshold,o.rootMargin,o.triggerOnce],()=>{h&&h.updateConfig({targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!r.value)return;const t={targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),a("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),a("complete")}};h=new s(r.value,t)})()}),t.onBeforeUnmount(()=>{h&&(h.destroy(),h=null)}),i({start:()=>{h&&h.start()},stop:()=>{h&&h.stop()},reset:()=>{h&&h.reset()},getValue:()=>h?h.getValue():0,updateConfig:t=>{h&&h.updateConfig(t)},destroy:()=>{h&&(h.destroy(),h=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))}}),d=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))}});exports.Count=u,exports.MasonEffect=l,exports.TextToParticle=l,exports.Typing=d,exports.default=l;
|
package/dist/vue/index.d.ts
CHANGED
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
package/dist/vue/index.mjs
CHANGED
|
@@ -603,25 +603,48 @@ function decomposeHangul(char) {
|
|
|
603
603
|
}
|
|
604
604
|
return result;
|
|
605
605
|
}
|
|
606
|
+
function composeHangul(initial, medial, final) {
|
|
607
|
+
const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
608
|
+
const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
|
|
609
|
+
const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
610
|
+
const initialIndex = initialChars.indexOf(initial);
|
|
611
|
+
const medialIndex = medialChars.indexOf(medial);
|
|
612
|
+
const finalIndex = final ? finalChars.indexOf(final) : 0;
|
|
613
|
+
if (initialIndex === -1 || medialIndex === -1) {
|
|
614
|
+
return initial + (medial || "") + (final || "");
|
|
615
|
+
}
|
|
616
|
+
const code = 44032 + initialIndex * 21 * 28 + medialIndex * 28 + finalIndex;
|
|
617
|
+
return String.fromCharCode(code);
|
|
618
|
+
}
|
|
606
619
|
function decomposeText(text) {
|
|
607
620
|
const units = [];
|
|
621
|
+
const charUnitRanges = [];
|
|
608
622
|
for (let i = 0; i < text.length; i++) {
|
|
609
623
|
const char = text[i];
|
|
610
624
|
const code = char.charCodeAt(0);
|
|
625
|
+
const startIndex = units.length;
|
|
611
626
|
if (code >= 44032 && code <= 55203) {
|
|
612
627
|
const decomposed = decomposeHangul(char);
|
|
613
628
|
units.push(...decomposed);
|
|
629
|
+
charUnitRanges.push({
|
|
630
|
+
start: startIndex,
|
|
631
|
+
end: units.length,
|
|
632
|
+
isHangul: true
|
|
633
|
+
});
|
|
614
634
|
} else {
|
|
615
635
|
units.push(char);
|
|
636
|
+
charUnitRanges.push({
|
|
637
|
+
start: startIndex,
|
|
638
|
+
end: units.length,
|
|
639
|
+
isHangul: false
|
|
640
|
+
});
|
|
616
641
|
}
|
|
617
642
|
}
|
|
618
|
-
return units;
|
|
643
|
+
return { units, charUnitRanges };
|
|
619
644
|
}
|
|
620
645
|
class Typing {
|
|
621
646
|
// 원본 텍스트
|
|
622
647
|
constructor(container, options) {
|
|
623
|
-
this.originalChars = [];
|
|
624
|
-
this.charUnitMap = [];
|
|
625
648
|
this.container = typeof container === "string" ? document.querySelector(container) : container;
|
|
626
649
|
if (!this.container) {
|
|
627
650
|
throw new Error("Container element not found");
|
|
@@ -640,10 +663,9 @@ class Typing {
|
|
|
640
663
|
onUpdate: options.onUpdate || null,
|
|
641
664
|
onComplete: options.onComplete || null
|
|
642
665
|
};
|
|
643
|
-
|
|
644
|
-
this.
|
|
645
|
-
this.
|
|
646
|
-
this.initializeTextStructure();
|
|
666
|
+
const decomposed = decomposeText(this.config.text);
|
|
667
|
+
this.textUnits = decomposed.units;
|
|
668
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
647
669
|
this.currentIndex = 0;
|
|
648
670
|
this.displayedText = "";
|
|
649
671
|
this.timeoutId = null;
|
|
@@ -686,54 +708,36 @@ class Typing {
|
|
|
686
708
|
);
|
|
687
709
|
this.intersectionObserver.observe(this.container);
|
|
688
710
|
}
|
|
689
|
-
//
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
const
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
const decomposed = decomposeHangul(char);
|
|
699
|
-
this.charUnitMap.push(decomposed.length);
|
|
700
|
-
} else {
|
|
701
|
-
this.charUnitMap.push(1);
|
|
711
|
+
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
712
|
+
// 한글의 경우 자음/모음이 하나씩 보이도록 합성
|
|
713
|
+
buildTextFromUnits(unitCount) {
|
|
714
|
+
if (unitCount === 0) return "";
|
|
715
|
+
let result = "";
|
|
716
|
+
for (let charIndex = 0; charIndex < this.charUnitRanges.length; charIndex++) {
|
|
717
|
+
const range = this.charUnitRanges[charIndex];
|
|
718
|
+
if (range.start >= unitCount) {
|
|
719
|
+
break;
|
|
702
720
|
}
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
charIndex = i + 1;
|
|
721
|
+
const unitsEntered = Math.min(unitCount - range.start, range.end - range.start);
|
|
722
|
+
if (unitsEntered <= 0) {
|
|
723
|
+
break;
|
|
724
|
+
}
|
|
725
|
+
if (range.isHangul) {
|
|
726
|
+
const charUnits = this.textUnits.slice(range.start, range.start + unitsEntered);
|
|
727
|
+
if (charUnits.length === 1) {
|
|
728
|
+
result += charUnits[0];
|
|
729
|
+
} else if (charUnits.length === 2) {
|
|
730
|
+
result += composeHangul(charUnits[0], charUnits[1]);
|
|
731
|
+
} else if (charUnits.length >= 3) {
|
|
732
|
+
result += composeHangul(charUnits[0], charUnits[1], charUnits[2]);
|
|
733
|
+
}
|
|
717
734
|
} else {
|
|
718
|
-
const unitsEntered = unitIndex - (currentUnits - unitsForChar);
|
|
719
735
|
if (unitsEntered > 0) {
|
|
720
|
-
|
|
721
|
-
if (isHangul && unitsEntered >= 2) {
|
|
722
|
-
charIndex = i + 1;
|
|
723
|
-
} else if (!isHangul && unitsEntered >= 1) {
|
|
724
|
-
charIndex = i + 1;
|
|
725
|
-
}
|
|
736
|
+
result += this.textUnits[range.start];
|
|
726
737
|
}
|
|
727
|
-
break;
|
|
728
738
|
}
|
|
729
739
|
}
|
|
730
|
-
return
|
|
731
|
-
}
|
|
732
|
-
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
733
|
-
buildTextFromUnits(units) {
|
|
734
|
-
if (units.length === 0) return "";
|
|
735
|
-
const charIndex = this.getCharIndexFromUnitIndex(units.length);
|
|
736
|
-
return this.originalText.substring(0, charIndex);
|
|
740
|
+
return result;
|
|
737
741
|
}
|
|
738
742
|
start() {
|
|
739
743
|
if (this.isRunning) return;
|
|
@@ -753,8 +757,7 @@ class Typing {
|
|
|
753
757
|
}
|
|
754
758
|
return;
|
|
755
759
|
}
|
|
756
|
-
|
|
757
|
-
this.displayedText = this.buildTextFromUnits(unitsToShow);
|
|
760
|
+
this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
|
|
758
761
|
let displayText = this.displayedText;
|
|
759
762
|
if (this.config.showCursor) {
|
|
760
763
|
displayText += this.config.cursorChar;
|
|
@@ -789,8 +792,9 @@ class Typing {
|
|
|
789
792
|
setText(newText) {
|
|
790
793
|
this.originalText = newText;
|
|
791
794
|
this.config.text = newText;
|
|
792
|
-
|
|
793
|
-
this.
|
|
795
|
+
const decomposed = decomposeText(newText);
|
|
796
|
+
this.textUnits = decomposed.units;
|
|
797
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
794
798
|
this.reset();
|
|
795
799
|
if (this.config.enabled) {
|
|
796
800
|
setTimeout(() => this.start(), this.config.delay);
|
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const t=require("vue");function e(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const
|
|
1
|
+
"use strict";const t=require("vue");function e(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const s=e-44032,n=Math.floor(s/588),i=Math.floor(s%588/28),r=s%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][i]),r>0&&a.push(o[r]),a}function s(t,e,s){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),i=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),r=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===n||-1===i)return t+(e||"")+(s||"");const o=44032+21*n*28+28*i+r;return String.fromCharCode(o)}function n(t){const s=[],n=[];for(let i=0;i<t.length;i++){const r=t[i],o=r.charCodeAt(0),a=s.length;if(o>=44032&&o<=55203){const t=e(r);s.push(...t),n.push({start:a,end:s.length,isHangul:!0})}else s.push(r),n.push({start:a,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:n}}class i{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.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 s=n(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let e="";for(let n=0;n<this.charUnitRanges.length;n++){const i=this.charUnitRanges[n];if(i.start>=t)break;const r=Math.min(t-i.start,i.end-i.start);if(r<=0)break;if(i.isHangul){const t=this.textUnits.slice(i.start,i.start+r);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else r>0&&(e+=this.textUnits[i.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){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const r=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:s}){const n=e,r=t.ref(null),o=t.ref(null);return t.onMounted(()=>{if(!r.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 i(r.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)}),s({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)}}),(s,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;
|
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|