masoneffect 0.1.17 → 0.1.19

package/dist/react/index.js

@@ -0,0 +1,549 @@
+import React, { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
+
+/**
+ * MasonEffect - 파티클 모핑 효과 라이브러리
+ * 바닐라 JS 코어 클래스
+ */
+// 디바운스 유틸리티 함수
+function debounce(func, wait) {
+    let timeout = null;
+    return function executedFunction(...args) {
+        const later = () => {
+            timeout = null;
+            func.apply(this, args);
+        };
+        if (timeout !== null) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(later, wait);
+    };
+}
+class MasonEffect {
+    constructor(container, options = {}) {
+        // 컨테이너 요소
+        this.container = typeof container === 'string'
+            ? document.querySelector(container)
+            : container;
+        if (!this.container) {
+            throw new Error('Container element not found');
+        }
+        // 설정값들
+        this.config = {
+            text: options.text || 'mason effect',
+            densityStep: options.densityStep ?? 2,
+            maxParticles: options.maxParticles ?? 3200,
+            pointSize: options.pointSize ?? 0.5,
+            ease: options.ease ?? 0.05,
+            repelRadius: options.repelRadius ?? 150,
+            repelStrength: options.repelStrength ?? 1,
+            particleColor: options.particleColor || '#fff',
+            fontFamily: options.fontFamily || 'Inter, system-ui, Arial',
+            fontSize: options.fontSize || null,
+            width: options.width || null,
+            height: options.height || null,
+            devicePixelRatio: options.devicePixelRatio ?? null,
+            onReady: options.onReady || null,
+            onUpdate: options.onUpdate || null,
+        };
+        // 캔버스 생성
+        this.canvas = document.createElement('canvas');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Canvas context not available');
+        }
+        this.ctx = ctx;
+        this.container.appendChild(this.canvas);
+        this.canvas.style.display = 'block';
+        // 오프스크린 캔버스 (텍스트 렌더링용)
+        this.offCanvas = document.createElement('canvas');
+        const offCtx = this.offCanvas.getContext('2d');
+        if (!offCtx) {
+            throw new Error('Offscreen canvas context not available');
+        }
+        this.offCtx = offCtx;
+        // 상태
+        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: false };
+        this.animationId = null;
+        this.isRunning = false;
+        this.isVisible = false;
+        this.intersectionObserver = null;
+        // 디바운스 설정 (ms)
+        this.debounceDelay = options.debounceDelay ?? 150;
+        // 이벤트 핸들러 바인딩 (디바운스 적용 전에 바인딩)
+        const boundHandleResize = this.handleResize.bind(this);
+        this.handleResize = debounce(boundHandleResize, 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);
+        // morph와 updateConfig를 위한 디바운스된 내부 메서드
+        this._debouncedMorph = debounce(this._morphInternal.bind(this), this.debounceDelay);
+        this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
+        // 초기화
+        this.init();
+    }
+    init() {
+        this.resize();
+        this.setupEventListeners();
+        this.setupIntersectionObserver();
+        if (this.config.onReady) {
+            this.config.onReady(this);
+        }
+    }
+    setupIntersectionObserver() {
+        // IntersectionObserver가 지원되지 않는 환경에서는 항상 재생
+        if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {
+            this.isVisible = true;
+            this.start();
+            return;
+        }
+        // 이미 설정되어 있다면 다시 만들지 않음
+        if (this.intersectionObserver) {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target !== this.container)
+                    continue;
+                if (entry.isIntersecting) {
+                    this.isVisible = true;
+                    this.start();
+                }
+                else {
+                    this.isVisible = false;
+                    this.stop();
+                }
+            }
+        }, {
+            threshold: 0.1, // 10% 이상 보일 때 동작
+        });
+        this.intersectionObserver.observe(this.container);
+    }
+    resize() {
+        const width = this.config.width || this.container.clientWidth || window.innerWidth;
+        const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
+        // 최소 크기 보장
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        this.W = Math.floor(width * this.DPR);
+        this.H = Math.floor(height * this.DPR);
+        // 캔버스 크기 제한 (메모리 오류 방지)
+        // getImageData는 최대 약 268MB (4096x4096x4)까지 지원
+        const MAX_CANVAS_SIZE = 4096;
+        if (this.W > MAX_CANVAS_SIZE || this.H > MAX_CANVAS_SIZE) {
+            const scale = Math.min(MAX_CANVAS_SIZE / this.W, MAX_CANVAS_SIZE / this.H);
+            this.W = Math.floor(this.W * scale);
+            this.H = Math.floor(this.H * scale);
+            this.DPR = this.DPR * scale;
+        }
+        this.canvas.width = this.W;
+        this.canvas.height = this.H;
+        this.canvas.style.width = width + 'px';
+        this.canvas.style.height = height + 'px';
+        // 크기가 유효할 때만 buildTargets 실행
+        if (this.W > 0 && this.H > 0) {
+            this.buildTargets();
+            if (!this.particles.length) {
+                this.initParticles();
+            }
+        }
+    }
+    buildTargets() {
+        // 크기 검증
+        if (this.W <= 0 || this.H <= 0) {
+            return;
+        }
+        const text = 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 base = Math.min(this.W, this.H);
+        const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
+        this.offCtx.fillStyle = '#ffffff';
+        this.offCtx.textAlign = 'center';
+        this.offCtx.textBaseline = 'middle';
+        this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+        // 글자 간격 계산 및 그리기
+        const chars = text.split('');
+        const spacing = fontSize * 0.05;
+        const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);
+        let x = this.W / 2 - totalWidth / 2;
+        for (const ch of chars) {
+            this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);
+            x += this.offCtx.measureText(ch).width + spacing;
+        }
+        // 픽셀 샘플링
+        const step = Math.max(2, this.config.densityStep);
+        const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
+        const targets = [];
+        for (let y = 0; y < this.H; y += step) {
+            for (let x = 0; x < this.W; x += step) {
+                const i = (y * this.W + x) * 4;
+                if (img[i] + img[i + 1] + img[i + 2] > 600) {
+                    targets.push({ x, y });
+                }
+            }
+        }
+        // 파티클 수 제한
+        while (targets.length > this.config.maxParticles) {
+            targets.splice(Math.floor(Math.random() * targets.length), 1);
+        }
+        // 파티클 수 조정
+        if (this.particles.length < targets.length) {
+            const need = targets.length - this.particles.length;
+            for (let i = 0; i < need; i++) {
+                this.particles.push(this.makeParticle());
+            }
+        }
+        else if (this.particles.length > targets.length) {
+            this.particles.length = targets.length;
+        }
+        // 목표 좌표 할당
+        for (let i = 0; i < this.particles.length; i++) {
+            const p = this.particles[i];
+            const t = targets[i];
+            p.tx = t.x;
+            p.ty = t.y;
+        }
+    }
+    makeParticle() {
+        // 캔버스 전체에 골고루 분포 (여백 없이)
+        const sx = Math.random() * this.W;
+        const sy = Math.random() * this.H;
+        return {
+            x: sx,
+            y: sy,
+            vx: 0,
+            vy: 0,
+            tx: sx,
+            ty: sy,
+            initialX: sx, // 초기 위치 저장 (scatter 시 돌아갈 위치)
+            initialY: sy,
+            j: Math.random() * Math.PI * 2,
+        };
+    }
+    initParticles() {
+        // 캔버스 전체에 골고루 분포 (여백 없이)
+        for (const p of this.particles) {
+            const sx = Math.random() * this.W;
+            const sy = Math.random() * this.H;
+            p.x = sx;
+            p.y = sy;
+            p.vx = p.vy = 0;
+            // 초기 위치 저장 (scatter 시 돌아갈 위치)
+            p.initialX = sx;
+            p.initialY = sy;
+        }
+    }
+    scatter() {
+        // 각 파티클을 초기 위치로 돌아가도록 설정
+        for (const p of this.particles) {
+            // 초기 위치가 저장되어 있으면 그 위치로, 없으면 현재 위치 유지
+            if (p.initialX !== undefined && p.initialY !== undefined) {
+                p.tx = p.initialX;
+                p.ty = p.initialY;
+            }
+            else {
+                // 초기 위치가 없으면 현재 위치를 초기 위치로 저장
+                p.initialX = p.x;
+                p.initialY = p.y;
+                p.tx = p.initialX;
+                p.ty = p.initialY;
+            }
+        }
+    }
+    morph(textOrOptions) {
+        // 즉시 실행이 필요한 경우 (예: 초기화 시)를 위해 내부 메서드 직접 호출
+        // 일반적인 경우에는 디바운스 적용
+        this._debouncedMorph(textOrOptions);
+    }
+    _morphInternal(textOrOptions) {
+        // W와 H가 0이면 resize 먼저 실행
+        if (this.W === 0 || this.H === 0) {
+            this.resize();
+        }
+        if (typeof textOrOptions === 'string') {
+            // 문자열인 경우: 기존 동작 유지
+            this.config.text = textOrOptions;
+            this.buildTargets();
+        }
+        else if (textOrOptions && typeof textOrOptions === 'object') {
+            // 객체인 경우: 텍스트와 함께 다른 설정도 변경
+            const needsRebuild = textOrOptions.text !== undefined;
+            this.config = { ...this.config, ...textOrOptions };
+            if (needsRebuild) {
+                this.buildTargets();
+            }
+        }
+        else {
+            // null이거나 undefined인 경우: 현재 텍스트로 재빌드
+            this.buildTargets();
+        }
+    }
+    update() {
+        this.ctx.clearRect(0, 0, this.W, this.H);
+        for (const p of this.particles) {
+            // 목표 좌표로 당기는 힘
+            let ax = (p.tx - p.x) * this.config.ease;
+            let ay = (p.ty - p.y) * this.config.ease;
+            // 마우스 반발/흡입
+            if (this.mouse.x || this.mouse.y) {
+                const dx = p.x - this.mouse.x;
+                const dy = p.y - this.mouse.y;
+                const d2 = dx * dx + dy * dy;
+                const r = this.config.repelRadius * this.DPR;
+                if (d2 < r * r) {
+                    const d = Math.sqrt(d2) + 0.0001;
+                    const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);
+                    ax += (dx / d) * f * 6.0;
+                    ay += (dy / d) * f * 6.0;
+                }
+            }
+            // 진동 효과
+            p.j += 2;
+            ax += Math.cos(p.j) * 0.05;
+            ay += Math.sin(p.j * 1.3) * 0.05;
+            // 속도와 위치 업데이트
+            p.vx = (p.vx + ax) * Math.random();
+            p.vy = (p.vy + ay) * Math.random();
+            p.x += p.vx;
+            p.y += p.vy;
+        }
+        // 파티클 그리기
+        this.ctx.fillStyle = this.config.particleColor;
+        const r = this.config.pointSize * this.DPR;
+        for (const p of this.particles) {
+            this.ctx.beginPath();
+            this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+            this.ctx.fill();
+        }
+        if (this.config.onUpdate) {
+            this.config.onUpdate(this);
+        }
+    }
+    animate() {
+        if (!this.isRunning)
+            return;
+        this.update();
+        this.animationId = requestAnimationFrame(() => this.animate());
+    }
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.animate();
+    }
+    stop() {
+        this.isRunning = false;
+        if (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(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        this.mouse.x = (e.clientX - rect.left) * this.DPR;
+        this.mouse.y = (e.clientY - rect.top) * this.DPR;
+    }
+    handleMouseLeave() {
+        this.mouse.x = this.mouse.y = 0;
+    }
+    handleMouseDown() {
+        this.mouse.down = true;
+    }
+    handleMouseUp() {
+        this.mouse.down = false;
+    }
+    // 설정 업데이트
+    updateConfig(newConfig) {
+        // 디바운스 적용
+        this._debouncedUpdateConfig(newConfig);
+    }
+    _updateConfigInternal(newConfig) {
+        this.config = { ...this.config, ...newConfig };
+        if (newConfig.text) {
+            this.buildTargets();
+        }
+    }
+    // 파괴 및 정리
+    destroy() {
+        this.stop();
+        this.removeEventListeners();
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+        if (this.canvas && this.canvas.parentNode) {
+            this.canvas.parentNode.removeChild(this.canvas);
+        }
+    }
+}
+
+const MasonEffectComponent = forwardRef((props, ref) => {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let resizeObserver = null;
+        let initTimeout = null;
+        // 컨테이너가 실제 크기를 가지도록 대기
+        const initEffect = () => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            // 컨테이너 크기가 0이거나 너무 작으면 다음 프레임에 다시 시도
+            const rect = container.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0) {
+                initTimeout = window.setTimeout(initEffect, 50);
+                return;
+            }
+            // 최소 크기 보장 (너무 작으면 기본값 사용)
+            const minSize = 100;
+            if (rect.width < minSize || rect.height < minSize) {
+                container.style.minWidth = minSize + 'px';
+                container.style.minHeight = minSize + 'px';
+            }
+            const { className, style, text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, onReady, onUpdate, } = props;
+            const options = {
+                text,
+                densityStep,
+                maxParticles,
+                pointSize,
+                ease,
+                repelRadius,
+                repelStrength,
+                particleColor,
+                fontFamily,
+                fontSize,
+                width,
+                height,
+                devicePixelRatio,
+                onReady,
+                onUpdate,
+            };
+            instanceRef.current = new MasonEffect(container, options);
+            // ResizeObserver로 컨테이너 크기 변경 감지
+            if (typeof ResizeObserver !== 'undefined') {
+                resizeObserver = new ResizeObserver(() => {
+                    if (instanceRef.current) {
+                        instanceRef.current.resize();
+                    }
+                });
+                resizeObserver.observe(container);
+            }
+        };
+        // 다음 프레임에 초기화 (DOM이 완전히 렌더링된 후)
+        requestAnimationFrame(initEffect);
+        return () => {
+            if (initTimeout) {
+                clearTimeout(initTimeout);
+            }
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            if (instanceRef.current) {
+                instanceRef.current.destroy();
+                instanceRef.current = null;
+            }
+        };
+    }, []);
+    // props 변경 시 설정 업데이트
+    useEffect(() => {
+        if (!instanceRef.current)
+            return;
+        const { text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, } = props;
+        instanceRef.current.updateConfig({
+            text,
+            densityStep,
+            maxParticles,
+            pointSize,
+            ease,
+            repelRadius,
+            repelStrength,
+            particleColor,
+            fontFamily,
+            fontSize,
+            width,
+            height,
+            devicePixelRatio,
+        });
+    }, [
+        props.text,
+        props.densityStep,
+        props.maxParticles,
+        props.pointSize,
+        props.ease,
+        props.repelRadius,
+        props.repelStrength,
+        props.particleColor,
+        props.fontFamily,
+        props.fontSize,
+        props.width,
+        props.height,
+        props.devicePixelRatio,
+    ]);
+    useImperativeHandle(ref, () => ({
+        morph: (textOrOptions) => {
+            if (!instanceRef.current) {
+                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
+                return;
+            }
+            instanceRef.current.morph(textOrOptions);
+        },
+        scatter: () => {
+            if (!instanceRef.current) {
+                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
+                return;
+            }
+            instanceRef.current.scatter();
+        },
+        updateConfig: (config) => {
+            if (!instanceRef.current) {
+                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
+                return;
+            }
+            instanceRef.current.updateConfig(config);
+        },
+        destroy: () => {
+            if (instanceRef.current) {
+                instanceRef.current.destroy();
+                instanceRef.current = null;
+            }
+        },
+    }));
+    // 기본 스타일: 컨테이너가 크기를 가지도록 함
+    const defaultStyle = {
+        width: '100%',
+        height: '100%',
+        minHeight: props.height || 400,
+        position: 'relative',
+        ...props.style,
+    };
+    return (React.createElement("div", { ref: containerRef, className: props.className, style: defaultStyle }));
+});
+MasonEffectComponent.displayName = 'MasonEffect';
+
+export { MasonEffectComponent as default };

package/dist/react/index.umd.d.ts

@@ -4,4 +4,3 @@
  */
 import MasonEffect from './core/index.js';
 export default MasonEffect;
-//# sourceMappingURL=index.umd.d.ts.map

package/dist/react/react/MasonEffect.d.ts

@@ -29,4 +29,3 @@ interface MasonEffectProps extends MasonEffectOptions {
 }
 declare const MasonEffectComponent: React.ForwardRefExoticComponent<MasonEffectProps & React.RefAttributes<MasonEffectRef>>;
 export default MasonEffectComponent;
-//# sourceMappingURL=MasonEffect.d.ts.map

package/dist/react/react/MasonEffect.d.ts.map

@@ -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,yFA6LzB,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
+{"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,yFAoMzB,CAAC;AAIF,eAAe,oBAAoB,CAAC"}

package/dist/react/react/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MasonEffect';
+export type { MasonEffectRef, MasonEffectOptions } from './MasonEffect';

package/dist/react/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
   "main": "dist/index.min.js",
   "module": "dist/index.esm.min.js",
@@ -14,7 +14,7 @@
     "./react": {
       "import": "./dist/react/MasonEffect.min.js",
       "require": "./dist/react/MasonEffect.min.cjs",
-      "types": "./dist/react/MasonEffect.d.ts"
+      "types": "./dist/react/index.d.ts"
     },
     "./vue": {
       "import": "./src/vue/MasonEffect.vue"
@@ -25,7 +25,7 @@
     "src"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
+    "build": "rollup -c rollup.config.mjs && node scripts/generate-react-types.js",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",

package/src/core/index.ts

@@ -201,21 +201,44 @@ export class MasonEffect {
     const width = this.config.width || this.container.clientWidth || window.innerWidth;
     const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
     
+    // 최소 크기 보장
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+    
     this.W = Math.floor(width * this.DPR);
     this.H = Math.floor(height * this.DPR);
     
+    // 캔버스 크기 제한 (메모리 오류 방지)
+    // getImageData는 최대 약 268MB (4096x4096x4)까지 지원
+    const MAX_CANVAS_SIZE = 4096;
+    if (this.W > MAX_CANVAS_SIZE || this.H > MAX_CANVAS_SIZE) {
+      const scale = Math.min(MAX_CANVAS_SIZE / this.W, MAX_CANVAS_SIZE / this.H);
+      this.W = Math.floor(this.W * scale);
+      this.H = Math.floor(this.H * scale);
+      this.DPR = this.DPR * scale;
+    }
+    
     this.canvas.width = this.W;
     this.canvas.height = this.H;
     this.canvas.style.width = width + 'px';
     this.canvas.style.height = height + 'px';
 
-    this.buildTargets();
-    if (!this.particles.length) {
-      this.initParticles();
+    // 크기가 유효할 때만 buildTargets 실행
+    if (this.W > 0 && this.H > 0) {
+      this.buildTargets();
+      if (!this.particles.length) {
+        this.initParticles();
+      }
     }
   }
 
   buildTargets(): void {
+    // 크기 검증
+    if (this.W <= 0 || this.H <= 0) {
+      return;
+    }
+    
     const text = this.config.text;
     this.offCanvas.width = this.W;
     this.offCanvas.height = this.H;

package/src/react/MasonEffect.tsx

@@ -47,12 +47,19 @@ const MasonEffectComponent = forwardRef<MasonEffectRef, MasonEffectProps>(
         const container = containerRef.current;
         if (!container) return;
 
-        // 컨테이너 크기가 0이면 다음 프레임에 다시 시도
+        // 컨테이너 크기가 0이거나 너무 작으면 다음 프레임에 다시 시도
         const rect = container.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) {
+        if (rect.width <= 0 || rect.height <= 0) {
           initTimeout = window.setTimeout(initEffect, 50);
           return;
         }
+        
+        // 최소 크기 보장 (너무 작으면 기본값 사용)
+        const minSize = 100;
+        if (rect.width < minSize || rect.height < minSize) {
+          container.style.minWidth = minSize + 'px';
+          container.style.minHeight = minSize + 'px';
+        }
 
         const {
           className,

package/src/react/index.ts

@@ -0,0 +1,4 @@
+// Re-export for convenience
+export { default } from './MasonEffect';
+export type { MasonEffectRef, MasonEffectOptions } from './MasonEffect';
+

package/src/vue/MasonEffect.vue

@@ -4,7 +4,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { MasonEffect, type MasonEffectOptions } from '../core/index';
+import { MasonEffect } from '../core/index';
+import type { MasonEffectOptions } from '../core/index';
 
 interface Props extends Partial<MasonEffectOptions> {
   className?: string;