Glitch
No library Advanced
On toggle, red and blue ghost overlays jitter in opposite X directions and a horizontal scan line sweeps through, creating a digital corruption/glitch effect before resolving to the new state.
On toggle, red and blue ghost overlays jitter in opposite X directions and a horizontal scan line sweeps through, creating a digital corruption/glitch effect before resolving to the new state.
Goal: Create a "Glitch" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: dark background (#111827), indigo border (#818cf8). When toggled, a brief 300ms glitch effect plays: a red-tinted overlay jitters right then left (translateX animation), a blue-tinted overlay jitters left then right, and a bright horizontal scan line sweeps vertically through the box. All three glitch elements fade to zero after 300ms. Then the checked state resolves with the indigo check mark.
Technique: showGlitch state renders 3 absolute-positioned overlay spans. They are conditionally rendered and removed after 320ms via setTimeout. Each uses its own @keyframe.
Accessibility: Hidden native <input type="checkbox">. Animations removed under prefers-reduced-motion.
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.