← All patterns

Feedback motion patterns

Confirmations, errors and status changes. These fire constantly, so restraint matters more here than anywhere else.

React + Motion · new patterns added daily

interactive

Banner Dismiss

React

An announcement strip fades its message, then collapses its own height so the page closes the gap.

feedbackminimalcalm
interactive

Batch Action Count

React

Ticking rows rolls a count in a floating bar that rises on the first selection.

feedbackminimalenergetic

Changes Saved Pill

React

A pill drifts up from the toolbar to confirm an autosave, then dissolves.

feedbacksubtleelegant

Clipboard Toasts Stack

React

Repeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.

feedbackminimalsubtle

Connection Restored

React

The offline bar turns green, confirms, and retracts in one continuous move.

feedbackfriendlycalm
interactive

Copy Confirmation

React

A copy button trades its icon for a drawn tick and its label for "Copied", then quietly changes back.

feedbacksubtlefriendly

Credit Deduct Tick

React

A usage balance ticks down to its new figure while the amount taken rises beside it and leaves.

feedbackminimalpremium
interactive

Delete Confirm Morph

React

A delete control widens in place into a question with a way out, instead of opening a dialog.

feedbackcalmpremium
interactive

Destructive Hold to Confirm

React

Holding fills the control at an honest rate; letting go early drains it back several times faster.

feedbackpremiumcalm
interactive

Error Retry Nudge

React

A failed action answers with one short damped nudge and becomes its own retry.

feedbackcalmminimal

Field Valid Check

React

A small mark strokes itself in at the right edge of a field the moment its value becomes acceptable.

feedbacksubtlefriendly
interactive

Form Submit Progress

React

Submit narrows to a turning disc while the request runs, then opens out as the confirmed state.

feedbackpremiumcalm
interactive

Hover Tooltip Fade

React

A hint fades up after a deliberate pause, so crossing a row of icons never sets off a flicker.

feedbacksubtleminimal
interactive

Inline Error Reveal

React

A field marks itself invalid: the error ring fades on and the message expands into place below.

feedbackcalmminimal

Keyboard Shortcut Flash

React

A key cap depresses briefly to teach the shortcut that just fired.

feedbacksubtlefuturistic

Offline Banner Drop

React

A connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.

feedbackcalmminimal

Password Strength Bar

React

A segmented meter fills bar by bar and shifts hue as a password improves.

feedbackminimalcalm

Permission Request Rise

React

A permission card rises with its icon settling a beat before the explanation.

feedbackpremiumfriendly

Processing Steps Check

React

Three stages clear across a horizontal rail, each hand-off filling the segment to the next marker.

feedbackpremiumcalm

Queue Position Advance

React

Your place in line steps down, the figure swapping upward as the bar of people ahead shortens.

feedbackcalmfriendly

Quota Limit Nudge

React

A usage meter nearing its cap gives one restrained nudge, then reveals the upgrade.

feedbackcalmpremium
interactive

Rating Stars Fill

React

Stars light left to right under the pointer, each settling a fraction after the one before it.

feedbackfriendlyenergetic

Read Receipt Tick

React

One tick becomes two, then the pair tints — sent, delivered, read.

feedbacksubtleminimal

Save Indicator Settle

React

A turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.

feedbacksubtleminimal

Session Expiry Countdown

React

A session-timeout dialog counts down on a draining ring with a clear stay-signed-in action.

feedbackcalmminimal

Success Check Reveal

React

A success badge springs into place while the checkmark draws itself along its path.

feedbackminimalpremium

Sync Status Rotate

React

A sync glyph turns slowly while changes upload, then stops on a tick.

feedbacksubtlecalm

Toast Slide In

React

A toast slides in from the edge, rests while a thin line counts down, then leaves the way it came.

feedbackminimalfriendly

Undo Snackbar

React

A removed row leaves a bar behind, and a hairline drains across it toward the point of no return.

feedbackcalmfriendly

Upload Complete Fold

React

A finished upload's progress track folds away as the tile turns over to its thumbnail.

feedbackfriendlypremium

Validation Summary List

React

A rejected submit answers with the whole list of what stopped it, each entry arriving a beat apart.

feedbackcalmminimal

Warning Attention Pull

React

A warning tile earns a glance by drawing its own outline once, with a faint tint settling underneath.

feedbackcalmminimal