Spin a coin or pick a face. It lands on the nearest one with real physics.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/avatar-pickerPlayground
Pick your avatar
Spin the coin or pick a face.
Mira ValeNo. 001
Own copy
Choose a face
Spin the coin or pick one.
MiraNo. 001
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/avatar-picker
Accessibility
- The coin is a slider, with the face name as its value.
- Faces are a radio group.
- Continue waits for a name.
Motion
- Half a turn per face, on a 140 / 22 spring.
- A flick carries on, then the spring takes the nearest face. A shade sweeps across the edge.
- The picked badge pops in.
- With reduced motion, the coin steps one face per arrow or swipe and never spins.
Responsive behavior
- A 360 px tray on Web and 358 px on Mobile, with a 48 px input and Large Continue.
Performance
- The coin spins on a Motion value, so dragging does not re-render it each frame.
- Shading is derived from the same value with useTransform.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AvatarPicker and the AvatarOption type. Props: options, title, hint, spinningHint, defaultName, onContinue, animated.
- options is a list of { person, name }. onContinue receives { person, name } on Continue.
- It composes Avatar, Button, Field, Icon Button and Input.
Related
AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.Avatar UploadComponentA profile photo with drop, progress, replace and clear errors, or a sample face.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.Onboarding QuestionComponentOne onboarding question: progress, Skip, four choice cards with number keys, and Continue.