Entrances & exits

One keyframe library, referenced everywhere. Entrances spring in proportion to their mass; every exit is 100ms, ease-in, flat — leaving is not a performance.

anim-fade-textanim-panel-inanim-toast-in/outanim-check-popanim-badge-popanim-wash

Body copy drifts 2px. Any more and paragraphs start performing.

anim-fade-text

2px rise · 280ms · ease-out-soft — calm, for copy

relay-04

Panel sectionOK

anim-panel-in

6px + scale .985 · 500ms · spring ζ.48

Deploy queued

anim-toast-in / -out

14px so the ζ.34 overshoot READS · exit 100ms flat

anim-check-pop

scale .3→1 · 380ms · spring ζ.62

Inbox3

anim-badge-pop

scale 0→1 · 500ms · spring ζ.48 · fill backwards

1,204

anim-wash

value-changed cell · 200ms wash · figure SNAPS

FILL-MODE RULE: anything that also hovers gets backwards, never both — bothpins the final keyframe's transform forever, and the pinned transform silently swallows your hover lift. Exits use forwards only because the node unmounts right after.

/* one source per animation — the keyframe lives ONCE in motion.css */
.anim-badge-pop { animation: badge-pop var(--motion-spring) var(--ease-spring) backwards; }
/*                                                            ^^^^^^^^^ not `both` */