masoneffect 0.1.0
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/LICENSE +22 -0
- package/README.md +160 -0
- package/dist/index.esm.js +318 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.esm.min.js +1 -0
- package/dist/index.js +323 -0
- package/dist/index.js.map +1 -0
- package/dist/index.min.js +1 -0
- package/dist/index.umd.js +329 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/index.umd.min.js +1 -0
- package/dist/react/MasonEffect.cjs +408 -0
- package/dist/react/MasonEffect.cjs.map +1 -0
- package/dist/react/MasonEffect.d.ts +32 -0
- package/dist/react/MasonEffect.d.ts.map +1 -0
- package/dist/react/MasonEffect.js +406 -0
- package/dist/react/MasonEffect.js.map +1 -0
- package/dist/react/MasonEffect.min.cjs +1 -0
- package/dist/react/MasonEffect.min.js +1 -0
- package/dist/react/react/MasonEffect.d.ts +32 -0
- package/dist/react/react/MasonEffect.d.ts.map +1 -0
- package/package.json +79 -0
- package/src/core/index.d.ts +59 -0
- package/src/core/index.js +319 -0
- package/src/index.js +7 -0
- package/src/react/MasonEffect.tsx +170 -0
- package/src/react/index.js +2 -0
- package/src/vue/MasonEffect.vue +190 -0
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* MasonEffect - 파티클 모핑 효과 라이브러리
|
|
7
|
+
* 바닐라 JS 코어 클래스
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
class MasonEffect {
|
|
11
|
+
constructor(container, options = {}) {
|
|
12
|
+
// 컨테이너 요소
|
|
13
|
+
this.container = typeof container === 'string'
|
|
14
|
+
? document.querySelector(container)
|
|
15
|
+
: container;
|
|
16
|
+
|
|
17
|
+
if (!this.container) {
|
|
18
|
+
throw new Error('Container element not found');
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// 설정값들
|
|
22
|
+
this.config = {
|
|
23
|
+
text: options.text || 'mason crawler',
|
|
24
|
+
densityStep: options.densityStep ?? 2,
|
|
25
|
+
maxParticles: options.maxParticles ?? 3200,
|
|
26
|
+
pointSize: options.pointSize ?? 0.5,
|
|
27
|
+
ease: options.ease ?? 0.05,
|
|
28
|
+
repelRadius: options.repelRadius ?? 150,
|
|
29
|
+
repelStrength: options.repelStrength ?? 1,
|
|
30
|
+
particleColor: options.particleColor || '#fff',
|
|
31
|
+
fontFamily: options.fontFamily || 'Inter, system-ui, Arial',
|
|
32
|
+
fontSize: options.fontSize || null, // null이면 자동 계산
|
|
33
|
+
width: options.width || null, // null이면 컨테이너 크기
|
|
34
|
+
height: options.height || null, // null이면 컨테이너 크기
|
|
35
|
+
devicePixelRatio: options.devicePixelRatio ?? null, // null이면 자동
|
|
36
|
+
onReady: options.onReady || null,
|
|
37
|
+
onUpdate: options.onUpdate || null,
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// 캔버스 생성
|
|
41
|
+
this.canvas = document.createElement('canvas');
|
|
42
|
+
this.ctx = this.canvas.getContext('2d');
|
|
43
|
+
this.container.appendChild(this.canvas);
|
|
44
|
+
this.canvas.style.display = 'block';
|
|
45
|
+
|
|
46
|
+
// 오프스크린 캔버스 (텍스트 렌더링용)
|
|
47
|
+
this.offCanvas = document.createElement('canvas');
|
|
48
|
+
this.offCtx = this.offCanvas.getContext('2d');
|
|
49
|
+
|
|
50
|
+
// 상태
|
|
51
|
+
this.W = 0;
|
|
52
|
+
this.H = 0;
|
|
53
|
+
this.DPR = this.config.devicePixelRatio || Math.min(window.devicePixelRatio || 1, 1.8);
|
|
54
|
+
this.particles = [];
|
|
55
|
+
this.mouse = { x: 0, y: 0, down: false };
|
|
56
|
+
this.animationId = null;
|
|
57
|
+
this.isRunning = false;
|
|
58
|
+
|
|
59
|
+
// 이벤트 핸들러 바인딩
|
|
60
|
+
this.handleResize = this.handleResize.bind(this);
|
|
61
|
+
this.handleMouseMove = this.handleMouseMove.bind(this);
|
|
62
|
+
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
|
63
|
+
this.handleMouseDown = this.handleMouseDown.bind(this);
|
|
64
|
+
this.handleMouseUp = this.handleMouseUp.bind(this);
|
|
65
|
+
|
|
66
|
+
// 초기화
|
|
67
|
+
this.init();
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
init() {
|
|
71
|
+
this.resize();
|
|
72
|
+
this.setupEventListeners();
|
|
73
|
+
this.start();
|
|
74
|
+
|
|
75
|
+
if (this.config.onReady) {
|
|
76
|
+
this.config.onReady(this);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
resize() {
|
|
81
|
+
const width = this.config.width || this.container.clientWidth || window.innerWidth;
|
|
82
|
+
const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
|
|
83
|
+
|
|
84
|
+
this.W = Math.floor(width * this.DPR);
|
|
85
|
+
this.H = Math.floor(height * this.DPR);
|
|
86
|
+
|
|
87
|
+
this.canvas.width = this.W;
|
|
88
|
+
this.canvas.height = this.H;
|
|
89
|
+
this.canvas.style.width = width + 'px';
|
|
90
|
+
this.canvas.style.height = height + 'px';
|
|
91
|
+
|
|
92
|
+
this.buildTargets();
|
|
93
|
+
if (!this.particles.length) {
|
|
94
|
+
this.initParticles();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
buildTargets() {
|
|
99
|
+
const text = this.config.text;
|
|
100
|
+
this.offCanvas.width = this.W;
|
|
101
|
+
this.offCanvas.height = this.H;
|
|
102
|
+
this.offCtx.clearRect(0, 0, this.offCanvas.width, this.offCanvas.height);
|
|
103
|
+
|
|
104
|
+
const base = Math.min(this.W, this.H);
|
|
105
|
+
const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
|
|
106
|
+
this.offCtx.fillStyle = '#ffffff';
|
|
107
|
+
this.offCtx.textAlign = 'center';
|
|
108
|
+
this.offCtx.textBaseline = 'middle';
|
|
109
|
+
this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
|
|
110
|
+
|
|
111
|
+
// 글자 간격 계산 및 그리기
|
|
112
|
+
const chars = text.split('');
|
|
113
|
+
const spacing = fontSize * 0.05;
|
|
114
|
+
const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);
|
|
115
|
+
let x = this.W / 2 - totalWidth / 2;
|
|
116
|
+
|
|
117
|
+
for (const ch of chars) {
|
|
118
|
+
this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);
|
|
119
|
+
x += this.offCtx.measureText(ch).width + spacing;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// 픽셀 샘플링
|
|
123
|
+
const step = Math.max(2, this.config.densityStep);
|
|
124
|
+
const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
|
|
125
|
+
const targets = [];
|
|
126
|
+
|
|
127
|
+
for (let y = 0; y < this.H; y += step) {
|
|
128
|
+
for (let x = 0; x < this.W; x += step) {
|
|
129
|
+
const i = (y * this.W + x) * 4;
|
|
130
|
+
if (img[i] + img[i + 1] + img[i + 2] > 600) {
|
|
131
|
+
targets.push({ x, y });
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// 파티클 수 제한
|
|
137
|
+
while (targets.length > this.config.maxParticles) {
|
|
138
|
+
targets.splice(Math.floor(Math.random() * targets.length), 1);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// 파티클 수 조정
|
|
142
|
+
if (this.particles.length < targets.length) {
|
|
143
|
+
const need = targets.length - this.particles.length;
|
|
144
|
+
for (let i = 0; i < need; i++) {
|
|
145
|
+
this.particles.push(this.makeParticle());
|
|
146
|
+
}
|
|
147
|
+
} else if (this.particles.length > targets.length) {
|
|
148
|
+
this.particles.length = targets.length;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// 목표 좌표 할당
|
|
152
|
+
for (let i = 0; i < this.particles.length; i++) {
|
|
153
|
+
const p = this.particles[i];
|
|
154
|
+
const t = targets[i];
|
|
155
|
+
p.tx = t.x;
|
|
156
|
+
p.ty = t.y;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
makeParticle() {
|
|
161
|
+
const m = 0.12;
|
|
162
|
+
const sx = (m + Math.random() * (1 - 2 * m)) * this.W;
|
|
163
|
+
const sy = (m + Math.random() * (1 - 2 * m)) * this.H;
|
|
164
|
+
return {
|
|
165
|
+
x: sx,
|
|
166
|
+
y: sy,
|
|
167
|
+
vx: 0,
|
|
168
|
+
vy: 0,
|
|
169
|
+
tx: sx,
|
|
170
|
+
ty: sy,
|
|
171
|
+
j: Math.random() * Math.PI * 2,
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
initParticles() {
|
|
176
|
+
for (const p of this.particles) {
|
|
177
|
+
p.x = (0.12 + Math.random() * 1.76) * this.W;
|
|
178
|
+
p.y = (0.12 + Math.random() * 1.76) * this.H;
|
|
179
|
+
p.vx = p.vy = 0;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
scatter() {
|
|
184
|
+
for (const p of this.particles) {
|
|
185
|
+
p.tx = (0.12 + Math.random() * 1.76) * this.W;
|
|
186
|
+
p.ty = (0.12 + Math.random() * 1.76) * this.H;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
morph(text = null) {
|
|
191
|
+
if (text) {
|
|
192
|
+
this.config.text = text;
|
|
193
|
+
}
|
|
194
|
+
this.buildTargets();
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
update() {
|
|
198
|
+
this.ctx.clearRect(0, 0, this.W, this.H);
|
|
199
|
+
|
|
200
|
+
for (const p of this.particles) {
|
|
201
|
+
// 목표 좌표로 당기는 힘
|
|
202
|
+
let ax = (p.tx - p.x) * this.config.ease;
|
|
203
|
+
let ay = (p.ty - p.y) * this.config.ease;
|
|
204
|
+
|
|
205
|
+
// 마우스 반발/흡입
|
|
206
|
+
if (this.mouse.x || this.mouse.y) {
|
|
207
|
+
const dx = p.x - this.mouse.x;
|
|
208
|
+
const dy = p.y - this.mouse.y;
|
|
209
|
+
const d2 = dx * dx + dy * dy;
|
|
210
|
+
const r = this.config.repelRadius * this.DPR;
|
|
211
|
+
if (d2 < r * r) {
|
|
212
|
+
const d = Math.sqrt(d2) + 0.0001;
|
|
213
|
+
const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);
|
|
214
|
+
ax += (dx / d) * f * 6.0;
|
|
215
|
+
ay += (dy / d) * f * 6.0;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// 진동 효과
|
|
220
|
+
p.j += 2;
|
|
221
|
+
ax += Math.cos(p.j) * 0.05;
|
|
222
|
+
ay += Math.sin(p.j * 1.3) * 0.05;
|
|
223
|
+
|
|
224
|
+
// 속도와 위치 업데이트
|
|
225
|
+
p.vx = (p.vx + ax) * Math.random();
|
|
226
|
+
p.vy = (p.vy + ay) * Math.random();
|
|
227
|
+
p.x += p.vx;
|
|
228
|
+
p.y += p.vy;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// 파티클 그리기
|
|
232
|
+
this.ctx.fillStyle = this.config.particleColor;
|
|
233
|
+
const r = this.config.pointSize * this.DPR;
|
|
234
|
+
for (const p of this.particles) {
|
|
235
|
+
this.ctx.beginPath();
|
|
236
|
+
this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
|
237
|
+
this.ctx.fill();
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
if (this.config.onUpdate) {
|
|
241
|
+
this.config.onUpdate(this);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
animate() {
|
|
246
|
+
if (!this.isRunning) return;
|
|
247
|
+
this.update();
|
|
248
|
+
this.animationId = requestAnimationFrame(() => this.animate());
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
start() {
|
|
252
|
+
if (this.isRunning) return;
|
|
253
|
+
this.isRunning = true;
|
|
254
|
+
this.animate();
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
stop() {
|
|
258
|
+
this.isRunning = false;
|
|
259
|
+
if (this.animationId) {
|
|
260
|
+
cancelAnimationFrame(this.animationId);
|
|
261
|
+
this.animationId = null;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
setupEventListeners() {
|
|
266
|
+
window.addEventListener('resize', this.handleResize);
|
|
267
|
+
this.canvas.addEventListener('mousemove', this.handleMouseMove);
|
|
268
|
+
this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
|
|
269
|
+
this.canvas.addEventListener('mousedown', this.handleMouseDown);
|
|
270
|
+
window.addEventListener('mouseup', this.handleMouseUp);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
removeEventListeners() {
|
|
274
|
+
window.removeEventListener('resize', this.handleResize);
|
|
275
|
+
this.canvas.removeEventListener('mousemove', this.handleMouseMove);
|
|
276
|
+
this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
|
|
277
|
+
this.canvas.removeEventListener('mousedown', this.handleMouseDown);
|
|
278
|
+
window.removeEventListener('mouseup', this.handleMouseUp);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
handleResize() {
|
|
282
|
+
this.resize();
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
handleMouseMove(e) {
|
|
286
|
+
const rect = this.canvas.getBoundingClientRect();
|
|
287
|
+
this.mouse.x = (e.clientX - rect.left) * this.DPR;
|
|
288
|
+
this.mouse.y = (e.clientY - rect.top) * this.DPR;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
handleMouseLeave() {
|
|
292
|
+
this.mouse.x = this.mouse.y = 0;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
handleMouseDown() {
|
|
296
|
+
this.mouse.down = true;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
handleMouseUp() {
|
|
300
|
+
this.mouse.down = false;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
// 설정 업데이트
|
|
304
|
+
updateConfig(newConfig) {
|
|
305
|
+
this.config = { ...this.config, ...newConfig };
|
|
306
|
+
if (newConfig.text) {
|
|
307
|
+
this.buildTargets();
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// 파괴 및 정리
|
|
312
|
+
destroy() {
|
|
313
|
+
this.stop();
|
|
314
|
+
this.removeEventListeners();
|
|
315
|
+
if (this.canvas && this.canvas.parentNode) {
|
|
316
|
+
this.canvas.parentNode.removeChild(this.canvas);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
const MasonEffectComponent = React.forwardRef((props, ref) => {
|
|
322
|
+
const containerRef = React.useRef(null);
|
|
323
|
+
const instanceRef = React.useRef(null);
|
|
324
|
+
React.useEffect(() => {
|
|
325
|
+
if (!containerRef.current)
|
|
326
|
+
return;
|
|
327
|
+
const { className, style, text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, onReady, onUpdate, } = props;
|
|
328
|
+
const options = {
|
|
329
|
+
text,
|
|
330
|
+
densityStep,
|
|
331
|
+
maxParticles,
|
|
332
|
+
pointSize,
|
|
333
|
+
ease,
|
|
334
|
+
repelRadius,
|
|
335
|
+
repelStrength,
|
|
336
|
+
particleColor,
|
|
337
|
+
fontFamily,
|
|
338
|
+
fontSize,
|
|
339
|
+
width,
|
|
340
|
+
height,
|
|
341
|
+
devicePixelRatio,
|
|
342
|
+
onReady,
|
|
343
|
+
onUpdate,
|
|
344
|
+
};
|
|
345
|
+
instanceRef.current = new MasonEffect(containerRef.current, options);
|
|
346
|
+
return () => {
|
|
347
|
+
if (instanceRef.current) {
|
|
348
|
+
instanceRef.current.destroy();
|
|
349
|
+
instanceRef.current = null;
|
|
350
|
+
}
|
|
351
|
+
};
|
|
352
|
+
}, []);
|
|
353
|
+
// props 변경 시 설정 업데이트
|
|
354
|
+
React.useEffect(() => {
|
|
355
|
+
if (!instanceRef.current)
|
|
356
|
+
return;
|
|
357
|
+
const { text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, } = props;
|
|
358
|
+
instanceRef.current.updateConfig({
|
|
359
|
+
text,
|
|
360
|
+
densityStep,
|
|
361
|
+
maxParticles,
|
|
362
|
+
pointSize,
|
|
363
|
+
ease,
|
|
364
|
+
repelRadius,
|
|
365
|
+
repelStrength,
|
|
366
|
+
particleColor,
|
|
367
|
+
fontFamily,
|
|
368
|
+
fontSize,
|
|
369
|
+
width,
|
|
370
|
+
height,
|
|
371
|
+
devicePixelRatio,
|
|
372
|
+
});
|
|
373
|
+
}, [
|
|
374
|
+
props.text,
|
|
375
|
+
props.densityStep,
|
|
376
|
+
props.maxParticles,
|
|
377
|
+
props.pointSize,
|
|
378
|
+
props.ease,
|
|
379
|
+
props.repelRadius,
|
|
380
|
+
props.repelStrength,
|
|
381
|
+
props.particleColor,
|
|
382
|
+
props.fontFamily,
|
|
383
|
+
props.fontSize,
|
|
384
|
+
props.width,
|
|
385
|
+
props.height,
|
|
386
|
+
props.devicePixelRatio,
|
|
387
|
+
]);
|
|
388
|
+
React.useImperativeHandle(ref, () => ({
|
|
389
|
+
morph: (text) => {
|
|
390
|
+
instanceRef.current?.morph(text);
|
|
391
|
+
},
|
|
392
|
+
scatter: () => {
|
|
393
|
+
instanceRef.current?.scatter();
|
|
394
|
+
},
|
|
395
|
+
updateConfig: (config) => {
|
|
396
|
+
instanceRef.current?.updateConfig(config);
|
|
397
|
+
},
|
|
398
|
+
destroy: () => {
|
|
399
|
+
instanceRef.current?.destroy();
|
|
400
|
+
instanceRef.current = null;
|
|
401
|
+
},
|
|
402
|
+
}));
|
|
403
|
+
return (React.createElement("div", { ref: containerRef, className: props.className, style: props.style }));
|
|
404
|
+
});
|
|
405
|
+
MasonEffectComponent.displayName = 'MasonEffect';
|
|
406
|
+
|
|
407
|
+
module.exports = MasonEffectComponent;
|
|
408
|
+
//# sourceMappingURL=MasonEffect.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MasonEffect.cjs","sources":["../../src/core/index.js","../../src/react/MasonEffect.tsx"],"sourcesContent":["/**\n * MasonEffect - 파티클 모핑 효과 라이브러리\n * 바닐라 JS 코어 클래스\n */\n\nexport class MasonEffect {\n constructor(container, options = {}) {\n // 컨테이너 요소\n this.container = typeof container === 'string' \n ? document.querySelector(container) \n : container;\n \n if (!this.container) {\n throw new Error('Container element not found');\n }\n\n // 설정값들\n this.config = {\n text: options.text || 'mason crawler',\n densityStep: options.densityStep ?? 2,\n maxParticles: options.maxParticles ?? 3200,\n pointSize: options.pointSize ?? 0.5,\n ease: options.ease ?? 0.05,\n repelRadius: options.repelRadius ?? 150,\n repelStrength: options.repelStrength ?? 1,\n particleColor: options.particleColor || '#fff',\n fontFamily: options.fontFamily || 'Inter, system-ui, Arial',\n fontSize: options.fontSize || null, // null이면 자동 계산\n width: options.width || null, // null이면 컨테이너 크기\n height: options.height || null, // null이면 컨테이너 크기\n devicePixelRatio: options.devicePixelRatio ?? null, // null이면 자동\n onReady: options.onReady || null,\n onUpdate: options.onUpdate || null,\n };\n\n // 캔버스 생성\n this.canvas = document.createElement('canvas');\n this.ctx = this.canvas.getContext('2d');\n this.container.appendChild(this.canvas);\n this.canvas.style.display = 'block';\n\n // 오프스크린 캔버스 (텍스트 렌더링용)\n this.offCanvas = document.createElement('canvas');\n this.offCtx = this.offCanvas.getContext('2d');\n\n // 상태\n this.W = 0;\n this.H = 0;\n this.DPR = this.config.devicePixelRatio || Math.min(window.devicePixelRatio || 1, 1.8);\n this.particles = [];\n this.mouse = { x: 0, y: 0, down: false };\n this.animationId = null;\n this.isRunning = false;\n\n // 이벤트 핸들러 바인딩\n this.handleResize = this.handleResize.bind(this);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleMouseDown = this.handleMouseDown.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n\n // 초기화\n this.init();\n }\n\n init() {\n this.resize();\n this.setupEventListeners();\n this.start();\n \n if (this.config.onReady) {\n this.config.onReady(this);\n }\n }\n\n resize() {\n const width = this.config.width || this.container.clientWidth || window.innerWidth;\n const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;\n \n this.W = Math.floor(width * this.DPR);\n this.H = Math.floor(height * this.DPR);\n \n this.canvas.width = this.W;\n this.canvas.height = this.H;\n this.canvas.style.width = width + 'px';\n this.canvas.style.height = height + 'px';\n\n this.buildTargets();\n if (!this.particles.length) {\n this.initParticles();\n }\n }\n\n buildTargets() {\n const text = this.config.text;\n this.offCanvas.width = this.W;\n this.offCanvas.height = this.H;\n this.offCtx.clearRect(0, 0, this.offCanvas.width, this.offCanvas.height);\n\n const base = Math.min(this.W, this.H);\n const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));\n this.offCtx.fillStyle = '#ffffff';\n this.offCtx.textAlign = 'center';\n this.offCtx.textBaseline = 'middle';\n this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;\n\n // 글자 간격 계산 및 그리기\n const chars = text.split('');\n const spacing = fontSize * 0.05;\n const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);\n let x = this.W / 2 - totalWidth / 2;\n \n for (const ch of chars) {\n this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);\n x += this.offCtx.measureText(ch).width + spacing;\n }\n\n // 픽셀 샘플링\n const step = Math.max(2, this.config.densityStep);\n const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;\n const targets = [];\n \n for (let y = 0; y < this.H; y += step) {\n for (let x = 0; x < this.W; x += step) {\n const i = (y * this.W + x) * 4;\n if (img[i] + img[i + 1] + img[i + 2] > 600) {\n targets.push({ x, y });\n }\n }\n }\n\n // 파티클 수 제한\n while (targets.length > this.config.maxParticles) {\n targets.splice(Math.floor(Math.random() * targets.length), 1);\n }\n\n // 파티클 수 조정\n if (this.particles.length < targets.length) {\n const need = targets.length - this.particles.length;\n for (let i = 0; i < need; i++) {\n this.particles.push(this.makeParticle());\n }\n } else if (this.particles.length > targets.length) {\n this.particles.length = targets.length;\n }\n\n // 목표 좌표 할당\n for (let i = 0; i < this.particles.length; i++) {\n const p = this.particles[i];\n const t = targets[i];\n p.tx = t.x;\n p.ty = t.y;\n }\n }\n\n makeParticle() {\n const m = 0.12;\n const sx = (m + Math.random() * (1 - 2 * m)) * this.W;\n const sy = (m + Math.random() * (1 - 2 * m)) * this.H;\n return {\n x: sx,\n y: sy,\n vx: 0,\n vy: 0,\n tx: sx,\n ty: sy,\n j: Math.random() * Math.PI * 2,\n };\n }\n\n initParticles() {\n for (const p of this.particles) {\n p.x = (0.12 + Math.random() * 1.76) * this.W;\n p.y = (0.12 + Math.random() * 1.76) * this.H;\n p.vx = p.vy = 0;\n }\n }\n\n scatter() {\n for (const p of this.particles) {\n p.tx = (0.12 + Math.random() * 1.76) * this.W;\n p.ty = (0.12 + Math.random() * 1.76) * this.H;\n }\n }\n\n morph(text = null) {\n if (text) {\n this.config.text = text;\n }\n this.buildTargets();\n }\n\n update() {\n this.ctx.clearRect(0, 0, this.W, this.H);\n\n for (const p of this.particles) {\n // 목표 좌표로 당기는 힘\n let ax = (p.tx - p.x) * this.config.ease;\n let ay = (p.ty - p.y) * this.config.ease;\n\n // 마우스 반발/흡입\n if (this.mouse.x || this.mouse.y) {\n const dx = p.x - this.mouse.x;\n const dy = p.y - this.mouse.y;\n const d2 = dx * dx + dy * dy;\n const r = this.config.repelRadius * this.DPR;\n if (d2 < r * r) {\n const d = Math.sqrt(d2) + 0.0001;\n const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);\n ax += (dx / d) * f * 6.0;\n ay += (dy / d) * f * 6.0;\n }\n }\n\n // 진동 효과\n p.j += 2;\n ax += Math.cos(p.j) * 0.05;\n ay += Math.sin(p.j * 1.3) * 0.05;\n\n // 속도와 위치 업데이트\n p.vx = (p.vx + ax) * Math.random();\n p.vy = (p.vy + ay) * Math.random();\n p.x += p.vx;\n p.y += p.vy;\n }\n\n // 파티클 그리기\n this.ctx.fillStyle = this.config.particleColor;\n const r = this.config.pointSize * this.DPR;\n for (const p of this.particles) {\n this.ctx.beginPath();\n this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);\n this.ctx.fill();\n }\n\n if (this.config.onUpdate) {\n this.config.onUpdate(this);\n }\n }\n\n animate() {\n if (!this.isRunning) return;\n this.update();\n this.animationId = requestAnimationFrame(() => this.animate());\n }\n\n start() {\n if (this.isRunning) return;\n this.isRunning = true;\n this.animate();\n }\n\n stop() {\n this.isRunning = false;\n if (this.animationId) {\n cancelAnimationFrame(this.animationId);\n this.animationId = null;\n }\n }\n\n setupEventListeners() {\n window.addEventListener('resize', this.handleResize);\n this.canvas.addEventListener('mousemove', this.handleMouseMove);\n this.canvas.addEventListener('mouseleave', this.handleMouseLeave);\n this.canvas.addEventListener('mousedown', this.handleMouseDown);\n window.addEventListener('mouseup', this.handleMouseUp);\n }\n\n removeEventListeners() {\n window.removeEventListener('resize', this.handleResize);\n this.canvas.removeEventListener('mousemove', this.handleMouseMove);\n this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);\n this.canvas.removeEventListener('mousedown', this.handleMouseDown);\n window.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n handleResize() {\n this.resize();\n }\n\n handleMouseMove(e) {\n const rect = this.canvas.getBoundingClientRect();\n this.mouse.x = (e.clientX - rect.left) * this.DPR;\n this.mouse.y = (e.clientY - rect.top) * this.DPR;\n }\n\n handleMouseLeave() {\n this.mouse.x = this.mouse.y = 0;\n }\n\n handleMouseDown() {\n this.mouse.down = true;\n }\n\n handleMouseUp() {\n this.mouse.down = false;\n }\n\n // 설정 업데이트\n updateConfig(newConfig) {\n this.config = { ...this.config, ...newConfig };\n if (newConfig.text) {\n this.buildTargets();\n }\n }\n\n // 파괴 및 정리\n destroy() {\n this.stop();\n this.removeEventListeners();\n if (this.canvas && this.canvas.parentNode) {\n this.canvas.parentNode.removeChild(this.canvas);\n }\n }\n}\n\n// 기본 export\nexport default MasonEffect;\n\n",null],"names":["forwardRef","useRef","useEffect","useImperativeHandle"],"mappings":"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"}
|
|
@@ -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: (text?: string) => 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,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,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,yFAmIzB,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
|