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.