Masked Avatars
A stunning avatar stack with masked overlapping effects and animated text rings on hover. Each avatar reveals the person’s name in a circular pattern when hovered.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/masked-avatars.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/masked-avatars.tsx
Note: This is a complex component with 200+ lines. Install via CLI for the full source code.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| avatars | Avatar[] | [...defaults] | Array of avatars with avatar URL and name |
| size | number | 70 | Base size of each avatar |
| border | number | 8 | Border width |
| column | number | 40 | Column spacing |
| movement | number | 0.72 | Hover lift sensitivity |
| transition | number | 0.18 | Animation duration |
| ringed | boolean | true | Show text ring on hover |
| blurOnRest | boolean | true | Blur non-hovered avatars |
| className | string | - | Additional CSS classes |