Skip to content
All effectsKPI

Swap Word

One slot, three words taking turns. The words are grid-stacked so they stay in flow and the slot keeps a real baseline; clip-path does the hiding, because overflow: hidden would take that baseline away again.

Pure CSSKPIPro

Usage

Build fasterbettercalmer

Meant for

KPIEmpty StateNavbar claim

Examples

On a Card title

One slot, three words taking turns, inside a CardTitle at its own size. The words are grid-stacked so they stay in flow and the slot keeps a real baseline — overflow: hidden would take that baseline away and drop the word off the line, so clip-path does the hiding instead.

Build fasterbettercalmer
One install for the whole design system.

The class is wm wm-swap-word — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.