### Install MasonEffect

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Installs the MasonEffect library using npm. This command downloads and adds the package to your project's dependencies.

```bash
npm install masoneffect
```

--------------------------------

### Vanilla JS TextToParticle Effect

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Shows how to implement the TextToParticle effect using plain JavaScript. This example includes initializing the effect within a DOM element, updating the text, and cleaning up the instance.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';

const container = document.querySelector('#container');
const effect = new TextToParticle(container, {
  text: 'Hello World',
  particleColor: '#00ff88',
  fontSize: 80,
  maxParticles: 2000,
  onReady: (instance) => {
    console.log('Ready!', instance);
  },
});

// Change text
effect.morph({ text: 'New Text' });

// Cleanup
effect.destroy();
```

--------------------------------

### Vue 3 Composition API TextToParticle Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Demonstrates integrating TextToParticle within a Vue 3 application using the Composition API and `<script setup lang="ts">`. It shows how to manage the component ref and includes a function to trigger the morph effect.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { TextToParticle } from 'masoneffect/vue/textToParticle';
import type { TextToParticleRef } from 'masoneffect/vue/textToParticle';

const textRef = ref<TextToParticleRef | null>(null);

function handleMorph() {
  textRef.value?.morph({ text: 'Morphed!' });
}
</script>

<template>
  <div style="width: 100%; height: 400px; background: #000;">
    <TextToParticle
      ref="textRef"
      text="Hello World"
      particle-color="#00ff88"
      :font-size="80"
      :max-particles="2000"
    />
    <button @click="handleMorph">Morph</button>
  </div>
</template>
```

--------------------------------

### React TextToParticle Component Setup

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Demonstrates how to import and use the TextToParticle component from the MasonEffect library in a React application. It includes TypeScript type definitions and usage with `useRef`.

```typescript
// TextToParticle
import { TextToParticle } from 'masoneffect/react/textToParticle';
import type { TextToParticleRef } from 'masoneffect/react/textToParticle';

// Count
import { Count } from 'masoneffect/react/count';
import type { CountRef } from 'masoneffect/react/count';
```

```tsx
import React, { useRef } from 'react';
import { TextToParticle } from 'masoneffect/react/textToParticle';
import type { TextToParticleRef } from 'masoneffect/react/textToParticle';

function App() {
  const ref = useRef<TextToParticleRef>(null);
  
  return (
    <div style={{ width: '100%', height: '400px' }}>
      <TextToParticle
        ref={ref}
        text="Hello World"
        particleColor="#fff"
        fontSize={80}
      />
    </div>
  );
}
```

--------------------------------

### Svelte TextToParticle Effect with TypeScript

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Demonstrates how to use the TextToParticle effect in a Svelte component with TypeScript. It covers binding a reference to the effect for dynamic manipulation and basic setup with particle styling.

```svelte
<script lang="ts">
import { TextToParticle } from 'masoneffect/svelte/textToParticle';
import type { TextToParticleRef } from 'masoneffect/svelte/textToParticle';

let textRef: TextToParticleRef | null = null;

function handleMorph() {
  textRef?.morph({ text: 'Morphed!' });
}
</script>

<div style="width: 100%; height: 400px; background: #000;">
  <TextToParticle
    bind:this={textRef}
    text="Hello World"
    particleColor="#00ff88"
    fontSize={80}
    maxParticles={2000}
  />
  <button on:click={handleMorph}>Morph</button>
</div>
```

--------------------------------

### React TextToParticle Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the TextToParticle component into a React application using TypeScript. Refs are managed with `useRef`, and component props are passed directly. Includes an example of morphing text and handling the `onReady` event.

```typescript
import React, { useRef } from 'react';
import { TextToParticle } from 'masoneffect/react/textToParticle';
import type { TextToParticleRef } from 'masoneffect/react/textToParticle';

function App() {
  const ref = useRef<TextToParticleRef>(null);
  
  const handleMorph = () => {
    ref.current?.morph({ text: 'Morphed!' });
  };
  
  return (
    <div style={{ width: '100%', height: '400px', background: '#000' }}>
      <TextToParticle
        ref={ref}
        text="Hello World"
        particleColor="#00ff88"
        fontSize={80}
        maxParticles={2000}
        onReady={(instance) => {
          console.log('Ready!', instance);
        }}
      />
      <button onClick={handleMorph}>Morph</button>
    </div>
  );
}
```

--------------------------------

### Auto-Setup Function for MasonEffect Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Presents a JavaScript function `autoSetupMasonEffect` designed to automate the process of detecting project environment (framework, TypeScript, build tool) and generating the correct import path and code for MasonEffect.

```javascript
function autoSetupMasonEffect(userRequest) {
  // 1. Detect environment
  const framework = detectFramework();
  const typescript = detectTypeScript();
  const buildTool = detectBuildTool();
  
  // 2. Recommend effect
  const effect = recommendEffect(userRequest);
  
  // 3. Generate import path
  const importPath = framework === 'vanilla' 
    ? `masoneffect/${effect}`
    : `masoneffect/${framework}/${effect}`;
  
  // 4. Generate code
  const code = generateCode(framework, effect, typescript);
  
  return {
    framework,
    typescript,
    effect,
    importPath,
    code
  };
}
```

--------------------------------

### Vanilla JS Count Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the Count effect with vanilla JavaScript. It shows how to instantiate the effect and pass the target DOM element.

```javascript
import { Count } from 'masoneffect/count';

const element = document.getElementById('my-counter');
const counter = new Count(element, {
  start: 0,
  end: 100
});

// To clean up:
// counter.destroy();
```

--------------------------------

### Development Commands (Bash)

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Standard npm commands for managing the Mason Effect project. These include installing dependencies, running in development mode with watch, building for production, and serving an example.

```bash
# Install dependencies
npm install

# Development mode (watch)
npm run dev

# Build (generate production files)
npm run build

# Example test server
npm run serve
```

--------------------------------

### Vanilla JS TextToParticle Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the TextToParticle effect with vanilla JavaScript. It demonstrates instantiation using the `new` keyword and passing a DOM element as the first argument.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';

const element = document.getElementById('my-text-element');
const textParticle = new TextToParticle(element);

// To clean up:
// textParticle.destroy();
```

--------------------------------

### MasonEffect Tree-Shaking and Import Paths

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Highlights the importance of using direct import paths for efficient tree-shaking in MasonEffect. It contrasts incorrect full imports with correct, specific imports for different frameworks and effects.

```typescript
// React
import { TextToParticle } from 'masoneffect/react/textToParticle';

// Vue
import { TextToParticle } from 'masoneffect/vue/textToParticle';

// Svelte
import { TextToParticle } from 'masoneffect/svelte/textToParticle';

// Vanilla
import { TextToParticle } from 'masoneffect/textToParticle';
```

--------------------------------

### Detect Build Tool in JavaScript Project

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Identifies the build tool (Next, Vite, Webpack, or Unknown) used in a JavaScript project by checking package.json dependencies and configuration files.

```javascript
function detectBuildTool() {
  const fs = require('fs');
  const pkg = require('./package.json');
  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
  
  if (deps.next) return 'next';
  if (fs.existsSync('./vite.config.js') || fs.existsSync('./vite.config.ts') || deps.vite) return 'vite';
  if (fs.existsSync('./webpack.config.js') || deps.webpack) return 'webpack';
  return 'unknown';
}
```

--------------------------------

### MasonEffect Vanilla JS: Morph, Scatter, and Change Text

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/vanilla.html

Demonstrates how to initialize MasonEffect and control its behavior using vanilla JavaScript. It includes examples for morphing text to a new string, scattering existing particles, and dynamically changing text content based on a predefined array. Assumes MasonEffect is loaded globally via CDN.

```javascript
const container = document.getElementById('mason-container');
const effect = new MasonEffect(container, {
  text: 'Hello World',
  particleColor: '#00ff88',
  maxParticles: 2000,
  onReady: (instance) => {
    console.log('MasonEffect ready!', instance);
  }
});

document.getElementById('morph-btn').addEventListener('click', () => {
  effect.morph({ text: 'Morphed!' });
});

document.getElementById('scatter-btn').addEventListener('click', () => {
  effect.scatter();
});

document.getElementById('change-text-btn').addEventListener('click', () => {
  const texts = ['Hello', 'World', 'Mason', 'Effect', 'Particles'];
  const randomText = texts[Math.floor(Math.random() * texts.length)];
  effect.morph({ text: randomText });
});
```

--------------------------------

### Svelte Count Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the Count component into a Svelte application. Ref binding is handled with `bind:this`. Props should be in camelCase. TypeScript is supported.

```typescript
import { Count } from 'masoneffect/svelte/count';
import type { CountRef } from 'masoneffect/svelte/count';
```

--------------------------------

### Recommend MasonEffect Effect by Keywords in JavaScript

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Recommends a MasonEffect animation effect ('textToParticle' or 'count') based on keywords found in a user's request. It defaults to 'textToParticle' if no match is found.

```javascript
function recommendEffect(userRequest) {
  const request = userRequest.toLowerCase();
  
  // TextToParticle keywords
  const textParticleKeywords = ['text', 'particle', 'morph', 'title', 'banner', 'hero', '글자', '텍스트', '파티클', '모핑'];
  if (textParticleKeywords.some(kw => request.includes(kw))) {
    return 'textToParticle';
  }
  
  // Count keywords
  const countKeywords = ['number', 'count', 'counter', 'stat', 'statistic', '숫자', '카운트', '통계'];
  if (countKeywords.some(kw => request.includes(kw))) {
    return 'count';
  }
  
  return 'textToParticle'; // default
}
```

--------------------------------

### Vanilla JavaScript TextToParticle Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the TextToParticle component using plain JavaScript. It requires importing the component and instantiating it with `new`. A DOM element must be provided as the first argument, and `destroy()` should be called for cleanup.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';

const container = document.querySelector('#container');
const effect = new TextToParticle(container, {
  text: 'Hello World',
  particleColor: '#fff',
  fontSize: 80,
});

// Change text
effect.morph({ text: 'New Text' });

// Cleanup
effect.destroy();
```

--------------------------------

### CDN Usage - UMD Example

Source: https://context7.com/fe-hyunsu/masoneffect/llms.txt

Demonstrates direct usage of MasonEffect in a browser via a UMD build from a CDN, eliminating the need for a build step. This example includes basic HTML structure, CSS for styling, and JavaScript to instantiate and control the effect.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MasonEffect CDN Example</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #000;
      color: #fff;
      font-family: system-ui, sans-serif;
    }
    #container {
      width: 100%;
      height: 70vh;
    }
    .controls {
      padding: 20px;
      text-align: center;
    }
    button {
      padding: 10px 20px;
      margin: 5px;
      background: #333;
      color: #fff;
      border: 1px solid #555;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div class="controls">
    <button onclick="morphText()">Morph</button>
    <button onclick="scatterParticles()">Scatter</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.1/dist/index.umd.min.js"></script>
  <script>
    // MasonEffect is available as a global variable
    const container = document.getElementById('container');
    const effect = new MasonEffect(container, {
      text: 'Hello World',
      particleColor: '#00ff88',
      maxParticles: 2000,
      onReady: (instance) => {
        console.log('Ready!', instance);
      }
    });

    function morphText() {
      effect.morph({ text: 'Morphed!' });
    }

    function scatterParticles() {
      effect.scatter();
    }
  </script>
</body>
</html>
```

--------------------------------

### Vue Count Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the Count effect in a Vue component. It demonstrates ref usage and importing from the correct Vue path for tree-shaking.

```typescript
import { defineComponent, ref } from 'vue';
import { Count } from 'masoneffect/vue/count';

export default defineComponent({
  setup() {
    const countRef = ref<HTMLDivElement | null>(null);
    const startValue = 0;
    const endValue = 100;

    // ... onMounted to initialize Count if needed ...

    return {
      countRef,
      startValue,
      endValue
    };
  }
});
```

--------------------------------

### Vanilla JavaScript Count Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the Count component using plain JavaScript. It requires importing the component and instantiating it with `new`. The target value, duration, and easing function are passed as options.

```javascript
import { Count } from 'masoneffect/count';
```

--------------------------------

### Detect Framework in JavaScript Project

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Detects the JavaScript framework (React, Vue, Svelte, or Vanilla) based on package.json dependencies. It prioritizes React, then Vue, then Svelte, and defaults to Vanilla if none are found.

```javascript
function detectFramework() {
  const pkg = require('./package.json');
  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
  
  if (deps.react || deps['react-dom']) return 'react';
  if (deps.vue) return 'vue';
  if (deps.svelte) return 'svelte';
  return 'vanilla';
}
```

--------------------------------

### Detect TypeScript Configuration in JavaScript Project

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Checks for TypeScript configuration in a JavaScript project by looking for a 'tsconfig.json' file or the presence of the 'typescript' package in devDependencies.

```javascript
function detectTypeScript() {
  const fs = require('fs');
  return fs.existsSync('./tsconfig.json') || 
         require('./package.json').devDependencies?.typescript;
}
```

--------------------------------

### Vanilla JS Count Animation Effect

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Illustrates the usage of the Count effect in Vanilla JavaScript for animating numerical values. It covers initialization with target value, duration, easing functions, and optional callbacks.

```javascript
import { Count } from 'masoneffect/count';
import { easingFunctions } from 'masoneffect/count';

const container = document.querySelector('#count-container');
const count = new Count(container, {
  targetValue: 1000,
  duration: 2000,
  easing: easingFunctions.easeOutCubic,
  threshold: 0.5,
  triggerOnce: true,
  onComplete: () => {
    console.log('Count animation completed!');
  },
});
```

--------------------------------

### Svelte TextToParticle Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the TextToParticle effect in a Svelte component. It uses `bind:this` for ref binding and imports the effect from the specific Svelte path for tree-shaking.

```typescript
import { TextToParticle } from 'masoneffect/svelte/textToParticle';

let textParticleRef;

// ... onMount to initialize TextToParticle if needed ...

```

--------------------------------

### Vue 3 TextToParticle Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the TextToParticle component into a Vue 3 application using the Composition API. It requires importing the component and its ref type, then using `ref()` for reactivity. Props are passed in kebab-case.

```typescript
import { TextToParticle } from 'masoneffect/vue/textToParticle';
import type { TextToParticleRef } from 'masoneffect/vue/textToParticle';
```

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { TextToParticle } from 'masoneffect/vue/textToParticle';
import type { TextToParticleRef } from 'masoneffect/vue/textToParticle';

const textRef = ref<TextToParticleRef | null>(null);
</script>

<template>
  <div style="width: 100%; height: 400px;">
    <TextToParticle
      ref="textRef"
      text="Hello World"
      particle-color="#fff"
      :font-size="80"
    />
  </div>
</template>
```

--------------------------------

### React TextToParticle Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the TextToParticle effect in a React component. It utilizes `useRef` for component references and imports the effect from the specific React path for tree-shaking.

```typescript
import React, { useRef } from 'react';
import { TextToParticle } from 'masoneffect/react/textToParticle';

function MyComponent() {
  const textParticleRef = useRef<HTMLDivElement>(null);

  // ... useEffect to initialize TextToParticle if needed ...

  return <div ref={textParticleRef}>Your Text Here</div>;
}
```

--------------------------------

### CDN Usage Example (HTML/JavaScript)

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

How to use the Mason Effect library directly from a CDN via UMD bundle. This script tag includes all effects and provides a global `MasonEffect` object.

```html
<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.1/dist/index.umd.min.js"></script>
<script>
  // TextToParticle (MasonEffect alias for backward compatibility)
  const container = document.getElementById('my-container');
  const effect = new MasonEffect(container, {
    text: 'Hello World',
    particleColor: '#00ff88',
  });
</script>
```

--------------------------------

### Vue TextToParticle Usage

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Example of using the TextToParticle effect in a Vue component. It uses `ref()` for component references and imports the effect from the specific Vue path for tree-shaking.

```typescript
import { defineComponent, ref } from 'vue';
import { TextToParticle } from 'masoneffect/vue/textToParticle';

export default defineComponent({
  setup() {
    const textParticleRef = ref<HTMLDivElement | null>(null);

    // ... onMounted to initialize TextToParticle if needed ...

    return {
      textParticleRef
    };
  }
});
```

--------------------------------

### Svelte TextToParticle Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the TextToParticle component into a Svelte application. It uses `bind:this` for ref binding and expects props in camelCase. TypeScript is supported via `<script lang="ts">`.

```typescript
import { TextToParticle } from 'masoneffect/svelte/textToParticle';
import type { TextToParticleRef } from 'masoneffect/svelte/textToParticle';
```

```svelte
<script lang="ts">
import { TextToParticle } from 'masoneffect/svelte/textToParticle';
import type { TextToParticleRef } from 'masoneffect/svelte/textToParticle';

let textRef: TextToParticleRef | null = null;
</script>

<div style="width: 100%; height: 400px;">
  <TextToParticle
    bind:this={textRef}
    text="Hello World"
    particleColor="#fff"
    fontSize={80}
  />
</div>
```

--------------------------------

### Correct Tree-Shaking Import (React)

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Demonstrates the correct way to import effects from MasonEffect to enable tree-shaking in React projects. This ensures only the necessary code is bundled, leading to smaller application sizes.

```typescript
// ✅ Correct - Tree-shaking works
import { TextToParticle } from 'masoneffect/react/textToParticle';
```

--------------------------------

### React Count Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the Count component into a React application using TypeScript. Refs are managed with `useRef`. The `targetValue`, `duration`, and `easing` function are passed as props.

```typescript
import React, { useRef } from 'react';
import { Count } from 'masoneffect/react/count';
import type { CountRef } from 'masoneffect/react/count';
import { easingFunctions } from 'masoneffect/react/count';

function App() {
  const ref = useRef<CountRef>(null);
  
  return (
    <Count
      ref={ref}
      targetValue={1000}
      duration={2000}
      easing={easingFunctions.easeOutCubic}
    />
  );
}
```

--------------------------------

### Implement Animated Count in Vue 3

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

This example shows how to integrate the 'Count' component from Mason Effect within a Vue 3 application using the Composition API and `<script setup>`. It configures the target value, duration, and easing function, and listens for `update` and `complete` events. Styling can be applied directly via the `style` attribute.

```vue
<script setup>
import Count from 'masoneffect/vue/count';
import { easingFunctions } from 'masoneffect/vue/count';
</script>

<template>
  <div>
    <Count
      :target-value="1000"
      :duration="2000"
      :easing="easingFunctions.easeOutCubic"
      @update="(value) => console.log(value)"
      @complete="() => console.log('Complete!')"
      style="font-size: 3rem; font-weight: bold"
    />
  </div>
</template>

```

--------------------------------

### Incorrect Tree-Shaking Import

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/llms.txt

Illustrates an incorrect import method that bypasses tree-shaking by importing the entire MasonEffect library. This should be avoided to maintain optimized bundle sizes.

```typescript
// ❌ Wrong - Imports all effects
import { TextToParticle } from 'masoneffect';
```

--------------------------------

### TextToParticle Animation - Svelte Component

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Shows how to use the TextToParticle animation effect within a Svelte component, utilizing `bind:this` to get a reference to the component instance for imperative control.

```svelte
<script lang="ts">
  import TextToParticle from 'masoneffect/svelte/textToParticle';

  let effectRef: TextToParticle | null = null;
</script>

<div style="width: 100%; height: 70vh; background: #000">
  <TextToParticle
    bind:this={effectRef}
    text="Hello Svelte"
    particleColor="#00ff88"
    maxParticles={2000}
  />
  <button on:click={() => effectRef?.morph({ text: 'Morphed!' }) }>
    Morph
  </button>
</div>
```

--------------------------------

### Vue 3 Count Integration

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/AI_SETUP_GUIDE.md

Integrates the Count component into a Vue 3 application using the Composition API. It requires importing the component and its ref type, along with easing functions. Refs are managed using `ref()`.

```typescript
import { Count } from 'masoneffect/vue/count';
import type { CountRef } from 'masoneffect/vue/count';
```

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Count } from 'masoneffect/vue/count';
import type { CountRef } from 'masoneffect/vue/count';
import { easingFunctions } from 'masoneffect/vue/count';

const countRef = ref<CountRef | null>(null);
</script>

<template>
  <Count
    ref="countRef"
    :target-value="1000"
    :duration="2000"
    :easing="easingFunctions.easeOutCubic"
  />
</template>
```

--------------------------------

### MasonEffect Performance Monitor Control Buttons

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/performance-test.html

Provides interactive buttons to control the MasonEffect animation and reset performance statistics. The available actions include starting and stopping the animation, morphing text, and resetting the displayed stats.

```html
<button>Start Animation</button>
<button>Stop Animation</button>
<button>Morph Text</button>
<button>Reset Stats</button>
```

--------------------------------

### Count Animation - Vanilla JavaScript

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Initializes and controls the Count animation effect in vanilla JavaScript. This effect animates a number from a start value to a target value with customizable duration and easing functions.

```javascript
import { Count, easingFunctions } from 'masoneffect/count';

const container = document.getElementById('count-container');
const count = new Count(container, {
  targetValue: 1000,
  duration: 2000,
  startValue: 0,
  easing: easingFunctions.easeOutCubic,
  onUpdate: (value) => {
    console.log(value);
  },
  onComplete: () => {
    console.log('Complete!');
  }
});

// Start animation
count.start();

// Reset
count.reset();
```

--------------------------------

### JavaScript Initialization and Event Handling for MasonEffect

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/performance-test.html

Initializes the `MasonEffect` with specified options and patches `getImageData` once the effect is ready. It also sets up event listeners for buttons to start/stop the animation, trigger morphing with random text, and reset the performance data. The `isRunning` flag controls the animation loop.

```javascript
const container = document.getElementById('canvasContainer');
instance = new MasonEffect(container, {
  text: 'Performance Test',
  maxParticles: 3200,
  densityStep: 2,
  onReady: () => {
    patchGetImageData();
    console.log('MasonEffect initialized');
  }
});

document.getElementById('startBtn').addEventListener('click', () => {
  isRunning = true;
  lastTime = performance.now();
  updateFPS();
  document.getElementById('startBtn').disabled = true;
  document.getElementById('stopBtn').disabled = false;
});

document.getElementById('stopBtn').addEventListener('click', () => {
  isRunning = false;
  document.getElementById('startBtn').disabled = false;
  document.getElementById('stopBtn').disabled = true;
});

document.getElementById('morphBtn').addEventListener('click', () => {
  const texts = [
    'Performance Test',
    '60 FPS Target',
    'Smooth Animation',
    'Optimized Rendering',
    'willReadFrequently'
  ];
  const randomText = texts[Math.floor(Math.random() * texts.length)];
  instance.morph({ text: randomText });
});

document.getElementById('resetBtn').addEventListener('click', () => {
  fpsHistory = [];
  getImageDataTime = 0;
  updateFPSChart();
  updateStats();
});

updateStats();
```

--------------------------------

### Tree-shaking Import for MasonEffect Effects

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Demonstrates the recommended way to import specific animation effects from MasonEffect, enabling tree-shaking for smaller bundle sizes. This method imports only the necessary components.

```typescript
// ✅ Recommended: Import only what you need
import { TextToParticle } from 'masoneffect/textToParticle';
import { Count } from 'masoneffect/count';
```

--------------------------------

### Legacy Import for MasonEffect Effects

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Shows the backward-compatible, but not recommended, method of importing all effects from MasonEffect. This approach may lead to larger bundle sizes due to importing unnecessary components.

```typescript
// ⚠️ Not recommended: Imports all effects
import { TextToParticle, Count } from 'masoneffect';
```

--------------------------------

### Import Specific Effects for Tree-shaking

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

This code demonstrates the recommended way to import effects from Mason Effect to leverage tree-shaking. By importing only the specific components or functions needed (e.g., `Count`), you ensure that unused code is excluded from the final bundle, resulting in smaller application size.

```typescript
// ✅ Recommended: Only imports Count (smaller bundle)
import { Count } from 'masoneffect/count';

// ❌ Not recommended: Imports all effects (larger bundle)
import { Count } from 'masoneffect';

```

--------------------------------

### Backward Compatibility Imports (TypeScript)

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Imports for backward compatibility, where the main package export can be used. While functional, the framework-specific imports are recommended for better performance.

```typescript
// Old API (still works)
import { MasonEffect } from 'masoneffect';
import MasonEffect from 'masoneffect/react';

// MasonEffect is an alias for TextToParticle
const effect = new MasonEffect(container, { text: 'Hello' });
```

--------------------------------

### TextToParticle API

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Documentation for the TextToParticle component, including its configurable options and available methods for manipulating particles.

```APIDOC
## TextToParticle API

### Description
This component allows for the creation and manipulation of particle effects based on text.

### Options

| Option | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `'mason effect'` | Text to display (use `\n` for line breaks) |
| `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-adjusts 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) |
| `debounceDelay` | `number` | `150` | Debounce delay in milliseconds |
| `onReady` | `function` | `null` | Initialization complete callback |
| `onUpdate` | `function` | `null` | Update callback |

### Methods

- `morph(textOrOptions?: string | Partial<TextToParticleOptions>)`: Morph particles into text
- `scatter()`: Return particles to initial position
- `updateConfig(config: Partial<TextToParticleOptions>)`: Update configuration
- `destroy()`: Destroy instance and cleanup
```

--------------------------------

### Implement Animated Count in React

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

This snippet demonstrates how to use the 'Count' component from Mason Effect in a React application. It utilizes `useRef` to control the animation, setting a target value, duration, and easing function. The component accepts callbacks for update and completion events, and provides methods to start and reset the animation.

```tsx
import React, { useRef } from 'react';
import Count from 'masoneffect/react/count';
import { easingFunctions } from 'masoneffect/react/count';
import type { CountRef } from 'masoneffect/react/count';

function App() {
  const countRef = useRef<CountRef>(null);

  return (
    <div>
      <Count
        ref={countRef}
        targetValue={1000}
        duration={2000}
        easing={easingFunctions.easeOutCubic}
        onUpdate={(value) => console.log(value)}
        onComplete={() => console.log('Complete!')}
        style={{ fontSize: '3rem', fontWeight: 'bold' }}
      />
      <button onClick={() => countRef.current?.reset()}>Reset</button>
      <button onClick={() => countRef.current?.start()}>Start</button>
    </div>
  );
}

```

--------------------------------

### TextToParticle Animation - Vanilla JavaScript

Source: https://context7.com/fe-hyunsu/masoneffect/llms.txt

Initializes and controls the TextToParticle animation effect in vanilla JavaScript. This effect transforms text into dynamic particle animations. It requires a container element and accepts configuration options for particles, text, and callbacks. Methods are available for morphing text, scattering particles, updating configuration, and cleanup.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';

const container = document.getElementById('hero-section');
const effect = new TextToParticle(container, {
  text: 'Welcome',
  particleColor: '#00ff88',
  maxParticles: 2000,
  pointSize: 0.5,
  ease: 0.05,
  repelRadius: 150,
  repelStrength: 1,
  fontFamily: 'Inter, system-ui, Arial',
  onReady: (instance) => {
    console.log('TextToParticle initialized', instance);
  },
  onUpdate: (instance) => {
    // Called on each animation frame
  }
});

// Morph to new text
effect.morph({ text: 'Hello World' });

// Multi-line text support
effect.morph({ text: 'Line 1\nLine 2\nLine 3' });

// Scatter particles back to initial positions
effect.scatter();

// Update configuration dynamically
effect.updateConfig({ particleColor: '#ff0088' });

// Cleanup when done
effect.destroy();
```

--------------------------------

### JavaScript Easing Functions for Count Component

Source: https://context7.com/fe-hyunsu/masoneffect/llms.txt

Demonstrates the import and usage of various easing functions (linear, quadratic, cubic) from the 'masoneffect/count' module for animating numerical counts. It shows how to apply these functions to the 'easing' option of the Count component for different animation behaviors like acceleration, deceleration, or a combination.

```javascript
import { easingFunctions } from 'masoneffect/count';

// Linear (constant speed)
easyshingFunctions.linear

// Quadratic easing
easyshingFunctions.easeInQuad      // Accelerating from zero velocity
easyshingFunctions.easeOutQuad     // Decelerating to zero velocity
easyshingFunctions.easeInOutQuad   // Acceleration until halfway, then deceleration

// Cubic easing
easyshingFunctions.easeOutCubic    // Smooth deceleration (recommended)

// Usage example
const count = new Count(container, {
  targetValue: 1000,
  duration: 2000,
  easing: easingFunctions.easeOutCubic
});
```

--------------------------------

### Count API

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Documentation for the Count component, detailing its options for numerical animations and available methods for control.

```APIDOC
## Count API

### Description
This component animates a number count from a start value to a target value over a specified duration.

### Options

| Option | Type | Default | Description |
|---|---|---|---|
| `targetValue` | `number` | **required** | Target number to count to |
| `duration` | `number` | `2000` | Animation duration in milliseconds |
| `startValue` | `number` | `0` | Starting number |
| `enabled` | `boolean` | `true` | Enable/disable animation |
| `easing` | `function` | `linear` | Easing function |
| `threshold` | `number` | `0.2` | IntersectionObserver threshold |
| `rootMargin` | `string` | `'0px 0px -100px 0px'` | IntersectionObserver rootMargin |
| `triggerOnce` | `boolean` | `false` | Trigger animation only once |
| `onUpdate` | `function` | `null` | Update callback (receives current value) |
| `onComplete` | `function` | `null` | Animation complete callback |

### Methods

- `start()`: Start animation
- `stop()`: Stop animation
- `reset()`: Reset to start value
- `getValue()`: Get current value
- `updateConfig(config: Partial<CountOptions>)`: Update configuration
- `destroy()`: Destroy instance and cleanup

### Easing Functions

```typescript
import { easingFunctions } from 'masoneffect/count';

// Available easing functions:
easingFunctions.linear
easingFunctions.easeInQuad
easingFunctions.easeOutQuad
easingFunctions.easeInOutQuad
easingFunctions.easeOutCubic
```
```

--------------------------------

### Framework-Specific Imports (TypeScript)

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Importing Mason Effect components tailored for different JavaScript frameworks. This allows for better tree-shaking and optimized builds.

```typescript
// React
import Count from 'masoneffect/react/count';
import TextToParticle from 'masoneffect/react/textToParticle';

// Vue
import Count from 'masoneffect/vue/count';
import TextToParticle from 'masoneffect/vue/textToParticle';

// Svelte
import Count from 'masoneffect/svelte/count';
import TextToParticle from 'masoneffect/svelte/textToParticle';
```

--------------------------------

### Svelte TextToParticle Component

Source: https://context7.com/fe-hyunsu/masoneffect/llms.txt

A Svelte component that transforms text into animated particles. It supports two-way binding for text content and provides methods to morph text, scatter particles, and exposes events for component readiness. Dependencies include the masoneffect/svelte/textToParticle module.

```svelte
<script lang="ts">
  import TextToParticle from 'masoneffect/svelte/textToParticle';

  let effectRef: TextToParticle | null = null;
  let text = 'Hello Svelte';

  function morphText() {
    effectRef?.morph({ text: 'Svelte Morphed!' });
  }

  function scatterParticles() {
    effectRef?.scatter();
  }

  function handleReady(instance) {
    console.log('TextToParticle ready in Svelte', instance);
  }
</script>

<div class="container">
  <div class="canvas-wrapper" style="width: 100%; height: 70vh; background: #000">
    <TextToParticle
      bind:this={effectRef}
      {text}
      particleColor="#00ff88"
      maxParticles={2000}
      pointSize={0.5}
      repelRadius={150}
      on:ready={handleReady}
    />
  </div>
  <div class="controls">
    <button on:click={morphText}>Morph</button>
    <button on:click={scatterParticles}>Scatter</button>
    <input bind:value={text} placeholder="Enter text" />
  </div>
</div>

<style>
  .controls {
    padding: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
</style>
```

--------------------------------

### Count Component - Svelte Implementation

Source: https://context7.com/fe-hyunsu/masoneffect/llms.txt

A Svelte component for animating numerical counters. It supports reactive declarations for target values and duration, and uses custom events for updates and completion. Requires Svelte and the 'masoneffect/svelte/count' library.

```svelte
<script lang="ts">
  import Count from 'masoneffect/svelte/count';
  import { easingFunctions } from 'masoneffect/svelte/count';

  let countRef: any = null;
  let targetValue = 1000;

  function handleUpdate(event: CustomEvent<number>) {
    console.log('Counting:', event.detail);
  }

  function handleComplete() {
    console.log('Count animation finished!');
  }

  function resetCounter() {
    countRef?.reset();
  }

  function restartCounter() {
    countRef?.reset();
    countRef?.start();
  }
</script>

<div class="counter-section">
  <div class="counter-display">
    <h3>Active Projects</h3>
    <Count
      bind:this={countRef}
      {targetValue}
      duration={2000}
      startValue={0}
      easing={easingFunctions.easeOutCubic}
      threshold={0.2}
      rootMargin="0px 0px -100px 0px"
      triggerOnce={true}
      on:update={handleUpdate}
      on:complete={handleComplete}
      style="font-size: 3rem; font-weight: bold; color: #00ff88"
    />
  </div>
  <div class="controls">
    <button on:click={resetCounter}>Reset</button>
    <button on:click={restartCounter}>Restart</button>
    <input bind:value={targetValue} type="number" />
  </div>
</div>

<style>
  .counter-display {
    text-align: center;
    padding: 40px;
  }
  .controls {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
</style>
```

--------------------------------

### TextToParticle Animation - Vanilla JavaScript

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

Initializes and controls the TextToParticle animation effect in vanilla JavaScript. It allows converting text into particles, morphing text, and scattering particles.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';

const container = document.getElementById('my-container');
const effect = new TextToParticle(container, {
  text: 'Hello World',
  particleColor: '#00ff88',
  maxParticles: 2000,
});

// Change text
effect.morph({ text: 'New Text' });

// Multi-line text support
effect.morph({ text: 'Line 1\nLine 2\nLine 3' });

// Return particles to initial position
effect.scatter();
```

--------------------------------

### MasonEffect Performance Monitor Textual Metrics

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/performance-test.html

Displays key performance metrics for the MasonEffect animation. This includes Frames Per Second (FPS), Frame Time in milliseconds, getImageData Time in milliseconds, Memory Usage in megabytes, the current Particles Count, and the Canvas Size.

```plaintext
FPS (Frames Per Second)

Frame Time (ms)

getImageData Time (ms)

Memory Usage (MB)

Particles Count

Canvas Size
```

--------------------------------

### Implement Animated Count in Svelte

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/README.md

This Svelte component utilizes the 'Count' effect from Mason Effect. It imports the necessary component and easing functions, then configures the animation's target value, duration, and easing. Event handlers for `update` and `complete` are defined using Svelte's `on:` directive, and styling is applied inline.

```svelte
<script lang="ts">
  import Count from 'masoneffect/svelte/count';
  import { easingFunctions } from 'masoneffect/svelte/count';
</script>

<div>
  <Count
    targetValue={1000}
    duration={2000}
    easing={easingFunctions.easeOutCubic}
    on:update={(e) => console.log(e.detail)}
    on:complete={() => console.log('Complete!')}
    style="font-size: 3rem; font-weight: bold"
  />
</div>

```

--------------------------------

### JavaScript FPS History Chart Update

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/performance-test.html

Renders a visual representation of the FPS history using DOM elements. It clears the existing chart and creates new elements for each FPS value in the `fpsHistory` array, styling them as bars with heights proportional to the FPS. Error and warning states are applied based on FPS thresholds.

```javascript
function updateFPSChart() {
  const chart = document.getElementById('fpsChart');
  chart.innerHTML = '';
  const maxFPS = 60;
  fpsHistory.forEach(fpsValue => {
    const bar = document.createElement('div');
    bar.className = 'fps-bar';
    const height = (fpsValue / maxFPS) * 100;
    bar.style.height = `${height}%`;
    if (fpsValue < 30) {
      bar.classList.add('error');
    } else if (fpsValue < 50) {
      bar.classList.add('warning');
    }
    chart.appendChild(bar);
  });
}
```

--------------------------------

### JavaScript UI Statistics Update

Source: https://github.com/fe-hyunsu/masoneffect/blob/main/examples/performance-test.html

Updates the displayed statistics on the webpage, including FPS, frame time, `getImageData` time, memory usage, particle count, and canvas size. It applies visual indicators (error, warning) based on performance thresholds. Memory usage is displayed in MB and is only available in Chrome.

```javascript
function updateStats() {
  const fpsEl = document.getElementById('fps');
  const frameTimeEl = document.getElementById('frameTime');
  const getImageDataTimeEl = document.getElementById('getImageDataTime');
  const memoryEl = document.getElementById('memory');
  const particlesEl = document.getElementById('particles');
  const canvasSizeEl = document.getElementById('canvasSize');

  fpsEl.textContent = fps;
  fpsEl.className = 'stat-value';
  if (fps < 30) {
    fpsEl.classList.add('error');
  } else if (fps < 50) {
    fpsEl.classList.add('warning');
  }

  frameTimeEl.textContent = frameTime.toFixed(2);
  frameTimeEl.className = 'stat-value';
  if (frameTime > 33.33) {
    frameTimeEl.classList.add('error');
  } else if (frameTime > 20) {
    frameTimeEl.classList.add('warning');
  }

  getImageDataTimeEl.textContent = getImageDataTime.toFixed(2);
  getImageDataTimeEl.className = 'stat-value';
  if (getImageDataTime > 16.67) {
    getImageDataTimeEl.classList.add('error');
  } else if (getImageDataTime > 10) {
    getImageDataTimeEl.classList.add('warning');
  }

  if (performance.memory) {
    const memoryMB = (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2);
    memoryEl.textContent = memoryMB;
  } else {
    memoryEl.textContent = 'N/A';
  }

  if (instance && instance.particles) {
    particlesEl.textContent = instance.particles.length;
  }

  if (instance && instance.canvas) {
    canvasSizeEl.textContent = `${instance.canvas.width}×${instance.canvas.height}`;
  }
}
```