masoneffect 2.0.12 → 2.0.14

package/dist/vue/textSpin/index.mjs

@@ -0,0 +1,420 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      // 기본값은 null (viewport 기준)
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin,
+        root: this.options.root || null
+        // null이면 viewport 기준, HTMLElement면 해당 요소 기준
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
+class TextSpin {
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    if (!options.text) {
+      throw new Error("Text is required");
+    }
+    this.config = {
+      text: options.text,
+      delay: options.delay ?? 0.2,
+      duration: options.duration ?? 0.6,
+      randomDelay: options.randomDelay ?? 2,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.textElements = [];
+    this.randomPoints = [];
+    this.hasTriggered = false;
+    this.isActive = false;
+    this.init();
+  }
+  init() {
+    this.injectStyles();
+    this.createTextStructure();
+    this.setupVisibilityManager();
+  }
+  injectStyles() {
+    if (document.getElementById("masoneffect-textspin-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "masoneffect-textspin-styles";
+    style.textContent = `
+      .masoneffect-textspin {
+        display: inline-block;
+      }
+      .masoneffect-textspin-char {
+        display: inline-block;
+        opacity: 0;
+        transform: rotateY(90deg);
+      }
+      .masoneffect-textspin-char.active {
+        opacity: 1;
+        transform: rotateY(0deg);
+      }
+      .masoneffect-textspin-char.space {
+        width: 0.25em;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  createTextStructure() {
+    this.container.innerHTML = "";
+    this.textElements = [];
+    this.randomPoints = [];
+    const chars = this.config.text.split("");
+    chars.forEach(() => {
+      this.randomPoints.push(Math.random());
+    });
+    chars.forEach((char, index) => {
+      const charElement = document.createElement("span");
+      charElement.className = "masoneffect-textspin-char";
+      charElement.style.transition = `opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`;
+      if (char === " ") {
+        charElement.classList.add("space");
+        charElement.innerHTML = " ";
+      } else {
+        charElement.textContent = char;
+      }
+      this.container.appendChild(charElement);
+      this.textElements.push(charElement);
+    });
+    this.container.classList.add("masoneffect-textspin");
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      root: this.config.root,
+      onVisible: () => {
+        if (this.config.enabled) {
+          if (!this.config.triggerOnce || !this.hasTriggered) {
+            this.hasTriggered = true;
+            this.start();
+          }
+        }
+      },
+      onHidden: () => {
+        if (this.config.enabled) {
+          this.stop();
+          if (!this.config.triggerOnce) {
+            this.hasTriggered = false;
+          }
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.textElements.forEach((element, index) => {
+      const delay = this.config.delay + this.randomPoints[index] * this.config.randomDelay;
+      element.style.transitionDelay = `${delay}s`;
+      requestAnimationFrame(() => {
+        element.classList.add("active");
+      });
+    });
+    const maxDelay = this.config.delay + this.config.randomDelay + this.config.duration;
+    setTimeout(() => {
+      if (this.config.onComplete) {
+        this.config.onComplete();
+      }
+    }, maxDelay * 1e3);
+  }
+  stop() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.textElements.forEach((element) => {
+      element.classList.remove("active");
+      element.style.transitionDelay = "";
+    });
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+  }
+  // 텍스트 업데이트
+  updateText(newText) {
+    this.config.text = newText;
+    this.createTextStructure();
+    if (this.isActive) {
+      this.start();
+    }
+  }
+  // 모든 문자 요소의 transition 업데이트
+  updateTransitions() {
+    this.textElements.forEach((element) => {
+      element.style.transition = `opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`;
+    });
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasActive = this.isActive;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      text: newConfig.text ?? this.config.text,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.text !== void 0) {
+      this.createTextStructure();
+    } else if (newConfig.duration !== void 0) {
+      this.updateTransitions();
+    }
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0 || newConfig.root !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasActive && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.innerHTML = "";
+    this.container.classList.remove("masoneffect-textspin");
+  }
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextSpin",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    onStart: { type: Function, default: null },
+    onComplete: { type: Function, default: null },
+    text: { default: "" },
+    delay: { default: 0.2 },
+    duration: { default: 0.6 },
+    randomDelay: { default: 2 },
+    threshold: { default: 0.1 },
+    rootMargin: { default: "0px" },
+    root: { default: null },
+    triggerOnce: { type: Boolean, default: false },
+    enabled: { type: Boolean, default: true }
+  },
+  emits: ["start", "complete"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const container = ref(null);
+    let instance = null;
+    const init = () => {
+      if (!container.value) return;
+      const options = {
+        text: props.text,
+        delay: props.delay,
+        duration: props.duration,
+        randomDelay: props.randomDelay,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        root: props.root,
+        triggerOnce: props.triggerOnce,
+        enabled: props.enabled,
+        onStart: () => {
+          if (props.onStart) props.onStart();
+          emit("start");
+        },
+        onComplete: () => {
+          if (props.onComplete) props.onComplete();
+          emit("complete");
+        }
+      };
+      instance = new TextSpin(container.value, options);
+    };
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    watch(
+      () => [
+        props.text,
+        props.delay,
+        props.duration,
+        props.randomDelay,
+        props.threshold,
+        props.rootMargin,
+        props.root,
+        props.triggerOnce,
+        props.enabled,
+        props.onStart,
+        props.onComplete
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            text: props.text,
+            delay: props.delay,
+            duration: props.duration,
+            randomDelay: props.randomDelay,
+            threshold: props.threshold,
+            rootMargin: props.rootMargin,
+            root: props.root,
+            triggerOnce: props.triggerOnce,
+            enabled: props.enabled,
+            onStart: props.onStart || void 0,
+            onComplete: props.onComplete || void 0
+          });
+        }
+      },
+      { deep: true }
+    );
+    __expose({
+      start: () => {
+        if (instance) instance.start();
+      },
+      stop: () => {
+        if (instance) instance.stop();
+      },
+      reset: () => {
+        if (instance) instance.reset();
+      },
+      updateText: (text) => {
+        if (instance) instance.updateText(text);
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, null, 6);
+    };
+  }
+});
+export {
+  TextSpin,
+  _sfc_main as default
+};

package/dist/vue/textToParticle/index.d.ts

@@ -98,6 +98,46 @@ export declare interface ScrollFadeInOptions {
     onComplete?: () => void;
 }
 
+export declare class TextSpin {
+    container: HTMLElement;
+    config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
+        onStart: TextSpinOptions['onStart'];
+        onComplete: TextSpinOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    textElements: HTMLElement[];
+    randomPoints: number[];
+    hasTriggered: boolean;
+    isActive: boolean;
+    constructor(container: HTMLElement | string, options: TextSpinOptions);
+    init(): void;
+    injectStyles(): void;
+    createTextStructure(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateText(newText: string): void;
+    updateTransitions(): void;
+    updateConfig(newConfig: Partial<TextSpinOptions>): void;
+    destroy(): void;
+}
+
+export declare interface TextSpinOptions {
+    text: string;
+    delay?: number;
+    duration?: number;
+    randomDelay?: number;
+    threshold?: number;
+    rootMargin?: string;
+    root?: HTMLElement | null;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/dist/vue/typing/index.d.ts

@@ -98,6 +98,46 @@ export declare interface ScrollFadeInOptions {
     onComplete?: () => void;
 }
 
+export declare class TextSpin {
+    container: HTMLElement;
+    config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
+        onStart: TextSpinOptions['onStart'];
+        onComplete: TextSpinOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    textElements: HTMLElement[];
+    randomPoints: number[];
+    hasTriggered: boolean;
+    isActive: boolean;
+    constructor(container: HTMLElement | string, options: TextSpinOptions);
+    init(): void;
+    injectStyles(): void;
+    createTextStructure(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateText(newText: string): void;
+    updateTransitions(): void;
+    updateConfig(newConfig: Partial<TextSpinOptions>): void;
+    destroy(): void;
+}
+
+export declare interface TextSpinOptions {
+    text: string;
+    delay?: number;
+    duration?: number;
+    randomDelay?: number;
+    threshold?: number;
+    rootMargin?: string;
+    root?: HTMLElement | null;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -31,6 +31,11 @@
       "require": "./dist/scrollFadeIn/index.cjs",
       "types": "./dist/scrollFadeIn/index.d.ts"
     },
+    "./textSpin": {
+      "import": "./dist/textSpin/index.mjs",
+      "require": "./dist/textSpin/index.cjs",
+      "types": "./dist/textSpin/index.d.ts"
+    },
     "./react": {
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs",
@@ -56,6 +61,11 @@
       "require": "./dist/react/scrollFadeIn/index.cjs",
       "types": "./dist/react/scrollFadeIn/index.d.ts"
     },
+    "./react/textSpin": {
+      "import": "./dist/react/textSpin/index.mjs",
+      "require": "./dist/react/textSpin/index.cjs",
+      "types": "./dist/react/textSpin/index.d.ts"
+    },
     "./vue": {
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
@@ -81,6 +91,11 @@
       "require": "./dist/vue/scrollFadeIn/index.cjs",
       "types": "./dist/vue/scrollFadeIn/index.d.ts"
     },
+    "./vue/textSpin": {
+      "import": "./dist/vue/textSpin/index.mjs",
+      "require": "./dist/vue/textSpin/index.cjs",
+      "types": "./dist/vue/textSpin/index.d.ts"
+    },
     "./svelte": {
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
@@ -105,23 +120,30 @@
       "import": "./dist/svelte/scrollFadeIn/index.mjs",
       "require": "./dist/svelte/scrollFadeIn/index.cjs",
       "types": "./dist/svelte/scrollFadeIn/index.d.ts"
+    },
+    "./svelte/textSpin": {
+      "import": "./dist/svelte/textSpin/index.mjs",
+      "require": "./dist/svelte/textSpin/index.cjs",
+      "types": "./dist/svelte/textSpin/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:vue:textSpin && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && npm run build:svelte:textSpin && node scripts/generate-react-types.js",
     "build:vue": "vite build --config vite.config.vue.mjs",
     "build:vue:textToParticle": "vite build --config vite.config.vue.textToParticle.mjs",
     "build:vue:count": "vite build --config vite.config.vue.count.mjs",
     "build:vue:typing": "vite build --config vite.config.vue.typing.mjs",
     "build:vue:scrollFadeIn": "vite build --config vite.config.vue.scrollFadeIn.mjs",
+    "build:vue:textSpin": "vite build --config vite.config.vue.textSpin.mjs",
     "build:svelte": "vite build --config vite.config.svelte.mjs",
     "build:svelte:textToParticle": "vite build --config vite.config.svelte.textToParticle.mjs",
     "build:svelte:count": "vite build --config vite.config.svelte.count.mjs",
     "build:svelte:typing": "vite build --config vite.config.svelte.typing.mjs",
     "build:svelte:scrollFadeIn": "vite build --config vite.config.svelte.scrollFadeIn.mjs",
+    "build:svelte:textSpin": "vite build --config vite.config.svelte.textSpin.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -136,6 +158,8 @@
     "count",
     "scroll-fade-in",
     "scroll-reveal",
+    "text-spin",
+    "text-animation",
     "canvas",
     "react",
     "vue",