Swap Pill
One dot scales to 34× and becomes the fill. Cheaper than animating a background.
Usage
Get startedLet's go →
Meant for
Examples
On a Button
Two labels in one slot: mark them data-wm-from and data-wm-to. A dot scales to 34× and becomes the fill, which is far cheaper than animating a background-size. Both labels are taken out of the flow, so the button needs a width. The slot itself is a grid, so wrap a label-plus-icon in one inline-flex span or the icon drops onto a second line.
The class is wm wm-swap-pill — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.