Animation · Feedback · 07

Shake Error

Shake Error = a field or box that jolts side to side when input is rejected, so the mistake is felt as well as read.

Invalid input

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Add a shake to an invalid field: translateX +/-5px three times over 0.4s ease-out, transform only, plays once per submit error.

Soften the shake to a single 3px nudge and add a red border so it reads as a gentle correction.

Trigger the shake only after a real validation failure (not on every keystroke), expose --shake-distance and --shake-speed, and under prefers-reduced-motion replace the transform with a border-colour flash. Keep the error text as the source of truth.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Shake Error?

A shake is the universal 'no'. When a form rejects input, the field jolts left and right a few times so the error is felt, not just labelled. Keep it under 0.4s and a few pixels — a big shake reads as anger. Always pair it with a visible error message; motion alone is not accessible.

Animation Specimen

Trigger: click
Tech: css
Duration: 1.6s
Easing: ease-in-out
Performance: transform

When to use

Invalid password, wrong code, failed submit
Any field that must reject input visibly

Avoid when

On every keystroke — it punishes typing
Without a text error — motion alone fails accessibility

Shake once per error event, not per keystroke, or it feels like the field is fighting the user.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.shake-box {
  animation-name: shake;
  animation-duration: var(--anim-duration, 1.6s);
  animation-timing-function: var(--anim-easing, ease-in-out);
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid #ef4444;
  background: color-mix(in srgb, #ef4444 8%, #fff);
  color: #dc2626;
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

<div class="shake-box anim-el">Invalid input</div>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Shake Error

What is a Shake Error?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns