ディテールと演出 · 仕上げの小技
グリッチ故障抖动
- 信号不良
- ずれる
- 分裂する
要素が信号の悪い画面のように痙攣します。数ピクセル跳び、色が赤とシアンに分かれてずれ、ときどき横帯が切れてずれます。三つが同時に起きて初めて故障に見えます。位置だけならシェイク、色だけならゴースト、帯だけなら裂けです。
使いどころ
テック、サイバー、グリッチアートの場面（見出し、ローディング、エラーページ）に使います。本文やフォームには絶対に使わないでください。「壊れている」と言っているのと同じで、ユーザーは本当に壊れていると思い、押せなくなります。
パラメータ
transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
レシピ
グリッチ → transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
AI に渡す一文
グリッチを作ってください。三層に重ねます。下地は元の色、上の二層は text-shadow で赤とシアンを ±2px ずらします。全体を毎フレーム translate3d で ±3px ランダムに跳ばし、clip-path で 3 本の横帯に切ってそれぞれランダムにずらします。全体 460ms、steps(9, end) で（補間しないでください。故障は跳びます）。