Labs

Controls

Details

• Icons are subtly animated in and out. Since their width is fixed, their transitions overlap.
• Text is justified left to give the appearance of sliding in with the icon.
• Framer Motion does not support transitions between P3 colors, so RGB values are used.

Controls

Details

• Notification badges are pills, not circles!
• The badge is not vertically centered on the top edge of the parent element. It's positioned slightly below.
• The right edge of the badge extends past the right edge of the parent element by a fixed amount.
• There's a drop shadow on the badge.
• The use of tabular numbers prevents unnecessary layout shift.
• Numbers are left-aligned to make it look like they're being pushed in from the right.
• There's a subtle spring animation on the width of the badge.
• There's a subtle fade in animation when the badge appears. But when it's cleared, the badge is immediately removed.