Back to the library
Field shake, damped
Variant: Damped shake
A field refusing input with six decaying swings — 7px out to 1px, 70ms each. It runs 378ms, past the usual UI ceiling, because a shake is an oscillation and not an entrance: under three reversals it reads as a bump rather than a no. The first kick is ease-out so it leaves rest instantly; the interior swings are ease-in-out, since a pendulum decelerates into every reversal.
errorcontrol
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 — colour flash</title>
<style>
:root {
--ivory: #faf9f5;
--slate: #141413;
--oat: #e3dacc;
--rust: #b04a3f;
--paper: #ffffff;
}
* {
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);
}
.stack {
display: grid;
gap: 9px;
justify-items: start;
width: 184px;
}
.field {
position: relative;
width: 184px;
height: 46px;
}
/* Nothing in this variant moves — no shake, no rise on the message. It is
the version for validation that fires on every keystroke: seen dozens
of times a session, so the motion budget goes to zero and colour does
all of the work. */
.surface {
position: absolute;
inset: 0;
border-radius: 10px;
background: var(--paper);
border: 1.5px solid var(--oat);
}
.wash {
position: absolute;
inset: 0;
border-radius: 10px;
background: var(--rust);
opacity: 0;
animation: wash 2.6s infinite;
}
.edge {
position: absolute;
inset: 0;
border-radius: 10px;
border: 1.5px solid var(--rust);
opacity: 0;
animation: edge 2.6s infinite;
}
/* A real input, not a row of dots: the whole point of the variant is that
it is the one you paste into a validation handler, and at card size a
bordered box with type in it is what reads as a form. */
.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;
animation: value-dim 2.6s infinite;
}
.msg {
font-size: 12.5px;
letter-spacing: 0.01em;
color: var(--rust);
opacity: 0;
animation: msg 2.6s infinite;
}
/* A flash has an envelope, not a fade: it spikes to 15% in 60ms, decays
to a 6% sustain over the next 140ms, then releases across 260ms. The
spike is what the eye registers as a flash; the sustain is what keeps
the field legible as "still wrong" while it is being read. */
@keyframes wash {
0%,
20% {
opacity: 0;
}
22.3% {
opacity: 0.15;
}
27.7%,
70% {
opacity: 0.06;
}
80%,
100% {
opacity: 0;
}
}
@keyframes edge {
0%,
20% {
opacity: 0;
}
22.3%,
70% {
opacity: 1;
}
80%,
100% {
opacity: 0;
}
}
@keyframes value-dim {
0%,
20% {
opacity: 1;
}
23%,
70% {
opacity: 0.45;
}
80%,
100% {
opacity: 1;
}
}
@keyframes msg {
0%,
20% {
opacity: 0;
}
24%,
70% {
opacity: 1;
}
78%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* Already travel-free, so nothing is removed — only the spike, which is
the one abrupt thing here. Even attack, gentler peak. */
.wash {
animation: wash-calm 2.6s ease infinite;
}
@keyframes wash-calm {
0%,
20% {
opacity: 0;
}
28%,
70% {
opacity: 0.07;
}
82%,
100% {
opacity: 0;
}
}
}
</style>
</head>
<body>
<div class="stack" role="img" aria-label="Field flashing a validation error">
<div class="field">
<div class="surface"></div>
<div class="wash"></div>
<div class="edge"></div>
<input class="value" type="text" value="482913" readonly tabindex="-1" aria-hidden="true" />
</div>
<p class="msg">Code expired</p>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.