Particle Options

Detailed documentation on the different effects available in ClickFusion and how to customize them.

Table of Contents

• Coolmode Effect
• Rainmode Effect
• Partymode Effect
• Codemode Effect
• ConfettiMode Effect
• DragMode Effect

Coolmode Effect

Introduction

The Coolmode effect comes with a variety of options to customize particles and their behavior.

Properties

Particle Options

Particle Options

• particle: (optional) URL for custom particle image
• size: (optional) Size of the particle
• speedHorz: (optional) Horizontal speed of the particle
• speedUp: (optional) Upward speed of the particle

// Code example using all props for Coolmode
<ClickFusion 
  effect="coolmode"
  particleOptions={{
    particle: 'customParticleImgURL',
    size: 40,
    speedHorz: 5,
    speedUp: 10
  }}
>
  <button>
    Click Me for Cool Effect!
  </button>
</ClickFusion>

Rainmode Effect

Introduction

The Rainmode effect offers options to control the falling speed and the number of particles.

Properties

Particle Options

Particle Options

• particle: (optional) URL for custom particle image
• size: (optional) Size of the particle
• speedDown: (optional) Downward speed of the particle
• particleCount: (optional) Number of particles

// Code example using all props for Rainmode
<ClickFusion 
  effect="rainmode"
  particleOptions={{
    particle: 'customParticleImgURL',
    size: 50,
    speedDown: 5,
    particleCount: 30
  }}
>
  <button>
    Click Me for Rain Effect!
  </button>
</ClickFusion>

Partymode Effect

Introduction

The Partymode effect allows you to set the number of particles and their size.

Properties

Particle Options

Particle Options

• size: (optional) Size of the particle
• particleCount: (optional) Number of particles

// Code example using all props for Partymode
<ClickFusion 
  effect="partymode"
  particleOptions={{
    size: 20,
    particleCount: 45
  }}
>
  <button>
    Click Me for Party Effect!
  </button>
</ClickFusion>

Code Mode Effect

Introduction

The Code Mode effect offers options to control the falling code-like particles and their behavior.

Properties

Particle Options

Particle Options

• particleCount: (optional) Number of particles
• size: (optional) Size of the particles
• color: (optional) Color of the particles “light” | “dark”

// Code example using all props for Code Mode
<ClickFusion 
  effect="codemode"
  particleOptions={{
    particleCount: 40,
    size: 10,
    color: 'light'
  }}
>
  <button>
    Click Me for Code Falling Effect!
  </button>
</ClickFusion>

Confetti Mode Effect

Introduction

The Confetti Mode effect allows you to set the number of confetti particles, their falling speed, and color modes.

Properties

Particle Options

Particle Options

• particleCount: (optional) Number of particles
• speedDown: (optional) Downward speed of the particles
• color: (optional) Color mode of the particles “red”, “orange”, “yellow”, “green”, “blue”, “purple”

// Code example using all props for Confetti Mode
<ClickFusion 
  effect="confettimode"
  particleOptions={{
    particleCount: 100,
    speedDown: 5,
    color: 'purple'
  }}
>
  <button>
    Click Me for Confetti Effect!
  </button>
</ClickFusion>

Drag Mode Effect

Introduction

The Drag Mode effect allows you to make DOM elements draggable, enhancing user interaction within your application.

Properties

Particle Options

Particle Options

• width: (optional) Width of the draggable area
• height: (optional) Height of the draggable area
• color: (optional) Background color of the draggable area, “light” | “dark”

// Code example using all props for Drag Mode
<ClickFusion 
  effect="dragmode"
  particleOptions={{
    width: 400,
    height: 400,
    color: 'light'
  }}
>
  <button>
    Drag Me!
  </button>
</ClickFusion>

---

For more advanced usage and examples, please refer to the GitHub Repository.