Avatar Group Wave
Dense overlapping avatar row with physical inverse-square ripple wave on hover. Adjacent avatars gently lift with spring momentum, accompanied by magnetic frosted glass tooltip and audio feedback.
Dependencies
Interaction Types
Hover avatar to trigger physical wave ripple
Magnetic frosted glass name & status tooltip
Fluid audio tick feedback on sweep
How to use
import { AvatarGroupWave } from "@/components/avatar-group-wave";
export default function Demo() {
return (
<AvatarGroupWave
size="md"
max={7}
onAvatarClick={(avatar) => console.log(avatar.name)}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | AvatarWaveItem[] | DEFAULT_WAVE_AVATARS | Array of avatar items with id, name, role, and image URL |
| size | "sm" | "md" | "lg" | "md" | Size scale of avatars, ring borders, and spacing |
| max | number | 7 | Maximum visible avatars before (+N) badge |
| lift | number | -18 | Maximum vertical lift in pixels on hover |
| falloff | number | 0.48 | Power decay factor for neighboring avatars (0–1) |
| interactiveTooltip | boolean | true | Show the frosted name tooltip on hover |
| onAvatarClick | (avatar: AvatarWaveItem) => void | — | Called when an avatar is clicked |