New

9 buttons. Ready to use.

Avatar Circles Configurator - BricksFusion
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 Bricks Builder, add a Code element
  4. Paste the JavaScript code
  5. To add the effect to any section: go to Section → Style → Attributes, add data-avatar-circles as attribute name (leave value empty)
Interactive Avatar Circles Preview
Quick Presets
Avatar Configuration
Extra People Count
Number of Extra People
3
Extra People URL
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
HEX
HSL
HEX
HSL
HEX
HSL
HEX
HSL
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
Advanced Options
Hover Effect