入力エラーをプルプルと震えて知らせるフィードバック。:user-invalidと組み合わせるとJavaScriptなしで動きます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
左右に振れ幅を減らしながら揺れる（-6→6→-4→4px）ことで、機械的な往復ではなく減衰する自然な振動になります。トリガーには:user-invalid（ユーザーが操作した後にだけ発火する検証擬似クラス）を使っているため、ページを開いた瞬間に震えることはありません。
揺れはエラーの「通知」であって「説明」ではありません。何が悪いかのテキストメッセージは必ず併用してください。
フォームの入力エラー時に、入力欄が左右に小刻みに揺れるシェイクアニメーションを付けて。translateXのkeyframesで、:invalidかエラークラスに反応するように。
エラーシェイクをprefers-reduced-motion時は揺れずに枠線の色変化だけにして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。