masoneffect 1.0.30 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +320 -231
- package/dist/core/count/index.d.ts +52 -0
- package/dist/core/count/index.d.ts.map +1 -0
- package/dist/core/index.d.ts +15 -97
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/textToParticle/index.d.ts +103 -0
- package/dist/core/textToParticle/index.d.ts.map +1 -0
- package/dist/count/core/count/index.d.ts +52 -0
- package/dist/count/core/count/index.d.ts.map +1 -0
- package/dist/count/core/index.d.ts +18 -0
- package/dist/count/core/index.d.ts.map +1 -0
- package/dist/count/core/textToParticle/index.d.ts +103 -0
- package/dist/count/core/textToParticle/index.d.ts.map +1 -0
- package/dist/count/index.cjs +1 -0
- package/dist/count/index.d.ts +16 -0
- package/dist/count/index.d.ts.map +1 -0
- package/dist/count/index.mjs +1 -0
- package/dist/count/index.umd.d.ts +7 -0
- package/dist/count/index.umd.d.ts.map +1 -0
- package/dist/count/react/MasonEffect.d.ts +32 -0
- package/dist/count/react/MasonEffect.d.ts.map +1 -0
- package/dist/count/react/count/Count.d.ts +19 -0
- package/dist/count/react/count/Count.d.ts.map +1 -0
- package/dist/count/react/count/index.d.ts +5 -0
- package/dist/count/react/count/index.d.ts.map +1 -0
- package/dist/count/react/index.d.ts +12 -0
- package/dist/count/react/index.d.ts.map +1 -0
- package/dist/count/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/count/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/count/react/textToParticle/index.d.ts +4 -0
- package/dist/count/react/textToParticle/index.d.ts.map +1 -0
- package/dist/count/svelte/count/index.d.ts +2 -0
- package/dist/count/svelte/count/index.d.ts.map +1 -0
- package/dist/count/svelte/index.d.ts +8 -0
- package/dist/count/svelte/index.d.ts.map +1 -0
- package/dist/count/svelte/textToParticle/index.d.ts +2 -0
- package/dist/count/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/count/vue/count/index.d.ts +2 -0
- package/dist/count/vue/count/index.d.ts.map +1 -0
- package/dist/count/vue/index.d.ts +8 -0
- package/dist/count/vue/index.d.ts.map +1 -0
- package/dist/count/vue/textToParticle/index.d.ts +2 -0
- package/dist/count/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +12 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/react/core/count/index.d.ts +51 -0
- package/dist/react/core/index.d.ts +15 -97
- package/dist/react/core/textToParticle/index.d.ts +102 -0
- package/dist/react/count/Count.d.ts +19 -0
- package/dist/react/count/Count.d.ts.map +1 -0
- package/dist/react/count/core/count/index.d.ts +52 -0
- package/dist/react/count/core/count/index.d.ts.map +1 -0
- package/dist/react/count/core/index.d.ts +18 -0
- package/dist/react/count/core/index.d.ts.map +1 -0
- package/dist/react/count/core/textToParticle/index.d.ts +103 -0
- package/dist/react/count/core/textToParticle/index.d.ts.map +1 -0
- package/dist/react/count/index.cjs +1 -0
- package/dist/react/count/index.d.ts +16 -0
- package/dist/react/count/index.d.ts.map +1 -0
- package/dist/react/count/index.mjs +1 -0
- package/dist/react/count/index.umd.d.ts +7 -0
- package/dist/react/count/index.umd.d.ts.map +1 -0
- package/dist/react/count/react/MasonEffect.d.ts +32 -0
- package/dist/react/count/react/MasonEffect.d.ts.map +1 -0
- package/dist/react/count/react/count/Count.d.ts +19 -0
- package/dist/react/count/react/count/Count.d.ts.map +1 -0
- package/dist/react/count/react/count/index.d.ts +5 -0
- package/dist/react/count/react/count/index.d.ts.map +1 -0
- package/dist/react/count/react/index.d.ts +12 -0
- package/dist/react/count/react/index.d.ts.map +1 -0
- package/dist/react/count/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/react/count/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/react/count/react/textToParticle/index.d.ts +4 -0
- package/dist/react/count/react/textToParticle/index.d.ts.map +1 -0
- package/dist/react/count/svelte/count/index.d.ts +2 -0
- package/dist/react/count/svelte/count/index.d.ts.map +1 -0
- package/dist/react/count/svelte/index.d.ts +8 -0
- package/dist/react/count/svelte/index.d.ts.map +1 -0
- package/dist/react/count/svelte/textToParticle/index.d.ts +2 -0
- package/dist/react/count/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/react/count/vue/count/index.d.ts +2 -0
- package/dist/react/count/vue/count/index.d.ts.map +1 -0
- package/dist/react/count/vue/index.d.ts +8 -0
- package/dist/react/count/vue/index.d.ts.map +1 -0
- package/dist/react/count/vue/textToParticle/index.d.ts +2 -0
- package/dist/react/count/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/react/index.cjs +12 -2
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.mjs +2 -1
- package/dist/react/react/count/Count.d.ts +18 -0
- package/dist/react/react/count/index.d.ts +4 -0
- package/dist/react/react/index.d.ts +11 -2
- package/dist/react/react/textToParticle/TextToParticle.d.ts +14 -0
- package/dist/react/react/textToParticle/index.d.ts +3 -0
- package/dist/react/svelte/count/index.d.ts +1 -0
- package/dist/react/svelte/index.d.ts +5 -3
- package/dist/react/svelte/textToParticle/index.d.ts +1 -0
- package/dist/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/react/textToParticle/core/count/index.d.ts +52 -0
- package/dist/react/textToParticle/core/count/index.d.ts.map +1 -0
- package/dist/react/textToParticle/core/index.d.ts +18 -0
- package/dist/react/textToParticle/core/index.d.ts.map +1 -0
- package/dist/react/textToParticle/core/textToParticle/index.d.ts +103 -0
- package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textToParticle/index.cjs +1 -0
- package/dist/react/textToParticle/index.d.ts +16 -0
- package/dist/react/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textToParticle/index.mjs +1 -0
- package/dist/react/textToParticle/index.umd.d.ts +7 -0
- package/dist/react/textToParticle/index.umd.d.ts.map +1 -0
- package/dist/react/textToParticle/react/MasonEffect.d.ts +32 -0
- package/dist/react/textToParticle/react/MasonEffect.d.ts.map +1 -0
- package/dist/react/textToParticle/react/count/Count.d.ts +19 -0
- package/dist/react/textToParticle/react/count/Count.d.ts.map +1 -0
- package/dist/react/textToParticle/react/count/index.d.ts +5 -0
- package/dist/react/textToParticle/react/count/index.d.ts.map +1 -0
- package/dist/react/textToParticle/react/index.d.ts +12 -0
- package/dist/react/textToParticle/react/index.d.ts.map +1 -0
- package/dist/react/textToParticle/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/react/textToParticle/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/react/textToParticle/react/textToParticle/index.d.ts +4 -0
- package/dist/react/textToParticle/react/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textToParticle/svelte/count/index.d.ts +2 -0
- package/dist/react/textToParticle/svelte/count/index.d.ts.map +1 -0
- package/dist/react/textToParticle/svelte/index.d.ts +8 -0
- package/dist/react/textToParticle/svelte/index.d.ts.map +1 -0
- package/dist/react/textToParticle/svelte/textToParticle/index.d.ts +2 -0
- package/dist/react/textToParticle/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textToParticle/vue/count/index.d.ts +2 -0
- package/dist/react/textToParticle/vue/count/index.d.ts.map +1 -0
- package/dist/react/textToParticle/vue/index.d.ts +8 -0
- package/dist/react/textToParticle/vue/index.d.ts.map +1 -0
- package/dist/react/textToParticle/vue/textToParticle/index.d.ts +2 -0
- package/dist/react/textToParticle/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/react/vue/count/index.d.ts +1 -0
- package/dist/react/vue/index.d.ts +5 -3
- package/dist/react/vue/textToParticle/index.d.ts +1 -0
- package/dist/svelte/count/index.cjs +1 -0
- package/dist/svelte/count/index.d.ts +163 -0
- package/dist/svelte/count/index.mjs +659 -0
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +88 -29
- package/dist/svelte/index.mjs +402 -8
- package/dist/svelte/textToParticle/index.cjs +1 -0
- package/dist/svelte/textToParticle/index.d.ts +163 -0
- package/dist/svelte/textToParticle/index.mjs +924 -0
- package/dist/textToParticle/core/count/index.d.ts +52 -0
- package/dist/textToParticle/core/count/index.d.ts.map +1 -0
- package/dist/textToParticle/core/index.d.ts +18 -0
- package/dist/textToParticle/core/index.d.ts.map +1 -0
- package/dist/textToParticle/core/textToParticle/index.d.ts +103 -0
- package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -0
- package/dist/textToParticle/index.cjs +1 -0
- package/dist/textToParticle/index.d.ts +16 -0
- package/dist/textToParticle/index.d.ts.map +1 -0
- package/dist/textToParticle/index.mjs +1 -0
- package/dist/textToParticle/index.umd.d.ts +7 -0
- package/dist/textToParticle/index.umd.d.ts.map +1 -0
- package/dist/textToParticle/react/MasonEffect.d.ts +32 -0
- package/dist/textToParticle/react/MasonEffect.d.ts.map +1 -0
- package/dist/textToParticle/react/count/Count.d.ts +19 -0
- package/dist/textToParticle/react/count/Count.d.ts.map +1 -0
- package/dist/textToParticle/react/count/index.d.ts +5 -0
- package/dist/textToParticle/react/count/index.d.ts.map +1 -0
- package/dist/textToParticle/react/index.d.ts +12 -0
- package/dist/textToParticle/react/index.d.ts.map +1 -0
- package/dist/textToParticle/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/textToParticle/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/textToParticle/react/textToParticle/index.d.ts +4 -0
- package/dist/textToParticle/react/textToParticle/index.d.ts.map +1 -0
- package/dist/textToParticle/svelte/count/index.d.ts +2 -0
- package/dist/textToParticle/svelte/count/index.d.ts.map +1 -0
- package/dist/textToParticle/svelte/index.d.ts +8 -0
- package/dist/textToParticle/svelte/index.d.ts.map +1 -0
- package/dist/textToParticle/svelte/textToParticle/index.d.ts +2 -0
- package/dist/textToParticle/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/textToParticle/vue/count/index.d.ts +2 -0
- package/dist/textToParticle/vue/count/index.d.ts.map +1 -0
- package/dist/textToParticle/vue/index.d.ts +8 -0
- package/dist/textToParticle/vue/index.d.ts.map +1 -0
- package/dist/textToParticle/vue/textToParticle/index.d.ts +2 -0
- package/dist/textToParticle/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/vue/count/index.cjs +1 -0
- package/dist/vue/count/index.d.ts +163 -0
- package/dist/vue/count/index.mjs +286 -0
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +88 -29
- package/dist/vue/index.mjs +291 -6
- package/dist/vue/textToParticle/index.cjs +1 -0
- package/dist/vue/textToParticle/index.d.ts +163 -0
- package/dist/vue/textToParticle/index.mjs +554 -0
- package/package.json +54 -5
|
@@ -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
|
+
Object.defineProperty(exports,"t",{value:!0});var t=require("react");function i(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class s{constructor(t,s={}){if(this.container="string"==typeof t?document.querySelector(t):t,!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=i(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=i(this.h.bind(this),this.debounceDelay),this.o=i(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 l=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);l=Math.max(l,i)}const a=e.length>0?n*e.length+o*(e.length-1):n;return{width:l,height:a,fits:l<=s&&a<=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,l=.1*n,a=.05*n,c=o.length>0?r*o.length+l*(o.length-1):r;let u=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){u+=r+l;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+a*(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,u),h+=this.offCtx.measureText(t).width+a;u+=r+l}const f=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=f)for(let i=0;i<this.W;i+=f){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[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)}}const h=t.forwardRef((i,h)=>{const e=t.useRef(null),n=t.useRef(null);t.useEffect(()=>{if(!e.current)return;let t=null,h=null;const o=()=>{const r=e.current;if(!r)return;if(n.current)return;const l=r.querySelector("canvas");l&&l.remove();const a=r.getBoundingClientRect();if(a.width<=0||a.height<=0)return void(h=window.setTimeout(o,50));const c=100;(a.width<c||a.height<c)&&(r.style.minWidth=c+"px",r.style.minHeight=c+"px");const{className:u,style:f,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:x,repelStrength:M,particleColor:y,fontFamily:S,fontSize:g,width:R,height:z,devicePixelRatio:P,onReady:T,onUpdate:F}=i,b={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:x,repelStrength:M,particleColor:y,fontFamily:S,fontSize:g,width:R,height:z,devicePixelRatio:P,onReady:T,onUpdate:F};n.current=new s(r,b),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{n.current&&n.current.resize()}),t.observe(r))};return requestAnimationFrame(o),()=>{h&&(clearTimeout(h),h=null),t&&(t.disconnect(),t=null),n.current&&(n.current.destroy(),n.current=null)}},[]),t.useEffect(()=>{if(!n.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:r,repelStrength:l,particleColor:a,fontFamily:c,fontSize:u,width:f,height:d,devicePixelRatio:p}=i;n.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:o,repelRadius:r,repelStrength:l,particleColor:a,fontFamily:c,fontSize:u,width:f,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),t.useImperativeHandle(h,()=>({morph:t=>{n.current?n.current.morph(t):console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{n.current?n.current.scatter():console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{n.current?n.current.updateConfig(t):console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{n.current&&(n.current.destroy(),n.current=null)}}));const o={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:e,className:i.className,style:o})});h.displayName="TextToParticle",exports.default=h;
|
|
@@ -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
|
+
import t,{forwardRef as i,useRef as s,useEffect as h,useImperativeHandle as e}from"react";function n(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class o{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Canvas context not available");this.ctx=s,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const h=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Offscreen canvas context not available");this.offCtx=h,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=i.debounceDelay??150;const e=this.handleResize.bind(this);this.handleResize=n(e,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=n(this.i.bind(this),this.debounceDelay),this.h=n(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 l=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);l=Math.max(l,i)}const a=e.length>0?n*e.length+o*(e.length-1):n;return{width:l,height:a,fits:l<=s&&a<=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,l=.1*n,a=.05*n,c=o.length>0?r*o.length+l*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+l;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+a*(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+a;f+=r+l}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];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&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[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)}}const r=i((i,n)=>{const r=s(null),l=s(null);h(()=>{if(!r.current)return;let t=null,s=null;const h=()=>{const e=r.current;if(!e)return;if(l.current)return;const n=e.querySelector("canvas");n&&n.remove();const a=e.getBoundingClientRect();if(a.width<=0||a.height<=0)return void(s=window.setTimeout(h,50));const c=100;(a.width<c||a.height<c)&&(e.style.minWidth=c+"px",e.style.minHeight=c+"px");const{className:f,style:u,text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:x,repelStrength:M,particleColor:y,fontFamily:S,fontSize:g,width:R,height:z,devicePixelRatio:P,onReady:T,onUpdate:F}=i,C={text:d,densityStep:p,maxParticles:m,pointSize:w,ease:v,repelRadius:x,repelStrength:M,particleColor:y,fontFamily:S,fontSize:g,width:R,height:z,devicePixelRatio:P,onReady:T,onUpdate:F};l.current=new o(e,C),"undefined"!=typeof ResizeObserver&&(t=new ResizeObserver(()=>{l.current&&l.current.resize()}),t.observe(e))};return requestAnimationFrame(h),()=>{s&&(clearTimeout(s),s=null),t&&(t.disconnect(),t=null),l.current&&(l.current.destroy(),l.current=null)}},[]),h(()=>{if(!l.current)return;const{text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:r,particleColor:a,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p}=i;l.current.updateConfig({text:t,densityStep:s,maxParticles:h,pointSize:e,ease:n,repelRadius:o,repelStrength:r,particleColor:a,fontFamily:c,fontSize:f,width:u,height:d,devicePixelRatio:p})},[i.text,i.densityStep,i.maxParticles,i.pointSize,i.ease,i.repelRadius,i.repelStrength,i.particleColor,i.fontFamily,i.fontSize,i.width,i.height,i.devicePixelRatio]),e(n,()=>({morph:t=>{l.current?l.current.morph(t):console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},scatter:()=>{l.current?l.current.scatter():console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},updateConfig:t=>{l.current?l.current.updateConfig(t):console.warn("TextToParticle: 인스턴스가 아직 초기화되지 않았습니다.")},destroy:()=>{l.current&&(l.current.destroy(),l.current=null)}}));const a={width:"100%",height:"100%",minHeight:i.height||400,position:"relative",...i.style};return t.createElement("div",{ref:r,className:i.className,style:a})});r.displayName="TextToParticle";export{r as default};
|
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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
|
+
export { default } from './Count.vue';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Vue
|
|
3
|
-
* Exports the compiled Vue component
|
|
2
|
+
* MasonEffect Vue - 모든 Vue 컴포넌트를 export하는 메인 파일
|
|
4
3
|
*/
|
|
5
|
-
export { default } from './
|
|
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';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './TextToParticle.vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var t=Object.defineProperty,e=(e,n,i)=>((e,n,i)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i)(e,"symbol"!=typeof n?n+"":n,i);const n=require("svelte");function i(){}function r(t){return t()}function s(){return Object.create(null)}function o(t){t.forEach(r)}function a(t){return"function"==typeof t}function u(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}let h;function g(t){h=t}const d=[],f=[];let p=[];const m=[],$=Promise.resolve();let b=!1;function y(t){p.push(t)}const V=new Set;let v=0;function x(){if(0!==v)return;const t=h;do{try{for(;v<d.length;){const t=d[v];v++,g(t),O(t.$$)}}catch(e){throw d.length=0,v=0,e}for(g(null),d.length=0,v=0;f.length;)f.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];V.has(e)||(V.add(e),e())}p.length=0}while(d.length);for(;m.length;)m.pop()();b=!1,V.clear(),g(t)}function O(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const w=new Set;function _(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];p.forEach(i=>-1===t.indexOf(i)?e.push(i):n.push(i)),n.forEach(t=>t()),p=e}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function C(t,e){-1===t.$$.dirty[0]&&(d.push(t),b||(b=!0,$.then(x)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function M(t,e,n,u,c,d,f=null,p=[-1]){const m=h;g(t);const $=t.$$={fragment:null,ctx:[],props:d,update:i,not_equal:c,bound:s(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:s(),dirty:p,skip_bound:!1,root:e.target||m.$$.root};f&&f($.root);let b=!1;if($.ctx=n?n(t,e.props||{},(e,n,...i)=>{const r=i.length?i[0]:n;return $.ctx&&c($.ctx[e],$.ctx[e]=r)&&(!$.skip_bound&&$.bound[e]&&$.bound[e](r),b&&C(t,e)),n}):[],$.update(),b=!0,o($.before_update),$.fragment=!!u&&u($.ctx),e.target){if(e.hydrate){const t=(O=e.target,Array.from(O.childNodes));$.fragment&&$.fragment.l(t),t.forEach(l)}else $.fragment&&$.fragment.c();e.intro&&((V=t.$$.fragment)&&V.i&&(w.delete(V),V.i(v))),function(t,e,n){const{fragment:i,after_update:s}=t.$$;i&&i.m(e,n),y(()=>{const e=t.$$.on_mount.map(r).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):o(e),t.$$.on_mount=[]}),s.forEach(y)}(t,e.target,e.anchor),x()}var V,v,O;g(m)}class I{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){_(this,1),this.$destroy=i}$on(t,e){if(!a(e))return i;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.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)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");const T={linear:t=>t};class U{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??T.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 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)}}function E(t){let e;return{c(){var n;n="div",e=document.createElement(n),c(e,"class",t[0]),c(e,"style",t[1])},m(n,i){!function(t,e,n){t.insertBefore(e,n||null)}(n,e,i),t[18](e)},p(t,[n]){1&n&&c(e,"class",t[0]),2&n&&c(e,"style",t[1])},i:i,o:i,d(n){n&&l(e),t[18](null)}}}function F(t,e,i){let{targetValue:r=0}=e,{duration:s=2e3}=e,{startValue:o=0}=e,{enabled:a=!0}=e,{easing:u=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:h=!1}=e,{className:g=""}=e,{style:d={}}=e;const p=n.createEventDispatcher();let m,$=null;return n.onMount(()=>{if(!m)return;i(17,$=new U(m,{targetValue:r,duration:s,startValue:o,enabled:a,easing:u,threshold:l,rootMargin:c,triggerOnce:h,onUpdate:t=>{p("update",t)},onComplete:()=>{p("complete")}}))}),n.onDestroy(()=>{$&&($.destroy(),i(17,$=null))}),t.$$set=t=>{"targetValue"in t&&i(3,r=t.targetValue),"duration"in t&&i(4,s=t.duration),"startValue"in t&&i(5,o=t.startValue),"enabled"in t&&i(6,a=t.enabled),"easing"in t&&i(7,u=t.easing),"threshold"in t&&i(8,l=t.threshold),"rootMargin"in t&&i(9,c=t.rootMargin),"triggerOnce"in t&&i(10,h=t.triggerOnce),"className"in t&&i(0,g=t.className),"style"in t&&i(1,d=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&$&&$.updateConfig({targetValue:r,duration:s,startValue:o,enabled:a,easing:u,threshold:l,rootMargin:c,triggerOnce:h,onUpdate:t=>{p("update",t)},onComplete:()=>{p("complete")}})},[g,d,m,r,s,o,a,u,l,c,h,function(){$&&$.start()},function(){$&&$.stop()},function(){$&&$.reset()},function(){return $?$.getValue():0},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),i(17,$=null))},$,function(t){f[t?"unshift":"push"](()=>{m=t,i(2,m)})}]}module.exports=class extends I{constructor(t){super(),M(this,t,F,E,u,{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]}};
|
|
@@ -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 { }
|