BLACK FRIDAY
25% OFF Lifetime · Ends Dec 2nd

Ready to enhance your Breakdance experience?

Add premium elements that enhance user experience.

Quick Started

Ready to enhance your Bricks Builder experience?

Unlock Breakfusion. Make today your launch day.

Ripple Grid Configurator - Breakfusion
data-ripple-grid

Ripple Grid

Interactive Grid with Ripple Effect for Breakdance Builder

How to Use & Code Information
▼
  1. Customize your ripple grid using the controls below
  2. Click Copy JS to copy the JavaScript code to clipboard
  3. In Breakdance Builder, add a Code element
  4. Paste the JavaScript code
  5. To add the effect to any section: go to Section → Settings → Advanced → Attributes, add data-ripple-grid with value true
Click any cell to see the ripple effect
Grid Dimensions
Rows ℹ
8
Columns ℹ
27
Cell Size ℹ
56px
Colors
Border Color
HSL
Cell Background
HSL
Hover Color
HSL
Ripple Color
HSL
Cell Background Opacity ℹ
0.4
Hover Opacity ℹ
0.6
Ripple Opacity ℹ
1
Animation Settings
Ripple Speed ℹ
55
Layout & Effects
Vertical Alignment ℹ
Fade Direction ℹ
Fade Intensity ℹ
50%