Glitch Text: Free React + Tailwind Component

Glitch text effect with RGB channel separation and jitter, supporting continuous playback and hover triggering.

Simulates the classic cyberpunk glitch text with RGB channel separation, scanline slices, and jitter — pure CSS animation, with no fonts or external resources required.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add glitch-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Triggertrigger

Glitch cycle (s)speed

2.2

Separation (px)intensity

Red-channel ghostingcolorBefore

Cyan-channel ghostingcolorAfter

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<GlitchText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/glitch-text.en.json

Or, once registries are configured in components.json, install it as @webberui/glitch-text.

Usage

import { GlitchText } from "@/components/ui/glitch-text";

<GlitchText text="SYSTEM FAILURE" className="text-5xl font-bold" />

Glitch on hover only:

<GlitchText text="hover to glitch" trigger="hover" intensity={2} />

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to display
`trigger`	`"always" \| "hover"`	`"always"`	Glitch continuously, or only on hover
`speed`	`number`	`2.2`	Main glitch cycle (seconds); smaller is more frantic
`intensity`	`number`	`3`	Horizontal separation of the RGB channels (px)
`colorBefore`	`string`	`"#ff2d75"`	Ghost color of the red channel
`colorAfter`	`string`	`"#00e5ff"`	Ghost color of the cyan channel
`as`	`"span" \| "p" \| "h1"`–`"h6"`	`"span"`	The HTML tag to render
`className`	`string`	—	forwarded to the outermost container

Accessibility

When the user has "reduce motion" enabled at the system level, static text is rendered with no jitter or ghosting applied
The RGB ghost layers are produced by ::before / ::after and marked pointer-events: none, so they do not affect selection or announcement
Each instance generates its own keyframes and class names via useId(), so multiple instances coexist without interfering with each other

Glitch Text