masoneffect 1.0.28 → 1.0.29

package/README.md

@@ -1,8 +1,8 @@
 # MasonEffect ![npm](https://img.shields.io/npm/dy/masoneffect)
 
-**Release version 1.0.28**
+**Release version 1.0.29**
 
-A library that provides particle morphing effects. It can be used with React, Vue, and vanilla JavaScript.
+A library that provides particle morphing effects. It can be used with React, Vue, Svelte, and vanilla JavaScript.
 
 ## Installation
 
@@ -47,7 +47,7 @@ effect.scatter();
 #### Using CDN (UMD)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.28/dist/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/masoneffect@1.0.29/dist/index.umd.min.js"></script>
 <script>
   const container = document.getElementById('my-container');
   const effect = new MasonEffect(container, {
@@ -192,17 +192,19 @@ const onReady = (instance) => {
 ### Svelte
 
 ```svelte
-<script>
+<script lang="ts">
   import MasonEffect from 'masoneffect/svelte';
-  import { createEventDispatcher } from 'svelte';
+  import type { MasonEffect as MasonEffectType } from 'masoneffect';
 
-  let effectRef;
+  let effectRef: MasonEffect | null = null;
 
   const handleMorph = () => {
+    // Change text
     effectRef?.morph({ text: 'Morphed!' });
   };
 
   const handleScatter = () => {
+    // Return particles to initial position
     effectRef?.scatter();
   };
 
@@ -212,28 +214,41 @@ const onReady = (instance) => {
     effectRef?.morph({ text: randomText });
   };
 
-  const onReady = (instance) => {
+  const handleChangeWithOptions = () => {
+    // Change text along with other properties
+    effectRef?.morph({
+      text: 'New Text',
+      particleColor: '#ff00ff',
+      maxParticles: 3000,
+      pointSize: 1.0,
+    });
+  };
+
+  const onReady = (instance: MasonEffectType) => {
     console.log('Ready!', instance);
   };
 </script>
 
-<div style="width: 100%; height: 70vh; background: #000">
-  <MasonEffect
-    bind:this={effectRef}
-    text="Hello Svelte"
-    particleColor="#00ff88"
-    maxParticles={2000}
-    on:ready={onReady}
-  />
+<div style="width: 100%; height: 70vh; background: #000; display: flex; flex-direction: column">
+  <div style="flex: 1; position: relative; min-height: 400px">
+    <MasonEffect
+      bind:this={effectRef}
+      text="Hello Svelte"
+      particleColor="#00ff88"
+      maxParticles={2000}
+      on:ready={onReady}
+    />
+  </div>
   <div style="padding: 20px; display: flex; gap: 10px">
     <button on:click={handleMorph}>Morph</button>
     <button on:click={handleScatter}>Scatter</button>
     <button on:click={handleChangeText}>Change Text</button>
+    <button on:click={handleChangeWithOptions}>Change with Options</button>
   </div>
 </div>
 ```
 
-**Note**: In Svelte, you can access component methods using `bind:this`. The component exposes `morph()`, `scatter()`, `updateConfig()`, and `destroy()` methods.
+**Note**: In Svelte, you can access component methods using `bind:this`. The component exposes `morph()`, `scatter()`, `updateConfig()`, and `destroy()` methods. Make sure to specify an explicit size for the container.
 
 ## API
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masoneffect",
-  "version": "1.0.28",
-  "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
+  "version": "1.0.29",
+  "description": "A library that provides particle morphing effects. It can be used with React, Vue, Svelte, and vanilla JavaScript.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",