### Install MasonEffect Package

Source: https://context7_llms

Command to install the MasonEffect package using npm. This is the initial step to include the library in your project.

```bash
npm install masoneffect
```

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

### React + TypeScript: TextToParticle Effect Example

Source: https://context7_llms

A React component using TypeScript to implement the TextToParticle effect from Mason Effects. It utilizes `useRef` for managing the effect's instance and demonstrates basic configuration with text content and styling.

```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>
  );
}
```

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

### React + TypeScript: Count Effect Example

Source: https://context7_llms

A React component demonstrating the Count effect with TypeScript. It uses `useRef` for instance management and configures the effect with a target value, duration, and easing function for smooth numerical animation.

```tsx
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} />;
}
```

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

### Vue 3 + Composition API: TextToParticle Effect Example

Source: https://context7_llms

A Vue 3 component using the Composition API and TypeScript to implement the TextToParticle effect. It uses `ref()` to manage the effect's instance and passes props in kebab-case as required by Vue templates.

```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>
```

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

### Vanilla JS TextToParticle Initialization and Morphing

Source: https://context7_llms

Demonstrates initializing the TextToParticle effect in Vanilla JavaScript. It allows morphing the text content and includes a method to destroy the effect, releasing resources. The effect is attached to a specified container element.

```javascript
import { TextToParticle } from 'masoneffect/textToParticle';
const container = document.querySelector('#container');
const effect = new TextToParticle(container, { text: 'Hello World', particleColor: '#fff', fontSize: 80 });
effect.morph({ text: 'New Text' });
effect.destroy();
```

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

### Import TextToParticle in React (Tree-shaking)

Source: https://context7_llms

Demonstrates the correct way to import the TextToParticle component from the React-specific path in MasonEffect. This ensures tree-shaking is effective, only importing the necessary code.

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

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

### Svelte TextToParticle Initialization

Source: https://context7_llms

Initializes the TextToParticle effect in a Svelte component using TypeScript. It binds a reference to the TextToParticle component for potential programmatic control and sets initial text, color, and font size.

```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>
```

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

### Vanilla JS ScrollFadeIn Initialization (Viewport and Container)

Source: https://context7_llms

Demonstrates initializing the ScrollFadeIn effect in Vanilla JavaScript for both viewport-based scrolling and within a specific scrollable container. It shows how to configure direction, distance, duration, threshold, and specify a root element for container-based scrolling.

```javascript
import { ScrollFadeIn } from 'masoneffect/scrollFadeIn';
const container = document.querySelector('#scroll-fade-in-container');
// For viewport-based scrolling (default)
const scrollFadeIn = new ScrollFadeIn(container, {
  direction: 'bottom',
  distance: '50px',
  duration: 800,
  threshold: 0.1,
  triggerOnce: false
});
// For internal scroll container
const scrollContainer = document.querySelector('.scroll-container');
const scrollFadeInInContainer = new ScrollFadeIn(container, {
  direction: 'bottom',
  distance: '50px',
  root: scrollContainer, // Specify scroll container element
  threshold: 0.1
});
```

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

### Vue 3 + Composition API: Count Effect Example

Source: https://context7_llms

This Vue 3 component, using the Composition API and TypeScript, demonstrates the Count effect. It binds a ref to the effect instance and configures the animation with target value, duration, and easing functions, using Vue's binding syntax for props.

```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>
```

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

### Incorrect Import for Tree-shaking

Source: https://context7_llms

Illustrates an incorrect import method for MasonEffect that bypasses tree-shaking. Importing from the root package name will include all effects, negating the optimization benefits.

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

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

### React TypeScript Typing Effect

Source: https://context7_llms

Implements the Typing effect in a React component using TypeScript. It utilizes `useRef` to get a reference to the Typing component, allowing for potential programmatic interactions. Props include the text to be typed, typing speed, and cursor visibility.

```tsx
import React, { useRef } from 'react';
import { Typing } from 'masoneffect/react/typing';
import type { TypingRef } from 'masoneffect/react/typing';
function App() {
  const ref = useRef<TypingRef>(null);
  return <Typing ref={ref} text="Hello World 안녕하세요" speed={50} showCursor={true} />;
}
```

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

### Detect Environment and Recommend Effect (JavaScript)

Source: https://context7_llms

These JavaScript functions help detect the development environment (framework, TypeScript) and recommend an appropriate effect based on user request keywords. The `recommendEffect` function uses predefined keyword lists to map requests to effect types.

```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';
}

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

function recommendEffect(userRequest) {
  const request = userRequest.toLowerCase();
  const textKeywords = ['text', 'particle', 'morph', 'title', 'banner', 'hero'];
  const countKeywords = ['number', 'count', 'counter', 'stat', 'statistic'];
  if (textKeywords.some(kw => request.includes(kw))) return 'textToParticle';
  if (countKeywords.some(kw => request.includes(kw))) return 'count';
  return 'textToParticle'; // default
}
```

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

### Vanilla JS Typing Effect

Source: https://context7_llms

Initializes a Typing effect in Vanilla JavaScript, attaching it to a specified container. Configuration options include the text content, typing speed, cursor visibility, and the cursor character itself. This provides a basic, framework-agnostic typing animation.

```javascript
import { Typing } from 'masoneffect/typing';
const container = document.querySelector('#typing-container');
const typing = new Typing(container, {
  text: 'Hello World 안녕하세요',
  speed: 50,
  showCursor: true,
  cursorChar: '|'
});
```

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

### Vanilla JS Count Animation

Source: https://context7_llms

Initializes a Count animation in Vanilla JavaScript, targeting a specific value over a duration with easing functions. It supports scroll-based triggering with an optional threshold and a flag to ensure the animation runs only once.

```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
});
```

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

### Vue 3 Composition API ScrollFadeIn Effect

Source: https://context7_llms

Integrates the ScrollFadeIn effect into a Vue 3 application using the Composition API. The effect is applied to content within the template, and its properties like direction, distance, and duration are bound using Vue's reactivity system. This example assumes viewport-based scrolling.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ScrollFadeIn } from 'masoneffect/vue/scrollFadeIn';
const scrollFadeInRef = ref(null);
</script>
<template>
  <ScrollFadeIn direction="bottom" distance="50px" :duration="800">
    <div>Content that fades in on scroll</div>
  </ScrollFadeIn>
</template>
```

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

### Svelte TypeScript ScrollFadeIn Effect

Source: https://context7_llms

Applies the ScrollFadeIn effect in a Svelte component using TypeScript. It binds a reference to the ScrollFadeIn component for potential interaction and configures the animation's direction, distance, and duration. The effect wraps the content that will fade in.

```svelte
<script lang="ts">
import { ScrollFadeIn } from 'masoneffect/svelte/scrollFadeIn';
let scrollFadeInRef: any = null;
</script>
<ScrollFadeIn bind:this={scrollFadeInRef} direction="bottom" distance="50px" duration={800}>
  <div>Content that fades in on scroll</div>
</ScrollFadeIn>
```

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

### Vue 3 Composition API Typing Effect

Source: https://context7_llms

Integrates the Typing effect into a Vue 3 application using the Composition API and TypeScript. A template reference `typingRef` is used to access the Typing component. Props are bound using Vue's reactivity system, with kebab-case for template attributes.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Typing } from 'masoneffect/vue/typing';
const typingRef = ref(null);
</script>
<template>
  <Typing ref="typingRef" text="Hello World 안녕하세요" :speed="50" :show-cursor="true" />
</template>
```

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

### React TypeScript ScrollFadeIn Effect

Source: https://context7_llms

Implements the ScrollFadeIn effect within a React component using TypeScript. It leverages `useRef` to manage the component's reference and allows customization of the fade-in direction, distance, and duration. The effect is applied to child elements passed as props.

```tsx
import React, { useRef } from 'react';
import { ScrollFadeIn } from 'masoneffect/react/scrollFadeIn';
import type { ScrollFadeInRef } from 'masoneffect/react/scrollFadeIn';
function App() {
  const ref = useRef<ScrollFadeInRef>(null);
  return (
    <ScrollFadeIn ref={ref} direction="bottom" distance="50px" duration={800}>
      <div>Content that fades in on scroll</div>
    </ScrollFadeIn>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.