Glitch Text

Overview

GlitchText creates a cyberpunk-inspired glitch distortion using pure CSS clip-path animations with ::before and ::after pseudo-elements. Lightweight — no JavaScript animation library required.

Features

• Pure CSS animation — no runtime JS overhead
• Configurable speed — control glitch intensity
• Color shadows — optional red/cyan text shadows
• Hover trigger — enable glitch only on hover
• Fully responsive — uses clamp() for font sizing

Usage

import GlitchText from '@/components/glitch-text'

<GlitchText speed={0.5} enableShadows>
  GLITCH
</GlitchText>