★ GitHub
✨ Signature

GlitchText

A signature animated text component with a CRT-style RGB glitch effect. Uses CSS pseudo-elements and clip-path animations for the glitch layers.

Default

STARKIT

Sizes

Small GlitchMedium GlitchLarge Glitch

Intensity

SUBTLE
Barely There
NORMAL
Standard Effect
INTENSE
Maximum Chaos

Paused

Frozen in Time

Usage

tsx
import { GlitchText } from 'starkit-ui'; // Hero heading <GlitchText text="BUILD BOLD UIs" size="lg" /> // Subtle accent <GlitchText text="v0.1.0" size="sm" intensity="subtle" /> // Maximum chaos <GlitchText text="ERROR" intensity="intense" />

Accessibility

  • Uses aria-label for screen readers
  • Respects prefers-reduced-motion — animation disabled automatically
  • paused prop for manual control

Props

PropTypeDefaultDescription
text *string—The text to display and glitch
size'sm' | 'md' | 'lg''md'Font size preset
intensity'subtle' | 'normal' | 'intense''normal'Glitch animation intensity
pausedbooleanfalsePause the glitch animation