# Liquid glass avatar: spec and references

Source: https://meniscus.site/components/avatar · Updated 2026-09-27

Person or entity. Layer: controls/content.

Also called: profile picture, user badge.

| Property | Value |
|---|---|
| Material | lens (for initials) or photo inside a lens rim |
| Profile | convex |
| Geometry | 28–40 circles, gap 8; stacked groups overlap −8 only when flat |
| Bezel (px) | radius |
| Displacement (px) | ≤ 0.4 × radius |
| Blur (px) | 0 |

## Anatomy

- circle lens
- photo or initials 12–13 semibold
- crisp rim

## States

- rest
- presence dot

## Rules

- Overlapping avatar stacks should be flat (no lens on lens).

## References

![Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.](https://meniscus.site/gallery/avatar-light-studio.webp)

![Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.](https://meniscus.site/gallery/avatar-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `avatar`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs