Glitch
RGB-split glitch animations using steps(4, end) easing for authentic digital corruption aesthetics.
Static glitch
Applies a continuous glitch animation:
GLITCH ANIMATION
SYSTEM_ERROR
<h2 class="nf-glitch">SYSTEM_ERROR</h2>Hover glitch
Glitch only triggers on hover — use for interactive elements:
HOVER GLITCH
<button class="nf-button nf-button-ghost nf-glitch-hover">HOVER ME</button>Color variants
GLITCH COLOR VARIANTS
PRIMARYSECONDARYTERTIARY
<span class="nf-glitch nf-glitch-primary">PRIMARY</span>
<span class="nf-glitch nf-glitch-secondary">SECONDARY</span>
<span class="nf-glitch nf-glitch-tertiary">TERTIARY</span>Accessibility
Glitch animations are automatically paused for users with prefers-reduced-motion: reduce. The element still renders — only the animation is disabled.
Class reference
| Class | Description |
|---|---|
nf-glitch |
Continuous RGB-split glitch animation |
nf-glitch-hover |
Glitch animation on hover only |
nf-glitch-primary |
Glitch color: Terminal Green channels |
nf-glitch-secondary |
Glitch color: Cyber Magenta channels |
nf-glitch-tertiary |
Glitch color: Electric Cyan channels |