masoneffect 2.0.4 → 2.0.6

package/dist/svelte/scrollFadeIn/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty,i=(i,n,e)=>((i,n,e)=>n in i?t(i,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[n]=e)(i,"symbol"!=typeof n?n+"":n,e);const n=require("svelte");function e(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function c(t,i){return t!=t?i==i:t!==i||t&&"object"==typeof t||"function"==typeof t}function h(t,i,n,e){return t[1]&&e?function(t,i){for(const n in i)t[n]=i[n];return t}(n.ctx.slice(),t[1](e(i))):n.ctx}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t,i,n){null==n?t.removeAttribute(i):t.getAttribute(i)!==n&&t.setAttribute(i,n)}let u;function g(t){u=t}const f=[],p=[];let m=[];const b=[],y=Promise.resolve();let $=!1;function v(t){m.push(t)}const w=new Set;let x=0;function O(){if(0!==x)return;const t=u;do{try{for(;x<f.length;){const t=f[x];x++,g(t),M(t.$$)}}catch(i){throw f.length=0,x=0,i}for(g(null),f.length=0,x=0;p.length;)p.pop()();for(let t=0;t<m.length;t+=1){const i=m[t];w.has(i)||(w.add(i),i())}m.length=0}while(f.length);for(;b.length;)b.pop()();$=!1,w.clear(),g(t)}function M(t){if(null!==t.fragment){t.update(),r(t.before_update);const i=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,i),t.after_update.forEach(v)}}const V=new Set;function C(t,i){t&&t.i&&(V.delete(t),t.i(i))}function _(t,i){const n=t.$$;null!==n.fragment&&(!function(t){const i=[],n=[];m.forEach(e=>-1===t.indexOf(e)?i.push(e):n.push(e)),n.forEach(t=>t()),m=i}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(i),n.on_destroy=n.fragment=null,n.ctx=[])}function I(t,i){-1===t.$$.dirty[0]&&(f.push(t),$||($=!0,y.then(O)),t.$$.dirty.fill(0)),t.$$.dirty[i/31|0]|=1<<i%31}function S(t,i,n,c,h,d,f=null,p=[-1]){const m=u;g(t);const b=t.$$={fragment:null,ctx:[],props:d,update:e,not_equal:h,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(i.context||(m?m.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:i.target||m.$$.root};f&&f(b.root);let y=!1;if(b.ctx=n?n(t,i.props||{},(i,n,...e)=>{const s=e.length?e[0]:n;return b.ctx&&h(b.ctx[i],b.ctx[i]=s)&&(!b.skip_bound&&b.bound[i]&&b.bound[i](s),y&&I(t,i)),n}):[],b.update(),y=!0,r(b.before_update),b.fragment=!!c&&c(b.ctx),i.target){if(i.hydrate){const t=($=i.target,Array.from($.childNodes));b.fragment&&b.fragment.l(t),t.forEach(l)}else b.fragment&&b.fragment.c();i.intro&&C(t.$$.fragment),function(t,i,n){const{fragment:e,after_update:o}=t.$$;e&&e.m(i,n),v(()=>{const i=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...i):r(i),t.$$.on_mount=[]}),o.forEach(v)}(t,i.target,i.anchor),O()}var $;g(m)}class D{constructor(){i(this,"$$"),i(this,"$$set")}$destroy(){_(this,1),this.$destroy=e}$on(t,i){if(!a(i))return e;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(i),()=>{const t=n.indexOf(i);-1!==t&&n.splice(t,1)}}$set(t){var i;this.$$set&&(i=t,0!==Object.keys(i).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");class H{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}const P={easeOutCubic:t=>--t*t*t+1};class T{constructor(t,i={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={direction:i.direction??"bottom",distance:i.distance??"50px",duration:i.duration??800,easing:i.easing??P.easeOutCubic,threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",triggerOnce:i.triggerOnce??!1,enabled:i.enabled??!0,onStart:i.onStart||null,onComplete:i.onComplete||null},this.visibilityManager=null,this.animationFrameId=null,this.startTime=null,this.isRunning=!1,this.hasTriggered=!1,this.initialTransform="",this.targetDistance=0,this.init()}init(){const t=window.getComputedStyle(this.container);this.initialTransform="none"!==t.transform?t.transform:this.container.style.transform||"",this.targetDistance=this.parseDistance(this.config.distance),this.setInitialPosition(),this.setupVisibilityManager()}parseDistance(t){const i=t.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);if(!i){return parseFloat(t)||50}const n=parseFloat(i[1]);switch(i[2]){case"px":default:return n;case"rem":case"em":return n*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16);case"%":const t=this.container.getBoundingClientRect();return n/100*("top"===this.config.direction||"bottom"===this.config.direction?t.height:t.width);case"vh":return n/100*window.innerHeight;case"vw":return n/100*window.innerWidth}}setInitialPosition(){let t=0,i=0;switch(this.config.direction){case"top":i=-this.targetDistance;break;case"right":t=this.targetDistance;break;case"bottom":i=this.targetDistance;break;case"left":t=-this.targetDistance}const n=this.initialTransform||"",e=`translate(${t}px, ${i}px)`;this.container.style.transform=n&&"none"!==n?`${e} ${n}`:e,this.container.style.opacity="0",this.container.style.transition="none"}setupVisibilityManager(){this.visibilityManager=new H(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start())},onHidden:()=>{!this.config.triggerOnce&&this.isRunning&&this.reset()}})}start(){this.isRunning||(this.isRunning=!0,this.startTime=performance.now(),this.config.onStart&&this.config.onStart(),this.container.style.transition="none",this.animate())}animate(){if(!this.isRunning)return;const t=performance.now()-(this.startTime||0),i=Math.min(t/this.config.duration,1),n=this.config.easing(i);let e=0,s=0;switch(this.config.direction){case"top":s=-this.targetDistance*(1-n);break;case"right":e=this.targetDistance*(1-n);break;case"bottom":s=this.targetDistance*(1-n);break;case"left":e=-this.targetDistance*(1-n)}const o=this.initialTransform||"",r=`translate(${e}px, ${s}px)`;this.container.style.transform=o&&"none"!==o?`${r} ${o}`:r,this.container.style.opacity=String(n),i<1?this.animationFrameId=requestAnimationFrame(()=>this.animate()):this.complete()}complete(){this.isRunning=!1,this.initialTransform&&"none"!==this.initialTransform?this.container.style.transform=this.initialTransform:this.container.style.transform="",this.container.style.opacity="1",this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.config.onComplete&&this.config.onComplete()}reset(){this.stop(),this.hasTriggered=!1,this.setInitialPosition()}stop(){this.isRunning=!1,this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,easing:t.easing??this.config.easing,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},t.distance&&(this.targetDistance=this.parseDistance(this.config.distance)),this.setInitialPosition(),void 0===t.threshold&&void 0===t.rootMargin||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),i&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.style.transform=this.initialTransform||"",this.container.style.opacity="",this.container.style.transition=""}}function k(t){let i,n;const e=t[18].default,s=function(t,i,n,e){if(t){const s=h(t,i,n,e);return t[0](s)}}(e,t,t[17],null);return{c(){var n;n="div",i=document.createElement(n),s&&s.c(),d(i,"class",t[0]),d(i,"style",t[1])},m(e,o){!function(t,i,n){t.insertBefore(i,n||null)}(e,i,o),s&&s.m(i,null),t[19](i),n=!0},p(t,[o]){var r,a;s&&s.p&&(!n||131072&o)&&function(t,i,n,e,s,o){if(s){const r=h(i,n,e,o);t.p(r,s)}}(s,e,t,t[17],n?(r=e,a=t[17],r[2],a.dirty):function(t){if(t.ctx.length>32){const i=[],n=t.ctx.length/32;for(let t=0;t<n;t++)i[t]=-1;return i}return-1}(t[17]),null),(!n||1&o)&&d(i,"class",t[0]),(!n||2&o)&&d(i,"style",t[1])},i(t){n||(C(s,t),n=!0)},o(t){!function(t,i){if(t&&t.o){if(V.has(t))return;V.add(t),(void 0).c.push(()=>{V.delete(t)}),t.o(i)}}(s,t),n=!1},d(n){n&&l(i),s&&s.d(n),t[19](null)}}}function F(t,i,e){let{$$slots:s={},$$scope:o}=i,{direction:r="bottom"}=i,{distance:a="50px"}=i,{duration:c=800}=i,{easing:h=t=>t}=i,{threshold:l=.1}=i,{rootMargin:d="0px"}=i,{triggerOnce:u=!1}=i,{enabled:g=!0}=i,{className:f=""}=i,{style:m={}}=i;const b=n.createEventDispatcher();let y,$=null;return n.onMount(()=>{if(!y)return;e(16,$=new T(y,{direction:r,distance:a,duration:c,easing:h,threshold:l,rootMargin:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}}))}),n.onDestroy(()=>{$&&($.destroy(),e(16,$=null))}),t.$$set=t=>{"direction"in t&&e(3,r=t.direction),"distance"in t&&e(4,a=t.distance),"duration"in t&&e(5,c=t.duration),"easing"in t&&e(6,h=t.easing),"threshold"in t&&e(7,l=t.threshold),"rootMargin"in t&&e(8,d=t.rootMargin),"triggerOnce"in t&&e(9,u=t.triggerOnce),"enabled"in t&&e(10,g=t.enabled),"className"in t&&e(0,f=t.className),"style"in t&&e(1,m=t.style),"$$scope"in t&&e(17,o=t.$$scope)},t.$$.update=()=>{67576&t.$$.dirty&&$&&$.updateConfig({direction:r,distance:a,duration:c,easing:h,threshold:l,rootMargin:d,triggerOnce:u,enabled:g,onStart:()=>{b("start")},onComplete:()=>{b("complete")}})},[f,m,y,r,a,c,h,l,d,u,g,function(){$&&$.start()},function(){$&&$.stop()},function(){$&&$.reset()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),e(16,$=null))},$,o,s,function(t){p[t?"unshift":"push"](()=>{y=t,e(2,y)})}]}module.exports=class extends D{constructor(t){super(),S(this,t,F,k,c,{direction:3,distance:4,duration:5,easing:6,threshold:7,rootMargin:8,triggerOnce:9,enabled:10,className:0,style:1,start:11,stop:12,reset:13,updateConfig:14,destroy:15})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get updateConfig(){return this.$$.ctx[14]}get destroy(){return this.$$.ctx[15]}};

package/dist/svelte/scrollFadeIn/index.d.ts

@@ -0,0 +1,272 @@
+export declare class Count {
+    container: HTMLElement;
+    config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
+        onUpdate: CountOptions['onUpdate'];
+        onComplete: CountOptions['onComplete'];
+    };
+    currentValue: number;
+    startTime: number | null;
+    animationFrameId: number | null;
+    visibilityManager: VisibilityManager | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    constructor(container: HTMLElement | string, options: CountOptions);
+    init(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateDisplay(value: number): void;
+    formatNumber(value: number): string;
+    updateConfig(newConfig: Partial<CountOptions>): void;
+    getValue(): number;
+    destroy(): void;
+}
+
+export declare interface CountOptions {
+    targetValue: number;
+    duration?: number;
+    startValue?: number;
+    enabled?: boolean;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    onUpdate?: (value: number) => void;
+    onComplete?: () => void;
+}
+
+declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+};
+export { easingFunctions }
+export { easingFunctions as scrollFadeInEasingFunctions }
+
+export declare interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    tx: number;
+    ty: number;
+    initialX?: number;
+    initialY?: number;
+    j: number;
+}
+
+export declare class ScrollFadeIn {
+    container: HTMLElement;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
+        easing: (t: number) => number;
+        onStart: ScrollFadeInOptions['onStart'];
+        onComplete: ScrollFadeInOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    animationFrameId: number | null;
+    startTime: number | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    initialTransform: string;
+    targetDistance: number;
+    constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
+    init(): void;
+    parseDistance(distance: string): number;
+    setInitialPosition(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    animate(): void;
+    complete(): void;
+    reset(): void;
+    stop(): void;
+    updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
+    destroy(): void;
+}
+
+export declare interface ScrollFadeInOptions {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    distance?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
+declare class TextToParticle {
+    container: HTMLElement;
+    config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
+        onReady: TextToParticleOptions['onReady'];
+        onUpdate: TextToParticleOptions['onUpdate'];
+    };
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    offCanvas: HTMLCanvasElement;
+    offCtx: CanvasRenderingContext2D;
+    W: number;
+    H: number;
+    DPR: number;
+    particles: Particle[];
+    mouse: {
+        x: number;
+        y: number;
+        down: boolean;
+    };
+    animationId: number | null;
+    isRunning: boolean;
+    visibilityManager: VisibilityManager | null;
+    debounceDelay: number;
+    _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
+    _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
+    constructor(container: HTMLElement | string, options?: TextToParticleOptions);
+    init(): void;
+    setupVisibilityManager(): void;
+    resize(): void;
+    /**
+     * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+     * @param fontSize 확인할 폰트 크기
+     * @param text 텍스트 (\n으로 줄바꿈 구분)
+     * @param maxWidth 최대 너비
+     * @param maxHeight 최대 높이
+     * @returns { width: number, height: number, fits: boolean }
+         */
+     private measureTextFit;
+     /**
+      * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+      * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+      */
+     private findOptimalFontSize;
+     buildTargets(): void;
+     makeParticle(): Particle;
+     initParticles(): void;
+     scatter(): void;
+     morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     update(): void;
+     animate(): void;
+     start(): void;
+     stop(): void;
+     setupEventListeners(): void;
+     removeEventListeners(): void;
+     handleResize(): void;
+     handleMouseMove(e: MouseEvent): void;
+     handleMouseLeave(): void;
+     handleMouseDown(): void;
+     handleMouseUp(): void;
+     updateConfig(newConfig: Partial<TextToParticleOptions>): void;
+     _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
+     destroy(): void;
+    }
+    export { TextToParticle as MasonEffect }
+    export { TextToParticle }
+    export default TextToParticle;
+
+    declare interface TextToParticleOptions {
+        text?: string;
+        densityStep?: number;
+        maxParticles?: number;
+        pointSize?: number;
+        ease?: number;
+        repelRadius?: number;
+        repelStrength?: number;
+        particleColor?: string;
+        fontFamily?: string;
+        fontSize?: number | null;
+        width?: number | null;
+        height?: number | null;
+        devicePixelRatio?: number | null;
+        debounceDelay?: number;
+        onReady?: (instance: TextToParticle) => void;
+        onUpdate?: (instance: TextToParticle) => void;
+    }
+    export { TextToParticleOptions as MasonEffectOptions }
+    export { TextToParticleOptions }
+
+    export declare class Typing {
+        container: HTMLElement;
+        config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
+            onUpdate: TypingOptions['onUpdate'];
+            onComplete: TypingOptions['onComplete'];
+        };
+        textUnits: string[];
+        charUnitRanges: Array<{
+            start: number;
+            end: number;
+            isHangul: boolean;
+        }>;
+        currentIndex: number;
+        displayedText: string;
+        timeoutId: ReturnType<typeof setTimeout> | null;
+        visibilityManager: VisibilityManager | null;
+        isRunning: boolean;
+        hasTriggered: boolean;
+        originalText: string;
+        constructor(container: HTMLElement | string, options: TypingOptions);
+        init(): void;
+        setupVisibilityManager(): void;
+        private buildTextFromUnits;
+        start(): void;
+        typeNext(): void;
+        stop(): void;
+        reset(): void;
+        updateDisplay(text: string): void;
+        setText(newText: string): void;
+        destroy(): void;
+    }
+
+    export declare interface TypingOptions {
+        text: string;
+        speed?: number;
+        delay?: number;
+        enabled?: boolean;
+        threshold?: number;
+        rootMargin?: string;
+        triggerOnce?: boolean;
+        showCursor?: boolean;
+        cursorChar?: string;
+        onUpdate?: (text: string) => void;
+        onComplete?: () => void;
+    }
+
+    declare class VisibilityManager {
+        private container;
+        private options;
+        private intersectionObserver;
+        private visibilityChangeHandler;
+        private isVisible;
+        private isPageVisible;
+        constructor(container: HTMLElement, options?: VisibilityManagerOptions);
+        private setupIntersectionObserver;
+        private setupPageVisibility;
+        /**
+         * 현재 요소가 화면에 보이는지 확인
+         */
+        getIsVisible(): boolean;
+        /**
+         * 옵션 업데이트
+         */
+        updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
+        /**
+         * 리소스 정리
+         */
+        destroy(): void;
+    }
+
+    /**
+     * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
+     * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
+     */
+    declare interface VisibilityManagerOptions {
+        threshold?: number;
+        rootMargin?: string;
+        onVisible?: () => void;
+        onHidden?: () => void;
+    }
+
+    export { }