Motion

The shared exit primitive for dismissible items. Calm, deliberate, consistent.

Try it.

Click any chip to dismiss it. The width collapses while the content blurs, fades, and scales down.

When a user removes an interactive element from a list (chips, pills, tags, saved cards, filter selections, or any user-dismissible entry), the exit must animate. Removal should never feel instant or jarring.
Use the shared .vc-removing-item primitive for these exits.
The wrapper carries .vc-removing-item. Its inline-size collapses to 0 over 320ms with a cubic-bezier(0.2, 0, 0, 1) ease and a 60ms delay.
The visible content carries .vc-removing-item-content. It blurs by 8px, fades to 0 opacity, and scales to 0.92 over 280ms with ease-in.
Apply the class on the way out, then unmount once the transition finishes (~340ms total).
The two layers are intentional: the content fades first so the eye sees the dismissal before the layout collapse pulls neighbours in.
Do not hand-roll bespoke remove animations. Reach for .vc-removing-item and .vc-removing-item-content together so list dismissals stay consistent across chips, saved properties, filter pills, and any future interactive list items.