masoneffect 2.0.2 → 2.0.3

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.
Files changed (212) hide show
  1. package/README.md +4 -4
  2. package/dist/core/index.d.ts +2 -0
  3. package/dist/core/index.d.ts.map +1 -1
  4. package/dist/core/typing/index.d.ts +52 -0
  5. package/dist/core/typing/index.d.ts.map +1 -0
  6. package/dist/count/core/index.d.ts +2 -0
  7. package/dist/count/core/index.d.ts.map +1 -1
  8. package/dist/count/core/typing/index.d.ts +52 -0
  9. package/dist/count/core/typing/index.d.ts.map +1 -0
  10. package/dist/count/index.d.ts +2 -0
  11. package/dist/count/index.d.ts.map +1 -1
  12. package/dist/count/react/index.d.ts +2 -0
  13. package/dist/count/react/index.d.ts.map +1 -1
  14. package/dist/count/react/typing/Typing.d.ts +18 -0
  15. package/dist/count/react/typing/Typing.d.ts.map +1 -0
  16. package/dist/count/react/typing/index.d.ts +4 -0
  17. package/dist/count/react/typing/index.d.ts.map +1 -0
  18. package/dist/count/svelte/index.d.ts +1 -0
  19. package/dist/count/svelte/index.d.ts.map +1 -1
  20. package/dist/count/svelte/typing/index.d.ts +3 -0
  21. package/dist/count/svelte/typing/index.d.ts.map +1 -0
  22. package/dist/count/vue/index.d.ts +1 -0
  23. package/dist/count/vue/index.d.ts.map +1 -1
  24. package/dist/count/vue/typing/index.d.ts +4 -0
  25. package/dist/count/vue/typing/index.d.ts.map +1 -0
  26. package/dist/index.cjs +1 -1
  27. package/dist/index.d.ts +2 -0
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.mjs +1 -1
  30. package/dist/react/core/index.d.ts +2 -0
  31. package/dist/react/core/typing/index.d.ts +51 -0
  32. package/dist/react/count/core/index.d.ts +2 -0
  33. package/dist/react/count/core/index.d.ts.map +1 -1
  34. package/dist/react/count/core/typing/index.d.ts +52 -0
  35. package/dist/react/count/core/typing/index.d.ts.map +1 -0
  36. package/dist/react/count/index.d.ts +2 -0
  37. package/dist/react/count/index.d.ts.map +1 -1
  38. package/dist/react/count/react/index.d.ts +2 -0
  39. package/dist/react/count/react/index.d.ts.map +1 -1
  40. package/dist/react/count/react/typing/Typing.d.ts +18 -0
  41. package/dist/react/count/react/typing/Typing.d.ts.map +1 -0
  42. package/dist/react/count/react/typing/index.d.ts +4 -0
  43. package/dist/react/count/react/typing/index.d.ts.map +1 -0
  44. package/dist/react/count/svelte/index.d.ts +1 -0
  45. package/dist/react/count/svelte/index.d.ts.map +1 -1
  46. package/dist/react/count/svelte/typing/index.d.ts +3 -0
  47. package/dist/react/count/svelte/typing/index.d.ts.map +1 -0
  48. package/dist/react/count/vue/index.d.ts +1 -0
  49. package/dist/react/count/vue/index.d.ts.map +1 -1
  50. package/dist/react/count/vue/typing/index.d.ts +4 -0
  51. package/dist/react/count/vue/typing/index.d.ts.map +1 -0
  52. package/dist/react/index.cjs +2 -0
  53. package/dist/react/index.d.ts.map +1 -1
  54. package/dist/react/index.mjs +1 -0
  55. package/dist/react/react/index.d.ts +2 -0
  56. package/dist/react/react/typing/Typing.d.ts +17 -0
  57. package/dist/react/react/typing/index.d.ts +3 -0
  58. package/dist/react/svelte/index.d.ts +1 -0
  59. package/dist/react/svelte/typing/index.d.ts +2 -0
  60. package/dist/react/textToParticle/core/index.d.ts +2 -0
  61. package/dist/react/textToParticle/core/index.d.ts.map +1 -1
  62. package/dist/react/textToParticle/core/typing/index.d.ts +52 -0
  63. package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -0
  64. package/dist/react/textToParticle/index.d.ts +2 -0
  65. package/dist/react/textToParticle/index.d.ts.map +1 -1
  66. package/dist/react/textToParticle/react/index.d.ts +2 -0
  67. package/dist/react/textToParticle/react/index.d.ts.map +1 -1
  68. package/dist/react/textToParticle/react/typing/Typing.d.ts +18 -0
  69. package/dist/react/textToParticle/react/typing/Typing.d.ts.map +1 -0
  70. package/dist/react/textToParticle/react/typing/index.d.ts +4 -0
  71. package/dist/react/textToParticle/react/typing/index.d.ts.map +1 -0
  72. package/dist/react/textToParticle/svelte/index.d.ts +1 -0
  73. package/dist/react/textToParticle/svelte/index.d.ts.map +1 -1
  74. package/dist/react/textToParticle/svelte/typing/index.d.ts +3 -0
  75. package/dist/react/textToParticle/svelte/typing/index.d.ts.map +1 -0
  76. package/dist/react/textToParticle/vue/index.d.ts +1 -0
  77. package/dist/react/textToParticle/vue/index.d.ts.map +1 -1
  78. package/dist/react/textToParticle/vue/typing/index.d.ts +4 -0
  79. package/dist/react/textToParticle/vue/typing/index.d.ts.map +1 -0
  80. package/dist/react/typing/Typing.d.ts +18 -0
  81. package/dist/react/typing/Typing.d.ts.map +1 -0
  82. package/dist/react/typing/core/count/index.d.ts +52 -0
  83. package/dist/react/typing/core/count/index.d.ts.map +1 -0
  84. package/dist/react/typing/core/index.d.ts +20 -0
  85. package/dist/react/typing/core/index.d.ts.map +1 -0
  86. package/dist/react/typing/core/textToParticle/index.d.ts +103 -0
  87. package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -0
  88. package/dist/react/typing/core/typing/index.d.ts +52 -0
  89. package/dist/react/typing/core/typing/index.d.ts.map +1 -0
  90. package/dist/react/typing/index.cjs +1 -0
  91. package/dist/react/typing/index.d.ts +18 -0
  92. package/dist/react/typing/index.d.ts.map +1 -0
  93. package/dist/react/typing/index.mjs +1 -0
  94. package/dist/react/typing/index.umd.d.ts +7 -0
  95. package/dist/react/typing/index.umd.d.ts.map +1 -0
  96. package/dist/react/typing/react/MasonEffect.d.ts +32 -0
  97. package/dist/react/typing/react/MasonEffect.d.ts.map +1 -0
  98. package/dist/react/typing/react/count/Count.d.ts +19 -0
  99. package/dist/react/typing/react/count/Count.d.ts.map +1 -0
  100. package/dist/react/typing/react/count/index.d.ts +5 -0
  101. package/dist/react/typing/react/count/index.d.ts.map +1 -0
  102. package/dist/react/typing/react/index.d.ts +14 -0
  103. package/dist/react/typing/react/index.d.ts.map +1 -0
  104. package/dist/react/typing/react/textToParticle/TextToParticle.d.ts +15 -0
  105. package/dist/react/typing/react/textToParticle/TextToParticle.d.ts.map +1 -0
  106. package/dist/react/typing/react/textToParticle/index.d.ts +4 -0
  107. package/dist/react/typing/react/textToParticle/index.d.ts.map +1 -0
  108. package/dist/react/typing/react/typing/Typing.d.ts +18 -0
  109. package/dist/react/typing/react/typing/Typing.d.ts.map +1 -0
  110. package/dist/react/typing/react/typing/index.d.ts +4 -0
  111. package/dist/react/typing/react/typing/index.d.ts.map +1 -0
  112. package/dist/react/typing/svelte/count/index.d.ts +2 -0
  113. package/dist/react/typing/svelte/count/index.d.ts.map +1 -0
  114. package/dist/react/typing/svelte/index.d.ts +9 -0
  115. package/dist/react/typing/svelte/index.d.ts.map +1 -0
  116. package/dist/react/typing/svelte/textToParticle/index.d.ts +2 -0
  117. package/dist/react/typing/svelte/textToParticle/index.d.ts.map +1 -0
  118. package/dist/react/typing/svelte/typing/index.d.ts +3 -0
  119. package/dist/react/typing/svelte/typing/index.d.ts.map +1 -0
  120. package/dist/react/typing/vue/count/index.d.ts +2 -0
  121. package/dist/react/typing/vue/count/index.d.ts.map +1 -0
  122. package/dist/react/typing/vue/index.d.ts +9 -0
  123. package/dist/react/typing/vue/index.d.ts.map +1 -0
  124. package/dist/react/typing/vue/textToParticle/index.d.ts +2 -0
  125. package/dist/react/typing/vue/textToParticle/index.d.ts.map +1 -0
  126. package/dist/react/typing/vue/typing/index.d.ts +4 -0
  127. package/dist/react/typing/vue/typing/index.d.ts.map +1 -0
  128. package/dist/react/vue/index.d.ts +1 -0
  129. package/dist/react/vue/typing/index.d.ts +3 -0
  130. package/dist/svelte/count/index.d.ts +52 -0
  131. package/dist/svelte/index.cjs +1 -1
  132. package/dist/svelte/index.d.ts +52 -0
  133. package/dist/svelte/index.mjs +415 -48
  134. package/dist/svelte/textToParticle/index.d.ts +52 -0
  135. package/dist/svelte/typing/index.cjs +1 -0
  136. package/dist/svelte/typing/index.d.ts +215 -0
  137. package/dist/svelte/typing/index.mjs +634 -0
  138. package/dist/textToParticle/core/index.d.ts +2 -0
  139. package/dist/textToParticle/core/index.d.ts.map +1 -1
  140. package/dist/textToParticle/core/typing/index.d.ts +52 -0
  141. package/dist/textToParticle/core/typing/index.d.ts.map +1 -0
  142. package/dist/textToParticle/index.d.ts +2 -0
  143. package/dist/textToParticle/index.d.ts.map +1 -1
  144. package/dist/textToParticle/react/index.d.ts +2 -0
  145. package/dist/textToParticle/react/index.d.ts.map +1 -1
  146. package/dist/textToParticle/react/typing/Typing.d.ts +18 -0
  147. package/dist/textToParticle/react/typing/Typing.d.ts.map +1 -0
  148. package/dist/textToParticle/react/typing/index.d.ts +4 -0
  149. package/dist/textToParticle/react/typing/index.d.ts.map +1 -0
  150. package/dist/textToParticle/svelte/index.d.ts +1 -0
  151. package/dist/textToParticle/svelte/index.d.ts.map +1 -1
  152. package/dist/textToParticle/svelte/typing/index.d.ts +3 -0
  153. package/dist/textToParticle/svelte/typing/index.d.ts.map +1 -0
  154. package/dist/textToParticle/vue/index.d.ts +1 -0
  155. package/dist/textToParticle/vue/index.d.ts.map +1 -1
  156. package/dist/textToParticle/vue/typing/index.d.ts +4 -0
  157. package/dist/textToParticle/vue/typing/index.d.ts.map +1 -0
  158. package/dist/typing/core/count/index.d.ts +52 -0
  159. package/dist/typing/core/count/index.d.ts.map +1 -0
  160. package/dist/typing/core/index.d.ts +20 -0
  161. package/dist/typing/core/index.d.ts.map +1 -0
  162. package/dist/typing/core/textToParticle/index.d.ts +103 -0
  163. package/dist/typing/core/textToParticle/index.d.ts.map +1 -0
  164. package/dist/typing/core/typing/index.d.ts +52 -0
  165. package/dist/typing/core/typing/index.d.ts.map +1 -0
  166. package/dist/typing/index.cjs +1 -0
  167. package/dist/typing/index.d.ts +18 -0
  168. package/dist/typing/index.d.ts.map +1 -0
  169. package/dist/typing/index.mjs +1 -0
  170. package/dist/typing/index.umd.d.ts +7 -0
  171. package/dist/typing/index.umd.d.ts.map +1 -0
  172. package/dist/typing/react/MasonEffect.d.ts +32 -0
  173. package/dist/typing/react/MasonEffect.d.ts.map +1 -0
  174. package/dist/typing/react/count/Count.d.ts +19 -0
  175. package/dist/typing/react/count/Count.d.ts.map +1 -0
  176. package/dist/typing/react/count/index.d.ts +5 -0
  177. package/dist/typing/react/count/index.d.ts.map +1 -0
  178. package/dist/typing/react/index.d.ts +14 -0
  179. package/dist/typing/react/index.d.ts.map +1 -0
  180. package/dist/typing/react/textToParticle/TextToParticle.d.ts +15 -0
  181. package/dist/typing/react/textToParticle/TextToParticle.d.ts.map +1 -0
  182. package/dist/typing/react/textToParticle/index.d.ts +4 -0
  183. package/dist/typing/react/textToParticle/index.d.ts.map +1 -0
  184. package/dist/typing/react/typing/Typing.d.ts +18 -0
  185. package/dist/typing/react/typing/Typing.d.ts.map +1 -0
  186. package/dist/typing/react/typing/index.d.ts +4 -0
  187. package/dist/typing/react/typing/index.d.ts.map +1 -0
  188. package/dist/typing/svelte/count/index.d.ts +2 -0
  189. package/dist/typing/svelte/count/index.d.ts.map +1 -0
  190. package/dist/typing/svelte/index.d.ts +9 -0
  191. package/dist/typing/svelte/index.d.ts.map +1 -0
  192. package/dist/typing/svelte/textToParticle/index.d.ts +2 -0
  193. package/dist/typing/svelte/textToParticle/index.d.ts.map +1 -0
  194. package/dist/typing/svelte/typing/index.d.ts +3 -0
  195. package/dist/typing/svelte/typing/index.d.ts.map +1 -0
  196. package/dist/typing/vue/count/index.d.ts +2 -0
  197. package/dist/typing/vue/count/index.d.ts.map +1 -0
  198. package/dist/typing/vue/index.d.ts +9 -0
  199. package/dist/typing/vue/index.d.ts.map +1 -0
  200. package/dist/typing/vue/textToParticle/index.d.ts +2 -0
  201. package/dist/typing/vue/textToParticle/index.d.ts.map +1 -0
  202. package/dist/typing/vue/typing/index.d.ts +4 -0
  203. package/dist/typing/vue/typing/index.d.ts.map +1 -0
  204. package/dist/vue/count/index.d.ts +52 -0
  205. package/dist/vue/index.cjs +1 -1
  206. package/dist/vue/index.d.ts +52 -0
  207. package/dist/vue/index.mjs +312 -7
  208. package/dist/vue/textToParticle/index.d.ts +52 -0
  209. package/dist/vue/typing/index.cjs +1 -0
  210. package/dist/vue/typing/index.d.ts +215 -0
  211. package/dist/vue/typing/index.mjs +308 -0
  212. package/package.json +25 -3
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Typing - 타이핑 애니메이션 효과
3
+ * 바닐라 JS 코어 클래스
4
+ *
5
+ * 사용법:
6
+ * import { Typing } from 'masoneffect/typing';
7
+ */
8
+ export interface TypingOptions {
9
+ text: string;
10
+ speed?: number;
11
+ delay?: number;
12
+ enabled?: boolean;
13
+ threshold?: number;
14
+ rootMargin?: string;
15
+ triggerOnce?: boolean;
16
+ showCursor?: boolean;
17
+ cursorChar?: string;
18
+ onUpdate?: (text: string) => void;
19
+ onComplete?: () => void;
20
+ }
21
+ export declare class Typing {
22
+ container: HTMLElement;
23
+ config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
24
+ onUpdate: TypingOptions['onUpdate'];
25
+ onComplete: TypingOptions['onComplete'];
26
+ };
27
+ textUnits: string[];
28
+ currentIndex: number;
29
+ displayedText: string;
30
+ timeoutId: ReturnType<typeof setTimeout> | null;
31
+ intersectionObserver: IntersectionObserver | null;
32
+ isRunning: boolean;
33
+ hasTriggered: boolean;
34
+ originalText: string;
35
+ constructor(container: HTMLElement | string, options: TypingOptions);
36
+ init(): void;
37
+ setupIntersectionObserver(): void;
38
+ private originalChars;
39
+ private charUnitMap;
40
+ private initializeTextStructure;
41
+ private getCharIndexFromUnitIndex;
42
+ private buildTextFromUnits;
43
+ start(): void;
44
+ typeNext(): void;
45
+ stop(): void;
46
+ reset(): void;
47
+ updateDisplay(text: string): void;
48
+ setText(newText: string): void;
49
+ destroy(): void;
50
+ }
51
+ export default Typing;
52
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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;AA0DD,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,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;IAgDnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,yBAAyB;IAqCjC,OAAO,CAAC,kBAAkB;IAO1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAwChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAY9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,"t",{value:!0});var t=require("react");function s(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,e=Math.floor(i/588),h=Math.floor(i%588/28),r=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][e]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][h]),r>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][r]),o}function i(t){const i=[];for(let e=0;e<t.length;e++){const h=t[e],r=h.charCodeAt(0);if(r>=44032&&r<=55203){const t=s(h);i.push(...t)}else i.push(h)}return i}class e{constructor(t,s){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=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},this.textUnits=i(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=>{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)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const i=this.originalText[t],e=i.charCodeAt(0);if(this.originalChars.push(i),e>=44032&&e<=55203){const t=s(i);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let s=0,i=0;for(let e=0;e<this.charUnitMap.length;e++){const h=this.charUnitMap[e];if(i+=h,!(t>=i)){const r=t-(i-h);if(r>0){const t=this.originalChars[e]&&this.originalChars[e].charCodeAt(0)>=44032&&this.originalChars[e].charCodeAt(0)<=55203;(t&&r>=2||!t&&r>=1)&&(s=e+1)}break}s=e+1}return s}buildTextFromUnits(t){if(0===t.length)return"";const s=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,s)}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 s=this.displayedText;this.config.showCursor&&(s+=this.config.cursorChar),this.updateDisplay(s),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=i(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.forwardRef((s,i)=>{const h=t.useRef(null),r=t.useRef(null);return t.useEffect(()=>{if(!h.current)return;if(r.current)return;const{className:t,style:i,text:o,speed:n,delay:l,enabled:u,threshold:c,rootMargin:a,triggerOnce:d,showCursor:p,cursorChar:f,onUpdate:g,onComplete:x}=s,y={text:o,speed:n,delay:l,enabled:u,threshold:c,rootMargin:a,triggerOnce:d,showCursor:p,cursorChar:f,onUpdate:g,onComplete:x};return r.current=new e(h.current,y),()=>{r.current&&(r.current.destroy(),r.current=null)}},[]),t.useEffect(()=>{if(!r.current)return;const{text:t,speed:i,delay:e,enabled:h,threshold:o,rootMargin:n,triggerOnce:l,showCursor:u,cursorChar:c,onUpdate:a,onComplete:d}=s;void 0!==t&&t!==r.current.originalText&&r.current.setText(t)},[s.text,s.speed,s.delay,s.enabled,s.threshold,s.rootMargin,s.triggerOnce,s.showCursor,s.cursorChar,s.onUpdate,s.onComplete]),t.useImperativeHandle(i,()=>({start:()=>{r.current?r.current.start():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},stop:()=>{r.current?r.current.stop():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},reset:()=>{r.current?r.current.reset():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},setText:t=>{r.current?r.current.setText(t):console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{r.current&&(r.current.destroy(),r.current=null)}})),t.createElement("div",{ref:h,className:s.className,style:s.style})});h.displayName="Typing",exports.default=h;
@@ -0,0 +1,18 @@
1
+ /**
2
+ * MasonEffect - 메인 엔트리 포인트
3
+ *
4
+ * 주의: tree-shaking을 위해 각 이펙트를 직접 import하는 것을 권장합니다:
5
+ * - import { TextToParticle } from 'masoneffect/textToParticle'
6
+ * - import { Count } from 'masoneffect/count'
7
+ *
8
+ * 이 파일은 하위 호환성을 위해 제공됩니다.
9
+ */
10
+ export { TextToParticle, MasonEffect } from './core/index.js';
11
+ export type { TextToParticleOptions, MasonEffectOptions, Particle } from './core/index.js';
12
+ export { Count } from './core/index.js';
13
+ export type { CountOptions } from './core/index.js';
14
+ export { easingFunctions } from './core/index.js';
15
+ export { Typing } from './core/index.js';
16
+ export type { TypingOptions } from './core/index.js';
17
+ export { default } from './core/index.js';
18
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1 @@
1
+ import t,{useRef as s,useEffect as i}from"react";function e(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,e=Math.floor(i/588),h=Math.floor(i%588/28),r=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][e]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][h]),r>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][r]),o}function h(t){const s=[];for(let i=0;i<t.length;i++){const h=t[i],r=h.charCodeAt(0);if(r>=44032&&r<=55203){const t=e(h);s.push(...t)}else s.push(h)}return s}class r{constructor(t,s){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=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},this.textUnits=h(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=>{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)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const s=this.originalText[t],i=s.charCodeAt(0);if(this.originalChars.push(s),i>=44032&&i<=55203){const t=e(s);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let s=0,i=0;for(let e=0;e<this.charUnitMap.length;e++){const h=this.charUnitMap[e];if(i+=h,!(t>=i)){const r=t-(i-h);if(r>0){const t=this.originalChars[e]&&this.originalChars[e].charCodeAt(0)>=44032&&this.originalChars[e].charCodeAt(0)<=55203;(t&&r>=2||!t&&r>=1)&&(s=e+1)}break}s=e+1}return s}buildTextFromUnits(t){if(0===t.length)return"";const s=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,s)}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 s=this.displayedText;this.config.showCursor&&(s+=this.config.cursorChar),this.updateDisplay(s),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=h(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 o=t.forwardRef((e,h)=>{const o=s(null),n=s(null);return i(()=>{if(!o.current)return;if(n.current)return;const{className:t,style:s,text:i,speed:h,delay:l,enabled:u,threshold:c,rootMargin:a,triggerOnce:d,showCursor:p,cursorChar:f,onUpdate:g,onComplete:m}=e,y={text:i,speed:h,delay:l,enabled:u,threshold:c,rootMargin:a,triggerOnce:d,showCursor:p,cursorChar:f,onUpdate:g,onComplete:m};return n.current=new r(o.current,y),()=>{n.current&&(n.current.destroy(),n.current=null)}},[]),i(()=>{if(!n.current)return;const{text:t,speed:s,delay:i,enabled:h,threshold:r,rootMargin:o,triggerOnce:l,showCursor:u,cursorChar:c,onUpdate:a,onComplete:d}=e;void 0!==t&&t!==n.current.originalText&&n.current.setText(t)},[e.text,e.speed,e.delay,e.enabled,e.threshold,e.rootMargin,e.triggerOnce,e.showCursor,e.cursorChar,e.onUpdate,e.onComplete]),t.useImperativeHandle(h,()=>({start:()=>{n.current?n.current.start():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},stop:()=>{n.current?n.current.stop():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},reset:()=>{n.current?n.current.reset():console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},setText:t=>{n.current?n.current.setText(t):console.warn("Typing: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{n.current&&(n.current.destroy(),n.current=null)}})),t.createElement("div",{ref:o,className:e.className,style:e.style})});o.displayName="Typing";export{o as default};
@@ -0,0 +1,7 @@
1
+ /**
2
+ * MasonEffect - UMD 전용 엔트리 포인트
3
+ * CDN 사용 시: new MasonEffect()로 직접 사용 가능
4
+ */
5
+ import MasonEffect from './core/index.js';
6
+ export default MasonEffect;
7
+ //# sourceMappingURL=index.umd.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.umd.d.ts","sourceRoot":"","sources":["../../../src/index.umd.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAG1C,eAAe,WAAW,CAAC"}
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { MasonEffect } from '../core/index.js';
3
+ export interface MasonEffectOptions {
4
+ text?: string;
5
+ densityStep?: number;
6
+ maxParticles?: number;
7
+ pointSize?: number;
8
+ ease?: number;
9
+ repelRadius?: number;
10
+ repelStrength?: number;
11
+ particleColor?: string;
12
+ fontFamily?: string;
13
+ fontSize?: number | null;
14
+ width?: number | null;
15
+ height?: number | null;
16
+ devicePixelRatio?: number | null;
17
+ onReady?: (instance: MasonEffect) => void;
18
+ onUpdate?: (instance: MasonEffect) => void;
19
+ }
20
+ export interface MasonEffectRef {
21
+ morph: (textOrOptions?: string | Partial<MasonEffectOptions>) => void;
22
+ scatter: () => void;
23
+ updateConfig: (config: Partial<MasonEffectOptions>) => void;
24
+ destroy: () => void;
25
+ }
26
+ interface MasonEffectProps extends MasonEffectOptions {
27
+ className?: string;
28
+ style?: React.CSSProperties;
29
+ }
30
+ declare const MasonEffectComponent: React.ForwardRefExoticComponent<MasonEffectProps & React.RefAttributes<MasonEffectRef>>;
31
+ export default MasonEffectComponent;
32
+ //# sourceMappingURL=MasonEffect.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MasonEffect.d.ts","sourceRoot":"","sources":["../../../../src/react/MasonEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACtE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,oBAAoB,yFAkNzB,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import type { CountOptions } from '../../core/count/index.js';
3
+ export interface CountRef {
4
+ start: () => void;
5
+ stop: () => void;
6
+ reset: () => void;
7
+ getValue: () => number;
8
+ updateConfig: (config: Partial<CountOptions>) => void;
9
+ destroy: () => void;
10
+ }
11
+ interface CountProps extends Omit<CountOptions, 'onUpdate' | 'onComplete'> {
12
+ className?: string;
13
+ style?: React.CSSProperties;
14
+ onUpdate?: (value: number) => void;
15
+ onComplete?: () => void;
16
+ }
17
+ declare const CountComponent: React.ForwardRefExoticComponent<CountProps & React.RefAttributes<CountRef>>;
18
+ export default CountComponent;
19
+ //# sourceMappingURL=Count.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../../../src/react/count/Count.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,6EAiJnB,CAAC;AAIF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { default } from './Count';
2
+ export type { CountRef } from './Count';
3
+ export type { CountOptions } from '../../core/count/index.js';
4
+ export { easingFunctions } from '../../core/count/index.js';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/count/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,14 @@
1
+ /**
2
+ * MasonEffect React - 모든 React 컴포넌트를 export하는 메인 파일
3
+ */
4
+ export { default as TextToParticle } from './textToParticle/index.js';
5
+ export type { TextToParticleRef, TextToParticleOptions } from './textToParticle/index.js';
6
+ export { default as Count } from './count/index.js';
7
+ export type { CountRef, CountOptions } from './count/index.js';
8
+ export { easingFunctions } from './count/index.js';
9
+ export { default as Typing } from './typing/index.js';
10
+ export type { TypingRef, TypingOptions } from './typing/index.js';
11
+ export { default as MasonEffect } from './textToParticle/index.js';
12
+ export type { TextToParticleRef as MasonEffectRef, TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
13
+ export { default } from './textToParticle/index.js';
14
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACtE,YAAY,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG1F,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,YAAY,EAAE,iBAAiB,IAAI,cAAc,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGlI,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import type { TextToParticleOptions } from '../../core/index.js';
3
+ export interface TextToParticleRef {
4
+ morph: (textOrOptions?: string | Partial<TextToParticleOptions>) => void;
5
+ scatter: () => void;
6
+ updateConfig: (config: Partial<TextToParticleOptions>) => void;
7
+ destroy: () => void;
8
+ }
9
+ interface TextToParticleProps extends TextToParticleOptions {
10
+ className?: string;
11
+ style?: React.CSSProperties;
12
+ }
13
+ declare const TextToParticleComponent: React.ForwardRefExoticComponent<TextToParticleProps & React.RefAttributes<TextToParticleRef>>;
14
+ export default TextToParticleComponent;
15
+ //# sourceMappingURL=TextToParticle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextToParticle.d.ts","sourceRoot":"","sources":["../../../../../src/react/textToParticle/TextToParticle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IACzE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,mBAAoB,SAAQ,qBAAqB;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,uBAAuB,+FAkN5B,CAAC;AAIF,eAAe,uBAAuB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default } from './TextToParticle';
2
+ export type { TextToParticleRef } from './TextToParticle';
3
+ export type { TextToParticleOptions } from '../../core/textToParticle/index.js';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/textToParticle/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC"}
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import type { TypingOptions } from '../../core/typing/index.js';
3
+ export interface TypingRef {
4
+ start: () => void;
5
+ stop: () => void;
6
+ reset: () => void;
7
+ setText: (text: string) => void;
8
+ destroy: () => void;
9
+ }
10
+ interface TypingProps extends Omit<TypingOptions, 'onUpdate' | 'onComplete'> {
11
+ className?: string;
12
+ style?: React.CSSProperties;
13
+ onUpdate?: (text: string) => void;
14
+ onComplete?: () => void;
15
+ }
16
+ declare const TypingComponent: React.ForwardRefExoticComponent<TypingProps & React.RefAttributes<TypingRef>>;
17
+ export default TypingComponent;
18
+ //# sourceMappingURL=Typing.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Typing.d.ts","sourceRoot":"","sources":["../../../../../src/react/typing/Typing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,eAAe,+EAsIpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default } from './Typing.js';
2
+ export type { TypingRef } from './Typing.js';
3
+ export type { TypingOptions } from '../../core/typing/index.js';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Count.svelte';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/count/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * MasonEffect Svelte - 모든 Svelte 컴포넌트를 export하는 메인 파일
3
+ */
4
+ export { default as TextToParticle } from './textToParticle/index.js';
5
+ export { default as Count } from './count/index.js';
6
+ export { default as Typing } from './typing/index.js';
7
+ export { default as MasonEffect } from './textToParticle/index.js';
8
+ export { default } from './textToParticle/index.js';
9
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './TextToParticle.svelte';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/textToParticle/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default } from './Typing.svelte';
2
+ export type { TypingOptions } from '../../core/typing/index.js';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Count.vue';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/vue/count/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * MasonEffect Vue - 모든 Vue 컴포넌트를 export하는 메인 파일
3
+ */
4
+ export { default as TextToParticle } from './textToParticle/index.js';
5
+ export { default as Count } from './count/index.js';
6
+ export { default as Typing } from './typing/index.js';
7
+ export { default as MasonEffect } from './textToParticle/index.js';
8
+ export { default } from './textToParticle/index.js';
9
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './TextToParticle.vue';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/vue/textToParticle/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default } from './Typing.vue';
2
+ export type { TypingRef } from './Typing.vue';
3
+ export type { TypingOptions } from '../../core/typing/index.js';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/vue/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
@@ -3,5 +3,6 @@
3
3
  */
4
4
  export { default as TextToParticle } from './textToParticle/index.js';
5
5
  export { default as Count } from './count/index.js';
6
+ export { default as Typing } from './typing/index.js';
6
7
  export { default as MasonEffect } from './textToParticle/index.js';
7
8
  export { default } from './textToParticle/index.js';
@@ -0,0 +1,3 @@
1
+ export { default } from './Typing.vue';
2
+ export type { TypingRef } from './Typing.vue';
3
+ export type { TypingOptions } from '../../core/typing/index.js';
@@ -160,4 +160,56 @@ declare class TextToParticle {
160
160
  export { TextToParticleOptions as MasonEffectOptions }
161
161
  export { TextToParticleOptions }
162
162
 
163
+ export declare class Typing {
164
+ container: HTMLElement;
165
+ config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
166
+ onUpdate: TypingOptions['onUpdate'];
167
+ onComplete: TypingOptions['onComplete'];
168
+ };
169
+ textUnits: string[];
170
+ currentIndex: number;
171
+ displayedText: string;
172
+ timeoutId: ReturnType<typeof setTimeout> | null;
173
+ intersectionObserver: IntersectionObserver | null;
174
+ isRunning: boolean;
175
+ hasTriggered: boolean;
176
+ originalText: string;
177
+ constructor(container: HTMLElement | string, options: TypingOptions);
178
+ init(): void;
179
+ setupIntersectionObserver(): void;
180
+ private originalChars;
181
+ private charUnitMap;
182
+ private initializeTextStructure;
183
+ private getCharIndexFromUnitIndex;
184
+ private buildTextFromUnits;
185
+ start(): void;
186
+ typeNext(): void;
187
+ stop(): void;
188
+ reset(): void;
189
+ updateDisplay(text: string): void;
190
+ setText(newText: string): void;
191
+ destroy(): void;
192
+ }
193
+
194
+ /**
195
+ * Typing - 타이핑 애니메이션 효과
196
+ * 바닐라 JS 코어 클래스
197
+ *
198
+ * 사용법:
199
+ * import { Typing } from 'masoneffect/typing';
200
+ */
201
+ export declare interface TypingOptions {
202
+ text: string;
203
+ speed?: number;
204
+ delay?: number;
205
+ enabled?: boolean;
206
+ threshold?: number;
207
+ rootMargin?: string;
208
+ triggerOnce?: boolean;
209
+ showCursor?: boolean;
210
+ cursorChar?: string;
211
+ onUpdate?: (text: string) => void;
212
+ onComplete?: () => void;
213
+ }
214
+
163
215
  export { }
@@ -1 +1 @@
1
- "use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t,e,i){t.insertBefore(e,i||null)}function c(t){t.parentNode&&t.parentNode.removeChild(t)}function u(t){return document.createElement(t)}function d(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let f;function g(t){f=t}const p=[],m=[];let v=[];const x=[],y=Promise.resolve();let b=!1;function $(t){v.push(t)}const w=new Set;let M=0;function C(){if(0!==M)return;const t=f;do{try{for(;M<p.length;){const t=p[M];M++,g(t),R(t.$$)}}catch(e){throw p.length=0,M=0,e}for(g(null),p.length=0,M=0;m.length;)m.pop()();for(let t=0;t<v.length;t+=1){const e=v[t];w.has(e)||(w.add(e),e())}v.length=0}while(p.length);for(;x.length;)x.pop()();b=!1,w.clear(),g(t)}function R(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const S=new Set;function V(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];v.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),v=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function O(t,e){-1===t.$$.dirty[0]&&(p.push(t),b||(b=!0,y.then(C)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function P(t,e,i,h,l,u,d=null,p=[-1]){const m=f;g(t);const v=t.$$={fragment:null,ctx:[],props:u,update:n,not_equal:l,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:e.target||m.$$.root};d&&d(v.root);let x=!1;if(v.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return v.ctx&&l(v.ctx[e],v.ctx[e]=s)&&(!v.skip_bound&&v.bound[e]&&v.bound[e](s),x&&O(t,e)),i}):[],v.update(),x=!0,r(v.before_update),v.fragment=!!h&&h(v.ctx),e.target){if(e.hydrate){const t=(w=e.target,Array.from(w.childNodes));v.fragment&&v.fragment.l(t),t.forEach(c)}else v.fragment&&v.fragment.c();e.intro&&((y=t.$$.fragment)&&y.i&&(S.delete(y),y.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),C()}var y,b,w;g(m)}class _{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){V(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class D{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d",{willReadFrequently:!0});if(!i)throw new Error("Canvas context not available");this.ctx=i,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{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.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=e.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=z(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=z(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=z(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,r=.1*t,a=.05*t;let h=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);h=Math.max(h,t)}const l=s.length>0?o*s.length+r*(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,r=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(r=n,s=n+1):o=n-1}return r}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 r=t.split("\n"),a=o,h=.1*o,l=.05*o,c=r.length>0?a*r.length+h*(r.length-1):a;let u=this.H/2-c/2+a/2;for(const p of r){if(0===p.length){u+=a+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,u),i+=this.offCtx.measureText(n).width+l;u+=a+h}const d=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+=d)for(let t=0;t<this.W;t+=d){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,r=this.config.repelRadius*this.DPR;if(o<r*r){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/r);t+=n/e*a*6,i+=s/e*a*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const E={linear:t=>t};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.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??E.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 T(t){let e;return{c(){e=u("div"),d(e,"class",t[0]),d(e,"style",t[1])},m(i,n){l(i,e,n),t[21](e)},p(t,[i]){1&i&&d(e,"class",t[0]),2&i&&d(e,"style",t[1])},i:n,o:n,d(i){i&&c(e),t[21](null)}}}function F(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:r=3200}=e,{pointSize:a=.5}=e,{ease:h=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:u="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:p=null}=e,{devicePixelRatio:v=null}=e,{className:x=""}=e,{style:y={}}=e;const b=i.createEventDispatcher();let $,w=null;return i.onMount(()=>{if(!$)return;n(20,w=new D($,{text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:v,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{w&&(w.destroy(),n(20,w=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,r=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,h=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,u=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,p=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,x=t.className),"style"in t&&n(1,y=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&w&&w.updateConfig({text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:v})},[x,y,$,s,o,r,a,h,l,c,u,d,f,g,p,v,function(t){w&&w.morph(t)},function(){w&&w.scatter()},function(t){w&&w.updateConfig(t)},function(){w&&(w.destroy(),n(20,w=null))},w,function(t){m[t?"unshift":"push"](()=>{$=t,n(2,$)})}]}class W extends _{constructor(t){super(),P(this,t,F,T,h,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}}function H(t){let e;return{c(){e=u("div"),d(e,"class",t[0]),d(e,"style",t[1])},m(i,n){l(i,e,n),t[18](e)},p(t,[i]){1&i&&d(e,"class",t[0]),2&i&&d(e,"style",t[1])},i:n,o:n,d(i){i&&c(e),t[18](null)}}}function U(t,e,n){let{targetValue:s=0}=e,{duration:o=2e3}=e,{startValue:r=0}=e,{enabled:a=!0}=e,{easing:h=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:u=!1}=e,{className:d=""}=e,{style:f={}}=e;const g=i.createEventDispatcher();let p,v=null;return i.onMount(()=>{if(!p)return;n(17,v=new I(p,{targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}}))}),i.onDestroy(()=>{v&&(v.destroy(),n(17,v=null))}),t.$$set=t=>{"targetValue"in t&&n(3,s=t.targetValue),"duration"in t&&n(4,o=t.duration),"startValue"in t&&n(5,r=t.startValue),"enabled"in t&&n(6,a=t.enabled),"easing"in t&&n(7,h=t.easing),"threshold"in t&&n(8,l=t.threshold),"rootMargin"in t&&n(9,c=t.rootMargin),"triggerOnce"in t&&n(10,u=t.triggerOnce),"className"in t&&n(0,d=t.className),"style"in t&&n(1,f=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&v&&v.updateConfig({targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}})},[d,f,p,s,o,r,a,h,l,c,u,function(){v&&v.start()},function(){v&&v.stop()},function(){v&&v.reset()},function(){return v?v.getValue():0},function(t){v&&v.updateConfig(t)},function(){v&&(v.destroy(),n(17,v=null))},v,function(t){m[t?"unshift":"push"](()=>{p=t,n(2,p)})}]}exports.Count=class extends _{constructor(t){super(),P(this,t,U,H,h,{targetValue:3,duration:4,startValue:5,enabled:6,easing:7,threshold:8,rootMargin:9,triggerOnce:10,className:0,style:1,start:11,stop:12,reset:13,getValue:14,updateConfig:15,destroy:16})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get getValue(){return this.$$.ctx[14]}get updateConfig(){return this.$$.ctx[15]}get destroy(){return this.$$.ctx[16]}},exports.MasonEffect=W,exports.TextToParticle=W,exports.default=W;
1
+ "use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t,e,i){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return n}const i=t.subscribe(...e);return i.unsubscribe?()=>i.unsubscribe():i}(e,i))}function c(t,e,i){t.insertBefore(e,i||null)}function u(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function f(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let g;function p(t){g=t}const m=[],x=[];let y=[];const v=[],b=Promise.resolve();let C=!1;function w(t){y.push(t)}const $=new Set;let M=0;function T(){if(0!==M)return;const t=g;do{try{for(;M<m.length;){const t=m[M];M++,p(t),R(t.$$)}}catch(e){throw m.length=0,M=0,e}for(p(null),m.length=0,M=0;x.length;)x.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];$.has(e)||($.add(e),e())}y.length=0}while(m.length);for(;v.length;)v.pop()();C=!1,$.clear(),p(t)}function R(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(w)}}const O=new Set;function S(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];y.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),y=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function I(t,e){-1===t.$$.dirty[0]&&(m.push(t),C||(C=!0,b.then(T)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function V(t,e,i,h,l,c,d=null,f=[-1]){const m=g;p(t);const x=t.$$={fragment:null,ctx:[],props:c,update:n,not_equal:l,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:f,skip_bound:!1,root:e.target||m.$$.root};d&&d(x.root);let y=!1;if(x.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return x.ctx&&l(x.ctx[e],x.ctx[e]=s)&&(!x.skip_bound&&x.bound[e]&&x.bound[e](s),y&&I(t,e)),i}):[],x.update(),y=!0,r(x.before_update),x.fragment=!!h&&h(x.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));x.fragment&&x.fragment.l(t),t.forEach(u)}else x.fragment&&x.fragment.c();e.intro&&((v=t.$$.fragment)&&v.i&&(O.delete(v),v.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),w(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach(w)}(t,e.target,e.anchor),T()}var v,b,C;p(m)}class U{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){S(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function P(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class D{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d",{willReadFrequently:!0});if(!i)throw new Error("Canvas context not available");this.ctx=i,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{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.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=e.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=P(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=P(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=P(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,r=.1*t,a=.05*t;let h=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);h=Math.max(h,t)}const l=s.length>0?o*s.length+r*(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,r=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(r=n,s=n+1):o=n-1}return r}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 r=t.split("\n"),a=o,h=.1*o,l=.05*o,c=r.length>0?a*r.length+h*(r.length-1):a;let u=this.H/2-c/2+a/2;for(const p of r){if(0===p.length){u+=a+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,u),i+=this.offCtx.measureText(n).width+l;u+=a+h}const d=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+=d)for(let t=0;t<this.W;t+=d){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,r=this.config.repelRadius*this.DPR;if(o<r*r){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/r);t+=n/e*a*6,i+=s/e*a*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const _={linear:t=>t};class z{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??_.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 F(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,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&a.push(r[o]),a}function E(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=F(n);e.push(...t)}else e.push(n)}return e}class W{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=E(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=F(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=E(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)}}function H(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[21](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[21](null)}}}function L(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:r=3200}=e,{pointSize:a=.5}=e,{ease:h=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:u="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:p=null}=e,{devicePixelRatio:m=null}=e,{className:y=""}=e,{style:v={}}=e;const b=i.createEventDispatcher();let C,w=null;return i.onMount(()=>{if(!C)return;n(20,w=new D(C,{text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{w&&(w.destroy(),n(20,w=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,r=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,h=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,u=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,p=t.height),"devicePixelRatio"in t&&n(15,m=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,v=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&w&&w.updateConfig({text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m})},[y,v,C,s,o,r,a,h,l,c,u,d,f,g,p,m,function(t){w&&w.morph(t)},function(){w&&w.scatter()},function(t){w&&w.updateConfig(t)},function(){w&&(w.destroy(),n(20,w=null))},w,function(t){x[t?"unshift":"push"](()=>{C=t,n(2,C)})}]}class N extends U{constructor(t){super(),V(this,t,L,H,h,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}}function A(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[18](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[18](null)}}}function k(t,e,n){let{targetValue:s=0}=e,{duration:o=2e3}=e,{startValue:r=0}=e,{enabled:a=!0}=e,{easing:h=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:u=!1}=e,{className:d=""}=e,{style:f={}}=e;const g=i.createEventDispatcher();let p,m=null;return i.onMount(()=>{if(!p)return;n(17,m=new z(p,{targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}}))}),i.onDestroy(()=>{m&&(m.destroy(),n(17,m=null))}),t.$$set=t=>{"targetValue"in t&&n(3,s=t.targetValue),"duration"in t&&n(4,o=t.duration),"startValue"in t&&n(5,r=t.startValue),"enabled"in t&&n(6,a=t.enabled),"easing"in t&&n(7,h=t.easing),"threshold"in t&&n(8,l=t.threshold),"rootMargin"in t&&n(9,c=t.rootMargin),"triggerOnce"in t&&n(10,u=t.triggerOnce),"className"in t&&n(0,d=t.className),"style"in t&&n(1,f=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&m&&m.updateConfig({targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}})},[d,f,p,s,o,r,a,h,l,c,u,function(){m&&m.start()},function(){m&&m.stop()},function(){m&&m.reset()},function(){return m?m.getValue():0},function(t){m&&m.updateConfig(t)},function(){m&&(m.destroy(),n(17,m=null))},m,function(t){x[t?"unshift":"push"](()=>{p=t,n(2,p)})}]}function q(t){let e;return{c(){e=d("div"),f(e,"class",t[1]),f(e,"style",t[2])},m(i,n){c(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&u(e),t[8](null)}}}function j(t,e,n){let s,o;l(t,effect,t=>n(10,s=t)),l(t,props,t=>n(11,o=t));let{text:r,speed:a=50,delay:h=0,enabled:c=!0,threshold:u=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:p="|",className:m="",style:y="",onUpdate:v,onComplete:b}=o(),C=null,w=null;return i.onMount(()=>{if(!C)return;w=new W(C,{text:r,speed:a,delay:h,enabled:c,threshold:u,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:p,onUpdate:v,onComplete:b})}),i.onDestroy(()=>{w&&(w.destroy(),w=null)}),s(()=>{w&&r!==w.originalText&&w.setText(r)}),[C,m,y,function(){null==w||w.start()},function(){null==w||w.stop()},function(){null==w||w.reset()},function(t){null==w||w.setText(t)},function(){w&&(w.destroy(),w=null)},function(t){x[t?"unshift":"push"](()=>{C=t,n(0,C)})}]}exports.Count=class extends U{constructor(t){super(),V(this,t,k,A,h,{targetValue:3,duration:4,startValue:5,enabled:6,easing:7,threshold:8,rootMargin:9,triggerOnce:10,className:0,style:1,start:11,stop:12,reset:13,getValue:14,updateConfig:15,destroy:16})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get getValue(){return this.$$.ctx[14]}get updateConfig(){return this.$$.ctx[15]}get destroy(){return this.$$.ctx[16]}},exports.MasonEffect=N,exports.TextToParticle=N,exports.Typing=class extends U{constructor(t){super(),V(this,t,j,q,h,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}},exports.default=N;
@@ -160,4 +160,56 @@ declare class TextToParticle {
160
160
  export { TextToParticleOptions as MasonEffectOptions }
161
161
  export { TextToParticleOptions }
162
162
 
163
+ export declare class Typing {
164
+ container: HTMLElement;
165
+ config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
166
+ onUpdate: TypingOptions['onUpdate'];
167
+ onComplete: TypingOptions['onComplete'];
168
+ };
169
+ textUnits: string[];
170
+ currentIndex: number;
171
+ displayedText: string;
172
+ timeoutId: ReturnType<typeof setTimeout> | null;
173
+ intersectionObserver: IntersectionObserver | null;
174
+ isRunning: boolean;
175
+ hasTriggered: boolean;
176
+ originalText: string;
177
+ constructor(container: HTMLElement | string, options: TypingOptions);
178
+ init(): void;
179
+ setupIntersectionObserver(): void;
180
+ private originalChars;
181
+ private charUnitMap;
182
+ private initializeTextStructure;
183
+ private getCharIndexFromUnitIndex;
184
+ private buildTextFromUnits;
185
+ start(): void;
186
+ typeNext(): void;
187
+ stop(): void;
188
+ reset(): void;
189
+ updateDisplay(text: string): void;
190
+ setText(newText: string): void;
191
+ destroy(): void;
192
+ }
193
+
194
+ /**
195
+ * Typing - 타이핑 애니메이션 효과
196
+ * 바닐라 JS 코어 클래스
197
+ *
198
+ * 사용법:
199
+ * import { Typing } from 'masoneffect/typing';
200
+ */
201
+ export declare interface TypingOptions {
202
+ text: string;
203
+ speed?: number;
204
+ delay?: number;
205
+ enabled?: boolean;
206
+ threshold?: number;
207
+ rootMargin?: string;
208
+ triggerOnce?: boolean;
209
+ showCursor?: boolean;
210
+ cursorChar?: string;
211
+ onUpdate?: (text: string) => void;
212
+ onComplete?: () => void;
213
+ }
214
+
163
215
  export { }