Describe the feature
Problem
On the onboarding screen (Step 2), users choose an avatar.
Right now, the avatars do not provide any hover feedback.
Because of this, it isn’t visually clear that they are clickable — especially for new users.
Improving the hover state will make selection more intuitive and interactive.
Proposed Enhancement
Add hover feedback on avatar cards:
- Slight scale-up animation on hover
- Soft glow / ring highlight
- Smooth transition (150–200ms)
- Cursor changes to pointer
This should only affect hover behavior (click selection styling should remain as-is).
Why this is useful
- Improves UX clarity
- Makes onboarding feel polished and responsive
- Matches modern UI interaction patterns
- Helps users immediately understand avatars are selectable
Implementation Notes (optional)
Component likely involved:
frontend/src/components/onboarding/AvatarPicker.tsx (or nearby UI code)
Can be implemented with simple Tailwind or CSS animations — no functional changes required.
Add ScreenShots
Before: No hover effect — looks static
After: Hover glow + scale makes interaction clear
Record
Checklist before Submitting.
Describe the feature
Problem
On the onboarding screen (Step 2), users choose an avatar.
Right now, the avatars do not provide any hover feedback.
Because of this, it isn’t visually clear that they are clickable — especially for new users.
Improving the hover state will make selection more intuitive and interactive.
Proposed Enhancement
Add hover feedback on avatar cards:
This should only affect hover behavior (click selection styling should remain as-is).
Why this is useful
Implementation Notes (optional)
Component likely involved:
frontend/src/components/onboarding/AvatarPicker.tsx(or nearby UI code)Can be implemented with simple Tailwind or CSS animations — no functional changes required.
Add ScreenShots
Before: No hover effect — looks static
After: Hover glow + scale makes interaction clear
Record
Checklist before Submitting.