masoneffect 1.0.29 → 2.0.1

package/dist/vue/textToParticle/index.mjs

@@ -0,0 +1,554 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+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 TextToParticle {
+  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", { willReadFrequently: true });
+    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", { willReadFrequently: true });
+    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;
+    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);
+    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() {
+    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);
+    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";
+    if (this.W > 0 && this.H > 0) {
+      this.buildTargets();
+      if (!this.particles.length) {
+        this.initParticles();
+      }
+    }
+  }
+  /**
+   * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+   * @param fontSize 확인할 폰트 크기
+   * @param text 텍스트 (\n으로 줄바꿈 구분)
+   * @param maxWidth 최대 너비
+   * @param maxHeight 최대 높이
+   * @returns { width: number, height: number, fits: boolean }
+   */
+  measureTextFit(fontSize, text, maxWidth, maxHeight) {
+    this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+    const lines = text.split("\n");
+    const lineHeight = fontSize;
+    const lineSpacing = fontSize * 0.1;
+    const spacing = fontSize * 0.05;
+    let maxLineWidth = 0;
+    for (const line of lines) {
+      if (line.length === 0) continue;
+      const textWidth = this.offCtx.measureText(line).width;
+      const totalWidth = textWidth + spacing * (line.length > 0 ? line.length - 1 : 0);
+      maxLineWidth = Math.max(maxLineWidth, totalWidth);
+    }
+    const totalHeight = lines.length > 0 ? lineHeight * lines.length + lineSpacing * (lines.length - 1) : lineHeight;
+    return {
+      width: maxLineWidth,
+      height: totalHeight,
+      fits: maxLineWidth <= maxWidth && totalHeight <= maxHeight
+    };
+  }
+  /**
+   * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+   * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+   */
+  findOptimalFontSize(text, maxWidth, maxHeight, initialFontSize) {
+    const minFontSize = 12;
+    const initialMeasure = this.measureTextFit(initialFontSize, text, maxWidth, maxHeight);
+    if (initialMeasure.fits) {
+      return initialFontSize;
+    }
+    if (initialFontSize <= minFontSize) {
+      return minFontSize;
+    }
+    let low = minFontSize;
+    let high = initialFontSize;
+    let bestSize = minFontSize;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const measure = this.measureTextFit(mid, text, maxWidth, maxHeight);
+      if (measure.fits) {
+        bestSize = mid;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    return bestSize;
+  }
+  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 initialFontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
+    const padding = 40;
+    const maxWidth = this.W - padding * 2;
+    const maxHeight = this.H - padding * 2;
+    const fontSize = this.findOptimalFontSize(text, maxWidth, maxHeight, initialFontSize);
+    this.offCtx.fillStyle = "#ffffff";
+    this.offCtx.textAlign = "center";
+    this.offCtx.textBaseline = "middle";
+    this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+    const lines = text.split("\n");
+    const lineHeight = fontSize;
+    const lineSpacing = fontSize * 0.1;
+    const spacing = fontSize * 0.05;
+    const totalTextHeight = lines.length > 0 ? lineHeight * lines.length + lineSpacing * (lines.length - 1) : lineHeight;
+    let startY = this.H / 2 - totalTextHeight / 2 + lineHeight / 2;
+    for (const line of lines) {
+      if (line.length === 0) {
+        startY += lineHeight + lineSpacing;
+        continue;
+      }
+      const chars = line.split("");
+      const totalWidth = this.offCtx.measureText(line).width + spacing * (chars.length > 0 ? chars.length - 1 : 0);
+      let x = this.W / 2 - totalWidth / 2;
+      for (const ch of chars) {
+        this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, startY);
+        x += this.offCtx.measureText(ch).width + spacing;
+      }
+      startY += lineHeight + lineSpacing;
+    }
+    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;
+      p.initialX = sx;
+      p.initialY = sy;
+    }
+  }
+  scatter() {
+    for (const p of this.particles) {
+      if (p.initialX !== void 0 && p.initialY !== void 0) {
+        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) {
+    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 !== void 0;
+      this.config = { ...this.config, ...textOrOptions };
+      if (needsRebuild) {
+        this.buildTargets();
+      }
+    } else {
+      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 r2 = this.config.repelRadius * this.DPR;
+        if (d2 < r2 * r2) {
+          const d = Math.sqrt(d2) + 1e-4;
+          const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r2);
+          ax += dx / d * f * 6;
+          ay += dy / d * f * 6;
+        }
+      }
+      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 _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextToParticle",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    text: { default: "mason effect" },
+    densityStep: { default: 2 },
+    maxParticles: { default: 3200 },
+    pointSize: { default: 0.5 },
+    ease: { default: 0.05 },
+    repelRadius: { default: 150 },
+    repelStrength: { default: 1 },
+    particleColor: { default: "#fff" },
+    fontFamily: { default: "Inter, system-ui, Arial" },
+    fontSize: { default: null },
+    width: { default: null },
+    height: { default: null },
+    devicePixelRatio: { default: null },
+    debounceDelay: {},
+    onReady: { type: Function, default: null },
+    onUpdate: { type: Function, default: null }
+  },
+  emits: ["ready", "update"],
+  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,
+        densityStep: props.densityStep,
+        maxParticles: props.maxParticles,
+        pointSize: props.pointSize,
+        ease: props.ease,
+        repelRadius: props.repelRadius,
+        repelStrength: props.repelStrength,
+        particleColor: props.particleColor,
+        fontFamily: props.fontFamily,
+        fontSize: props.fontSize,
+        width: props.width,
+        height: props.height,
+        devicePixelRatio: props.devicePixelRatio,
+        onReady: (inst) => {
+          if (props.onReady) props.onReady(inst);
+          emit("ready", inst);
+        },
+        onUpdate: (inst) => {
+          if (props.onUpdate) props.onUpdate(inst);
+          emit("update", inst);
+        }
+      };
+      instance = new TextToParticle(container.value, options);
+    };
+    watch(
+      () => [
+        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
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            text: props.text,
+            densityStep: props.densityStep,
+            maxParticles: props.maxParticles,
+            pointSize: props.pointSize,
+            ease: props.ease,
+            repelRadius: props.repelRadius,
+            repelStrength: props.repelStrength,
+            particleColor: props.particleColor,
+            fontFamily: props.fontFamily,
+            fontSize: props.fontSize,
+            width: props.width,
+            height: props.height,
+            devicePixelRatio: props.devicePixelRatio
+          });
+        }
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    __expose({
+      morph: (textOrOptions) => {
+        if (instance) instance.morph(textOrOptions);
+      },
+      scatter: () => {
+        if (instance) instance.scatter();
+      },
+      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 {
+  _sfc_main as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masoneffect",
-  "version": "1.0.29",
-  "description": "A library that provides particle morphing effects. It can be used with React, Vue, Svelte, and vanilla JavaScript.",
+  "version": "2.0.1",
+  "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",
   "types": "dist/index.d.ts",
@@ -11,29 +11,73 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
+    "./textToParticle": {
+      "import": "./dist/textToParticle/index.mjs",
+      "require": "./dist/textToParticle/index.cjs",
+      "types": "./dist/textToParticle/index.d.ts"
+    },
+    "./count": {
+      "import": "./dist/count/index.mjs",
+      "require": "./dist/count/index.cjs",
+      "types": "./dist/count/index.d.ts"
+    },
     "./react": {
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs",
       "types": "./dist/react/index.d.ts"
     },
+    "./react/textToParticle": {
+      "import": "./dist/react/textToParticle/index.mjs",
+      "require": "./dist/react/textToParticle/index.cjs",
+      "types": "./dist/react/textToParticle/index.d.ts"
+    },
+    "./react/count": {
+      "import": "./dist/react/count/index.mjs",
+      "require": "./dist/react/count/index.cjs",
+      "types": "./dist/react/count/index.d.ts"
+    },
     "./vue": {
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
       "types": "./dist/vue/index.d.ts"
     },
+    "./vue/textToParticle": {
+      "import": "./dist/vue/textToParticle/index.mjs",
+      "require": "./dist/vue/textToParticle/index.cjs",
+      "types": "./dist/vue/textToParticle/index.d.ts"
+    },
+    "./vue/count": {
+      "import": "./dist/vue/count/index.mjs",
+      "require": "./dist/vue/count/index.cjs",
+      "types": "./dist/vue/count/index.d.ts"
+    },
     "./svelte": {
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
       "types": "./dist/svelte/index.d.ts"
+    },
+    "./svelte/textToParticle": {
+      "import": "./dist/svelte/textToParticle/index.mjs",
+      "require": "./dist/svelte/textToParticle/index.cjs",
+      "types": "./dist/svelte/textToParticle/index.d.ts"
+    },
+    "./svelte/count": {
+      "import": "./dist/svelte/count/index.mjs",
+      "require": "./dist/svelte/count/index.cjs",
+      "types": "./dist/svelte/count/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:svelte && 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:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && 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: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",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -41,13 +85,18 @@
     "prepublishOnly": "npm run build && npm run precheck"
   },
   "keywords": [
+    "animation",
+    "effects",
     "particles",
     "morphing",
+    "count",
     "canvas",
-    "animation",
     "react",
     "vue",
-    "vanilla-js"
+    "svelte",
+    "vanilla-js",
+    "tree-shaking",
+    "typescript"
   ],
   "author": "mason.dev fe.hyunsu@gmail.com",
   "license": "MIT",