Rain Mode

How to use the rainmode effect for applying a rain particle effect

Overview

The coolmode effect allows you to add a rain particle effect to your DOM elements when using the ClickFusion component.

Usage

To enable Rain Mode, set the effect property to “rainmode” in your ClickFusion component.

<ClickFusion effect="rainmode">

  <button>

    Click Me for Rain Effect!

  </button>

</ClickFusion>

Customization

You can customize the particle image, size, and speed using the particleOptions property.

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: 'https://pbs.twimg.com/profile_images/1680720685239287808/dVQorGnG_400x400.jpg',

    size: 50,

    speedDown: 5,

    particleCount: 30

  }}

>

  <button>

    Click Me for Rain Effect!

  </button>

</ClickFusion>

Custom rainmode in Action