BLACK FRIDAY
Ends in 00h 00m 00s
25% OFF LTD
Avatar Circles Configurator - Breakfusion
data-avatar-circles
How to Use & Code Information
â–¼
  1. Customize your avatar circles 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 container: go to Element → Settings → Advanced → Attributes, add data-avatar-circles with value true
Avatar Configuration
Extra People Counter
Number of Extra People ℹ
0
Extra People URL (Optional)
Counter Style

Standard circular counter that matches avatar sizing

Automatically expands width based on number size

Rounded rectangle that accommodates larger numbers

Separate badge with emphasized appearance

Abbreviate Large Numbers ℹ
Style Settings
Avatar Size ℹ
40px
Border Width ℹ
2px
Border Color
Counter Background
Counter Hover Color
Counter Text Color
Overlap Distance ℹ
16px
Animation Settings
Animation Type

No animations applied

Avatars appear one after another when in viewport

Subtle pulsing animation to maintain visual interest

Avatars periodically glow to highlight

Animation Speed
500ms
Enable Animation on Scroll ℹ