Text Glitch

A chromatic clip-path glitch for headlines, CSS-only and entirely GPU-friendly.

textglitchheadlineanimationtypographychromatic

Overview

Text Glitch is a React and Tailwind CSS glitch text effect with an RGB split and sliced horizontal bands, in Next.js or any React app, done entirely in CSS with no dependencies. Two pseudo layers carry the cyan and rose channels and jump on desynced clip path loops, so the headline stays one element for search engines and screen readers. Run it always or only on hover, and it pauses off screen, in background tabs, and for reduced motion. The slices are masked with an opaque surface color, so match surfaceColor to your background.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-glitch

Usage

Import TextGlitch from @/components/wensity/text-glitch and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextGlitch } from "@/components/wensity/text-glitch";
 2
 3export default function Example() {
 4  return (
 5    <TextGlitch
 6      as="h1"
 7      text="wensity"
 8      duration={2.4}
 9      offset={5}
10      enableShadows
11      className="font-display text-6xl font-black tracking-tight"
12    />
13  );
14}

Props

Prop	Type	Default	Description
`text`	string	-	The string to render.
`as`	keyof React.JSX.IntrinsicElements	"span"	Tag rendered as the outer element.
`duration`	number	2.4	Base glitch cycle in seconds. Channel layers desync automatically.
`offset`	number	5	Horizontal slice offset in CSS pixels.
`enableShadows`	boolean	true	Chromatic aberration text-shadows on the slice layers.
`leftColor`	string	theme	Left-channel shadow color. Omit for theme cyan.
`rightColor`	string	theme	Right-channel shadow color. Omit for theme rose.
`surfaceColor`	string	theme	Opaque mask behind each slice. Omit for theme surface (#fafafa / #0a0a0b).
`trigger`	"always" \| "hover"	"always"	When to run the loop.
`paused`	boolean	-	Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden.

Featured in React hero section components.