How do I install the Vibe UI Text Glitch component?

You can install Text Glitch into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add text-glitch" in your terminal.

Does Vibe UI Text Glitch support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Text Glitch component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Text Glitch

A high-fidelity, CSS-animation-powered cyberpunk text glitch component featuring red/cyan chromatic aberrations and custom speed toggles.

Text Glitch

A high-fidelity, CSS-animation-powered cyberpunk text glitch component featuring red/cyan chromatic aberrations and custom speed toggles.

Preview

SYSTEM GLITCH

Installation

pnpm dlx vibe-ui-kit@latest add text-glitch

Variations

Animation Speeds

Choose between slow frequency, normal mode, or fast clock speeds for the glitching interval.

SlowSLOW FREQUENCY

NormalNORMAL MODE

FastOVERCLOCK FAST

Trigger Control

Animate the glitch continuously or trigger it dynamically via state actions.

DATABASE CORRUPTED

Props

Prop	Type	Default	Description
text	string	undefined	The text content to display and animate.
speed	'slow' \| 'normal' \| 'fast'	'normal'	The animation cycle speed.
active	boolean	true	When true, triggers the continuous glitch animation loops.

PreviousTextarea

Next Theme Switcher

Related Vibe UI Components

Explore all components →

Contributors

Jenish Sabhadiya

Text Glitch

Text Glitch

Preview

Installation

Variations

Animation Speeds

Trigger Control

Props

Related Vibe UI Components

Contributors

Theme Customizer