Status Pill

A pill that morphs its color, icon, and text as the state changes. Click it to cycle through password-strength states.

Click the pill · cycles to the next state

How it works

Every state has its own color, icon, and bit of text. When you click, the pill smoothly re-shapes itself. The width grows or shrinks as words come and go, the color softly shifts, and the icon swaps in. The little shake on the red warning state is my favorite touch.

Tech

React
Framer Motion
Tailwind