Use Avatar Showcase to present an ordered group of people with a moving avatar strip. It accepts a recent subset and a total count, so the visual can represent a larger community without loading every profile.
Install
Basic usage
Examples
Use lanes to adjust the density, and pass a totalCount when the displayed people are only a recent sample.
API
| Property | Type | Default | Description |
|---|
items | AvatarShowcaseItem[] | required | Ordered people to present. The first item is treated as the most recent. |
lanes | 1 | 2 | 3 | 1 | Number of vertically staggered lanes used by the moving strip. |
totalCount | number | items.length | Total community size when `items` contains only a recent subset. |
message | string | undefined | Optional message revealed with the final count. Omit it for a count-only ending. |
maxItems | number | 80 | Maximum number of avatars rendered before deterministic sampling is applied. |
duration | number | undefined | Fixed playback duration in seconds. When omitted, duration is derived from the total count. |
avatarSize | number | 56 | Avatar diameter in pixels. |
onComplete | () => void | undefined | Called after the strip finishes and the ending is revealed. |
Accessibility
Provide names for people whenever they are available. Reduced-motion preferences show a static, readable avatar group.
Styling
Use className and the component options to fit the strip into a community, activity, or social-proof section.
Found a bug or need help using this component? Open an issue on GitHub.
License & Usage
Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.