On hover, two ghost copies of the card clip to random horizontal bands and translate sideways with hue-rotated filters — simulating a corrupted RGB signal. Pure CSS keyframes with step() timing for a digital glitch aesthetic.
Goal: Create a "Glitch" card animation.
Visual behavior: On hover the card shows a cyberpunk RGB-split glitch effect. Two ghost copies of the card are layered on top; each copy clips to a different horizontal band and translates sideways with a hue-rotate filter applied. The clips jump to random bands every frame using step() timing, creating a corrupted-signal look. On mouse leave, the ghost layers fade out and the card returns to normal.
Technique:
- Render the card content three times: once normally, plus two absolute ghost layers
- Ghost layers start with opacity 0 and clip-path: inset(0 0 100% 0)
- On hover: set ghost opacity to 0.8–0.85; trigger CSS keyframe animations on each layer
- Keyframes use inset() clip-path to jump between random horizontal slices + translateX for the shift
- Use steps(1) timing to make transitions instant (simulating digital corruption)
- Apply filter: hue-rotate(180deg) saturate(2) to ghost-a and hue-rotate(-90deg) saturate(3) to ghost-b
- Stagger ghost-b animation by ~50ms offset for more chaos
- Inject the keyframes via a <style> tag in useEffect (or use CSS Modules)
- pointerEvents: none on ghost layers so they don't interfere with hover
Accessibility: Skip ghost layer animations under prefers-reduced-motion; ghosts remain hidden (opacity 0).
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.