23 React UI Transitions & Micro-interactions | Charcoal UI

23 React transitions for the moments between states: badges that pop, labels that swap, pages that push and AI agents that think out loud.

Essential

Card Resize (Pro): A box that springs to the size of its content, so swapping what's inside never snaps.
Notification Badge (Pro): A count badge that pops in with a spring; new numbers slide in on a diagonal, and it scales away at zero.
Icon Swap: Swaps icons with a scale-and-blur cross-fade: copy to check, play to pause, sun to moon.
Page Transition (Pro): Native-feeling push and pop between views: the new page slides over while the old one drifts and dims.
Error Shake (Pro): A decaying head-shake for wrong input, as a wrapper or a useShake() hook.
Arrow Link (Pro): A “Learn more” link whose chevron slides right and grows a stem on hover, turning into an arrow. CSS only.
Banner Stack (Pro): Banners stack like a deck, three deep; hover fans them into a list and dismissing slides the next forward.
Morph Menu (Pro): A button that stretches into its own menu surface, then shrinks back. Arrow keys and Escape work.

Text Swap: Swaps one label for another with a short rise and blur while the width eases to fit: Pay → Processing… → Paid.
Number Pop (Pro): Only the digits that changed pop in from a blur, one after another, so 65.78 → 65.92 animates two characters.
Clear Input (Pro): A search field whose clear button dissolves the text word by word instead of blanking it.
Orbit Text (Pro): Text lit by washes of colour that circle through the letters out of phase. CSS only.

Spinner Check (Pro): A spinner that closes into a ring and draws a check, or a cross on error. One glyph for any async action.
Thinking States (Pro): An agent's status line: the current step shimmers, then rises away as the next one arrives.
Streaming Text (Pro): Model output that resolves word by word through a soft blur; works with a growing string from a stream.
Dot Matrix (Pro): A 4×4 dot loader with four timing patterns: wave, spiral, pulse and rain. CSS only.
Reasoning Stream (Pro): Agent reasoning trickling through a two-line window, collapsing to a summary that expands into the transcript.
Organic Shimmer (Pro): A shimmer whose band ripples like heat haze with a glowing edge, moved by transform so it composites.
Image Generation (Pro): A dot field stirs while the model works, then each dot takes the colour beneath it until the picture resolves.

Pro Button (Pro): The upgrade button: a colour band orbits the border, a glint sweeps the face and the sparkle twinkles.
Smoke Dissolve (Pro): Delete with ceremony: an image shreds into grains that drift away on a breeze, greying into smoke.
Tilt Open Image (Pro): A thumbnail that opens full screen as if lifted off the page, tilting in 3D on the way and settling flat.
Drop Morph (Pro): A drop zone that becomes the image you dropped, landing with a tip and a settle.