Explode text animation Bricks Builder

This tool creates a custom script with your exact configuration built-in (including responsive text sizing and mobile optimization). Just add the data attribute to any element and the effect will work automatically with your chosen settings!

BricksFusion Exclusive Get Your Explode Text Effect

Add a captivating particle explosion text animation to your website with this custom-crafted JavaScript snippet.

Easy implementation with simple data attributes
Interactive particle explosion on hover
Fully responsive and mobile-friendly
Customizable colors and animation properties
Mobile optimization with configurable breakpoints

Text Content

Display Text

The text that will be displayed with particle explosion effect

Text Size (Desktop) auto

Font size in pixels for desktop (0 = auto-size based on container width)

Text Size (Mobile) auto

Font size in pixels for mobile devices (0 = auto-size based on container width)

Animation Settings

Animation Force 80

Strength of particle movement when interacting with cursor

Particle Density 4

Controls the number of particles generated from the text

Interaction Radius 100px

Distance from cursor that affects particle movement

Mobile Optimization

Disable animation on mobile devices

When enabled, shows static text on mobile for better performance

💡 Recommended: Disabling animation on mobile improves performance and battery life while maintaining visual appeal.

Mobile Breakpoint 768px

Screen width below which animation is disabled (when mobile disable is active)

Visual Style

Color Palette

+ Add Color

Colors for the gradient effect applied to particles

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

How to Use in Bricks Builder

JavaScript Code