masoneffect 0.1.0

package/src/core/index.js

@@ -0,0 +1,319 @@
+/**
+ * MasonEffect - 파티클 모핑 효과 라이브러리
+ * 바닐라 JS 코어 클래스
+ */
+
+export 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 crawler',
+      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, // null이면 자동 계산
+      width: options.width || null, // null이면 컨테이너 크기
+      height: options.height || null, // null이면 컨테이너 크기
+      devicePixelRatio: options.devicePixelRatio ?? null, // null이면 자동
+      onReady: options.onReady || null,
+      onUpdate: options.onUpdate || null,
+    };
+
+    // 캔버스 생성
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    this.container.appendChild(this.canvas);
+    this.canvas.style.display = 'block';
+
+    // 오프스크린 캔버스 (텍스트 렌더링용)
+    this.offCanvas = document.createElement('canvas');
+    this.offCtx = this.offCanvas.getContext('2d');
+
+    // 상태
+    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.handleResize = this.handleResize.bind(this);
+    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.init();
+  }
+
+  init() {
+    this.resize();
+    this.setupEventListeners();
+    this.start();
+    
+    if (this.config.onReady) {
+      this.config.onReady(this);
+    }
+  }
+
+  resize() {
+    const width = this.config.width || this.container.clientWidth || window.innerWidth;
+    const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
+    
+    this.W = Math.floor(width * this.DPR);
+    this.H = Math.floor(height * this.DPR);
+    
+    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() {
+    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 m = 0.12;
+    const sx = (m + Math.random() * (1 - 2 * m)) * this.W;
+    const sy = (m + Math.random() * (1 - 2 * m)) * this.H;
+    return {
+      x: sx,
+      y: sy,
+      vx: 0,
+      vy: 0,
+      tx: sx,
+      ty: sy,
+      j: Math.random() * Math.PI * 2,
+    };
+  }
+
+  initParticles() {
+    for (const p of this.particles) {
+      p.x = (0.12 + Math.random() * 1.76) * this.W;
+      p.y = (0.12 + Math.random() * 1.76) * this.H;
+      p.vx = p.vy = 0;
+    }
+  }
+
+  scatter() {
+    for (const p of this.particles) {
+      p.tx = (0.12 + Math.random() * 1.76) * this.W;
+      p.ty = (0.12 + Math.random() * 1.76) * this.H;
+    }
+  }
+
+  morph(text = null) {
+    if (text) {
+      this.config.text = text;
+    }
+    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.config = { ...this.config, ...newConfig };
+    if (newConfig.text) {
+      this.buildTargets();
+    }
+  }
+
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    this.removeEventListeners();
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
+  }
+}
+
+// 기본 export
+export default MasonEffect;
+

package/src/index.js

@@ -0,0 +1,7 @@
+/**
+ * MasonEffect - 메인 엔트리 포인트
+ */
+
+export { MasonEffect } from './core/index.js';
+export { default } from './core/index.js';
+

package/src/react/MasonEffect.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { MasonEffect } from '../core/index.js';
+
+export interface MasonEffectOptions {
+  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;
+  onReady?: (instance: MasonEffect) => void;
+  onUpdate?: (instance: MasonEffect) => void;
+}
+
+export interface MasonEffectRef {
+  morph: (text?: string) => void;
+  scatter: () => void;
+  updateConfig: (config: Partial<MasonEffectOptions>) => void;
+  destroy: () => void;
+}
+
+interface MasonEffectProps extends MasonEffectOptions {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const MasonEffectComponent = forwardRef<MasonEffectRef, MasonEffectProps>(
+  (props, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const instanceRef = useRef<MasonEffect | null>(null);
+
+    useEffect(() => {
+      if (!containerRef.current) return;
+
+      const {
+        className,
+        style,
+        text,
+        densityStep,
+        maxParticles,
+        pointSize,
+        ease,
+        repelRadius,
+        repelStrength,
+        particleColor,
+        fontFamily,
+        fontSize,
+        width,
+        height,
+        devicePixelRatio,
+        onReady,
+        onUpdate,
+      } = props;
+
+      const options: MasonEffectOptions = {
+        text,
+        densityStep,
+        maxParticles,
+        pointSize,
+        ease,
+        repelRadius,
+        repelStrength,
+        particleColor,
+        fontFamily,
+        fontSize,
+        width,
+        height,
+        devicePixelRatio,
+        onReady,
+        onUpdate,
+      };
+
+      instanceRef.current = new MasonEffect(containerRef.current, options);
+
+      return () => {
+        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: (text?: string) => {
+        instanceRef.current?.morph(text);
+      },
+      scatter: () => {
+        instanceRef.current?.scatter();
+      },
+      updateConfig: (config: Partial<MasonEffectOptions>) => {
+        instanceRef.current?.updateConfig(config);
+      },
+      destroy: () => {
+        instanceRef.current?.destroy();
+        instanceRef.current = null;
+      },
+    }));
+
+    return (
+      <div
+        ref={containerRef}
+        className={props.className}
+        style={props.style}
+      />
+    );
+  }
+);
+
+MasonEffectComponent.displayName = 'MasonEffect';
+
+export default MasonEffectComponent;
+

package/src/react/index.js

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

package/src/vue/MasonEffect.vue

@@ -0,0 +1,190 @@
+<template>
+  <div ref="container" :class="className" :style="style"></div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { MasonEffect } from '../core/index.js';
+
+export default defineComponent({
+  name: 'MasonEffect',
+  props: {
+    text: {
+      type: String,
+      default: 'mason crawler',
+    },
+    densityStep: {
+      type: Number,
+      default: 2,
+    },
+    maxParticles: {
+      type: Number,
+      default: 3200,
+    },
+    pointSize: {
+      type: Number,
+      default: 0.5,
+    },
+    ease: {
+      type: Number,
+      default: 0.05,
+    },
+    repelRadius: {
+      type: Number,
+      default: 150,
+    },
+    repelStrength: {
+      type: Number,
+      default: 1,
+    },
+    particleColor: {
+      type: String,
+      default: '#fff',
+    },
+    fontFamily: {
+      type: String,
+      default: 'Inter, system-ui, Arial',
+    },
+    fontSize: {
+      type: Number,
+      default: null,
+    },
+    width: {
+      type: Number,
+      default: null,
+    },
+    height: {
+      type: Number,
+      default: null,
+    },
+    devicePixelRatio: {
+      type: Number,
+      default: null,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+    onReady: {
+      type: Function,
+      default: null,
+    },
+    onUpdate: {
+      type: Function,
+      default: null,
+    },
+  },
+  emits: ['ready', 'update'],
+  setup(props, { expose, 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 MasonEffect(container.value, options);
+    };
+
+    // props 변경 감지
+    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: (text) => {
+        if (instance) instance.morph(text);
+      },
+      scatter: () => {
+        if (instance) instance.scatter();
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      },
+    });
+
+    return {
+      container,
+    };
+  },
+});
+</script>
+