masoneffect 1.0.30 → 2.0.2

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 (196) hide show
  1. package/README.md +333 -231
  2. package/dist/core/count/index.d.ts +52 -0
  3. package/dist/core/count/index.d.ts.map +1 -0
  4. package/dist/core/index.d.ts +15 -97
  5. package/dist/core/index.d.ts.map +1 -1
  6. package/dist/core/textToParticle/index.d.ts +103 -0
  7. package/dist/core/textToParticle/index.d.ts.map +1 -0
  8. package/dist/count/core/count/index.d.ts +52 -0
  9. package/dist/count/core/count/index.d.ts.map +1 -0
  10. package/dist/count/core/index.d.ts +18 -0
  11. package/dist/count/core/index.d.ts.map +1 -0
  12. package/dist/count/core/textToParticle/index.d.ts +103 -0
  13. package/dist/count/core/textToParticle/index.d.ts.map +1 -0
  14. package/dist/count/index.cjs +1 -0
  15. package/dist/count/index.d.ts +16 -0
  16. package/dist/count/index.d.ts.map +1 -0
  17. package/dist/count/index.mjs +1 -0
  18. package/dist/count/index.umd.d.ts +7 -0
  19. package/dist/count/index.umd.d.ts.map +1 -0
  20. package/dist/count/react/MasonEffect.d.ts +32 -0
  21. package/dist/count/react/MasonEffect.d.ts.map +1 -0
  22. package/dist/count/react/count/Count.d.ts +19 -0
  23. package/dist/count/react/count/Count.d.ts.map +1 -0
  24. package/dist/count/react/count/index.d.ts +5 -0
  25. package/dist/count/react/count/index.d.ts.map +1 -0
  26. package/dist/count/react/index.d.ts +12 -0
  27. package/dist/count/react/index.d.ts.map +1 -0
  28. package/dist/count/react/textToParticle/TextToParticle.d.ts +15 -0
  29. package/dist/count/react/textToParticle/TextToParticle.d.ts.map +1 -0
  30. package/dist/count/react/textToParticle/index.d.ts +4 -0
  31. package/dist/count/react/textToParticle/index.d.ts.map +1 -0
  32. package/dist/count/svelte/count/index.d.ts +2 -0
  33. package/dist/count/svelte/count/index.d.ts.map +1 -0
  34. package/dist/count/svelte/index.d.ts +8 -0
  35. package/dist/count/svelte/index.d.ts.map +1 -0
  36. package/dist/count/svelte/textToParticle/index.d.ts +2 -0
  37. package/dist/count/svelte/textToParticle/index.d.ts.map +1 -0
  38. package/dist/count/vue/count/index.d.ts +2 -0
  39. package/dist/count/vue/count/index.d.ts.map +1 -0
  40. package/dist/count/vue/index.d.ts +8 -0
  41. package/dist/count/vue/index.d.ts.map +1 -0
  42. package/dist/count/vue/textToParticle/index.d.ts +2 -0
  43. package/dist/count/vue/textToParticle/index.d.ts.map +1 -0
  44. package/dist/index.cjs +1 -1
  45. package/dist/index.d.ts +12 -4
  46. package/dist/index.d.ts.map +1 -1
  47. package/dist/index.mjs +1 -1
  48. package/dist/index.umd.min.js +1 -1
  49. package/dist/react/core/count/index.d.ts +51 -0
  50. package/dist/react/core/index.d.ts +15 -97
  51. package/dist/react/core/textToParticle/index.d.ts +102 -0
  52. package/dist/react/count/Count.d.ts +19 -0
  53. package/dist/react/count/Count.d.ts.map +1 -0
  54. package/dist/react/count/core/count/index.d.ts +52 -0
  55. package/dist/react/count/core/count/index.d.ts.map +1 -0
  56. package/dist/react/count/core/index.d.ts +18 -0
  57. package/dist/react/count/core/index.d.ts.map +1 -0
  58. package/dist/react/count/core/textToParticle/index.d.ts +103 -0
  59. package/dist/react/count/core/textToParticle/index.d.ts.map +1 -0
  60. package/dist/react/count/index.cjs +1 -0
  61. package/dist/react/count/index.d.ts +16 -0
  62. package/dist/react/count/index.d.ts.map +1 -0
  63. package/dist/react/count/index.mjs +1 -0
  64. package/dist/react/count/index.umd.d.ts +7 -0
  65. package/dist/react/count/index.umd.d.ts.map +1 -0
  66. package/dist/react/count/react/MasonEffect.d.ts +32 -0
  67. package/dist/react/count/react/MasonEffect.d.ts.map +1 -0
  68. package/dist/react/count/react/count/Count.d.ts +19 -0
  69. package/dist/react/count/react/count/Count.d.ts.map +1 -0
  70. package/dist/react/count/react/count/index.d.ts +5 -0
  71. package/dist/react/count/react/count/index.d.ts.map +1 -0
  72. package/dist/react/count/react/index.d.ts +12 -0
  73. package/dist/react/count/react/index.d.ts.map +1 -0
  74. package/dist/react/count/react/textToParticle/TextToParticle.d.ts +15 -0
  75. package/dist/react/count/react/textToParticle/TextToParticle.d.ts.map +1 -0
  76. package/dist/react/count/react/textToParticle/index.d.ts +4 -0
  77. package/dist/react/count/react/textToParticle/index.d.ts.map +1 -0
  78. package/dist/react/count/svelte/count/index.d.ts +2 -0
  79. package/dist/react/count/svelte/count/index.d.ts.map +1 -0
  80. package/dist/react/count/svelte/index.d.ts +8 -0
  81. package/dist/react/count/svelte/index.d.ts.map +1 -0
  82. package/dist/react/count/svelte/textToParticle/index.d.ts +2 -0
  83. package/dist/react/count/svelte/textToParticle/index.d.ts.map +1 -0
  84. package/dist/react/count/vue/count/index.d.ts +2 -0
  85. package/dist/react/count/vue/count/index.d.ts.map +1 -0
  86. package/dist/react/count/vue/index.d.ts +8 -0
  87. package/dist/react/count/vue/index.d.ts.map +1 -0
  88. package/dist/react/count/vue/textToParticle/index.d.ts +2 -0
  89. package/dist/react/count/vue/textToParticle/index.d.ts.map +1 -0
  90. package/dist/react/index.cjs +12 -2
  91. package/dist/react/index.d.ts.map +1 -1
  92. package/dist/react/index.mjs +2 -1
  93. package/dist/react/react/count/Count.d.ts +18 -0
  94. package/dist/react/react/count/index.d.ts +4 -0
  95. package/dist/react/react/index.d.ts +11 -2
  96. package/dist/react/react/textToParticle/TextToParticle.d.ts +14 -0
  97. package/dist/react/react/textToParticle/index.d.ts +3 -0
  98. package/dist/react/svelte/count/index.d.ts +1 -0
  99. package/dist/react/svelte/index.d.ts +5 -3
  100. package/dist/react/svelte/textToParticle/index.d.ts +1 -0
  101. package/dist/react/textToParticle/TextToParticle.d.ts +15 -0
  102. package/dist/react/textToParticle/TextToParticle.d.ts.map +1 -0
  103. package/dist/react/textToParticle/core/count/index.d.ts +52 -0
  104. package/dist/react/textToParticle/core/count/index.d.ts.map +1 -0
  105. package/dist/react/textToParticle/core/index.d.ts +18 -0
  106. package/dist/react/textToParticle/core/index.d.ts.map +1 -0
  107. package/dist/react/textToParticle/core/textToParticle/index.d.ts +103 -0
  108. package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -0
  109. package/dist/react/textToParticle/index.cjs +1 -0
  110. package/dist/react/textToParticle/index.d.ts +16 -0
  111. package/dist/react/textToParticle/index.d.ts.map +1 -0
  112. package/dist/react/textToParticle/index.mjs +1 -0
  113. package/dist/react/textToParticle/index.umd.d.ts +7 -0
  114. package/dist/react/textToParticle/index.umd.d.ts.map +1 -0
  115. package/dist/react/textToParticle/react/MasonEffect.d.ts +32 -0
  116. package/dist/react/textToParticle/react/MasonEffect.d.ts.map +1 -0
  117. package/dist/react/textToParticle/react/count/Count.d.ts +19 -0
  118. package/dist/react/textToParticle/react/count/Count.d.ts.map +1 -0
  119. package/dist/react/textToParticle/react/count/index.d.ts +5 -0
  120. package/dist/react/textToParticle/react/count/index.d.ts.map +1 -0
  121. package/dist/react/textToParticle/react/index.d.ts +12 -0
  122. package/dist/react/textToParticle/react/index.d.ts.map +1 -0
  123. package/dist/react/textToParticle/react/textToParticle/TextToParticle.d.ts +15 -0
  124. package/dist/react/textToParticle/react/textToParticle/TextToParticle.d.ts.map +1 -0
  125. package/dist/react/textToParticle/react/textToParticle/index.d.ts +4 -0
  126. package/dist/react/textToParticle/react/textToParticle/index.d.ts.map +1 -0
  127. package/dist/react/textToParticle/svelte/count/index.d.ts +2 -0
  128. package/dist/react/textToParticle/svelte/count/index.d.ts.map +1 -0
  129. package/dist/react/textToParticle/svelte/index.d.ts +8 -0
  130. package/dist/react/textToParticle/svelte/index.d.ts.map +1 -0
  131. package/dist/react/textToParticle/svelte/textToParticle/index.d.ts +2 -0
  132. package/dist/react/textToParticle/svelte/textToParticle/index.d.ts.map +1 -0
  133. package/dist/react/textToParticle/vue/count/index.d.ts +2 -0
  134. package/dist/react/textToParticle/vue/count/index.d.ts.map +1 -0
  135. package/dist/react/textToParticle/vue/index.d.ts +8 -0
  136. package/dist/react/textToParticle/vue/index.d.ts.map +1 -0
  137. package/dist/react/textToParticle/vue/textToParticle/index.d.ts +2 -0
  138. package/dist/react/textToParticle/vue/textToParticle/index.d.ts.map +1 -0
  139. package/dist/react/vue/count/index.d.ts +1 -0
  140. package/dist/react/vue/index.d.ts +5 -3
  141. package/dist/react/vue/textToParticle/index.d.ts +1 -0
  142. package/dist/svelte/count/index.cjs +1 -0
  143. package/dist/svelte/count/index.d.ts +163 -0
  144. package/dist/svelte/count/index.mjs +659 -0
  145. package/dist/svelte/index.cjs +1 -1
  146. package/dist/svelte/index.d.ts +88 -29
  147. package/dist/svelte/index.mjs +402 -8
  148. package/dist/svelte/textToParticle/index.cjs +1 -0
  149. package/dist/svelte/textToParticle/index.d.ts +163 -0
  150. package/dist/svelte/textToParticle/index.mjs +924 -0
  151. package/dist/textToParticle/core/count/index.d.ts +52 -0
  152. package/dist/textToParticle/core/count/index.d.ts.map +1 -0
  153. package/dist/textToParticle/core/index.d.ts +18 -0
  154. package/dist/textToParticle/core/index.d.ts.map +1 -0
  155. package/dist/textToParticle/core/textToParticle/index.d.ts +103 -0
  156. package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -0
  157. package/dist/textToParticle/index.cjs +1 -0
  158. package/dist/textToParticle/index.d.ts +16 -0
  159. package/dist/textToParticle/index.d.ts.map +1 -0
  160. package/dist/textToParticle/index.mjs +1 -0
  161. package/dist/textToParticle/index.umd.d.ts +7 -0
  162. package/dist/textToParticle/index.umd.d.ts.map +1 -0
  163. package/dist/textToParticle/react/MasonEffect.d.ts +32 -0
  164. package/dist/textToParticle/react/MasonEffect.d.ts.map +1 -0
  165. package/dist/textToParticle/react/count/Count.d.ts +19 -0
  166. package/dist/textToParticle/react/count/Count.d.ts.map +1 -0
  167. package/dist/textToParticle/react/count/index.d.ts +5 -0
  168. package/dist/textToParticle/react/count/index.d.ts.map +1 -0
  169. package/dist/textToParticle/react/index.d.ts +12 -0
  170. package/dist/textToParticle/react/index.d.ts.map +1 -0
  171. package/dist/textToParticle/react/textToParticle/TextToParticle.d.ts +15 -0
  172. package/dist/textToParticle/react/textToParticle/TextToParticle.d.ts.map +1 -0
  173. package/dist/textToParticle/react/textToParticle/index.d.ts +4 -0
  174. package/dist/textToParticle/react/textToParticle/index.d.ts.map +1 -0
  175. package/dist/textToParticle/svelte/count/index.d.ts +2 -0
  176. package/dist/textToParticle/svelte/count/index.d.ts.map +1 -0
  177. package/dist/textToParticle/svelte/index.d.ts +8 -0
  178. package/dist/textToParticle/svelte/index.d.ts.map +1 -0
  179. package/dist/textToParticle/svelte/textToParticle/index.d.ts +2 -0
  180. package/dist/textToParticle/svelte/textToParticle/index.d.ts.map +1 -0
  181. package/dist/textToParticle/vue/count/index.d.ts +2 -0
  182. package/dist/textToParticle/vue/count/index.d.ts.map +1 -0
  183. package/dist/textToParticle/vue/index.d.ts +8 -0
  184. package/dist/textToParticle/vue/index.d.ts.map +1 -0
  185. package/dist/textToParticle/vue/textToParticle/index.d.ts +2 -0
  186. package/dist/textToParticle/vue/textToParticle/index.d.ts.map +1 -0
  187. package/dist/vue/count/index.cjs +1 -0
  188. package/dist/vue/count/index.d.ts +163 -0
  189. package/dist/vue/count/index.mjs +286 -0
  190. package/dist/vue/index.cjs +1 -1
  191. package/dist/vue/index.d.ts +88 -29
  192. package/dist/vue/index.mjs +291 -6
  193. package/dist/vue/textToParticle/index.cjs +1 -0
  194. package/dist/vue/textToParticle/index.d.ts +163 -0
  195. package/dist/vue/textToParticle/index.mjs +554 -0
  196. package/package.json +55 -5
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Count - 숫자 카운팅 애니메이션 효과
3
+ * 바닐라 JS 코어 클래스
4
+ *
5
+ * 사용법:
6
+ * import { Count } from 'masoneffect/count';
7
+ */
8
+ export interface CountOptions {
9
+ targetValue: number;
10
+ duration?: number;
11
+ startValue?: number;
12
+ enabled?: boolean;
13
+ easing?: (t: number) => number;
14
+ threshold?: number;
15
+ rootMargin?: string;
16
+ triggerOnce?: boolean;
17
+ onUpdate?: (value: number) => void;
18
+ onComplete?: () => void;
19
+ }
20
+ export declare const easingFunctions: {
21
+ linear: (t: number) => number;
22
+ easeInQuad: (t: number) => number;
23
+ easeOutQuad: (t: number) => number;
24
+ easeInOutQuad: (t: number) => number;
25
+ easeOutCubic: (t: number) => number;
26
+ };
27
+ export declare class Count {
28
+ container: HTMLElement;
29
+ config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
30
+ onUpdate: CountOptions['onUpdate'];
31
+ onComplete: CountOptions['onComplete'];
32
+ };
33
+ currentValue: number;
34
+ startTime: number | null;
35
+ animationFrameId: number | null;
36
+ intersectionObserver: IntersectionObserver | null;
37
+ isRunning: boolean;
38
+ hasTriggered: boolean;
39
+ constructor(container: HTMLElement | string, options: CountOptions);
40
+ init(): void;
41
+ setupIntersectionObserver(): void;
42
+ start(): void;
43
+ stop(): void;
44
+ reset(): void;
45
+ updateDisplay(value: number): void;
46
+ formatNumber(value: number): string;
47
+ updateConfig(newConfig: Partial<CountOptions>): void;
48
+ getValue(): number;
49
+ destroy(): void;
50
+ }
51
+ export default Count;
52
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAsDjC,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
@@ -0,0 +1,18 @@
1
+ /**
2
+ * MasonEffect Core - 모든 이펙트를 export하는 메인 파일
3
+ *
4
+ * 주의: tree-shaking을 위해 각 이펙트를 직접 import하는 것을 권장합니다:
5
+ * - import { TextToParticle } from 'masoneffect/textToParticle'
6
+ * - import { Count } from 'masoneffect/count'
7
+ *
8
+ * 이 파일은 하위 호환성을 위해 제공됩니다.
9
+ */
10
+ export { TextToParticle, default as TextToParticleDefault } from './textToParticle/index.js';
11
+ export type { TextToParticleOptions, Particle } from './textToParticle/index.js';
12
+ export { Count, default as CountDefault } from './count/index.js';
13
+ export type { CountOptions } from './count/index.js';
14
+ export { easingFunctions } from './count/index.js';
15
+ export { TextToParticle as MasonEffect } from './textToParticle/index.js';
16
+ export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
17
+ export { default } from './textToParticle/index.js';
18
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,103 @@
1
+ /**
2
+ * TextToParticle - 텍스트를 파티클로 변환하는 효과
3
+ * 바닐라 JS 코어 클래스
4
+ *
5
+ * 사용법:
6
+ * import { TextToParticle } from 'masoneffect/textToParticle';
7
+ */
8
+ export interface TextToParticleOptions {
9
+ text?: string;
10
+ densityStep?: number;
11
+ maxParticles?: number;
12
+ pointSize?: number;
13
+ ease?: number;
14
+ repelRadius?: number;
15
+ repelStrength?: number;
16
+ particleColor?: string;
17
+ fontFamily?: string;
18
+ fontSize?: number | null;
19
+ width?: number | null;
20
+ height?: number | null;
21
+ devicePixelRatio?: number | null;
22
+ debounceDelay?: number;
23
+ onReady?: (instance: TextToParticle) => void;
24
+ onUpdate?: (instance: TextToParticle) => void;
25
+ }
26
+ export interface Particle {
27
+ x: number;
28
+ y: number;
29
+ vx: number;
30
+ vy: number;
31
+ tx: number;
32
+ ty: number;
33
+ initialX?: number;
34
+ initialY?: number;
35
+ j: number;
36
+ }
37
+ export declare class TextToParticle {
38
+ container: HTMLElement;
39
+ config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
40
+ onReady: TextToParticleOptions['onReady'];
41
+ onUpdate: TextToParticleOptions['onUpdate'];
42
+ };
43
+ canvas: HTMLCanvasElement;
44
+ ctx: CanvasRenderingContext2D;
45
+ offCanvas: HTMLCanvasElement;
46
+ offCtx: CanvasRenderingContext2D;
47
+ W: number;
48
+ H: number;
49
+ DPR: number;
50
+ particles: Particle[];
51
+ mouse: {
52
+ x: number;
53
+ y: number;
54
+ down: boolean;
55
+ };
56
+ animationId: number | null;
57
+ isRunning: boolean;
58
+ isVisible: boolean;
59
+ intersectionObserver: IntersectionObserver | null;
60
+ debounceDelay: number;
61
+ _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
62
+ _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
63
+ constructor(container: HTMLElement | string, options?: TextToParticleOptions);
64
+ init(): void;
65
+ setupIntersectionObserver(): void;
66
+ resize(): void;
67
+ /**
68
+ * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
69
+ * @param fontSize 확인할 폰트 크기
70
+ * @param text 텍스트 (\n으로 줄바꿈 구분)
71
+ * @param maxWidth 최대 너비
72
+ * @param maxHeight 최대 높이
73
+ * @returns { width: number, height: number, fits: boolean }
74
+ */
75
+ private measureTextFit;
76
+ /**
77
+ * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
78
+ * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
79
+ */
80
+ private findOptimalFontSize;
81
+ buildTargets(): void;
82
+ makeParticle(): Particle;
83
+ initParticles(): void;
84
+ scatter(): void;
85
+ morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
86
+ _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
87
+ update(): void;
88
+ animate(): void;
89
+ start(): void;
90
+ stop(): void;
91
+ setupEventListeners(): void;
92
+ removeEventListeners(): void;
93
+ handleResize(): void;
94
+ handleMouseMove(e: MouseEvent): void;
95
+ handleMouseLeave(): void;
96
+ handleMouseDown(): void;
97
+ handleMouseUp(): void;
98
+ updateConfig(newConfig: Partial<TextToParticleOptions>): void;
99
+ _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
100
+ destroy(): void;
101
+ }
102
+ export default TextToParticle;
103
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1 @@
1
+ function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}Object.defineProperty(exports,"t",{value:!0});class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,c=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,w=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&w.push({x:i,y:t})}for(;w.length>this.config.maxParticles;)w.splice(Math.floor(Math.random()*w.length),1);if(this.particles.length<w.length){const t=w.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>w.length&&(this.particles.length=w.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=w[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.i(t)}h(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}exports.TextToParticle=i,exports.default=i;
@@ -0,0 +1,16 @@
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 { default } from './core/index.js';
16
+ //# 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,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1 @@
1
+ function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,f=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-f/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,w=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&w.push({x:i,y:t})}for(;w.length>this.config.maxParticles;)w.splice(Math.floor(Math.random()*w.length),1);if(this.particles.length<w.length){const t=w.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>w.length&&(this.particles.length=w.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=w[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}export{i as TextToParticle,i 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,12 @@
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 MasonEffect } from './textToParticle/index.js';
10
+ export type { TextToParticleRef as MasonEffectRef, TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
11
+ export { default } from './textToParticle/index.js';
12
+ //# 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,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,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,8 @@
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 MasonEffect } from './textToParticle/index.js';
7
+ export { default } from './textToParticle/index.js';
8
+ //# 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,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,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,8 @@
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 MasonEffect } from './textToParticle/index.js';
7
+ export { default } from './textToParticle/index.js';
8
+ //# 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,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 @@
1
+ "use strict";const t=require("vue"),e={linear:t=>t};class n{constructor(t,n){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:n.targetValue,duration:n.duration??2e3,startValue:n.startValue??0,enabled:n.enabled??!0,easing:n.easing??e.linear,threshold:n.threshold??.2,rootMargin:n.rootMargin??"0px 0px -100px 0px",triggerOnce:n.triggerOnce??!1,onUpdate:n.onUpdate||null,onComplete:n.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 n of t)if(n.target===this.container)if(n.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=n.boundingClientRect,e=window.innerHeight,i=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=i)&&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 n=e-this.startTime,i=Math.min(n/this.config.duration,1),r=this.config.easing(i);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*r),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),i<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)}}const i=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:r}){const s=e,a=r,o=t.ref(null);let l=null;return t.watch(()=>[s.targetValue,s.duration,s.startValue,s.enabled,s.easing,s.threshold,s.rootMargin,s.triggerOnce],()=>{l&&l.updateConfig({targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!o.value)return;const t={targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}};l=new n(o.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),i({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},getValue:()=>l?l.getValue():0,updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(n,i)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:o,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=i;
@@ -0,0 +1,163 @@
1
+ export declare class Count {
2
+ container: HTMLElement;
3
+ config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
4
+ onUpdate: CountOptions['onUpdate'];
5
+ onComplete: CountOptions['onComplete'];
6
+ };
7
+ currentValue: number;
8
+ startTime: number | null;
9
+ animationFrameId: number | null;
10
+ intersectionObserver: IntersectionObserver | null;
11
+ isRunning: boolean;
12
+ hasTriggered: boolean;
13
+ constructor(container: HTMLElement | string, options: CountOptions);
14
+ init(): void;
15
+ setupIntersectionObserver(): void;
16
+ start(): void;
17
+ stop(): void;
18
+ reset(): void;
19
+ updateDisplay(value: number): void;
20
+ formatNumber(value: number): string;
21
+ updateConfig(newConfig: Partial<CountOptions>): void;
22
+ getValue(): number;
23
+ destroy(): void;
24
+ }
25
+
26
+ /**
27
+ * Count - 숫자 카운팅 애니메이션 효과
28
+ * 바닐라 JS 코어 클래스
29
+ *
30
+ * 사용법:
31
+ * import { Count } from 'masoneffect/count';
32
+ */
33
+ export declare interface CountOptions {
34
+ targetValue: number;
35
+ duration?: number;
36
+ startValue?: number;
37
+ enabled?: boolean;
38
+ easing?: (t: number) => number;
39
+ threshold?: number;
40
+ rootMargin?: string;
41
+ triggerOnce?: boolean;
42
+ onUpdate?: (value: number) => void;
43
+ onComplete?: () => void;
44
+ }
45
+
46
+ export declare const easingFunctions: {
47
+ linear: (t: number) => number;
48
+ easeInQuad: (t: number) => number;
49
+ easeOutQuad: (t: number) => number;
50
+ easeInOutQuad: (t: number) => number;
51
+ easeOutCubic: (t: number) => number;
52
+ };
53
+
54
+ export declare interface Particle {
55
+ x: number;
56
+ y: number;
57
+ vx: number;
58
+ vy: number;
59
+ tx: number;
60
+ ty: number;
61
+ initialX?: number;
62
+ initialY?: number;
63
+ j: number;
64
+ }
65
+
66
+ declare class TextToParticle {
67
+ container: HTMLElement;
68
+ config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
69
+ onReady: TextToParticleOptions['onReady'];
70
+ onUpdate: TextToParticleOptions['onUpdate'];
71
+ };
72
+ canvas: HTMLCanvasElement;
73
+ ctx: CanvasRenderingContext2D;
74
+ offCanvas: HTMLCanvasElement;
75
+ offCtx: CanvasRenderingContext2D;
76
+ W: number;
77
+ H: number;
78
+ DPR: number;
79
+ particles: Particle[];
80
+ mouse: {
81
+ x: number;
82
+ y: number;
83
+ down: boolean;
84
+ };
85
+ animationId: number | null;
86
+ isRunning: boolean;
87
+ isVisible: boolean;
88
+ intersectionObserver: IntersectionObserver | null;
89
+ debounceDelay: number;
90
+ _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
91
+ _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
92
+ constructor(container: HTMLElement | string, options?: TextToParticleOptions);
93
+ init(): void;
94
+ setupIntersectionObserver(): void;
95
+ resize(): void;
96
+ /**
97
+ * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
98
+ * @param fontSize 확인할 폰트 크기
99
+ * @param text 텍스트 (\n으로 줄바꿈 구분)
100
+ * @param maxWidth 최대 너비
101
+ * @param maxHeight 최대 높이
102
+ * @returns { width: number, height: number, fits: boolean }
103
+ */
104
+ private measureTextFit;
105
+ /**
106
+ * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
107
+ * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
108
+ */
109
+ private findOptimalFontSize;
110
+ buildTargets(): void;
111
+ makeParticle(): Particle;
112
+ initParticles(): void;
113
+ scatter(): void;
114
+ morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
115
+ _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
116
+ update(): void;
117
+ animate(): void;
118
+ start(): void;
119
+ stop(): void;
120
+ setupEventListeners(): void;
121
+ removeEventListeners(): void;
122
+ handleResize(): void;
123
+ handleMouseMove(e: MouseEvent): void;
124
+ handleMouseLeave(): void;
125
+ handleMouseDown(): void;
126
+ handleMouseUp(): void;
127
+ updateConfig(newConfig: Partial<TextToParticleOptions>): void;
128
+ _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
129
+ destroy(): void;
130
+ }
131
+ export { TextToParticle as MasonEffect }
132
+ export { TextToParticle }
133
+ export default TextToParticle;
134
+
135
+ /**
136
+ * TextToParticle - 텍스트를 파티클로 변환하는 효과
137
+ * 바닐라 JS 코어 클래스
138
+ *
139
+ * 사용법:
140
+ * import { TextToParticle } from 'masoneffect/textToParticle';
141
+ */
142
+ declare interface TextToParticleOptions {
143
+ text?: string;
144
+ densityStep?: number;
145
+ maxParticles?: number;
146
+ pointSize?: number;
147
+ ease?: number;
148
+ repelRadius?: number;
149
+ repelStrength?: number;
150
+ particleColor?: string;
151
+ fontFamily?: string;
152
+ fontSize?: number | null;
153
+ width?: number | null;
154
+ height?: number | null;
155
+ devicePixelRatio?: number | null;
156
+ debounceDelay?: number;
157
+ onReady?: (instance: TextToParticle) => void;
158
+ onUpdate?: (instance: TextToParticle) => void;
159
+ }
160
+ export { TextToParticleOptions as MasonEffectOptions }
161
+ export { TextToParticleOptions }
162
+
163
+ export { }