Glitch Error
No library Advanced
On failed validation the input briefly RGB-glitches — a CSS hue-rotate plus translateX jitter keyframe over 500ms — then snaps to a red border. Unsettling, memorable error feedback.
On failed validation the input briefly RGB-glitches — a CSS hue-rotate plus translateX jitter keyframe over 500ms — then snaps to a red border. Unsettling, memorable error feedback.
Goal: Create a "Glitch Error" input with RGB glitch on failed validation.
Visual behavior: A text input that appears normal. When submitted empty (or invalid), a 500ms CSS @keyframes animation fires: the input jitters left-right (translateX: -4px, 4px, -3px, 3px...) while hue-rotate and saturate CSS filters cycle rapidly, creating an RGB glitch disintegration effect. After the animation, the input settles with a red border and subtle red background. Clearing the field resets the error state.
Technique:
- CSS @keyframes combining transform: translateX() and filter: hue-rotate() saturate() at multiple stops
- A React key counter on the input element; increments on each failed submit to remount and restart the animation
- On error: border-color transitions to #ef4444
- Animation duration: ~500ms, fill: forwards
Accessibility: Animation is skipped under prefers-reduced-motion (border goes red immediately). aria-invalid attribute is set on error state.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.