Avatar

Design an avatar editor for a profile flow. The component should let someone build or adjust a character from a small set of traits: face shape, hair, eyes, outfit, and accessories. Keep the scope tight; this is a component challenge, not a full profile system.

The avatar must update live as options change. Show the current selection clearly, with controls for switching between trait groups, picking from a small set of variants, and undoing a change. Include randomize and reset actions, but make sure they do not hide the user’s current work.

Design the confirm path as a simple commit step: preview first, then save. If an option is unavailable or incompatible, show that state in place and explain why. The final UI should feel playful, but the interaction should still be fast and easy to read.

Make avatar creation an adventure by providing diverse and inclusive elements that empower users to see themselves reflected in their digital persona.