Field flash, no travel

Variant: Colour flash

The same rejection with nothing moving. A rust wash spikes to 15% in 60ms, decays to a 6% sustain, then releases over 260ms — an envelope, not a fade, because the spike is what the eye clocks as a flash and the sustain is what keeps it legible while being read. Reach for it when validation fires on every keystroke: seen dozens of times a session, the motion budget goes to zero.

errorstatuscontrol

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Rejection — damped shake</title>
    <style>
      :root {
        --ivory: #faf9f5;
        --slate: #141413;
        --oat: #e3dacc;
        --rust: #b04a3f;
        --paper: #ffffff;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .field {
        position: relative;
        width: 184px;
        height: 46px;
        animation: shake 2.8s infinite;
      }

      .surface {
        position: absolute;
        inset: 0;
        border-radius: 10px;
        background: var(--paper);
        border: 1.5px solid var(--oat);
      }

      /* The rust state is a second border stacked on the first and cross-faded
         by opacity — border-color would animate, but it repaints outside the
         compositor and there is no reason to pay for that. */
      .surface.err {
        border-color: var(--rust);
        background: none;
        opacity: 0;
        animation: err-edge 2.8s infinite;
      }

      /* A real input rather than a row of dots — these keyframes are meant to be
         pasted onto an actual field, and a bordered box with type in it is the
         only version that still reads as a form at card size. */
      .value {
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0 15px;
        border: 0;
        border-radius: 10px;
        background: none;
        font: inherit;
        font-size: 14px;
        letter-spacing: 0.24em;
        color: var(--slate);
        outline: none;
      }

      /* 378ms, over the 300ms UI budget, and deliberately so: a shake is an
         oscillation, not an entrance. It needs three full reversals to read as
         "no" rather than as a bump — each individual swing is only 70ms, which
         is what the eye actually clocks as the speed of the thing.
         First kick is ease-out (the response must leave rest instantly); the
         interior swings are ease-in-out because a pendulum decelerates into
         every reversal; amplitude decays 7 -> 1px so it settles instead of
         stopping dead. */
      @keyframes shake {
        0%,
        20% {
          transform: translateX(0);
          animation-timing-function: var(--ease-out);
        }
        22.5% {
          transform: translateX(-7px);
          animation-timing-function: ease-in-out;
        }
        25% {
          transform: translateX(6px);
          animation-timing-function: ease-in-out;
        }
        27.5% {
          transform: translateX(-4px);
          animation-timing-function: ease-in-out;
        }
        29.5% {
          transform: translateX(2.5px);
          animation-timing-function: ease-in-out;
        }
        31.5% {
          transform: translateX(-1px);
          animation-timing-function: var(--ease-out);
        }
        33.5%,
        100% {
          transform: translateX(0);
        }
      }

      /* Asymmetric on purpose: the edge goes rust in 56ms alongside the first
         swing, then takes 280ms to let go. Alarm arrives at the speed of the
         system; it retreats at the speed of someone reading it. */
      @keyframes err-edge {
        0%,
        19% {
          opacity: 0;
        }
        21%,
        68% {
          opacity: 1;
        }
        78%,
        100% {
          opacity: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .field {
          animation: none;
        }

        /* Travel is gone; the colour swap is the message, so it stays — just
           slower on both ends so nothing snaps. */
        .surface.err {
          animation: err-edge-calm 2.8s ease infinite;
        }

        @keyframes err-edge-calm {
          0%,
          17% {
            opacity: 0;
          }
          25%,
          68% {
            opacity: 1;
          }
          82%,
          100% {
            opacity: 0;
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="field" role="img" aria-label="Field rejecting input">
      <div class="surface"></div>
      <div class="surface err"></div>
      <input class="value" type="text" value="482913" readonly tabindex="-1" aria-hidden="true" />
    </div>
  </body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Field shake, damped

Damped shake

Switch that snaps back

Snap-back