Motion

Backdrop fades in over 220ms with ease-out while the card rises 56px, settles from 0.98 scale, and springs at stiffness 380 / damping 34. Exit reverses the same path.

On small viewports the same dialog docks to the bottom edge and slides up as a sheet; the spring values do not change, only the resting position.

Mode switches crossfade title and supporting copy over 180ms while conditional fields grow or collapse over 240ms. A sliding pill (spring 420 / 34) tracks the active mode.

Failed submissions slide the error banner down over 240ms and shake the card once (320ms ease-in-out). Success paths never shake — the shake reads as correction, not celebration.

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.