Error Retry Nudge
A failed action answers with one short damped nudge and becomes its own retry.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { animate, motion, useMotionValue, useReducedMotion } from "motion/react";
/**
* Vibary · Error Retry Nudge
*
* A failed action answers with one short, damped nudge — out fast, back
* slow — then turns itself into the retry affordance with the reasonAbout this pattern
What a button should do when the request comes back wrong. It moves 4–6px sideways exactly once — out fast, back slow — recolors to the error state, and turns into the retry affordance with the reason opening underneath. The repeated left-right shake this replaces is a cartoon convention: it reads as the interface being upset, it costs the reader half a second before they can act, and it says nothing the color and the reason line do not. Reduced motion drops the nudge and keeps everything that carries meaning.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
A failed action recolors in place and states the reason beneath, without theatrics.
Related patterns
- Inline Error RevealA field marks itself invalid: the error ring fades on and the message expands into place below.
- Banner DismissAn announcement strip fades its message, then collapses its own height so the page closes the gap.
- Delete Confirm MorphA delete control widens in place into a question with a way out, instead of opening a dialog.