MasonEffect

https://masoneffect.com
Admin
MasonEffect is a lightweight JavaScript animation library offering text particle morphing, count...
Tokens:1,295
Snippets:13
Trust Score:4.5
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install masoneffect Package

Source: https://masoneffect.com/labs

Instructions for installing the masoneffect library using npm, yarn, or pnpm. This is the first step to using the library in your project.

```bash
npm install masoneffect
```

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

### Initialize TextToParticle with Vanilla JavaScript

Source: https://masoneffect.com/labs

This snippet shows how to initialize the TextToParticle effect in a web page using vanilla JavaScript. It includes loading the library via CDN, creating an instance, and demonstrating basic functionalities like morphing text and scattering particles. The effect is attached to a specified container element.

```html
<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.10/dist/index.umd.min.js"></script>

<script>
  window.addEventListener('load', () => {
    const container = document.getElementById('my-container');
    const effect = new TextToParticle(container, {
      text: 'Hello World',
      particleColor: '#00ff88',
      maxParticles: 2000,
      onReady: (instance) => {
        console.log('TextToParticle ready!', instance);
      },
    });

    // Change text
    effect.morph({ text: 'Morphed!' });

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

    // Change text with random selection
    const texts = ['Hello', 'World', 'Mason', 'Effect', 'Particles'];
    const randomText = texts[Math.floor(Math.random() * texts.length)];
    effect.morph({ text: randomText });
  });
</script>

<div id="my-container"></div>
```

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

### Integrate TextToParticle with React

Source: https://masoneffect.com/labs

This snippet demonstrates how to use the TextToParticle component within a React application. It utilizes `useRef` to interact with the component's methods for morphing text, scattering particles, and updating options. It also shows how to pass initial properties and handle the `onReady` callback.

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

function App() {
  const effectRef = useRef<TextToParticleRef>(null);

  const handleMorph = () => {
    // Change text
    effectRef.current?.morph({ text: 'Morphed!' });
  };

  const handleScatter = () => {
    // Return particles to initial position
    effectRef.current?.scatter();
  };

  const handleChangeText = () => {
    const texts = ['Hello', 'World', 'Mason', 'Effect', 'Particles'];
    const randomText = texts[Math.floor(Math.random() * texts.length)];
    effectRef.current?.morph({ text: randomText });
  };

  const handleChangeWithOptions = () => {
    // Change text along with other properties
    effectRef.current?.morph({
      text: 'New Text',
      particleColor: '#ff00ff',
      maxParticles: 3000,
      pointSize: 1.0,
    });
  };

  return (
    <div style={{ width: '100%', height: '70vh', background: '#000', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, position: 'relative', minHeight: 400 }}>
        <TextToParticle
          ref={effectRef}
          text="Hello React"
          particleColor="#00ff88"
          maxParticles={2000}
          onReady={(instance) => {
            console.log('Ready!', instance);
          }}
        />
      </div>
      <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
        <button onClick={handleMorph}>Morph</button>
        <button onClick={handleScatter}>Scatter</button>
        <button onClick={handleChangeText}>Change Text</button>
        <button onClick={handleChangeWithOptions}>Change Text</button>
      </div>
    </div>
  );
}

export default App;
```
Tokens:
Raw