masoneffect 0.1.9 → 0.1.11

package/README.md

@@ -1,16 +1,16 @@
 # MasonEffect
 
-파티클 모핑 효과를 제공하는 라이브러리입니다. React, Vue, 그리고 바닐라 JavaScript에서 사용할 수 있습니다.
+A library that provides particle morphing effects. It can be used with React, Vue, and vanilla JavaScript.
 
-## 설치
+## Installation
 
 ```bash
 npm install masoneffect
 ```
 
-## 사용법
+## Usage
 
-### 바닐라 JavaScript
+### Vanilla JavaScript
 
 ```javascript
 import { MasonEffect } from 'masoneffect';
@@ -22,17 +22,17 @@ const effect = new MasonEffect(container, {
   maxParticles: 2000,
 });
 
-// 텍스트 변경
+// Change text
 effect.morph('New Text');
 
-// 텍스트와 함께 다른 속성도 변경
+// Change text along with other properties
 effect.morph({
   text: 'New Text',
   particleColor: '#ff00ff',
   maxParticles: 3000,
 });
 
-// 파티클을 중앙에서 방사형으로 흩어지기
+// Return particles to initial position
 effect.scatter();
 ```
 
@@ -78,7 +78,7 @@ function App() {
 }
 ```
 
-**⚠️ 주의**: React 컴포넌트 사용 시 컨테이너에 명시적인 크기를 지정해야 합니다. 자세한 내용은 [React 문제 해결 가이드](./REACT_TROUBLESHOOTING.md)를 참고하세요.
+**⚠️ Note**: When using the React component, you must specify an explicit size for the container. For more details, see the [React Troubleshooting Guide](./REACT_TROUBLESHOOTING.md).
 
 ### Vue 3
 
@@ -93,6 +93,7 @@ function App() {
       @ready="onReady"
     />
     <button @click="handleMorph">Morph</button>
+    <button @click="handleMorphWithOptions">Morph with Options</button>
     <button @click="handleScatter">Scatter</button>
   </div>
 </template>
@@ -107,6 +108,14 @@ const handleMorph = () => {
   effectRef.value?.morph('New Text');
 };
 
+const handleMorphWithOptions = () => {
+  effectRef.value?.morph({
+    text: 'Hello',
+    particleColor: '#ff00ff',
+    maxParticles: 3000,
+  });
+};
+
 const handleScatter = () => {
   effectRef.value?.scatter();
 };
@@ -119,37 +128,37 @@ const onReady = (instance) => {
 
 ## API
 
-### 옵션
-
-| 옵션 | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `text` | `string` | `'mason effect'` | 표시할 텍스트 |
-| `densityStep` | `number` | `2` | 파티클 샘플링 밀도 (작을수록 촘촘함) |
-| `maxParticles` | `number` | `3200` | 최대 파티클 수 |
-| `pointSize` | `number` | `0.5` | 파티클 점 크기 |
-| `ease` | `number` | `0.05` | 이동 가속도 |
-| `repelRadius` | `number` | `150` | 마우스 반발 범위 |
-| `repelStrength` | `number` | `1` | 마우스 반발 세기 |
-| `particleColor` | `string` | `'#fff'` | 파티클 색상 |
-| `fontFamily` | `string` | `'Inter, system-ui, Arial'` | 폰트 패밀리 |
-| `fontSize` | `number \| null` | `null` | 폰트 크기 (null이면 자동) |
-| `width` | `number \| null` | `null` | 캔버스 너비 (null이면 컨테이너 크기) |
-| `height` | `number \| null` | `null` | 캔버스 높이 (null이면 컨테이너 크기) |
-| `devicePixelRatio` | `number \| null` | `null` | 디바이스 픽셀 비율 (null이면 자동) |
-| `onReady` | `function` | `null` | 초기화 완료 콜백 |
-| `onUpdate` | `function` | `null` | 업데이트 콜백 |
-
-### 메서드
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `text` | `string` | `'mason effect'` | Text to display |
+| `densityStep` | `number` | `2` | Particle sampling density (smaller = denser) |
+| `maxParticles` | `number` | `3200` | Maximum number of particles |
+| `pointSize` | `number` | `0.5` | Particle point size |
+| `ease` | `number` | `0.05` | Movement acceleration |
+| `repelRadius` | `number` | `150` | Mouse repel radius |
+| `repelStrength` | `number` | `1` | Mouse repel strength |
+| `particleColor` | `string` | `'#fff'` | Particle color |
+| `fontFamily` | `string` | `'Inter, system-ui, Arial'` | Font family |
+| `fontSize` | `number \| null` | `null` | Font size (auto if null) |
+| `width` | `number \| null` | `null` | Canvas width (container size if null) |
+| `height` | `number \| null` | `null` | Canvas height (container size if null) |
+| `devicePixelRatio` | `number \| null` | `null` | Device pixel ratio (auto if null) |
+| `onReady` | `function` | `null` | Initialization complete callback |
+| `onUpdate` | `function` | `null` | Update callback |
+
+### Methods
 
 #### `morph(textOrOptions?: string | Partial<MasonEffectOptions>)`
-텍스트 형태로 파티클을 모핑합니다.
+Morphs particles into text form.
 
-**문자열 사용:**
+**Using string:**
 ```javascript
 effect.morph('New Text');
 ```
 
-**객체 사용 (텍스트와 함께 다른 속성도 변경):**
+**Using object (change text along with other properties):**
 ```javascript
 effect.morph({
   text: 'New Text',
@@ -161,51 +170,51 @@ effect.morph({
 ```
 
 #### `scatter()`
-파티클을 중앙에서 방사형으로 흩어지게 합니다. 캔버스 중앙을 기준으로 원형으로 퍼집니다.
+Returns particles to their initial position. Each particle returns to the position where it was first created.
 
 #### `updateConfig(config: Partial<MasonEffectOptions>)`
-설정을 업데이트합니다.
+Updates the configuration.
 
 #### `destroy()`
-인스턴스를 파괴하고 리소스를 정리합니다.
+Destroys the instance and cleans up resources.
 
-## 특징
+## Features
 
-- 🎨 텍스트를 파티클로 변환하는 모핑 효과
-- 🖱️ 마우스 인터랙션 지원 (반발/흡입)
-- 📱 반응형 디자인
-- ⚡ 고성능 Canvas 렌더링
-- 🔧 React, Vue, 바닐라 JS 모두 지원
-- 🎯 TypeScript 타입 정의 포함
-- 💾 프로덕션 빌드 시 자동 난독화 및 최적화
-- 🎯 중앙에서 방사형으로 퍼지는 scatter 효과
+- 🎨 Morphing effect that converts text into particles
+- 🖱️ Mouse interaction support (repel/attract)
+- 📱 Responsive design
+- ⚡ High-performance Canvas rendering
+- 🔧 Supports React, Vue, and vanilla JS
+- 🎯 Includes TypeScript type definitions
+- 💾 Automatic obfuscation and optimization in production builds
+- 🔄 Scatter effect that returns to initial position
 
-## 개발
+## Development
 
 ```bash
-# 의존성 설치
+# Install dependencies
 npm install
 
-# 개발 모드 (watch)
+# Development mode (watch)
 npm run dev
 
-# 빌드 (프로덕션용 min 파일 생성)
+# Build (generate production min files)
 npm run build
 
-# 예제 테스트 서버
+# Example test server
 npm run serve
 ```
 
-## 빌드 결과물
+## Build Output
 
-빌드를 실행하면 다음 파일들이 생성됩니다:
+Running the build will generate the following files:
 
-- **개발용**: `dist/index.js`, `dist/index.esm.js` (소스맵 포함)
-- **프로덕션용**: `dist/index.min.js`, `dist/index.esm.min.js` (난독화 및 최적화)
-- **React 컴포넌트**: `dist/react/MasonEffect.min.js` (난독화)
+- **Development**: `dist/index.js`, `dist/index.esm.js` (with source maps)
+- **Production**: `dist/index.min.js`, `dist/index.esm.min.js` (obfuscated and optimized)
+- **React component**: `dist/react/MasonEffect.min.js` (obfuscated)
 
-npm으로 설치하면 자동으로 min 파일이 사용됩니다. 자세한 내용은 [빌드 가이드](./BUILD.md)를 참고하세요.
+When installed via npm, min files are automatically used. For more details, see the [Build Guide](./BUILD.md).
 
-## 라이선스
+## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
   "main": "dist/index.min.js",
   "module": "dist/index.esm.min.js",
@@ -47,7 +47,7 @@
     "type": "git",
     "url": "https://github.com/fe-hyunsu/masoneffect.git"
   },
-  "homepage": "https://github.com/fe-hyunsu/masoneffect#readme",
+  "homepage": "https://masoneffect.com",
   "bugs": {
     "url": "https://github.com/fe-hyunsu/masoneffect/issues"
   },